編輯導(dǎo)語(yǔ)：隨著科技的發(fā)展，移動(dòng)互聯(lián)網(wǎng)在發(fā)生翻天覆地的變化。如今，無(wú)論是PC端還是移動(dòng)端，其圖標(biāo)及系統(tǒng)都在不斷更迭與變化，更好地適應(yīng)我們的使用需求。作者講述了后20年移動(dòng)互聯(lián)網(wǎng)關(guān)于圖標(biāo)變化的那些事，一起來(lái)看看。

上一篇，我們了解到圖標(biāo)在前20年的發(fā)展史：從施樂之星的黑白像素icon，到xp的「買家秀」擬物icon。

這一篇，我花了5000余字來(lái)為你講述后20年的發(fā)展歷史。xp之后，各位互聯(lián)網(wǎng)大佬們就各種搞事情，考慮到各位的閱讀體驗(yàn)，我將這片歷史長(zhǎng)河縱分為移動(dòng)端和pc端兩個(gè)方向。

廢話不多說(shuō)，我們現(xiàn)在開始。

一、改變世界

2007年1月，有一匹黑馬，帶著“老子要一拳打十個(gè)”的狂妄之語(yǔ)，吊錘了世界上的所有手機(jī)，并以一己之力首創(chuàng)了移動(dòng)互聯(lián)網(wǎng)時(shí)代。

沒錯(cuò)，它就是iPhone1。iPhone的出現(xiàn)顛覆了所有人的世界觀。當(dāng)人們驚喜得發(fā)現(xiàn)，他們只需用手指在屏幕上輕松得點(diǎn)擊滑動(dòng)，就可以實(shí)現(xiàn)以往靠笨重的外置鍵盤、手寫筆才能實(shí)現(xiàn)的功能時(shí)，這種感覺宛如親身體驗(yàn)了另一個(gè)位面的文明。

回到視覺，iOS作為iPhone的系統(tǒng)，所有圖標(biāo)均裁剪為同等尺寸的圓角矩形來(lái)呈現(xiàn)秩序之美。圖標(biāo)繼續(xù)沿用了mac os中的擬物化設(shè)計(jì)（skeuomorphic design），大多數(shù)圖標(biāo)以一抹弧形高光來(lái)繼承了aqua中曼妙的水晶質(zhì)感。

擬物圖標(biāo)以具象的隱喻，將現(xiàn)實(shí)世界中的邏輯帶入到智能移動(dòng)設(shè)備上，精美的同時(shí)也大幅度減少人們的學(xué)習(xí)成本，幫助他們快速上手。比如iOS1中的計(jì)算器圖標(biāo)，就是以迪特拉姆斯為博朗設(shè)計(jì)的計(jì)算器為原型。

在當(dāng)時(shí)，蘋果的擬物潮流頗受用戶們的喜愛，直至今日，很多設(shè)計(jì)師都難以割舍，比如羅老師的堅(jiān)果手機(jī)那有些復(fù)古的風(fēng)格，就源自這種難以割舍的情懷。

二、后起之秀

Android在iOS2發(fā)布后的2個(gè)月橫空出世，完全免費(fèi)的開源系統(tǒng)也直接使得一大批的國(guó)內(nèi)手機(jī)廠商如雨后春筍般涌現(xiàn)。下圖就是世界上第一個(gè)安卓機(jī)——HTC Dream，雖然硬件上依舊帶有塞班和WM的影子，但是類似iPhone可自由上網(wǎng)、看視頻的客戶端讓它成為僅次于iPhone的寵兒。

Android 1.1時(shí)期的圖標(biāo)和我們后面熟知的風(fēng)格差距還是很大，當(dāng)時(shí)依然采用了塞班時(shí)期常用的類等軸測(cè)的擬物風(fēng)格。

真正的轉(zhuǎn)變是在2010年1月所發(fā)布的Android2.1，當(dāng)時(shí)一同閃亮登場(chǎng)的還有谷歌的親兒子Nexus One。

