回顧十年（2008—2018）界面設(shè)計(jì)風(fēng)格變遷

陳可人

摘 要：蘋果公司的設(shè)計(jì)一直是設(shè)計(jì)領(lǐng)域的風(fēng)向標(biāo)，iOS系統(tǒng)從橫空出世到進(jìn)入第十一個年頭，是移動互聯(lián)網(wǎng)和應(yīng)用程序蓬勃發(fā)展的十年，也是界面設(shè)計(jì)風(fēng)格變遷迭代的十年。本文將回顧過去十年iOS系統(tǒng)的界面設(shè)計(jì)風(fēng)格變遷，爭取梳理出其界面設(shè)計(jì)逐步變遷的內(nèi)涵，并嘗試找尋一定的規(guī)律，預(yù)測未來界面設(shè)計(jì)風(fēng)格可能發(fā)展的方向。

關(guān)鍵詞：iOS系統(tǒng) 界面設(shè)計(jì) 風(fēng)格 變遷

概括來講，過去十年iOS系統(tǒng)的界面設(shè)計(jì)風(fēng)格只發(fā)生過一次顛覆性的改變——2013年6月，iOS7的開發(fā)者大會上，該系統(tǒng)的界面從視覺上發(fā)生了從擬物化到扁平化的重大改變。雖然這次視覺革新在最初收到不少負(fù)面的評價(jià)，事實(shí)卻是這個風(fēng)格頓時席卷了整個手機(jī)、平板電腦行業(yè)，輻射整個應(yīng)用程序行業(yè)，并一直沿用至今。

一、擬物化風(fēng)格圖標(biāo)

2008-2009年，我們稱它是中國移動互聯(lián)網(wǎng)的萌芽期，就全球范圍來看，也同樣處在初始階段，用戶接觸全新的事物，來不及多想，更多地是在被這些系統(tǒng)、應(yīng)用引導(dǎo)。2008年2月蘋果公司對外發(fā)布了SDK，邀請全球范圍內(nèi)的開發(fā)者們參與到為iOS系統(tǒng)開發(fā)各種類別的應(yīng)用程序的浩大工程中來。五個月后APP STORE上線時，開發(fā)者們已經(jīng)奉上了500個應(yīng)用程序。

“這首批500個應(yīng)用程序得到了一個特殊的機(jī)會，他們可以用自己的產(chǎn)品來塑造此后數(shù)百萬個應(yīng)用程序的設(shè)計(jì)方向和交互策略”，這句話中的“設(shè)計(jì)方向”既包括對一款應(yīng)用程序的核心功能的設(shè)計(jì)，也包括它的界面設(shè)計(jì)風(fēng)格。各類應(yīng)用程序讓人眼花繚亂，每個用戶都會根據(jù)自身興趣愛好下載不同的應(yīng)用，但是iOS系統(tǒng)的自帶應(yīng)用，卻總是如約而至，它們作為系統(tǒng)不可分割的一部分，極富代表性地向我們展示了當(dāng)時最主流的界面設(shè)計(jì)風(fēng)格，移動互聯(lián)網(wǎng)萌芽期的界面設(shè)計(jì)主流風(fēng)格正是擬物化風(fēng)格。

擬物化風(fēng)格顧名思義，就是企圖從視覺形象上模擬出物質(zhì)的樣子。隨著技術(shù)進(jìn)步，后期擬物化風(fēng)格有一定延伸，我們將它稱為寫實(shí)擬物化風(fēng)格，它包含了模擬出物質(zhì)的真實(shí)質(zhì)感（金屬、玻璃或塑料都有其各自質(zhì)感），在延伸后風(fēng)格里，質(zhì)感的呈現(xiàn)高于形象的還原。擬物化風(fēng)格當(dāng)然不是蘋果系統(tǒng)的原創(chuàng)，實(shí)際上隨著電子計(jì)算機(jī)的發(fā)展，擬物化風(fēng)格常見于整個WINDOWS系統(tǒng)的各個界面中。還記得WINDOWS系統(tǒng)桌面上最常見的計(jì)算機(jī)、垃圾桶和文件夾嗎？它從誕生之日起一直到今天，都是擬物化風(fēng)格，只是它也經(jīng)歷了從像素感到寫實(shí)擬物的轉(zhuǎn)變。

