編輯導(dǎo)語：無論是產(chǎn)品的一個(gè)啟動(dòng)logo，還是界面的標(biāo)簽欄，圖標(biāo)隨處可見。那么，圖標(biāo)是什么？最初是什么樣的？我們?cè)摵螘r(shí)使用它？本文作者對(duì)圖標(biāo)的發(fā)展作了總結(jié)分析，一起來看一下吧。

作為設(shè)計(jì)師，圖標(biāo)是從我們?nèi)腴T開始就會(huì)接觸的老生常談的東西，不論是產(chǎn)品的一個(gè)啟動(dòng)logo，還是界面的標(biāo)簽欄，甚至是我們的日常生活，它隨處可見。

但是，你有沒有想過，圖標(biāo)到底是什么？它最初是什么樣的？我們?cè)摵螘r(shí)使用它，何時(shí)不使用它？該用什么樣的？具體該怎么去繪制？成套圖標(biāo)該怎么保持一致性？如果你有任何一點(diǎn)疑惑，歡迎繼續(xù)往下閱讀。愿你在閱讀過程中有所收獲：）

一、上古時(shí)期

wikipedia將圖標(biāo)廣泛定義為：Apictogram or ideogram displayed on acomputer screen.

翻譯成中文就是：計(jì)算機(jī)屏幕上的象形圖（pictogram）或表意文字（ideogram）。

要想深究這倆玩意兒，就需要追溯至數(shù)千年前的蘇美爾及古埃及文明，那時(shí)文字尚未出現(xiàn)，人類為了更方便得識(shí)別、表達(dá)和交換信息，便發(fā)明了一系列具有指代含義的圖形和符號(hào)。

象形圖其實(shí)屬于表意文字的一種，他們之間最最簡(jiǎn)單的區(qū)別就是，前者代表了具象的事物，后者則代表了抽象的概念，為了讓你們更好理解，我畫了一幅圖來舉例：

左圖的圖標(biāo)指代了“香煙”這個(gè)具象的、現(xiàn)實(shí)可見的事物，屬于pictogram；而加上一個(gè)圈+斜杠后，就指代了“禁煙”這個(gè)抽象的概念，屬于ideogram。

這些概念也就是我們今天所熟稱的圖標(biāo)（icon），并且直至今日我們依然在廣泛使用。比如各種電子設(shè)備中的圖標(biāo)、地鐵站中的箭頭、衛(wèi)生間標(biāo)識(shí)，道路上的人行橫道標(biāo)識(shí)等等。

相比文字，圖標(biāo)不僅具有跨越語言的超級(jí)優(yōu)勢(shì)，我們?nèi)四X對(duì)于圖標(biāo)（圖形）的辨識(shí)能力和記憶能力也遠(yuǎn)遠(yuǎn)高于文字，因此用圖標(biāo)代替冗長(zhǎng)的文字信息可以快速提升信息的獲取速度，人們只需要一瞥就可以快速獲取信息。

二、圖形用戶界面的誕生

提到圖標(biāo)，就不得不提GUI（Graphic User Interface），也就是就是我們熟知的圖形用戶界面。相比以前需要手動(dòng)輸入指令的CLI，引入視覺語言的GUI的信息呈現(xiàn)方式更加直觀易懂，在人機(jī)交互上也利用鼠標(biāo)讓這一過程變得極為簡(jiǎn)單和高效。

CLI（command-line interface）即命令行界面，比如上古時(shí)期的DOS。需要避免與之混淆的是TUI（Terminal user interface），即終端用戶界面，我們重裝電腦時(shí)使用的BIOS程序就是最常見的TUI。

GUI并非喬布斯首創(chuàng)，而是誕生在上世紀(jì)70年代的施樂公司PARC實(shí)驗(yàn)室所發(fā)明的Alto電腦。Alto不僅首次了實(shí)現(xiàn)WIMP（ Windows窗口、Icon圖標(biāo)、Menus菜單、Pointer指針）概念，小巧易操作的特征也讓它成為了世界真正意義上的第一臺(tái)個(gè)人電腦（emmm那個(gè)時(shí)代的確是小巧了）。