2.1版本算是Android史上最具代表性的版本之一了，從這一代開始，原生應(yīng)用的圖標(biāo)全部改為正視的異性圖標(biāo)，并且引入了經(jīng)典的安卓綠，與藍(lán)色及中性色一起組成Android圖標(biāo)的配色方案，對(duì)了，還得撒上一抹濃濃的陰影～從這代開始，安卓逐步形成了自己獨(dú)有的扁平style。

三、擬物時(shí)代的落幕

2013年6月的WWDC，當(dāng)蘋果首席設(shè)計(jì)師Jonathan Ive棄用了傳承12年的擬物，大刀闊斧得將iOS7所有圖標(biāo)全部改造為扁平風(fēng)時(shí)，輿論嘩然，一大波人都覺得向來(lái)制定標(biāo)準(zhǔn)引領(lǐng)潮流的蘋果變了——

居然屈服于主流審美！追隨了谷歌和微軟的扁平潮流！你不是我認(rèn)識(shí)的那個(gè)蘋果了！擬物不死！！

不過(guò)嚴(yán)格來(lái)說(shuō)，撇開擬物狂魔Scott Forstall的離職原因外，蘋果只是在適當(dāng)?shù)臅r(shí)機(jī)做了適當(dāng)?shù)霓D(zhuǎn)型而已。

當(dāng)初擬物最主要的設(shè)計(jì)初衷其實(shí)是為了讓剛開始接觸智能機(jī)的用戶迅速熟悉上手，而6年時(shí)間后，擬物圖標(biāo)中大量的紋理和細(xì)節(jié)反倒成為了“看起來(lái)很精美”的視覺噪音，縱然這些細(xì)節(jié)多么完美逼真，功能上也沒有任何意義。

因此，萬(wàn)物扁平化自然有它的道理，為了讓用戶在信息過(guò)載的屏幕中更高效、不受干擾得完成工作，輕量化和簡(jiǎn)潔化是必然趨勢(shì)。記住，是“簡(jiǎn)潔”，而非微軟metro的“簡(jiǎn)陋”。

iOS7的圖標(biāo)沒有像metro那樣簡(jiǎn)單粗暴得拍扁，仔細(xì)觀察，其實(shí)裹上了一層淡淡的漸變，以提升視覺層次，避免過(guò)度扁平后的呆板無(wú)趣，這種風(fēng)格俗稱“微漸變”風(fēng)格，并被沿用至今。

值得一提的是，iOS7開始起，圖標(biāo)形狀已經(jīng)不是傳統(tǒng)的圓角矩形了，蘋果以連續(xù)、漸變式的曲率弧線來(lái)將邊角打磨得更平滑，一方面可以使圖標(biāo)看上去更圓潤(rùn)平滑，另一方面也為了與同一時(shí)間發(fā)布的iPhone5c的邊角工藝設(shè)計(jì)達(dá)成統(tǒng)一。（查閱資料后才發(fā)現(xiàn)這種形狀叫l(wèi)ame曲線，俗稱超橢圓）

1. 咸魚翻身的Android

如果把手機(jī)系統(tǒng)比喻成土地，那么iOS早已在自己所規(guī)劃的土地上建好了規(guī)整的建筑，而以工程師們?yōu)橹鲗?dǎo)的Android則是一片無(wú)人管理的荒野，任何人都可以在上面建造想要的東西。混亂和無(wú)序是Android在GUI中的代名詞。

Google為了突破這個(gè)困境，召集了所有設(shè)計(jì)師進(jìn)行每個(gè)產(chǎn)品的Redesign尋找共同的語(yǔ)言。直到2014年的Google I/O大會(huì)所發(fā)布的Material Design，成功實(shí)現(xiàn)了Google的首次設(shè)計(jì)革命。

Material Design的核心理念就是——把現(xiàn)實(shí)世界帶入到手機(jī)屏幕中，不論是材質(zhì)的隱喻還是真實(shí)的動(dòng)效。并且它還列出了所有的組件規(guī)范，對(duì)于交互、前端和視覺來(lái)說(shuō)，它絕對(duì)是值得一看的指導(dǎo)手冊(cè)！