iOS系統(tǒng)的應(yīng)用程序圖標(biāo)從一開始，就采用了寫實(shí)擬物化風(fēng)格，其中給我們留下最深刻印象的，就是它“水晶按鈕”的風(fēng)格。在最初的iOS1到iOS6，該系統(tǒng)將“水晶按鈕”大量地運(yùn)用到圖標(biāo)設(shè)計(jì)、提示框設(shè)計(jì)、按鈕設(shè)計(jì)等界面設(shè)計(jì)元素中。雖然推崇這種風(fēng)格，但蘋果并沒有濫用它，以系統(tǒng)應(yīng)用程序的圖標(biāo)為例，通過仔細(xì)觀察，我們能夠發(fā)現(xiàn)，蘋果嚴(yán)格按照真實(shí)生活的經(jīng)驗(yàn)把所有圖標(biāo)分為了水晶質(zhì)感類和寫實(shí)質(zhì)感類兩類。水晶質(zhì)感的圖標(biāo)有：電話、信息、相冊、天氣、應(yīng)用商店、瀏覽器、郵件等等，把這些圖標(biāo)放在一起我們就會發(fā)現(xiàn)，它們?nèi)羌儓D形符號圖標(biāo)。這些圖標(biāo)都設(shè)計(jì)得特別簡單，根據(jù)各自主要功能，選取一個具有代表性的圖形符號，然后再將它們統(tǒng)一質(zhì)感，形成系列。而寫實(shí)質(zhì)感的圖標(biāo)則有：日歷、相機(jī)、地圖、備忘錄、設(shè)置等等，這些圖標(biāo)則都是局部特征圖標(biāo)。這其中非常具有代表性的，正式相機(jī)的圖標(biāo)：它選擇了現(xiàn)實(shí)當(dāng)中所有相機(jī)最具代表性的局部——鏡頭作為圖標(biāo)，根據(jù)生活經(jīng)驗(yàn)，相機(jī)的鏡頭是由玻璃制成，而機(jī)體則主要由塑料和金屬制成，最終設(shè)計(jì)的圖標(biāo)很好地如實(shí)地凸顯其質(zhì)感上的特性。再說說備忘錄的圖標(biāo)設(shè)計(jì)，它是模擬現(xiàn)實(shí)生活中的本子來設(shè)計(jì)的，對比相機(jī)圖標(biāo)的金屬感和玻璃感，備忘錄圖標(biāo)很好地做出了紙張和皮革的感覺，最有意思的是iOS4的備忘錄圖標(biāo)上，還能看到撕去的一頁紙?jiān)诒咀由戏降难b訂處的殘留。所有水晶按鈕質(zhì)感的圖標(biāo)上，設(shè)計(jì)者都賦予它們相同的光源和弧度，一方面是讓這些圖標(biāo)變得更加晶瑩剔透，另一方面也是為了讓這些圖標(biāo)從視覺上向前突出。

二、扁平化風(fēng)格圖標(biāo)

2013年6月，iOS系統(tǒng)從視覺上進(jìn)行了有史以來最顛覆也是最重要的一次革新——扁平化設(shè)計(jì)。之前那些亮晶晶的、向前凸起的圖標(biāo)，全部扁平了下去，薄薄地貼在屏幕背景上。

就像擬物化非蘋果原創(chuàng)一樣，扁平化也不是由蘋果率先應(yīng)用于界面設(shè)計(jì)當(dāng)中的。早在2006年，微軟就在其發(fā)布的便攜式播放器zune上運(yùn)用了類似的設(shè)計(jì)，并且在業(yè)內(nèi)獲得了一片好評。2008年，谷歌第一次將Flat Design（扁平化設(shè)計(jì)）作為一個概念提出，2012年谷歌W8的界面設(shè)計(jì)風(fēng)格整體由擬物化風(fēng)格轉(zhuǎn)變?yōu)楸馄交L(fēng)格。但蘋果卻后來居上地將扁平化風(fēng)格發(fā)揚(yáng)光大、推向主流。到底是新的風(fēng)格恰巧迎合了當(dāng)時的審美還是它主動改變了人們的審美，又或者改變本身就是大勢所趨，并且有一天擬物化還會奪回它主流設(shè)計(jì)風(fēng)格的地位也說不一定。

從整個手機(jī)系統(tǒng)的界面設(shè)計(jì)來說，扁平化風(fēng)格是指“更少的按鈕和選項(xiàng)”，因?yàn)檫@樣才能使得界面變得更加干凈、整潔，信息顯示更加簡潔，操作起來更加簡單，能帶給用戶更好地操作體驗(yàn)。在眼睛看不見的層面，扁平化風(fēng)格的系統(tǒng)還能達(dá)到降低能耗、延長待機(jī)時間和提高速度等效果。單從圖標(biāo)設(shè)計(jì)來說，扁平化風(fēng)格主要體現(xiàn)在“去除冗余、繁雜的裝飾效果”，具體是指去掉透視、紋理、3D效果等等。以iOS系統(tǒng)的日歷圖標(biāo)為例，擬物化風(fēng)格的日歷圖標(biāo)企圖模擬出生活中紙質(zhì)日歷本兒的形象，而扁平化風(fēng)格的新圖標(biāo)，只有一塊干凈的白色背景和一個英文單詞（星期幾）、一組數(shù)字（幾號）作為設(shè)計(jì)元素，卻一樣可以精準(zhǔn)傳達(dá)信息。值得注意的是，扁平化設(shè)計(jì)還有Minimal Design（簡約設(shè)計(jì)）和Honest Design（誠實(shí)設(shè)計(jì)）等不同的名稱，它們其實(shí)都暗含了扁平化設(shè)計(jì)背后的內(nèi)核：提高效率。