當(dāng)年喬布斯去參觀PARC實(shí)驗(yàn)室，被Alto電腦屏幕中牛逼的圖形界面給徹底征服，和Alto比起來，自己的Apple II真的太遜色了。

喬布斯借走這個(gè)優(yōu)秀的想法，挖來施樂的員工來研發(fā)具備GUI的個(gè)人電腦，也就是我們熟知的Lisa和Macintosh（后改名為Mac），喬布斯還邀請(qǐng)蓋茨來開發(fā)應(yīng)用，但是蓋茨看到了這玩意兒的錢途，招呼不打直接自己照葫蘆畫瓢搞了一套，推出了Windows一代，賺的盆滿缽滿。

而親手創(chuàng)造GUI的施樂呢？由于高層太豬頭，沒有抓住市場(chǎng)機(jī)會(huì)而導(dǎo)致施樂錯(cuò)失了這塊到嘴的肥肉，縱使后面研發(fā)了施樂之星，也因?yàn)檫^慢的速度和過高的價(jià)格被Macintosh和Windows按在地上摩擦。在施樂退隱后，市場(chǎng)理所當(dāng)然得被蘋果和微軟稱霸，直至今日，我們最常用的依然是MacOS和Windows這兩類操作系統(tǒng)（linux另說）。

雖然施樂給別人做了價(jià)值不菲的嫁衣，但是，施樂第一臺(tái)個(gè)人電腦的GUI依然是值得稱道的偉大靈感，對(duì)于互聯(lián)網(wǎng)乃至世界的影響都極為深遠(yuǎn)。試想一下，如果實(shí)驗(yàn)室的天才們沒有研發(fā)出Alto，或者施樂沒有同意喬布斯的拜訪，那很可能不會(huì)出現(xiàn)改變世界的Mac、iPhone和Windows。

圖標(biāo)發(fā)展史（Star to XP）：圖標(biāo)第一次為大眾所接觸應(yīng)該是從決定商用的施樂之星開始。從簡(jiǎn)陋的像素線性到現(xiàn)如今的豐富多彩，其間歷經(jīng)了近半個(gè)世紀(jì)。這半個(gè)世紀(jì)到底發(fā)生了啥？圖標(biāo)最早長(zhǎng)啥樣？擬物圖標(biāo)是怎么來的？別急，且聽我一一道來。

下圖就是施樂之星的GUI（1981年），David Canfield Smith博士創(chuàng)作了成套圖標(biāo)的設(shè)計(jì)，所有的圖標(biāo)都是由矩形和圓角矩形組成，并且文件夾和文檔的折角樣式被沿用至今。

Macintosh的GUI（1984年），由Susan Kare所設(shè)計(jì)的圖標(biāo)在保持高度辨認(rèn)性的同時(shí)顯得更生動(dòng)有趣，她很好得結(jié)合了ideogram來創(chuàng)作較為抽象的事物。那個(gè)帶有表情的電腦icon是不是很熟悉？這就是macOS中「訪達(dá)」功能的最早原型。

微軟的Windows1.0（1985年），不得不說，它的設(shè)計(jì)讓人一言難盡，撇開系統(tǒng)所預(yù)設(shè)的配色，不論是圖標(biāo)的陰影、細(xì)節(jié)還是風(fēng)格都高度缺乏一致性，讓人不得不懷疑是不是Steve Ballmer為節(jié)省預(yù)算親自操刀。

Windows3.0（1990年）的界面去除了以往的配色，并且圖標(biāo)部分由前蘋果設(shè)計(jì)師Susan Kare進(jìn)行了重新繪制，不得不說整個(gè)界面都有了相當(dāng)大的改觀。

