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

1、    回顧十年（2008）界面設(shè)計(jì)風(fēng)格變遷    陳可人摘 要：蘋(píng)果公司的設(shè)計(jì)一直是設(shè)計(jì)領(lǐng)域的風(fēng)向標(biāo)，ios系統(tǒng)從橫空出世到進(jìn)入第十一個(gè)年頭，是移動(dòng)互聯(lián)網(wǎng)和應(yīng)用程序蓬勃發(fā)展的十年，也是界面設(shè)計(jì)風(fēng)格變遷迭代的十年。本文將回顧過(guò)去十年ios系統(tǒng)的界面設(shè)計(jì)風(fēng)格變遷，爭(zhēng)取梳理出其界面設(shè)計(jì)逐步變遷的內(nèi)涵，并嘗試找尋一定的規(guī)律，預(yù)測(cè)未來(lái)界面設(shè)計(jì)風(fēng)格可能發(fā)展的方向。關(guān)鍵詞：ios系統(tǒng) 界面設(shè)計(jì) 風(fēng)格 變遷概括來(lái)講，過(guò)去十年ios系統(tǒng)的界面設(shè)計(jì)風(fēng)格只發(fā)生過(guò)一次顛覆性的改變2013年6月，ios7的開(kāi)發(fā)者大會(huì)上，該系統(tǒng)的界面從視覺(jué)上發(fā)生了從擬物化到扁平化的重大改變。雖然

2、這次視覺(jué)革新在最初收到不少負(fù)面的評(píng)價(jià)，事實(shí)卻是這個(gè)風(fēng)格頓時(shí)席卷了整個(gè)手機(jī)、平板電腦行業(yè)，輻射整個(gè)應(yīng)用程序行業(yè)，并一直沿用至今。一、擬物化風(fēng)格圖標(biāo)2008-2009年，我們稱(chēng)它是中國(guó)移動(dòng)互聯(lián)網(wǎng)的萌芽期，就全球范圍來(lái)看，也同樣處在初始階段，用戶接觸全新的事物，來(lái)不及多想，更多地是在被這些系統(tǒng)、應(yīng)用引導(dǎo)。2008年2月蘋(píng)果公司對(duì)外發(fā)布了sdk，邀請(qǐng)全球范圍內(nèi)的開(kāi)發(fā)者們參與到為ios系統(tǒng)開(kāi)發(fā)各種類(lèi)別的應(yīng)用程序的浩大工程中來(lái)。五個(gè)月后app store上線時(shí)，開(kāi)發(fā)者們已經(jīng)奉上了500個(gè)應(yīng)用程序?！斑@首批500個(gè)應(yīng)用程序得到了一個(gè)特殊的機(jī)會(huì)，他們可以用自己的產(chǎn)品來(lái)塑造此后數(shù)百萬(wàn)個(gè)應(yīng)用程序的設(shè)計(jì)方向和交互策

3、略”，這句話中的“設(shè)計(jì)方向”既包括對(duì)一款應(yīng)用程序的核心功能的設(shè)計(jì)，也包括它的界面設(shè)計(jì)風(fēng)格。各類(lèi)應(yīng)用程序讓人眼花繚亂，每個(gè)用戶都會(huì)根據(jù)自身興趣愛(ài)好下載不同的應(yīng)用，但是ios系統(tǒng)的自帶應(yīng)用，卻總是如約而至，它們作為系統(tǒng)不可分割的一部分，極富代表性地向我們展示了當(dāng)時(shí)最主流的界面設(shè)計(jì)風(fēng)格，移動(dòng)互聯(lián)網(wǎng)萌芽期的界面設(shè)計(jì)主流風(fēng)格正是擬物化風(fēng)格。擬物化風(fēng)格顧名思義，就是企圖從視覺(jué)形象上模擬出物質(zhì)的樣子。隨著技術(shù)進(jìn)步，后期擬物化風(fēng)格有一定延伸，我們將它稱(chēng)為寫(xiě)實(shí)擬物化風(fēng)格，它包含了模擬出物質(zhì)的真實(shí)質(zhì)感（金屬、玻璃或塑料都有其各自質(zhì)感），在延伸后風(fēng)格里，質(zhì)感的呈現(xiàn)高于形象的還原。擬物化風(fēng)格當(dāng)然不是蘋(píng)果系統(tǒng)的原創(chuàng)，實(shí)