而Google也在Material Design發(fā)布的5個(gè)月后，推出了全新的Android5.0。相比之前的圖標(biāo)，這一代圖標(biāo)重新調(diào)整了所有圖標(biāo)的經(jīng)典配色，并且對(duì)質(zhì)感的使用更為克制，高光、內(nèi)陰影及投影的微妙處理讓圖標(biāo)更加扁平，也更加精致。并且被Google棄用的長(zhǎng)投影也以一種半透明漸變的方式巧妙回歸。

值得注意的是，三個(gè)虛擬按鍵以三大基本形（三角形、圓形和矩形）代替了原本臃腫復(fù)雜的線性圖標(biāo)，不僅視覺上更簡(jiǎn)潔，也象征著Material Design的邏輯之美。

移動(dòng)端的風(fēng)格至此基本已經(jīng)固定，后面版本的一些細(xì)節(jié)改動(dòng)不再贅述了，現(xiàn)在我們把注意力切換到PC端。

2. 美洲豹

O?S X10.5-Leopard（美洲豹）花了兩年才在2007年10月正式公布（大部分人手都去搞iPhone了），但是驚艷的GUI讓人們意識(shí)到等待都是值得的。

Leopard依然繼承了經(jīng)典的Aqua風(fēng)格，圖標(biāo)部分也和同年發(fā)布的iPhone1一樣，加入了更多的高光細(xì)節(jié)。并且dock欄加入了經(jīng)典的倒影設(shè)計(jì)，看上去猶如一張精致的玻璃展臺(tái)。

四、生不逢時(shí)的Vista

2001年的xp雖備受好評(píng)，但是它的GUI在同時(shí)代的蘋果面前就是個(gè)渣渣，微軟也深知這一點(diǎn)，在xp發(fā)布后花了幾乎6年時(shí)間痛定思痛厚積薄發(fā)，直到17年1月，微軟放出了大招——Vista。

Vista引入了全新的Aero設(shè)計(jì)語(yǔ)言——首字母分別代表了Authentic（真實(shí)）、Energetic（動(dòng)感）、Reflective（反射）及Open（開闊）。

GUI首次運(yùn)用了大量的磨砂玻璃、實(shí)時(shí)動(dòng)畫、實(shí)時(shí)縮略圖。光圖標(biāo)分辨率就從xp的48*48猛增到256*256，足足五倍的像素！圖標(biāo)中恰到好吃的高光、陰影和反光讓界面變得美輪美奐。論界面的視覺，足以媲美同年蘋果發(fā)布的Leopard。

然鵝，這個(gè)大招放得太早了。微軟本想靠著發(fā)財(cái)?shù)腣ista，成了后世步子邁太大扯到蛋的教科書典型案例。

當(dāng)時(shí)絕大部分用戶的渣機(jī)電腦配置依然停留在XP時(shí)代，自然帶不動(dòng)如此華美而耗能的操作系統(tǒng)，加上Vista被人詬病的兼容性問(wèn)題，導(dǎo)致它發(fā)布不久便收到了大量的差評(píng)，甚至發(fā)生大量vista的抵制活動(dòng)。

vista雖“生不逢時(shí)”，但是它代表了微軟擬物風(fēng)格的至高點(diǎn)，并且也有效得促（bi）進(jìn)（po）了電腦硬件的極速發(fā)展。

五、Windows7

Vista所出現(xiàn)的種種問(wèn)題迫使微軟在發(fā)布后不到3年的時(shí)間推出了win7（2009年），性能兼容性的優(yōu)化以及硬件廠商的被迫升級(jí)，讓win7成了微軟的救命稻草。在傳承了Aero大多數(shù)優(yōu)點(diǎn)的同時(shí)，任務(wù)欄采取了類似Mac dock欄的樣式，以程序的圖標(biāo)代替臃腫的圓角矩形按鈕。

這個(gè)版本其實(shí)更像是vista的迭代升級(jí)，但是“Bad Vista”已經(jīng)成功得給用戶留下了難以磨滅的心理陰影，為了拉回用戶，微軟將其包裝成了全新的win7，并再次成功搶占了市場(chǎng)。

六、劍走偏鋒的Windows8

