輯導(dǎo)語：無論是產(chǎn)品的一個啟動logo，還是界面的標簽欄，圖標隨處可見。那么，圖標是什么？最初是什么樣的？我們該何時使用它？本文作者對圖標的發(fā)展作了總結(jié)分析，一起來看一下吧。
作為設(shè)計師，圖標是從我們?nèi)腴T開始就會接觸的老生常談的東西，不論是產(chǎn)品的一個啟動logo，還是界面的標簽欄，甚至是我們的日常生活，它隨處可見。
但是，你有沒有想過，圖標到底是什么？它最初是什么樣的？我們該何時使用它，何時不使用它？該用什么樣的？具體該怎么去繪制？成套圖標該怎么保持一致性？如果你有任何一點疑惑，歡迎繼續(xù)往下閱讀。愿你在閱讀過程中有所收獲：）
wikipedia將圖標廣泛定義為：Apictogram or ideogram displayed on acomputer screen.
翻譯成中文就是：計算機屏幕上的象形圖（pictogram）或表意文字（ideogram）。
要想深究這倆玩意兒，就需要追溯至數(shù)千年前的蘇美爾及古埃及文明，那時文字尚未出現(xiàn)，人類為了更方便得識別、表達和交換信息，便發(fā)明了一系列具有指代含義的圖形和符號。
象形圖其實屬于表意文字的一種，他們之間最最簡單的區(qū)別就是，前者代表了具象的事物，后者則代表了抽象的概念，為了讓你們更好理解，我畫了一幅圖來舉例：
左圖的圖標指代了“香煙”這個具象的、現(xiàn)實可見的事物，屬于pictogram；而加上一個圈+斜杠后，就指代了“禁煙”這個抽象的概念，屬于ideogram。
這些概念也就是我們今天所熟稱的圖標（icon），并且直至今日我們依然在廣泛使用。比如各種電子設(shè)備中的圖標、地鐵站中的箭頭、衛(wèi)生間標識，道路上的人行橫道標識等等。
相比文字，圖標不僅具有跨越語言的超級優(yōu)勢，我們?nèi)四X對于圖標（圖形）的辨識能力和記憶能力也遠遠高于文字，因此用圖標代替冗長的文字信息可以快速提升信息的獲取速度，人們只需要一瞥就可以快速獲取信息。
提到圖標，就不得不提GUI（Graphic User Interface），也就是就是我們熟知的圖形用戶界面。相比以前需要手動輸入指令的CLI，引入視覺語言的GUI的信息呈現(xiàn)方式更加直觀易懂，在人機交互上也利用鼠標讓這一過程變得極為簡單和高效。
CLI（command-line interface）即命令行界面，比如上古時期的DOS。需要避免與之混淆的是TUI（Terminal user interface），即終端用戶界面，我們重裝電腦時使用的BIOS程序就是最常見的TUI。
GUI并非喬布斯首創(chuàng)，而是誕生在上世紀70年代的施樂公司PARC實驗室所發(fā)明的Alto電腦。Alto不僅首次了實現(xiàn)WIMP（ Windows窗口、Icon圖標、Menus菜單、Pointer指針）概念，小巧易操作的特征也讓它成為了世界真正意義上的第一臺個人電腦（emmm那個時代的確是小巧了）。
當(dāng)年喬布斯去參觀PARC實驗室，被Alto電腦屏幕中牛逼的圖形界面給徹底征服，和Alto比起來，自己的Apple II真的太遜色了。
喬布斯借走這個優(yōu)秀的想法，挖來施樂的員工來研發(fā)具備GUI的個人電腦，也就是我們熟知的Lisa和Macintosh（后改名為Mac），喬布斯還邀請蓋茨來開發(fā)應(yīng)用，但是蓋茨看到了這玩意兒的錢途，招呼不打直接自己照葫蘆畫瓢搞了一套，推出了Windows一代，賺的盆滿缽滿。
而親手創(chuàng)造GUI的施樂呢？由于高層太豬頭，沒有抓住市場機會而導(dǎo)致施樂錯失了這塊到嘴的肥肉，縱使后面研發(fā)了施樂之星，也因為過慢的速度和過高的價格被Macintosh和Windows按在地上摩擦。在施樂退隱后，市場理所當(dāng)然得被蘋果和微軟稱霸，直至今日，我們最常用的依然是MacOS和Windows這兩類操作系統(tǒng)（linux另說）。
雖然施樂給別人做了價值不菲的嫁衣，但是，施樂第一臺個人電腦的GUI依然是值得稱道的偉大靈感，對于互聯(lián)網(wǎng)乃至世界的影響都極為深遠。試想一下，如果實驗室的天才們沒有研發(fā)出Alto，或者施樂沒有同意喬布斯的拜訪，那很可能不會出現(xiàn)改變世界的Mac、iPhone和Windows。
圖標發(fā)展史（Star to XP）：圖標第一次為大眾所接觸應(yīng)該是從決定商用的施樂之星開始。從簡陋的像素線性到現(xiàn)如今的豐富多彩，其間歷經(jīng)了近半個世紀。這半個世紀到底發(fā)生了啥？圖標最早長啥樣？擬物圖標是怎么來的？別急，且聽我一一道來。
下圖就是施樂之星的GUI（1981年），David Canfield Smith博士創(chuàng)作了成套圖標的設(shè)計，所有的圖標都是由矩形和圓角矩形組成，并且文件夾和文檔的折角樣式被沿用至今。
Macintosh的GUI（1984年），由Susan Kare所設(shè)計的圖標在保持高度辨認性的同時顯得更生動有趣，她很好得結(jié)合了ideogram來創(chuàng)作較為抽象的事物。那個帶有表情的電腦icon是不是很熟悉？這就是macOS中「訪達」功能的最早原型。
微軟的Windows1.0（1985年），不得不說，它的設(shè)計讓人一言難盡，撇開系統(tǒng)所預(yù)設(shè)的配色，不論是圖標的陰影、細節(jié)還是風(fēng)格都高度缺乏一致性，讓人不得不懷疑是不是Steve Ballmer為節(jié)省預(yù)算親自操刀。
Windows3.0（1990年）的界面去除了以往的配色，并且圖標部分由前蘋果設(shè)計師Susan Kare進行了重新繪制，不得不說整個界面都有了相當(dāng)大的改觀。
Windows95（1995年）算是和我們目前桌面最相似的一版系統(tǒng)了，這版的GUI進行了更大膽的重設(shè)計，并且在左下角首次加入了熟悉的Start按鈕，結(jié)合任務(wù)欄和桌面的布局一直沿用至今，圖標部分也更為精致易懂。而微軟的帝國之路也從win95開始正式打開。
Mac os8（1997年）中引入了大量的等軸測彩色圖標，也就是我們現(xiàn)在常說的2.5D圖標，但是這種立體風(fēng)格的導(dǎo)致圖標辨識度受到很大的影響，后面也很難見到這種風(fēng)格的影子了。不過，目前這種風(fēng)格常用在一些引導(dǎo)頁、banner的插畫中，空間感的塑造讓這個風(fēng)格有了有無之地。相比常規(guī)視角，往往更能抓住眼球。
Windows98（1998年），也就是我們小時候上微機課最常見的系統(tǒng)。圖標相比95更加精致了，并且首次使用了漸變色來增強視覺層級。
而Mac os x（2001年）的界面堪稱經(jīng)典，相比上一代可以用巨變兩個字來形容。
它首次定義了“擬物”這個迷人的概念，所有圖標都進行了照片級的超精細繪制，并且所有按鈕加入了水晶般的質(zhì)感和拉近用戶距離的大圓角，這個版本也首次加入了DOCK來讓用戶快速進入一個程序，同時也賦予了大量的動畫。
可以說，它的影響是顛覆性的，后續(xù)的所有擬物風(fēng)格（不分pc和移動端）全部源自這版GUI！同時，它也影響了數(shù)代UI設(shè)計師。（想起了Andrew自己入門時練到吐血的擬物圖標。。）雖然十余年的擬物時代已經(jīng)不在，但蘋果這一款經(jīng)典之作無疑是設(shè)計界的標桿。
btw，大量的半透明和反射效果讓這個版本界面有一個很好聽的名字，Aqua，翻譯過來是水的意思。
而蓋茨在2001年正式推出的Windows XP，也正是受Mac os x精致的擬物風(fēng)的影響。雖然同樣是擬物風(fēng)，但是過于絢麗的色彩和粗糙的質(zhì)感總感覺有點買家秀的意思。
每個改變世界的產(chǎn)品背后都有一段耐人尋味的故事～不論是古埃及文明中古老的象形文字，施樂之星中的黑白線性圖標，亦或是Mac os中精致浪漫的擬物圖標，撇去主觀視覺上的滿足，本質(zhì)上其實都是為了更高效、快捷得展示和傳達信息。
下半部分，我將為你帶來XP之后的圖標史，包括了移動端、扁平時代、material design等我們熟知的內(nèi)容~
我是Andrew，我們下期見。
參考資料
[1]wikipedia.
[2]Operating System Interface Design Between 1981-2009,Wdd Staff.
[3]趣話電腦圖標的前世今生, Marcin Wichary.
[4]蘋果用戶界面Aqua背后的故事,周兆熊.
[5]”Apple rattles lawyers at DesktopX over Aqua”. Lettice John.
[6]”Interview of Susan Kare” of Making at Macintosh.
Andrewchen；微信公眾號：轉(zhuǎn)行人的設(shè)計筆記，人人都是產(chǎn)品經(jīng)理專欄作家。中科院碩士自學(xué)轉(zhuǎn)行，擅長通過文字幫助年輕設(shè)計師成長和提效。延遲滿足、長期主義。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
先繪制一個淡黃色的圓形作為行星的輪廓。使用矩形工具，星球上方繪制很多不同顏色的方框，讓它們的顏色和寬度都不盡相同。你可以將這些方框編組并進行旋轉(zhuǎn)，這樣會顯得更真實。
第2步
現(xiàn)在我們來去掉方框不需要的部分。選擇圓形所在的圖層，選擇橢圓工具并在圖標上右擊，在彈出的菜單中選擇“創(chuàng)建選區(qū)”，然后在彈出的對話框中點擊確定，選項都保持默認即可。
然后，選擇這些矩形所在的組并單擊圖層面板下方的圖層蒙版按鈕，將不需要的部分隱藏起來。
第3步
讓我們給我們的星球增加一點光照感。將橢圓所在的圖層復(fù)制一遍并將它向左和向上移動一點兒。同時選中這兩個圖層并保持矩形工具的選擇，在頂部的菜單欄中選擇交叉。將混合模式調(diào)整為篩選并將不透明度調(diào)整為40%，這樣星球的左半邊就有了光照感。
第4步
讓我們開始添加星環(huán)。先繪制一個扁平的圓形然后選擇減去，在原先的環(huán)內(nèi)部繪制一個小一些的環(huán)。
我們需要去掉部分的星環(huán)，因為它們本該隱匿在行星后面。
繪制一個橢圓，覆蓋住行星的上半部分和星環(huán)的一部分，這圈選的部分就是我們要隱藏的部分（在截圖中，就是那個紅色的圈圈）。同時選擇新建立的圓形所在圖層和行星輪廓所在的圖層，在右鍵彈出的菜單中選擇相交選區(qū)，在行星的上部形成一個“蓋子”。
第5步
在紅色的圖層上右擊并選擇創(chuàng)建選區(qū)，選擇“選擇——翻轉(zhuǎn)選區(qū)”命令。
然后選擇星環(huán)所在圖層，創(chuàng)建圖層蒙版。
第6步
按照上一篇教程的方法創(chuàng)建長投影。
最后，加上小星星，搞定。
雷達
第1步
先繪制一個黑色的圓形。
好啦，其實顏色是什么并不重要，這個圓本身不會被顯示出來。在左側(cè)繪制一個紅色的矩形，將它的一半遮住。用反復(fù)介紹過的方法添加圖層蒙版蓋住不需要的部分。OK，現(xiàn)在就可以刪掉黑色的圓了。
用更深的紅色來填充半圓的下半部分，使得雷達細節(jié)更加真實。
第2步
讓我們給我們的雷達加上天線吧。首先，使用多邊形工具繪制一個三角形，然后用淺灰色填充它，縮放大小，并在頂端添加一個小球。
第3步
讓我們把天線升起來吧！
選擇所有的圖層然后將它們做旋轉(zhuǎn)。然后再做基架。現(xiàn)在對于你來說，做這樣的圖形應(yīng)該不是難事了吧！
第4步
最后加上長投影和小星星就可以啦
（來自網(wǎng)絡(luò)，侵權(quán)請刪）
如果大家喜歡葉貓此次分享的精選教程記得點上關(guān)注哦
每日分享優(yōu)選教程，還有原創(chuàng)平面教程原創(chuàng)設(shè)計教程哦
收藏或轉(zhuǎn)發(fā)的朋友可以在學(xué)習(xí)教程結(jié)束后到本文章評論區(qū)交作業(yè)~
面被扒得一絲不掛？Win10扁平化圖標聊勝于無
前不久泄露的Win10Build10022多張截圖曝光了Windows10的新UI新圖標，包括新回收站圖標在內(nèi)的全部設(shè)計讓不少網(wǎng)友都覺得太難看了，簡陋到連Windows98時代的圖標都不如。對于Win10新圖標被吐槽一事，微軟WindowsInsider項目負責(zé)人表示，這只是初稿，還會繼續(xù)改版，所以大家不用擔(dān)心。即使這樣，廣大的網(wǎng)友還是用各種各樣的吐槽方式表達著自己的看法。其中不乏一些見解“獨到”，語言“生動有趣”的評論。“天津動漫”將這些評論整理出來和大家一起分享。
“一個字，丑”——最直截了當(dāng)?shù)脑u論
“這個圖的透視嚴重不科學(xué)。”——一個美術(shù)設(shè)計師的評論
“看吧，等蘋果抄走的時候你們就該說這個好了。”——一個死忠軟粉
“看到這個界面，我還是繼續(xù)用Win7吧。”——一個不甘心為了系統(tǒng)給自己升級硬件的用戶終于找到了說服自己的理由。
“反正軟件兼容性好就行，至于別的我都無所謂。”——一個對新系統(tǒng)兼容性自信到不講道理的樂觀者。
“這個扁平化真欠扁。”——一個超直接的望文生義者。
“還不是因為你們看慣了蘋果的扁平化。”——一個不放過任何機會的千年果黑。
“這圖標讓我想起了用Win3.5的青蔥歲月。”——一個年齡至少在30歲以上的懷舊者。
“‘電腦’圖標的平行四邊形根本不正，而且為什么圖標屏幕要用藍屏。”不放過任何細節(jié)的完美主義者。
“聽說是用系統(tǒng)自帶的‘畫圖’工具做的。”——一個不便透露身份的知情者。
“對自己手藝沒把握的美工狗瞬間信心爆棚。”——這位肯定是領(lǐng)悟到了微軟如此用心良苦才傳遞出的正能量。
“平行投影+無透視+……”——經(jīng)技術(shù)帝一解釋，立馬覺得逼格就上去了。
圖標并不是Windows10現(xiàn)唯一受爭議的地方，比如這套系統(tǒng)的美感也遭到了吐槽。不過在這里我們要記住，現(xiàn)在我們看到的都還不是最終版的Windows10，所以不必對圖標這些太過計較。還記得首批曝光的Windows8圖片嗎？當(dāng)時它們看起來就像Windows7，后來微軟花了很長一段時間進行了整改，并在正式版中剔除了Aero效果、隱藏了開始菜單，可見變化之大。由此可見，正式版的Windows10指不定就會跟現(xiàn)在的完全不同。
好了，這篇文章就和大家分享到這里，關(guān)注“天津動漫”每天都能得到許多好看好玩的即時資訊。