的理想是能夠?qū)懗鲆粋€可以永不封號的游戲外G！
雖然這個理想在很多科班出身的程序員眼中會變得不值一提甚至?xí)坏种苹蛘弑梢暎\然如果是用來牟利當(dāng)然不能夠被提倡，因為是違法的，但是如果僅僅是作為網(wǎng)絡(luò)游戲安全來學(xué)習(xí)的話我個人認為是值得深入學(xué)習(xí)的，當(dāng)然這里不討論這個東西的好與壞，它就像一把雙刃劍，主要還是看你用來做什么
我中間學(xué)習(xí)過各種語言按鍵精靈(甚至不能稱為語言)、易語言、VB等等，中間甚至有一段時間在學(xué)習(xí)C++因為聽一些前輩說，要想寫一個好的外G需要驅(qū)動而C++是編寫驅(qū)動程序的首選，但是學(xué)習(xí)C++的成本太高了，這其中有很多原因，例如因為C++的版本問題，它需要兼容C這時候會出來很多奇奇怪怪的寫法，甚至有的人在cpp文件中編寫純C的代碼，這其實我轉(zhuǎn)戰(zhàn)Delphi的一部分原因，因為實在是學(xué)不會
Delphi很多API函數(shù)都是對WindowsAPI的二次封裝，這樣做的好處就是我們在調(diào)用的時候變得更容易，此外就是界面的編寫，MFC太古老了，而且寫起來超級費勁，高手或者大佬會對界面嗤之以鼻，也會有人提出什么像QT之類的界面庫，但是這些東西個人感覺遠遠沒有VCL來的輕松愉悅，雖然在高手眼里界面不值得一提，但是我們這些小白或者菜鳥很多時候都是從界面編寫開始產(chǎn)生興趣，從而堅持下去的！
現(xiàn)如今大部分的網(wǎng)絡(luò)游戲都是運行在windows操作系統(tǒng)下的，有的朋友可能會說手游，這個不在今天的討論范圍之內(nèi)，那么既然在做windows下的游戲，我們就要搞明白游戲是怎么跑起來的，其實所謂的游戲就是通過調(diào)用大量的windows系統(tǒng)函數(shù)，而這些windows的系統(tǒng)函數(shù)我們稱它為windowsAPI，我們需要做的就是熟悉這些API函數(shù)，此外在windows中充斥的大量的消息，比如說鍵盤消息、鼠標(biāo)消息等等，所以我們還需要搞明白windows的消息機制是什么套路
很多時候我們需要兩個進程之間進行數(shù)據(jù)通訊，例如我們把一個DLL文件附加(或者稱為注入)一個進程中，而我們需要一個獨立的程序來查看或者觀測DLL宿主進程中的運行情況！有朋友可能會提出通過Socket實現(xiàn)，誠然這種方式肯定可以，但是在同一臺電腦上創(chuàng)建服務(wù)器端和服務(wù)器端稍微顯得的有點殺雞用牛刀的感覺，那么有沒有其他方式能夠解決這個需求，這就是我們今天要說的內(nèi)存映像，前段時間看了一本書名字是【Delphi下深入Windows編程】雖然這本書很老了，但是里面的思想或者說思路還是值得我們借鑒的，特整理如下
在win32中，通過使用映像文件在進程間實現(xiàn)共享文件或共享內(nèi)存數(shù)據(jù)塊,如果利用相同的映像名字或文件句柄，則不同的進程可以通過一個指針來讀寫一個文件或同一個內(nèi)存數(shù)據(jù)塊，并把它當(dāng)做該進程內(nèi)地址空間的一部分
在Windows9x/NT/200 向內(nèi)存中裝載文件時，使用了特殊的全局內(nèi)存區(qū)。在該區(qū)域內(nèi)，應(yīng)用程序的虛擬內(nèi)存地址和文件中的響應(yīng)位置對應(yīng)，由于所有進程共享了一個用于存儲映像文件的全局內(nèi)存區(qū)域，因而當(dāng)兩個進程裝載相同模塊(應(yīng)用程序exe或dll文件)時，他們實際上是在內(nèi)存中共享其執(zhí)行代碼
內(nèi)存映像文件可以映射一個文件、一個文件中的指定區(qū)域或者指定的內(nèi)存塊，其中的數(shù)據(jù)就可以用內(nèi)存讀寫指令直接訪問，而不比頻繁的調(diào)用ReadFile或WriteFIle這樣的I/O系統(tǒng)函數(shù)，從而提高了文件存取速度和效率
示例代碼
發(fā)送數(shù)據(jù)端
unit Unit1;
interface
uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes,
Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls;
const
WM_DATA=WM_USER + 1024;
type
PShareMem=^TPShareMem;
TPShareMem=record
//共享數(shù)據(jù)
Data: array[0..255] of Char;
end;
TForm1=class(TForm)
btn1: TButton;
procedure btn1Click(Sender: TObject);
procedure FormDestroy(Sender: TObject);
procedure FormCreate(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
PShare: PShareMem;
implementation
{$R *.dfm}
var
HMapping: THandle;
HMapMutex: THandle;
const
MAP_FILE_SIZE=1000;
REQUEST_TIME_OUT=1000;
{打開建立共享內(nèi)存}
procedure OpenMap;
begin
{創(chuàng)建一個映像文件}
HMapping :=CreateFileMapping($FFFFFFFF, nil, PAGE_READWRITE, 0, SizeOf(TPShareMem), PChar('MapName'));
if HMapping=0 then
begin
ShowMessage('不能創(chuàng)建內(nèi)存映像文件');
Exit
end;
{將映像文件映射到進程的地址空間}
PShare :=PShareMem(MapViewOfFile(HMapping, FILE_MAP_ALL_ACCESS, 0, 0, 0));
if PShare=nil then
begin
CloseHandle(HMapping);
ShowMessage('映像文件在內(nèi)存中不存在');
Application.Terminate;
Exit
end;
end;
{關(guān)閉共享內(nèi)存}
procedure CloseMap;
begin
if PShare <> nil then
begin
{從進程的地址空間中撤銷映像文件}
UnmapViewOfFile(PShare);
end;
if HMapping <> 0 then
begin
{關(guān)閉映像文件}
CloseHandle(HMapping);
end;
end;
{建立互斥對象}
function LockMap: Boolean;
begin
Result :=True;
HMapMutex :=CreateMutex(nil, False, PChar('My MUTEX NAME COES HERE'));
if HMapMutex=0 then
begin
ShowMessage('不能創(chuàng)建互斥對象');
Result :=False;
end
else
begin
if WaitForSingleObject(HMapMutex, REQUEST_TIME_OUT)=WAIT_FAILED then
begin
ShowMessage('不能對互斥對象枷鎖');
Result :=False;
end;
end;
end;
procedure UnlockMAP();
begin
{釋放、關(guān)閉互斥對象}
ReleaseMutex(HMapMutex);
CloseHandle(HMapMutex);
end;
procedure TForm1.btn1Click(Sender: TObject);
var
str: PChar;
begin
str :=PChar('簡單的共享內(nèi)存示例');
//把數(shù)據(jù)拷貝到共享內(nèi)存
CopyMemory(@(pshare^.Data), str, Length(str)*SizeOf(Char));
//發(fā)送消息表明有數(shù)據(jù)
PostMessage(FindWindowW(nil, 'Form2'), WM_DATA, 1, 2);
end;
procedure TForm1.FormCreate(Sender: TObject);
begin
OpenMap();
LockMap();
end;
procedure TForm1.FormDestroy(Sender: TObject);
begin
UnlockMAP();
CloseMap();
end;
end.
接收數(shù)據(jù)端
unit Unit2;
interface
uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes,
Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls;
const
//自定義消息
WM_DATA=WM_USER + 1024;
type
PShareMem=^TPShareMem;
TPShareMem=record
//共享數(shù)據(jù) 注意要與發(fā)送數(shù)據(jù)段的定義相同
Data: array[0..255] of Char;
end;
type
TForm2=class(TForm)
mmo1: TMemo;
btn1: TButton;
procedure FormCreate(Sender: TObject);
procedure btn1Click(Sender: TObject);
private
{ Private declarations }
public
{ Public declarations }
procedure getShareInfo(var Msg: TMessage); message WM_DATA;
end;
var
Form2: TForm2;
PShare: PShareMem;
MapHandle: THandle;
implementation
{$R *.dfm}
{ TForm2 }
{處理wm_data 自定義消息}
procedure TForm2.btn1Click(Sender: TObject);
begin
CloseHandle(MapHandle);
end;
procedure TForm2.FormCreate(Sender: TObject);
begin
MapHandle :=OpenFileMapping(FILE_MAP_WRITE, False, PChar('MapName'));
if MapHandle=0 then
begin
ShowMessage('不能定位內(nèi)存映像文件塊');
end;
{將映像文件映射到進程的地址空間}
PShare :=PShareMem(MapViewOfFile(MapHandle, FILE_MAP_ALL_ACCESS, 0, 0, 0));
if PShare=nil then
begin
CloseHandle(MapHandle);
ShowMessage('不能顯示映像文件');
Application.Terminate;
Exit;
end;
FillChar(PShare^, SizeOf(TPShareMem), 0);
end;
procedure TForm2.getShareInfo(var Msg: TMessage);
begin
{如果是發(fā)送數(shù)據(jù)端發(fā)過來的參數(shù)是1}
if Msg.LParam=2 then
begin
//顯示共享內(nèi)存中的數(shù)據(jù)
mmo1.Text :=PShare^.Data;
end;
PShare :=PShareMem(MapViewOfFile(MapHandle, FILE_MAP_ALL_ACCESS, 0, 0, 0));
if PShare=nil then
begin
CloseHandle(MapHandle);
ShowMessage('不能顯示映像文件');
Application.Terminate;
Exit;
end;
FillChar(PShare^, SizeOf(TPShareMem), 0);
end;
end.
【Delphi下深入Windows編程】一書中CopyMemory使用的長度是Length(str)，但是在Delphi增加了Unicode字符支持以后這樣會導(dǎo)致長度計算不夠，只發(fā)送半截字符
參考萬一的博客中用ByteLength函數(shù)解決，但是也有人說，ByteLength函數(shù)只能對Unicode字符串求字節(jié)長度，如果要對Ansi字符串進行計算，那么結(jié)果會是正確值的兩倍
最終解決方案：Length(str)*SizeOf(Char)
吐槽一下，在網(wǎng)上查資料的時候發(fā)現(xiàn)很多人的博客Delphi代碼都沒有高亮，看起來亂七八糟的，難道他們不知道Delphi使用的語言叫Pascal嗎
編輯導(dǎo)讀：圖標(biāo)一直是UI設(shè)計中很重要的部分，工作中我們經(jīng)常需要思考怎么做出好看、差異化的圖標(biāo)。圖標(biāo)為什么這么重要？圖標(biāo)怎么做的好看？怎么針對不同的產(chǎn)品做出圖標(biāo)的差異性？本文作者對總結(jié)了自己對于圖標(biāo)的理解和思考，一起來看一下。
圖標(biāo)一直是UI設(shè)計中很重要的部分，工作中我們經(jīng)常需要思考怎么做出好看、差異化的圖標(biāo)。圖標(biāo)為什么這么重要？圖標(biāo)怎么做的好看？怎么針對不同的產(chǎn)品做出圖標(biāo)的差異性？將最近自己研究的關(guān)于圖標(biāo)的理解以及工作中遇到的問題思考，梳理輸出分享給大家，希望能對大家在工作中遇到的關(guān)于圖標(biāo)的問題有所幫助。
圖標(biāo)作為一種視覺語言，廣義上指具有指代意義的圖形符號，具有高濃度并快捷傳達信息、便于記憶的特性。常見的如，交通標(biāo)志、男女衛(wèi)生間的標(biāo)志等等。
而UI圖標(biāo)大致可以分成兩大類：標(biāo)志性圖標(biāo)及功能性圖標(biāo)。標(biāo)志性圖標(biāo)，即手機桌面應(yīng)用圖標(biāo)的啟動入口，這里是用戶接觸到產(chǎn)品的第一印象，決定了用戶的去留，同時也是品牌傳播的重要渠道；另一個是功能圖標(biāo)，出現(xiàn)在app或網(wǎng)站中，用于功能性性引導(dǎo)用戶進行各種操作的圖像。
相對說明的長文字來說，圖標(biāo)只需占用一個字符的位置就可以傳遞給用戶操作信息。比如在個人中心頁，我們經(jīng)常看到的客服功能，用文案表示需要“聯(lián)系客服”四個字（當(dāng)然英文或其他語言可能更長），而用可以傳達信息的圖標(biāo)代替只需要占據(jù)一個字符的位置。
各個國家和地區(qū)都有自己的語言和文字，因此當(dāng)某一應(yīng)用在其他地區(qū)使用時需要進行本地適配。圖標(biāo)卻不同，經(jīng)過不同平臺應(yīng)用長時間的培養(yǎng)，很多圖標(biāo)已經(jīng)能夠被大多數(shù)用戶快速識別，甚至成為國際通用的圖標(biāo)，比如放大鏡圖標(biāo)意味著搜索，齒輪圖標(biāo)意味設(shè)置。圖標(biāo)的使用打破了語言的地域限制，在完全不用懂應(yīng)用文字意思的前提下，也不妨礙圖標(biāo)意思的理解，以及應(yīng)用的相應(yīng)功能操作。
比如，instagram上tab bar及主要操作都是直接使用圖標(biāo)表示并且沒有文字備注，并不影響用戶理解及操作。
人類的左右腦分工是不同的，左腦主要從事邏輯思維，比如語言、數(shù)據(jù)、邏輯推理等；右腦主要從事形象思維，比如音樂、繪畫、空間幾何、想象等；而右腦處理圖形圖像的速度是左腦處理文字速度的60萬倍。
根據(jù)美國國家生物技術(shù)信息中心（National Center for Biotechnology Information）的數(shù)據(jù)顯示，人類的平均注意力跨度已經(jīng)從2000年的12秒下降到2013年的8秒。人類大腦對圖形圖像的記憶也遠勝于對文字的記憶，人類會記住80%看過的東西，20%閱讀過的內(nèi)容和10%聽過的東西。文字圖像化，引導(dǎo)用戶快速接收信息進行操作，減少用戶的思考時間。
好的一套圖標(biāo)能夠從圖標(biāo)的獨特性、象征性、記憶性、應(yīng)用性、組合性、變化性上打動人心，從而激發(fā)人們點擊欲望。同時，圖標(biāo)集的統(tǒng)一性，一致性也會使的整個應(yīng)用給用戶傳遞視覺感受是統(tǒng)一、愉悅的，提升整個應(yīng)用的視覺體驗。下圖為馬蜂窩推出V9改版視覺升級中的品類圖標(biāo)優(yōu)化方案。
如果要追溯圖標(biāo)的歷史，可以追溯到史前時代。在當(dāng)代由于圖標(biāo)高度濃縮信息、快速傳達信息、便于記憶等優(yōu)勢，在其他方面的應(yīng)用范圍也極為廣泛，比如國家的圖標(biāo)國徽，商品的品牌注冊商標(biāo)，app應(yīng)用的啟動圖標(biāo)等等。關(guān)于GUI的圖標(biāo)史要從80年代第一臺桌面比擬電腦施樂奧托（Xerox Alto）開始。
1973年，Xerox的帕羅奧多研究中心（Xerox PARC）為了方便新用戶快速理解與掌握，首度公開了第一臺使用桌面比擬的電腦施樂奧托（Xerox Alto），它是最早使用圖形用戶界面（GUI）的電腦之一。后來安迪·貝托爾斯海姆設(shè)計出的SUN工作站；蘋果公司的麥金塔電腦，最初都是參考了Xerox Alto的設(shè)計。可以看到當(dāng)時的用戶界面只有應(yīng)用程序本身的顯示圖標(biāo)及數(shù)據(jù)程序的啟動圖標(biāo)。
直到1981年數(shù)學(xué)家戴維·史密斯（David Smith）博士和藝術(shù)家諾爾姆·考克斯（Nor Cox）結(jié)合藝術(shù)和技術(shù)，由考克斯設(shè)計、史密斯發(fā)明了一套圖標(biāo)用于Alto的繼承者Star的圖形用戶界面。此時對圖標(biāo)的定義是“計算機系統(tǒng)中數(shù)據(jù)或進程的象形表示，用來取代命令和菜單，作為計算機支持與最終用戶對話的手段”。可以看到這套圖標(biāo)都是方形的線性圖標(biāo)，具備簡單的外觀和一致的設(shè)計風(fēng)格。
1983年史蒂夫·喬布斯推出了一款面向廣泛商業(yè)用戶的個人計算機，并以自己的女兒“Lisa”命名。當(dāng)時的Lisa系統(tǒng)界面十分簡陋，并沒有給大眾留下太深刻的印象。次年喬布斯雇傭了Susan Kare為蘋果設(shè)計一套特有的圖標(biāo)和字體，應(yīng)用在1984年發(fā)布的麥金塔電腦中。麥金塔的圖形界面雖然不是第一個界面設(shè)計，但卻定義了之后絕大多數(shù)圖標(biāo)的外形，比如用來放置刪除文件的廢紙簍，表示保存的磁盤，以及蘋果鍵盤上的功能鍵「command」，這套圖標(biāo)不但個性而且經(jīng)典，這也Susan Kare為什么會被稱為圖標(biāo)設(shè)計之母。（沒有物理感知的同學(xué)，建議配合B站up主“老師好我叫何同學(xué)”2020年11月發(fā)布的《80年代的電腦能做什么？》一起服用）。
在這之后的圖標(biāo)演化，經(jīng)歷了微軟的第一套電腦系統(tǒng)界面Windows 1.0的多色顯示；走極簡風(fēng)格的ATARI TOS折疊式圖標(biāo)，這套圖標(biāo)的等距特點也成為電腦系統(tǒng)的標(biāo)準(zhǔn)之一；有四種顏色的AMIGA WORKBENCH用戶定制化圖標(biāo)；GEOS的輪廓著色圖標(biāo)；APPLE GS/OS的“文件夾繪畫“圖標(biāo)。這個階段的圖標(biāo)外型沒有太大，只是由于技術(shù)的不斷更新使圖標(biāo)開始出現(xiàn)顏色。
直到1989年，當(dāng)時的史蒂夫·喬布斯已經(jīng)離開了蘋果并創(chuàng)立了NeXTSTEP，這時的NeXTSTEP圖標(biāo)開始出現(xiàn)陰影和高度，向我們展示了一種全新的圖標(biāo)設(shè)計方法。NeXTSTEP的圖標(biāo)也是第一個被認為擬態(tài)的圖標(biāo)，圖標(biāo)開始進入擬態(tài)時代。
80年代末，圖標(biāo)已經(jīng)由最初簡單的線性圖標(biāo)演變出顏色，以及3個基本尺寸。基本的常用圖標(biāo)外形也被確定，比如文件、計算機、鉛筆和垃圾桶。此時圖標(biāo)也開始進入擬物時代。
WINDOWS 3.0時，微軟請來了Susan Kare為他設(shè)計桌面圖標(biāo)，我們可以看到和之前的圖標(biāo)有很多相似之處。蘋果的MACINTOSH SYSTEM 7.0也開始出現(xiàn)了灰色的陰影，這個時候的圖標(biāo)基本趨向雷同。Geoworks在相同中采用靛藍色的邊緣以區(qū)分。BeOS則使用出現(xiàn)與現(xiàn)在2.5d類似的設(shè)計風(fēng)格。IRIX使用陰影將圖標(biāo)漂浮起來。
蘋果在RHAPSODY DR2的應(yīng)用界面中使用等軸測圖結(jié)合透明遮罩，以及新技術(shù)的支持，這版圖標(biāo)設(shè)計更加細膩、細節(jié)更加豐富。
AMIGA OS 3.5則還是保持粗的像素顆粒感。
90年代時期的圖標(biāo)都是現(xiàn)實主義的等軸測擬物化圖標(biāo)，但受限于技術(shù)此時的圖標(biāo)像素的質(zhì)感還很強，圖標(biāo)使用投影增加空間感。
到了2000年，技術(shù)的革新帶來新的圖標(biāo)設(shè)計風(fēng)格，這時的圖標(biāo)開始具有超高的拋光度、層次感、透明光澤、多陰影、模糊、柔化等等。這時候的蘋果和Windows界面出現(xiàn)了我們熟悉的樣子，圖標(biāo)類似照片的質(zhì)感，使得圖標(biāo)不再只是單純的符號。
07年Windows的Windows AERO「Authentic（真實）、Energetic（動感）、Reflective（反射）及Open（開闊）」透明玻璃質(zhì)感是這種輕快、精致、細膩“圖標(biāo)洛可可風(fēng)格”的重要代表。現(xiàn)在依然有很多人喜歡這套閃閃發(fā)光的界面。到這時，圖標(biāo)還是指計算機數(shù)據(jù)或進程的象形表示。
2007年，蘋果發(fā)布第一代iPhone以及iOS系統(tǒng)，在iPhone 1代前，人們與手機的交互方式主要是鍵盤和手寫筆，電容屏支持多點觸控技術(shù)使用iPhone用戶可以用手指直接與屏幕進行交互。iOS的操作界空間也相對更大，因此系統(tǒng)桌面依然延續(xù)了寫實的圖標(biāo)風(fēng)格，甚至可以更精致。（2009年，從iOS 3版本開始，蘋果開始采用擬物化設(shè)計風(fēng)格）
Google在2007年年底才與HTC、LG、摩托羅拉和三星一同推出以Android為主要操作系統(tǒng)的手持設(shè)備聯(lián)盟。為了協(xié)調(diào)不同廠商Google一開始采用開放的組件系統(tǒng)，使得各家廠商可以修改底層文件，應(yīng)用各放異彩的同時也是使得Android手機應(yīng)用界面設(shè)計也越來越碎片化，使得后期Google為了統(tǒng)一設(shè)計風(fēng)格不得不推出基于物理世界的Material Design設(shè)計風(fēng)格，當(dāng)然這是后話。這時的Android手機界面也在追求極致的擬物化。
2001年喬布斯提出電腦是數(shù)碼生活的中樞，但從2007年蘋果推出一代iPhone開始，由于手機的便攜、快速、方便，手機的使用場景不斷占據(jù)人類生活場景，從這個時候開始圖標(biāo)更多指的是移動端手機應(yīng)用的啟動圖標(biāo)和應(yīng)用內(nèi)部的功能性圖標(biāo)。
這個時候界面都使用極致擬物化圖標(biāo)，此時的用戶經(jīng)過多年的使用，已經(jīng)不需要通過與現(xiàn)實同樣的物理視覺來解決所謂“學(xué)習(xí)成本”的問題。2010年微軟為了打通多設(shè)備的聯(lián)通，保證手機、電腦、平板多設(shè)備有一致的體驗，發(fā)布了帶有明顯磁貼風(fēng)格（又稱Metro風(fēng)格）的windows phone 7系統(tǒng)，圖標(biāo)開始變得扁平統(tǒng)一的白色面型圖標(biāo)，也就是扁平風(fēng)格的開端。（沒錯扁平設(shè)計風(fēng)格并不是蘋果提出的）磁貼設(shè)計最適合的是觸摸的交互方式，微軟桌面系統(tǒng)也采用了移動端的設(shè)計語言，完全有悖于之前用戶的操作習(xí)慣，Win8口碑大滑坡加上微軟系統(tǒng)升級的騷操作，導(dǎo)致微軟的Metro風(fēng)格猶如曇花一現(xiàn)，并沒有成為真正的流行。
蘋果緊接著發(fā)布的iOS7，與iOS6相比一改之前的極度擬物化，也并沒有像windows phone 7絕對的白色和面型圖標(biāo)，而是在之前圖標(biāo)的基礎(chǔ)上減少了底紋與質(zhì)感，蘋果嘗試在擬物和扁平之間找到了平衡，這樣的結(jié)果少不了Jonathan Ive的設(shè)計加持以及推動。因為風(fēng)格的差異化太大，直到現(xiàn)在還有很多人在爭論擬物風(fēng)和扁平風(fēng)的蘋果那個更好看。
由于扁平風(fēng)格的持續(xù)流行，圖標(biāo)也延續(xù)著扁平風(fēng)格，中間也偶爾有出現(xiàn)類似錘子手機的擬物風(fēng)圖標(biāo)，引起整個設(shè)計圈一陣討論，但整體趨勢還是扁平風(fēng)大行其道。
2020年WWDC20蘋果發(fā)布macOS Big Sur，這次蘋果對設(shè)計進行了大幅度的修改，相較于之前的扁平風(fēng)格以及不規(guī)則的外形，這次更新所有圖標(biāo)外形統(tǒng)一為圓角方形，靠近iOS系統(tǒng)。而整體質(zhì)感則是在扁平的基礎(chǔ)上增加些許質(zhì)感。macOS Big Sur不止圖標(biāo)更新外形與iOS相似，很多交互方式也與iPad端靠近，比如三端都有的組件化系統(tǒng)。前面我們說到windows phone 7系統(tǒng)的目標(biāo)是打通多設(shè)備的聯(lián)通，保證手機端、電腦端、平板多設(shè)備的一致體驗，而當(dāng)時面對剛遷移手機端的用戶來說，有點過于操之過急，但這一想法并不是天方夜譚。這次macOS Big Sur的視覺更新更像是為打通iPhone、ipad與MAC的整個蘋果內(nèi)部系統(tǒng)的基礎(chǔ)設(shè)施建設(shè)。
當(dāng)時很多設(shè)計師覺得有點不倫不類，外形雖然統(tǒng)一，但很多圖標(biāo)卻也丑的很別致，比如被吐槽最多的QuickTime Player。并紛紛曬出自己對蘋果的“新擬態(tài)圖標(biāo)”的Redesign。
成立體圖標(biāo)增加紋理、描邊、模糊、層次越來越寫實，但遠遠沒有達到擬物的狀態(tài)。2000年后，屏幕技術(shù)的發(fā)展，同時隨著photoshop修圖軟件的出現(xiàn)，圖標(biāo)設(shè)計可以添加越來越多質(zhì)感的，Windows、蘋果圖標(biāo)擬物化出現(xiàn)，這時圖標(biāo)還是指的計算機數(shù)據(jù)或進程的象形。07年電容屏支持多點觸控技術(shù)被喬布斯使用在iPhone一代，移動端開始越來越多占據(jù)我們的生活，iOS 3開始圖標(biāo)越來越擬物化。2010年人們身邊充斥著各種電子設(shè)備，不再需要通過與物理感知一樣的圖標(biāo)來理解背后的意義及交互方式，微軟為了實現(xiàn)多設(shè)備一致的體驗，推出Metro風(fēng)格。iOS 7蘋果設(shè)計師Jonathan Ive極力推動扁平圖標(biāo)的應(yīng)用，當(dāng)時充滿爭議。但之后極簡、扁平、去除視覺噪音成為主流，扁平風(fēng)格火了十年。而當(dāng)時提出扁平風(fēng)格的微軟Windows 10 mobile 因為多端適配、7.5無法升級等問題，被用戶詬病，2019年已經(jīng)停止更新。2020年蘋果新擬物圖標(biāo)之前，扁平的圖標(biāo)減少視覺噪音方便用戶快速識別等優(yōu)點外，也限制著設(shè)計師的發(fā)揮，可以看到Dribbble上眾多設(shè)計對于圖標(biāo)設(shè)計都有自己的嘗試。圖標(biāo)的發(fā)展一直是技術(shù)、承載設(shè)備、設(shè)計師共同推動的結(jié)果，圖標(biāo)的發(fā)明是為了降低電子設(shè)備用戶的理解成本，快速的傳遞信息，到現(xiàn)在無論如何發(fā)展信息傳遞依然是圖標(biāo)的核心。
歷史終于寫完了，找資料找的頭禿，盡～力～了～。如有出入，歡迎指正，peace&love。
圖標(biāo)繪制是將語義元素轉(zhuǎn)變?yōu)橐曈X元素的過程，以達到傳遞信息的目的。所以圖標(biāo)的建立，首先應(yīng)該確定圖標(biāo)的隱喻，也就是型的確定。（因為所有圖標(biāo)都是在功能型圖標(biāo)基礎(chǔ)上進行的設(shè)計變形或設(shè)計細節(jié)添加，因此之后文章除非特別說明，舉例都會以功能型圖標(biāo)為主）
圖標(biāo)按圖像隱喻分類可分為實物圖標(biāo)、象形圖標(biāo)、表意圖標(biāo)、文字圖標(biāo)、創(chuàng)造圖標(biāo)、組合圖標(biāo)。
實物性圖標(biāo)就是將真實的物品作為符號引導(dǎo)用戶點擊，一般用在表示新鮮的生鮮類應(yīng)用，比如：如盒馬生鮮，叮咚買菜。或具有品牌效應(yīng)的電商類應(yīng)用，比如：得物、識貨。還有些沒有辦法符號化的物品，比如美團買藥、聚美。
象形圖標(biāo)是最常見的圖標(biāo)繪制方式，即通過對一個物理物體的再現(xiàn)或參照來表達意義，表示單詞或短語的圖像符號。GUI剛出現(xiàn)時，用戶并不知道怎么進行操作，因此對絕大需要傳遞的信息，都盡量模范現(xiàn)實生活中的實際物體，比如：代表刪除的垃圾桶，以及當(dāng)時電子軟盤表示保存。
這類圖標(biāo)由于長時間的使用，如果改變外形可能誤導(dǎo)用戶，外形無法做過多的變化。
表意圖標(biāo)是將沒有具象物體、比較抽象的概念，在發(fā)展的過程中創(chuàng)作并成為一種約定俗成的圖標(biāo)用來表達某些含義或操作，比如點贊圖標(biāo)，設(shè)置圖標(biāo)，音符圖標(biāo)代表音樂，+號代表增加。
有些詞或操作沒辦法用任何圖形進行表現(xiàn)，這時會使用相關(guān)的文字進行表現(xiàn)。文字本身就是一種演化而來的符號，比如返利。返利是最近才出現(xiàn)的名詞，沒有更好的圖形可以進行表現(xiàn)，一般會使用“返”字作為視覺表現(xiàn)。另一種情況是在某些特定節(jié)日會使用文字宣傳作為圖標(biāo)，比如雙十一、618各大電商運營活動。
創(chuàng)造類圖標(biāo)的設(shè)計和功能并沒有直接關(guān)聯(lián)，本身是不具備傳遞功能的含義，一般是伴隨著業(yè)務(wù)的出現(xiàn)，用戶在長時間使用過程中習(xí)慣熟悉圖標(biāo)傳遞的含義，有時會伴隨文字一起出現(xiàn)，經(jīng)典的比如蘋果的command鍵、藍牙圖標(biāo)，最近的小程序圖標(biāo)。
組合圖標(biāo)指將前面幾類任意組合后產(chǎn)出的新圖標(biāo)，用來表達更為復(fù)雜的意思或操作行為，比如添加新用戶、微博的找人等等。
以上是圖標(biāo)設(shè)計詳解的第一篇——圖標(biāo)初始的內(nèi)容。當(dāng)然圖標(biāo)還有很多課題可以研究，比如圖標(biāo)的大小、圖標(biāo)的設(shè)計屬性、圖標(biāo)的原則、圖標(biāo)的設(shè)計流程以及關(guān)于圖標(biāo)可用測試等等。這些內(nèi)容會盡快更新，敬請期待。
作者：9號自習(xí)室； 公眾號：9號自習(xí)室；知乎專欄：9號自習(xí)室。
本文由 @9號自習(xí)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議