最早的扁平化設(shè)計(jì)其實(shí)不是iOS7，而是我們的微軟。別驚訝，我們只是很少用它，因?yàn)椤?/p>

太特么難用了。

它就是微軟引以為豪的設(shè)計(jì)語(yǔ)言——Metro（Modern UI），也就是我們win8里那個(gè)深惡痛絕的開始菜單。

Metro首次定義了扁平化的概念，它最大的特點(diǎn)是：將每個(gè)程序都設(shè)計(jì)成如同地鐵標(biāo)志牌一般的磁貼（純色大方塊兒），在全屏的開始菜單中類瀑布流式橫向排列，并且可以實(shí)時(shí)左右滑動(dòng)。

這個(gè)語(yǔ)言原本旨在提升自家觸屏設(shè)備的用戶體驗(yàn)，比如wp7、xbox360乃至平板，后來(lái)被運(yùn)用到了2012年發(fā)布的win8中。但顯然，微軟忽略了占據(jù)絕對(duì)數(shù)量的非觸屏設(shè)備用戶的體驗(yàn)，win8一經(jīng)發(fā)布就招致了大量差評(píng)。

微軟急于擺脫蘋果的陰影去“改變世界”，企圖用全新的扁平風(fēng)格抗衡全民擬物時(shí)代，只是他又一次邁大了步子。

metro中的所有圖標(biāo)都被一巴掌拍扁，這種極度扁平風(fēng)格讓用戶覺得過(guò)分簡(jiǎn)單無(wú)趣，同時(shí)，為觸屏設(shè)備設(shè)計(jì)的初衷導(dǎo)致非觸屏設(shè)備下的交互體驗(yàn)也大打折扣（pc上開始菜單和傳統(tǒng)桌面的切換完全兩種風(fēng)格，嚴(yán)重的割裂感會(huì)讓你發(fā)飆的），這使得win8又一次淪為繼vista后被用戶們口誅筆伐的對(duì)象。

Metro意為地鐵，它有個(gè)很先進(jìn)的理念——“galance and go”（瞥一眼就走）——讓用戶使用時(shí)猶如看到地鐵指示牌一樣，無(wú)需思考，看一眼就迅速交互，本質(zhì)是舍掉多余的形式，強(qiáng)調(diào)信息本身（類似包豪斯的形式追隨功能），在擬物流行的那個(gè)時(shí)代算是非常超前的理念了。

七、OS X 10.10-Yosemite

繼iOS7發(fā)布后，蘋果緊接著在2014年6月發(fā)布了最新的Yosemite（優(yōu)勝美地）?？梢钥吹?，蘋果正在努力得將桌面端和移動(dòng)端的GUI進(jìn)行統(tǒng)一，很多精致的擬物圖標(biāo)也被扁平化，圖標(biāo)顏色的飽和度也被整體調(diào)高。展臺(tái)一般的dock也被改為了簡(jiǎn)單的毛玻璃背景，運(yùn)行中的應(yīng)用也由以往的發(fā)光的小光標(biāo)簡(jiǎn)化為小黑點(diǎn)。

值得注意的是，這個(gè)版本并不像iPhone那樣大刀闊斧得砍掉所有擬物，相比10.9，一些圖標(biāo)依舊保留了擬物風(fēng)格，可能是避免用戶在大屏下對(duì)扁平風(fēng)格的視覺疲勞，也可能是為了照顧一部分老用戶。

八、Windows10

2015年7月，微軟發(fā)布了win10，它算是七代和八代的融合升級(jí)版本，不僅回歸了win7中的傳統(tǒng)開始菜單，同時(shí)巧妙得和metro語(yǔ)言相結(jié)合。

放置于菜單中的磁貼，由于被大幅縮小而顯著降低了win8環(huán)境下的笨重呆板感，雙向滿足了觸屏用戶和非觸屏用戶的需求。同時(shí)，aero中的“毛玻璃”效果也以一種更簡(jiǎn)單的樣式回歸。

但是！融合所導(dǎo)致的結(jié)果就是，win10幾乎像個(gè)沒有自己特點(diǎn)的混血兒，直到Build 2017開發(fā)者大會(huì)上微軟自產(chǎn)語(yǔ)言——Fluent Design的發(fā)布！