4、際上隨著電子計(jì)算機(jī)的發(fā)展，擬物化風(fēng)格常見(jiàn)于整個(gè)windows系統(tǒng)的各個(gè)界面中。還記得windows系統(tǒng)桌面上最常見(jiàn)的計(jì)算機(jī)、垃圾桶和文件夾嗎？它從誕生之日起一直到今天，都是擬物化風(fēng)格，只是它也經(jīng)歷了從像素感到寫(xiě)實(shí)擬物的轉(zhuǎn)變。ios系統(tǒng)的應(yīng)用程序圖標(biāo)從一開(kāi)始，就采用了寫(xiě)實(shí)擬物化風(fēng)格，其中給我們留下最深刻印象的，就是它“水晶按鈕”的風(fēng)格。在最初的ios1到ios6，該系統(tǒng)將“水晶按鈕”大量地運(yùn)用到圖標(biāo)設(shè)計(jì)、提示框設(shè)計(jì)、按鈕設(shè)計(jì)等界面設(shè)計(jì)元素中。雖然推崇這種風(fēng)格，但蘋(píng)果并沒(méi)有濫用它，以系統(tǒng)應(yīng)用程序的圖標(biāo)為例，通過(guò)仔細(xì)觀察，我們能夠發(fā)現(xiàn)，蘋(píng)果嚴(yán)格按照真實(shí)生活的經(jīng)驗(yàn)把所有圖標(biāo)分為了水晶質(zhì)感類(lèi)和寫(xiě)實(shí)質(zhì)感類(lèi)

5、兩類(lèi)。水晶質(zhì)感的圖標(biāo)有：電話、信息、相冊(cè)、天氣、應(yīng)用商店、瀏覽器、郵件等等，把這些圖標(biāo)放在一起我們就會(huì)發(fā)現(xiàn)，它們?nèi)羌儓D形符號(hào)圖標(biāo)。這些圖標(biāo)都設(shè)計(jì)得特別簡(jiǎn)單，根據(jù)各自主要功能，選取一個(gè)具有代表性的圖形符號(hào)，然后再將它們統(tǒng)一質(zhì)感，形成系列。而寫(xiě)實(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ì)感上的特性。再說(shuō)說(shuō)備忘錄的圖標(biāo)設(shè)計(jì)，它是模擬現(xiàn)實(shí)生活中的本子來(lái)設(shè)計(jì)的，對(duì)比相機(jī)圖

6、標(biāo)的金屬感和玻璃感，備忘錄圖標(biāo)很好地做出了紙張和皮革的感覺(jué)，最有意思的是ios4的備忘錄圖標(biāo)上，還能看到撕去的一頁(yè)紙?jiān)诒咀由戏降难b訂處的殘留。所有水晶按鈕質(zhì)感的圖標(biāo)上，設(shè)計(jì)者都賦予它們相同的光源和弧度，一方面是讓這些圖標(biāo)變得更加晶瑩剔透，另一方面也是為了讓這些圖標(biāo)從視覺(jué)上向前突出。二、扁平化風(fēng)格圖標(biāo)2013年6月，ios系統(tǒng)從視覺(jué)上進(jìn)行了有史以來(lái)最顛覆也是最重要的一次革新扁平化設(shè)計(jì)。之前那些亮晶晶的、向前凸起的圖標(biāo)，全部扁平了下去，薄薄地貼在屏幕背景上。就像擬物化非蘋(píng)果原創(chuàng)一樣，扁平化也不是由蘋(píng)果率先應(yīng)用于界面設(shè)計(jì)當(dāng)中的。早在2006年，微軟就在其發(fā)布的便攜式播放器zune上運(yùn)用了類(lèi)似的設(shè)計(jì)，

7、并且在業(yè)內(nèi)獲得了一片好評(píng)。2008年，谷歌第一次將flat design（扁平化設(shè)計(jì)）作為一個(gè)概念提出，2012年谷歌w8的界面設(shè)計(jì)風(fēng)格整體由擬物化風(fēng)格轉(zhuǎn)變?yōu)楸馄交L(fēng)格。但蘋(píng)果卻后來(lái)居上地將扁平化風(fēng)格發(fā)揚(yáng)光大、推向主流。到底是新的風(fēng)格恰巧迎合了當(dāng)時(shí)的審美還是它主動(dòng)改變了人們的審美，又或者改變本身就是大勢(shì)所趨，并且有一天擬物化還會(huì)奪回它主流設(shè)計(jì)風(fēng)格的地位也說(shuō)不一定。從整個(gè)手機(jī)系統(tǒng)的界面設(shè)計(jì)來(lái)說(shuō)，扁平化風(fēng)格是指“更少的按鈕和選項(xiàng)”，因?yàn)檫@樣才能使得界面變得更加干凈、整潔，信息顯示更加簡(jiǎn)潔，操作起來(lái)更加簡(jiǎn)單，能帶給用戶更好地操作體驗(yàn)。在眼睛看不見(jiàn)的層面，扁平化風(fēng)格的系統(tǒng)還能達(dá)到降低能耗、延長(zhǎng)待機(jī)時(shí)間