當(dāng)然在iOS系統(tǒng)內(nèi)的這次革新，并不是一次對過去視覺風(fēng)格的否定，它甚至還是一次繼承，以設(shè)置的圖標(biāo)為例，無論具體采用什么風(fēng)格的設(shè)計(jì)，它的圖形都是齒輪。但與安卓系統(tǒng)的設(shè)置不同的是，iOS始終在做復(fù)雜的齒輪，因?yàn)閺囊婚_始，這就是它特有的風(fēng)格，也讓它得以區(qū)別于其他系統(tǒng)。

三、扁平化風(fēng)格圖標(biāo)的未來發(fā)展趨勢

當(dāng)人們逐漸接受并沉迷于了一種設(shè)計(jì)風(fēng)格當(dāng)中之后，會發(fā)生什么？歷史告訴我們，發(fā)展、變化才是正確的答案，盡管扁平化風(fēng)格成為了當(dāng)今圖標(biāo)設(shè)計(jì)的主流風(fēng)格（截至2018年12月，僅有錘子手機(jī)的系統(tǒng)還在大量使用擬物化風(fēng)格的圖標(biāo)），但從它被廣泛使用到今天的四五年間，它也是在不斷更新的。下面三個趨勢，是近期和將來一段時間內(nèi)，iOS系統(tǒng)的圖標(biāo)設(shè)計(jì)上會反復(fù)出現(xiàn)的。

漸變是一種色彩表達(dá)方式，按照扁平化設(shè)計(jì)的理念，它是應(yīng)該被刪除的冗余的裝飾效果，本身不具有任何意義。但是扁平化一平，就平了那么長時間，人們的審美是會疲勞的，簡約的設(shè)計(jì)從一開始的“一目了然”逐漸也會讓人感到“索然無味”。所以漸變又回來了，現(xiàn)在最新的iOS12系統(tǒng)的圖標(biāo)里，帶漸變背景的，占了近一半。

動態(tài)是一種顯示方式，在iOS12的所有圖標(biāo)里，時鐘、日歷和設(shè)置都是動態(tài)顯示的，雖說是動態(tài)顯示，但三個應(yīng)用動的時機(jī)卻各不相同：時鐘——一直動，由于時鐘圖標(biāo)設(shè)計(jì)得就像一個表面，這個表面也由時針、分針和秒針構(gòu)成，而秒針必須一刻不停地轉(zhuǎn)動，因此這個圖標(biāo)是一直動的；日歷——一天動一次，每天凌晨零點(diǎn)時，日歷圖標(biāo)會顯示進(jìn)入了新的一天（如果用戶帶著手機(jī)出差去了有時差的地方，日歷的圖標(biāo)會根據(jù)GPS定位突然改變顯示，這是一種特殊情況）；設(shè)置——更新時轉(zhuǎn)動。

動態(tài)的圖標(biāo)當(dāng)然會比不動的圖標(biāo)更耗能一些，這也是這類圖標(biāo)違背扁平化設(shè)計(jì)理念的地方，但是隨著各種技術(shù)的日新月異，新的機(jī)器的屏幕顯示和電池容量也都在進(jìn)步，像蘋果iOS系統(tǒng)這樣，設(shè)計(jì)少數(shù)幾個帶動態(tài)效果的圖標(biāo)，本身能夠給用戶一種類似找到“彩蛋”般的感受。當(dāng)然，動態(tài)圖標(biāo)放置幾個起代表性作用的即可，多了會讓人覺得眼花繚亂，同時還會分散用戶的注意力，降低使用各個應(yīng)用程序的效率。

粗體字是隨著iOS11回歸的，一度扁平化圖標(biāo)上的數(shù)字和字母都快細(xì)得看不見了，設(shè)計(jì)者們終于還是意識到了進(jìn)行準(zhǔn)確的信息傳達(dá)的重要性。

參考文獻(xiàn)

[1] 欒玲，蘋果的品牌設(shè)計(jì)之道，機(jī)械工業(yè)出版社，2014

[2] 張小玲 主編，UI界面設(shè)計(jì)（第2版），電子工業(yè)出版社，2017