Fluent Design為設(shè)計(jì)引入了五大元素——光感、深度、動(dòng)效、材質(zhì)、縮放。它的核心理念同樣是將現(xiàn)實(shí)世界搬到屏幕中，只不過(guò)相比Material Design，它這次做得更絕，很多我們?cè)谟螒蛑胁拍芤姷降男Ч▽?shí)時(shí)光照渲染、三維空間）都被微軟憑借算法的優(yōu)勢(shì)直接實(shí)現(xiàn)在了UI中！

應(yīng)用Fluent Design語(yǔ)言的產(chǎn)品中，最廣為人知的應(yīng)該算是微軟自家的office 365圖標(biāo)了， 微軟汲取了win8的教訓(xùn)，把過(guò)于扁平的風(fēng)格往后挪了一步，每個(gè)圖標(biāo)的同類色階梯漸變闡述了應(yīng)用自身的屬性，也提供了更豐富視覺層次，結(jié)合FD的實(shí)時(shí)光感、動(dòng)效等語(yǔ)言，讓這些圖標(biāo)擁有了別致的現(xiàn)代之美。

而在2020年全球開發(fā)者大會(huì)（WWDC）上，蘋果正式發(fā)布了Big sur操作系統(tǒng)， 全面喚新的輕量3D式icon，也寓意著擬物風(fēng)格以另一種形式——3D風(fēng)格而回暖。

輕量3D風(fēng)格逼真的光影和質(zhì)感細(xì)節(jié)，大幅提升了畫面的表現(xiàn)力，既降低了擬物時(shí)期不自然的感覺、又比扁平風(fēng)格多出更多令人回味的設(shè)計(jì)感。

圖標(biāo)發(fā)展了近40年，從一開始樸素的黑白像素，OS X中精美絕倫的擬物，到如今簡(jiǎn)潔高效的扁平，以及兩大設(shè)計(jì)語(yǔ)言發(fā)布后的再“擬物”，每一次的推陳出新雖褒貶不一，但是值得確認(rèn)的是，圖標(biāo)并非是為了設(shè)計(jì)而設(shè)計(jì)，而是根據(jù)對(duì)應(yīng)的需求采取對(duì)應(yīng)的形式。功能、裝飾、線性、面性。。每一種圖標(biāo)都有它自己的特點(diǎn)和應(yīng)用場(chǎng)景。

九、后記

想當(dāng)年，微軟像個(gè)思想超前、活躍，但是再怎么努力卻怎么也趕不上蘋果學(xué)霸的學(xué)渣。而后來(lái)的轉(zhuǎn)校生——安卓，雖然是個(gè)沒啥天賦的工科男，但是有強(qiáng)大的谷歌老爸撐腰和調(diào)教，也有了不錯(cuò)的成就。

微軟不想再被他們按在地上摩擦，他痛定思痛，吭哧吭哧得埋頭苦學(xué)，終于有一天，他學(xué)有所成！甚至還有反超的趨勢(shì)？！究竟今后微軟能否逆風(fēng)翻盤？一切讓我們拭目以待！

我是設(shè)計(jì)師Andrew，我們下期見。

參考資料：

[1]wikipedia

[2]https://historyoficons.com/.

[3]iOS第十個(gè)年頭，你還記得主屏上那些圖標(biāo)以前的樣子嗎？MakicLin.

[4]Windows Vista：寫在Windows XP退出歷史之時(shí)，由高博.

[5]Win系統(tǒng) – 如何評(píng)價(jià)Vista在PC史上的歷史地位？Lux_Sun.

[6]http://zwkufo.blog.163.com/blog/static/2588251201211311143818/?suggestedreading&wumii.

[7]iOS系統(tǒng)發(fā)展史：從未停止的“創(chuàng)新”之路，尤靜.

[8]Fluent Design System, microsoft.

[9]MacOS圖形界面發(fā)展簡(jiǎn)史——從荒蠻走向現(xiàn)代，zzyc.

#專欄作家#

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

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

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