編輯導語：隨著科技的發展，移動互聯網在發生翻天覆地的變化。如今，無論是PC端還是移動端，其圖標及系統都在不斷更迭與變化，更好地適應我們的使用需求。作者講述了后20年移動互聯網關于圖標變化的那些事，一起來看看。

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

這一篇，我花了5000余字來為你講述后20年的發展歷史。xp之后，各位互聯網大佬們就各種搞事情，考慮到各位的閱讀體驗，我將這片歷史長河縱分為移動端和pc端兩個方向。

廢話不多說，我們現在開始。

一、改變世界

2007年1月，有一匹黑馬，帶著“老子要一拳打十個”的狂妄之語，吊錘了世界上的所有手機，并以一己之力首創了移動互聯網時代。

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

回到視覺，iOS作為iPhone的系統，所有圖標均裁剪為同等尺寸的圓角矩形來呈現秩序之美。圖標繼續沿用了mac os中的擬物化設計（skeuomorphic design），大多數圖標以一抹弧形高光來繼承了aqua中曼妙的水晶質感。

擬物圖標以具象的隱喻，將現實世界中的邏輯帶入到智能移動設備上，精美的同時也大幅度減少人們的學習成本，幫助他們快速上手。比如iOS1中的計算器圖標，就是以迪特拉姆斯為博朗設計的計算器為原型。

在當時，蘋果的擬物潮流頗受用戶們的喜愛，直至今日，很多設計師都難以割舍，比如羅老師的堅果手機那有些復古的風格，就源自這種難以割舍的情懷。

二、后起之秀

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

Android 1.1時期的圖標和我們后面熟知的風格差距還是很大，當時依然采用了塞班時期常用的類等軸測的擬物風格。

真正的轉變是在2010年1月所發布的Android2.1，當時一同閃亮登場的還有谷歌的親兒子Nexus One。

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

三、擬物時代的落幕

2013年6月的WWDC，當蘋果首席設計師Jonathan Ive棄用了傳承12年的擬物，大刀闊斧得將iOS7所有圖標全部改造為扁平風時，輿論嘩然，一大波人都覺得向來制定標準引領潮流的蘋果變了——

居然屈服于主流審美！追隨了谷歌和微軟的扁平潮流！你不是我認識的那個蘋果了！擬物不死??！

不過嚴格來說，撇開擬物狂魔Scott Forstall的離職原因外，蘋果只是在適當的時機做了適當的轉型而已。

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

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

iOS7的圖標沒有像metro那樣簡單粗暴得拍扁，仔細觀察，其實裹上了一層淡淡的漸變，以提升視覺層次，避免過度扁平后的呆板無趣，這種風格俗稱“微漸變”風格，并被沿用至今。

值得一提的是，iOS7開始起，圖標形狀已經不是傳統的圓角矩形了，蘋果以連續、漸變式的曲率弧線來將邊角打磨得更平滑，一方面可以使圖標看上去更圓潤平滑，另一方面也為了與同一時間發布的iPhone5c的邊角工藝設計達成統一。（查閱資料后才發現這種形狀叫lame曲線，俗稱超橢圓）

1. 咸魚翻身的Android

如果把手機系統比喻成土地，那么iOS早已在自己所規劃的土地上建好了規整的建筑，而以工程師們為主導的Android則是一片無人管理的荒野，任何人都可以在上面建造想要的東西。混亂和無序是Android在GUI中的代名詞。

Google為了突破這個困境，召集了所有設計師進行每個產品的Redesign尋找共同的語言。直到2014年的Google I/O大會所發布的Material Design，成功實現了Google的首次設計革命。

Material Design的核心理念就是——把現實世界帶入到手機屏幕中，不論是材質的隱喻還是真實的動效。并且它還列出了所有的組件規范，對于交互、前端和視覺來說，它絕對是值得一看的指導手冊！

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

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

移動端的風格至此基本已經固定，后面版本的一些細節改動不再贅述了，現在我們把注意力切換到PC端。

2. 美洲豹

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

Leopard依然繼承了經典的Aqua風格，圖標部分也和同年發布的iPhone1一樣，加入了更多的高光細節。并且dock欄加入了經典的倒影設計，看上去猶如一張精致的玻璃展臺。

四、生不逢時的Vista

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