Windows95（1995年）算是和我們目前桌面最相似的一版系統(tǒng)了，這版的GUI進(jìn)行了更大膽的重設(shè)計(jì)，并且在左下角首次加入了熟悉的Start按鈕，結(jié)合任務(wù)欄和桌面的布局一直沿用至今，圖標(biāo)部分也更為精致易懂。而微軟的帝國(guó)之路也從win95開始正式打開。

Mac os8（1997年）中引入了大量的等軸測(cè)彩色圖標(biāo)，也就是我們現(xiàn)在常說的2.5D圖標(biāo)，但是這種立體風(fēng)格的導(dǎo)致圖標(biāo)辨識(shí)度受到很大的影響，后面也很難見到這種風(fēng)格的影子了。不過，目前這種風(fēng)格常用在一些引導(dǎo)頁、banner的插畫中，空間感的塑造讓這個(gè)風(fēng)格有了有無之地。相比常規(guī)視角，往往更能抓住眼球。

Windows98（1998年），也就是我們小時(shí)候上微機(jī)課最常見的系統(tǒng)。圖標(biāo)相比95更加精致了，并且首次使用了漸變色來增強(qiáng)視覺層級(jí)。

而Mac os x（2001年）的界面堪稱經(jīng)典，相比上一代可以用巨變兩個(gè)字來形容。

它首次定義了“擬物”這個(gè)迷人的概念，所有圖標(biāo)都進(jìn)行了照片級(jí)的超精細(xì)繪制，并且所有按鈕加入了水晶般的質(zhì)感和拉近用戶距離的大圓角，這個(gè)版本也首次加入了DOCK來讓用戶快速進(jìn)入一個(gè)程序，同時(shí)也賦予了大量的動(dòng)畫。

可以說，它的影響是顛覆性的，后續(xù)的所有擬物風(fēng)格（不分pc和移動(dòng)端）全部源自這版GUI！同時(shí)，它也影響了數(shù)代UI設(shè)計(jì)師。（想起了Andrew自己入門時(shí)練到吐血的擬物圖標(biāo)。。）雖然十余年的擬物時(shí)代已經(jīng)不在，但蘋果這一款經(jīng)典之作無疑是設(shè)計(jì)界的標(biāo)桿。

btw，大量的半透明和反射效果讓這個(gè)版本界面有一個(gè)很好聽的名字，Aqua，翻譯過來是水的意思。

而蓋茨在2001年正式推出的Windows XP，也正是受Mac os x精致的擬物風(fēng)的影響。雖然同樣是擬物風(fēng)，但是過于絢麗的色彩和粗糙的質(zhì)感總感覺有點(diǎn)買家秀的意思。

三、總結(jié)

每個(gè)改變世界的產(chǎn)品背后都有一段耐人尋味的故事～不論是古埃及文明中古老的象形文字，施樂之星中的黑白線性圖標(biāo)，亦或是Mac os中精致浪漫的擬物圖標(biāo)，撇去主觀視覺上的滿足，本質(zhì)上其實(shí)都是為了更高效、快捷得展示和傳達(dá)信息。

下半部分，我將為你帶來XP之后的圖標(biāo)史，包括了移動(dòng)端、扁平時(shí)代、material design等我們熟知的內(nèi)容~

我是Andrew，我們下期見。

參考資料

[1]wikipedia.

[2]Operating System Interface Design Between 1981-2009,Wdd Staff.

[3]趣話電腦圖標(biāo)的前世今生, Marcin Wichary.

[4]蘋果用戶界面Aqua背后的故事,周兆熊.

[5]”Apple rattles lawyers at DesktopX over Aqua”. Lettice John.

[6]”Interview of Susan Kare” of Making at Macintosh.

#專欄作家#

Andrewchen；微信公眾號(hào)：轉(zhuǎn)行人的設(shè)計(jì)筆記，人人都是產(chǎn)品經(jīng)理專欄作家。中科院碩士自學(xué)轉(zhuǎn)行，擅長(zhǎng)通過文字幫助年輕設(shè)計(jì)師成長(zhǎng)和提效。延遲滿足、長(zhǎng)期主義。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。