編輯導語：隨著科技的發展，移動網際網路在發生翻天覆地的變化。如今，無論是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. 美洲豹

OS 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協議。