8、和提高速度等效果。單從圖標(biāo)設(shè)計(jì)來(lái)說(shuō)，扁平化風(fēng)格主要體現(xiàn)在“去除冗余、繁雜的裝飾效果”，具體是指去掉透視、紋理、3d效果等等。以ios系統(tǒng)的日歷圖標(biāo)為例，擬物化風(fēng)格的日歷圖標(biāo)企圖模擬出生活中紙質(zhì)日歷本兒的形象，而扁平化風(fēng)格的新圖標(biāo)，只有一塊干凈的白色背景和一個(gè)英文單詞（星期幾）、一組數(shù)字（幾號(hào)）作為設(shè)計(jì)元素，卻一樣可以精準(zhǔn)傳達(dá)信息。值得注意的是，扁平化設(shè)計(jì)還有minimal design（簡(jiǎn)約設(shè)計(jì)）和honest design（誠(chéng)實(shí)設(shè)計(jì)）等不同的名稱(chēng)，它們其實(shí)都暗含了扁平化設(shè)計(jì)背后的內(nèi)核：提高效率。當(dāng)然在ios系統(tǒng)內(nèi)的這次革新，并不是一次對(duì)過(guò)去視覺(jué)風(fēng)格的否定，它甚至還是一次繼承，以設(shè)置的圖標(biāo)為例

9、，無(wú)論具體采用什么風(fēng)格的設(shè)計(jì)，它的圖形都是齒輪。但與安卓系統(tǒng)的設(shè)置不同的是，ios始終在做復(fù)雜的齒輪，因?yàn)閺囊婚_(kāi)始，這就是它特有的風(fēng)格，也讓它得以區(qū)別于其他系統(tǒng)。三、扁平化風(fēng)格圖標(biāo)的未來(lái)發(fā)展趨勢(shì)當(dāng)人們逐漸接受并沉迷于了一種設(shè)計(jì)風(fēng)格當(dāng)中之后，會(huì)發(fā)生什么？歷史告訴我們，發(fā)展、變化才是正確的答案，盡管扁平化風(fēng)格成為了當(dāng)今圖標(biāo)設(shè)計(jì)的主流風(fēng)格（截至2018年12月，僅有錘子手機(jī)的系統(tǒng)還在大量使用擬物化風(fēng)格的圖標(biāo)），但從它被廣泛使用到今天的四五年間，它也是在不斷更新的。下面三個(gè)趨勢(shì)，是近期和將來(lái)一段時(shí)間內(nèi)，ios系統(tǒng)的圖標(biāo)設(shè)計(jì)上會(huì)反復(fù)出現(xiàn)的。漸變是一種色彩表達(dá)方式，按照扁平化設(shè)計(jì)的理念，它是應(yīng)該被刪除的冗

10、余的裝飾效果，本身不具有任何意義。但是扁平化一平，就平了那么長(zhǎng)時(shí)間，人們的審美是會(huì)疲勞的，簡(jiǎn)約的設(shè)計(jì)從一開(kāi)始的“一目了然”逐漸也會(huì)讓人感到“索然無(wú)味”。所以漸變又回來(lái)了，現(xiàn)在最新的ios12系統(tǒng)的圖標(biāo)里，帶漸變背景的，占了近一半。動(dòng)態(tài)是一種顯示方式，在ios12的所有圖標(biāo)里，時(shí)鐘、日歷和設(shè)置都是動(dòng)態(tài)顯示的，雖說(shuō)是動(dòng)態(tài)顯示，但三個(gè)應(yīng)用動(dòng)的時(shí)機(jī)卻各不相同：時(shí)鐘一直動(dòng)，由于時(shí)鐘圖標(biāo)設(shè)計(jì)得就像一個(gè)表面，這個(gè)表面也由時(shí)針、分針和秒針構(gòu)成，而秒針必須一刻不停地轉(zhuǎn)動(dòng)，因此這個(gè)圖標(biāo)是一直動(dòng)的；日歷一天動(dòng)一次，每天凌晨零點(diǎn)時(shí)，日歷圖標(biāo)會(huì)顯示進(jìn)入了新的一天（如果用戶帶著手機(jī)出差去了有時(shí)差的地方，日歷的圖標(biāo)會(huì)根據(jù)gps定位突然改變顯示，這是一種特殊情況）；設(shè)置更新時(shí)轉(zhuǎn)動(dòng)。動(dòng)態(tài)的圖標(biāo)當(dāng)然會(huì)比不動(dòng)的圖標(biāo)更耗能一些，這也是這類(lèi)圖標(biāo)違背扁平化設(shè)計(jì)理念的地方，但是隨著各種技術(shù)的日新月異，新的機(jī)器的屏幕顯示和電池容量也都在進(jìn)步，像蘋(píng)果ios系統(tǒng)這樣，設(shè)計(jì)少數(shù)幾個(gè)帶動(dòng)態(tài)效果的圖標(biāo)，本身能夠給用戶一種類(lèi)似找到“彩蛋”般的感受。當(dāng)然，動(dòng)態(tài)圖標(biāo)放置幾個(gè)起代表性作用的即可，多了會(huì)讓人覺(jué)得眼花繚亂，