Vista引入了全新的Aero設計語言——首字母分別代表了Authentic（真實）、Energetic（動感）、Reflective（反射）及Open（開闊）。

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

然鵝，這個大招放得太早了。微軟本想靠著發財的Vista，成了后世步子邁太大扯到蛋的教科書典型案例。

當時絕大部分用戶的渣機電腦配置依然停留在XP時代，自然帶不動如此華美而耗能的操作系統，加上Vista被人詬病的兼容性問題，導致它發布不久便收到了大量的差評，甚至發生大量vista的抵制活動。

vista雖“生不逢時”，但是它代表了微軟擬物風格的至高點，并且也有效得促（bi）進（po）了電腦硬件的極速發展。

五、Windows7

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

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

六、劍走偏鋒的Windows8

最早的扁平化設計其實不是iOS7，而是我們的微軟。別驚訝，我們只是很少用它，因為——

太特么難用了。

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

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

這個語言原本旨在提升自家觸屏設備的用戶體驗，比如wp7、xbox360乃至平板，后來被運用到了2012年發布的win8中。但顯然，微軟忽略了占據絕對數量的非觸屏設備用戶的體驗，win8一經發布就招致了大量差評。

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

metro中的所有圖標都被一巴掌拍扁，這種極度扁平風格讓用戶覺得過分簡單無趣，同時，為觸屏設備設計的初衷導致非觸屏設備下的交互體驗也大打折扣（pc上開始菜單和傳統桌面的切換完全兩種風格，嚴重的割裂感會讓你發飆的），這使得win8又一次淪為繼vista后被用戶們口誅筆伐的對象。

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

七、OS X 10.10-Yosemite

繼iOS7發布后，蘋果緊接著在2014年6月發布了最新的Yosemite（優勝美地）?？梢钥吹?，蘋果正在努力得將桌面端和移動端的GUI進行統一，很多精致的擬物圖標也被扁平化，圖標顏色的飽和度也被整體調高。展臺一般的dock也被改為了簡單的毛玻璃背景，運行中的應用也由以往的發光的小光標簡化為小黑點。

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

八、Windows10

2015年7月，微軟發布了win10，它算是七代和八代的融合升級版本，不僅回歸了win7中的傳統開始菜單，同時巧妙得和metro語言相結合。

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

但是！融合所導致的結果就是，win10幾乎像個沒有自己特點的混血兒，直到Build 2017開發者大會上微軟自產語言——Fluent Design的發布！

Fluent Design為設計引入了五大元素——光感、深度、動效、材質、縮放。它的核心理念同樣是將現實世界搬到屏幕中，只不過相比Material Design，它這次做得更絕，很多我們在游戲中才能見到的效果（實時光照渲染、三維空間）都被微軟憑借算法的優勢直接實現在了UI中！

應用Fluent Design語言的產品中，最廣為人知的應該算是微軟自家的office 365圖標了， 微軟汲取了win8的教訓，把過于扁平的風格往后挪了一步，每個圖標的同類色階梯漸變闡述了應用自身的屬性，也提供了更豐富視覺層次，結合FD的實時光感、動效等語言，讓這些圖標擁有了別致的現代之美。

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

輕量3D風格逼真的光影和質感細節，大幅提升了畫面的表現力，既降低了擬物時期不自然的感覺、又比扁平風格多出更多令人回味的設計感。

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

九、后記

想當年，微軟像個思想超前、活躍，但是再怎么努力卻怎么也趕不上蘋果學霸的學渣。而后來的轉校生——安卓，雖然是個沒啥天賦的工科男，但是有強大的谷歌老爸撐腰和調教，也有了不錯的成就。

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

我是設計師Andrew，我們下期見。

參考資料：

[1]wikipedia

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

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

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

[5]Win系統 – 如何評價Vista在PC史上的歷史地位？Lux_Sun.

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

[7]iOS系統發展史：從未停止的“創新”之路，尤靜.

[8]Fluent Design System, microsoft.

[9]MacOS圖形界面發展簡史——從荒蠻走向現代，zzyc.

#專欄作家#

Andrewchen；微信公眾號：轉行人的設計筆記，人人都是產品經理專欄作家。中科院碩士自學轉行，擅長通過文字幫助年輕設計師成長和提效。延遲滿足、長期主義。

本文原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于CC0協議。