你好，我發(fā)起了一個計劃——“體系構(gòu)建計劃”，它會包括UI設(shè)計中所涉及的所有知識埃唯，我將自己所學與國內(nèi)外前輩的經(jīng)驗糅合在了一起以便盡可能完整和正確，它的全面會超乎你的想象害捕，也許這聽起來很有野心绿淋，但這也是我向自己所發(fā)起的挑戰(zhàn)——整合和學習所有的碎片化知識幫助自己全面提升，同時也希望幫助到正在閱讀的你：）
這是我在“體系構(gòu)建計劃”中的第一類知識——圖標類的開場文章尝盼。
篇幅原因?qū)⒎譃槿舾刹糠诌M行講解（具體數(shù)量未知依然哈哈）吞滞。前面2篇我會著重講述圖標的前世今生，鋪墊的比較多盾沫，如果你對這段歷史感興趣的話自然極好裁赠，不是很感興趣的話，那請你赴精。佩捞。當小說看啊哈哈哈（我不會說出請出門左轉(zhuǎn)那么絕情的話的～）
本文約3500字，預計閱讀時間10分鐘
前言
作為設(shè)計師蕾哟，圖標是從我們?nèi)腴T開始就會接觸的老生常談的東西一忱，不論是產(chǎn)品的一個啟動logo，還是界面的標簽欄谭确，甚至是我們的日常生活帘营，它隨處可見。
但是逐哈，你有沒有想過芬迄，圖標到底是什么？它最初是什么樣的鞠眉？我們該何時使用它薯鼠，何時不使用它？該用什么樣的械蹋？具體該怎么去繪制出皇？成套圖標該怎么保持一致性？如果你有任何一點疑惑哗戈，歡迎繼續(xù)往下閱讀郊艘。愿你在閱讀過程中有所收獲：）
上古時期
wikipedia將圖標廣泛定義為：
A pictogram or ideogram displayed on a computer 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那個時代的確是小巧了颜武。璃搜。）
當年喬布斯去參觀PARC實驗室文兑，被Alto電腦屏幕中牛逼的圖形界面給徹底征服，媽蛋腺劣，和Alto比起來，自己的Apple II就是個渣渣因块。
喬布斯“借走”這個優(yōu)秀的想法橘原，挖來施樂的員工來研發(fā)具備GUI的個人電腦，也就是我們熟知的Lisa和Macintosh（后改名為Mac）涡上，喬布斯還邀請蓋茨來開發(fā)應用趾断，但是我們的蓋茨兄看到了這玩意兒的錢途，招呼不打直接自己照葫蘆畫瓢搞了一套吩愧，推出了Windows一代芋酌，賺的盆滿缽滿。
而親手創(chuàng)造GUI的施樂呢雁佳？由于高層太豬頭脐帝，沒有抓住市場機會而導致施樂錯失了這塊到嘴的肥肉，縱使后面研發(fā)了施樂之星糖权，也因為過慢的速度和過高的價格被Macintosh和Windows按在地上摩擦堵腹。在施樂退隱后，市場理所當然得被蘋果和微軟稱霸星澳，直至今日疚顷，我們最常用的依然是Macos和Windows這兩類操作系統(tǒng)(linux另說)
雖然施樂給別人做了價值不菲的嫁衣，但是禁偎，施樂第一臺個人電腦的GUI依然是值得稱道的偉大靈感腿堤，對于互聯(lián)網(wǎng)乃至世界的影響都極為深遠。試想一下如暖，如果實驗室的天才們沒有研發(fā)出Alto笆檀，或者施樂沒有同意喬布斯的拜訪，那很可能不會出現(xiàn)改變世界的Mac盒至、iPhone和Windows误债。
圖標發(fā)展史（Star to XP）
圖標第一次為大眾所接觸應該是從決定商用的施樂之星開始。從簡陋的像素線性到現(xiàn)如今的豐富多彩妄迁，其間歷經(jīng)了近半個世紀寝蹈。這半個世紀到底發(fā)生了啥？圖標最早長啥樣登淘？擬物圖標是怎么來的箫老？別急，且聽我一一道來黔州。
上圖就是施樂之星的GUI（1981年）耍鬓，David Canfield Smith博士創(chuàng)作了成套圖標的設(shè)計阔籽，所有的圖標都是由矩形和圓角矩形組成，并且文件夾和文檔的折角樣式被沿用至今牲蜀。
Macintosh的GUI（1984年）笆制，由Susan Kare所設(shè)計的圖標在保持高度辨認性的同時顯得更生動有趣，她很好得結(jié)合了ideogram來創(chuàng)作較為抽象的事物涣达。
微軟的Windows1.0（1985年）在辆，不得不說，它非常得度苔。匆篓。丑陋，撇開系統(tǒng)所預設(shè)的可怕配色寇窑，圖標簡直丑到天際鸦概，另外不論是圖標的陰影、細節(jié)還是風格都高度缺乏一致性甩骏，讓人不得不懷疑是不是Steve Ballmer為節(jié)省預算親自操刀窗市。
Windows3.0（1990年）的界面去除了那些惡心的配色，并且圖標部分由前蘋果設(shè)計師Susan Kare進行了重新繪制饮笛，不得不說整個界面都有了相當大的改觀谨设。
Windows95（1995年）算是和我們目前桌面最相似的一版系統(tǒng)了，這版的GUI進行了更大膽的重設(shè)計缎浇，并且在左下角首次加入了熟悉的Start按鈕扎拣，結(jié)合任務(wù)欄和桌面的布局一直沿用至今，圖標部分也更為精致易懂素跺。而微軟的帝國之路也從win95開始正式打開二蓝。。
Mac os8（1997年）中引入了大量的等軸測彩色圖標指厌，也就是我們現(xiàn)在常說的2.5D圖標刊愚，但是這種立體風格的導致圖標辨識度受到很大的影響，后面也很難見到這種風格的影子了踩验。目前這種風格常用在一些引導頁鸥诽、banner的插畫中。
Windows98（1998年）箕憾，也就是我們小時候上微機課最常見的系統(tǒng)牡借。圖標相比95更加精致了，并且首次使用了漸變色來增強視覺層級袭异。
Mac os x（2001年）的界面堪稱經(jīng)典钠龙，相比上一代可以用巨變兩個字來形容。
它首次定義了“擬物”這個迷人的概念，所有圖標都進行了照片級的超精細繪制碴里，并且所有按鈕加入了水晶般的質(zhì)感和拉近用戶距離的大圓角沈矿，這個版本也首次加入了DOCK來讓用戶快速進入一個程序，同時也賦予了大量的動畫咬腋「牛可以說，它的影響是顛覆性的根竿，后續(xù)的所有擬物風格（不分pc和移動端）全部源自這版GUI陵像！同時，它也影響了數(shù)代UI設(shè)計師犀填。（想想自己轉(zhuǎn)行入門時練到吐血的擬物圖標。嗓违。）雖然十余年的擬物時代已經(jīng)不在九巡，但蘋果這一款經(jīng)典之作無疑是設(shè)計界的標桿。
btw蹂季，大量的半透明和反射效果讓這個版本界面有一個很好聽的名字冕广，Aqua，翻譯過來是水的意思偿洁。
我們的蓋茨兄看到Mac os x精致的擬物風大驚撒汉，隨后眼睛滴溜一轉(zhuǎn)，笑嘻嘻得說道：“哎嘿涕滋，小老弟我又來了～～你睬辐，那個戴眼鏡的美工，去抄下宾肺，呸溯饵，是借鑒下老喬剛發(fā)布的os，記住了啊锨用，給老喬留點褲底丰刊，咱們老吃官司也不優(yōu)雅≡鲇担”半年后啄巧，就誕生了喜聞樂見的Windows XP（）雖然同樣是擬物風，但是過于絢麗的色彩和粗糙的質(zhì)感總感覺有點買家秀的意思～
總結(jié)
每個改變世界的產(chǎn)品背后都有一段耐人尋味的故事～但是掌栅，不論是古埃及文明中古老的象形文字秩仆，施樂之星中的黑白線性圖標，亦或是Mac os中精致浪漫的擬物圖標猾封，撇去主觀視覺上的滿足逗概，本質(zhì)上其實都是為了更高效、快捷得展示和傳達信息。
篇幅原因，圖標部分的前世今生講了一半，下半部分下周繼續(xù)更新菠红，歡迎各位捧場～
巨人的肩膀：
[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.
=================================================
歡迎加入我的設(shè)計筆記燕耿，你會在這里獲取更多的設(shè)計分享/干貨/故事，相信對你會有所幫助 ：）
