扁平化設(shè)計(jì)在UI設(shè)計(jì)中的運(yùn)用方法

沈強(qiáng)

摘要：近年來的界面設(shè)計(jì)風(fēng)格在不斷變化，設(shè)計(jì)師們的個(gè)人喜好和傾向性以及網(wǎng)頁設(shè)計(jì)趨勢方面的話題一直爭論不休。扁平化設(shè)計(jì)無疑是當(dāng)前討論最多、最火的設(shè)計(jì)形式，自ios7面世以來，更是將扁平化設(shè)計(jì)的討論推向風(fēng)口浪尖。生活中處處可見扁平化設(shè)計(jì)作品，比如蘋果手機(jī)，采用棱角分明的線條，加上蘋果的部分應(yīng)用界面，單色鮮明的對比，非常大氣。扁平化設(shè)計(jì)為網(wǎng)站設(shè)計(jì)注入了新的活力，打開了新的格局。因?yàn)樵O(shè)計(jì)元素簡約、直觀，從很大程度上提高了網(wǎng)站的加載速度，使其收縮彈性也具有絕對優(yōu)勢。不僅如此，設(shè)備屏幕的分辨率效果也在不斷提高，這就要求圖案應(yīng)向簡潔明快方向發(fā)展，直觀簡約的圖形與文字在設(shè)計(jì)中可以節(jié)省不少時(shí)間和精力。時(shí)至當(dāng)前的網(wǎng)站設(shè)計(jì)領(lǐng)域，扁平化設(shè)計(jì)的概念已經(jīng)家喻戶曉。隨著設(shè)計(jì)行業(yè)的不斷發(fā)展，扁平化設(shè)計(jì)已搖身一變成為時(shí)代的新寵，成為新時(shí)期設(shè)計(jì)風(fēng)潮的引領(lǐng)者。本文簡析了扁平化設(shè)計(jì)與UI設(shè)計(jì)的概述，探究了扁平化設(shè)計(jì)的優(yōu)勢，并指出了扁平化設(shè)計(jì)在UI設(shè)計(jì)中的運(yùn)用方法。

關(guān)鍵詞：扁平化設(shè)計(jì) UI設(shè)計(jì) 特點(diǎn) 運(yùn)用方法

中圖分類號：J0-05 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號：1008-3359（2017）14-0157-03

提到扁平化設(shè)計(jì)，就不能回避擬物化設(shè)計(jì)。扁平化設(shè)計(jì)與擬物化設(shè)計(jì)的不同之處在于其不去著力制造出透視感的效果，只憑借概念性、簡約、象征性的設(shè)計(jì)語言進(jìn)行呈現(xiàn)。扁平化設(shè)計(jì)是一種簡約的UI設(shè)計(jì)理念，被廣泛應(yīng)用于圖形和用戶界面上。在圖形媒介，例如海報(bào)、藝術(shù)作品、指導(dǎo)文檔、各類出版物等方面尤為常用。扁平化界面干凈利落，色塊形狀規(guī)則，字體清晰、一目了然，頗具現(xiàn)代風(fēng)韻，給人留下無限的想象空間。這種設(shè)計(jì)把交互的重點(diǎn)放在了功能本身的應(yīng)用方面，因此繁雜的界面與不必要的交互因沒有了存在的價(jià)值而被淘汰。扁平化設(shè)計(jì)強(qiáng)調(diào)對于三維效果圖像元素使用的最小化，包括陰影、漸變和紋理的弱化，使畫面看起來顯得更加平滑，信息處理的效率也會(huì)更高，同時(shí)可以提升網(wǎng)頁的性能。扁平化設(shè)計(jì)的特殊性在于其層次與其它的元素排列工整，且不會(huì)出現(xiàn)交叉，前后景畫面、控制區(qū)、字體等不存在明顯的分界。扁平化設(shè)計(jì)之所以受到大家的青睞，不僅在于其明朗的層次結(jié)構(gòu)，也和它清晰的元素布局分不開，因此在用戶解讀產(chǎn)品和交互的過程中，扁平化設(shè)計(jì)的作用不容小視。時(shí)至今日，扁平化設(shè)計(jì)已受到了諸多網(wǎng)站的擁護(hù)，并且這一現(xiàn)象還呈現(xiàn)出向App與移動(dòng)設(shè)備蔓延的趨勢。如果屏幕不大，也沒有名目繁多的按鈕與選項(xiàng)，扁平化設(shè)計(jì)就得以大顯身手了。不過，簡單的元素并不等同于不費(fèi)吹灰之力就能完成設(shè)計(jì)，事實(shí)上，扁平化設(shè)計(jì)同其他設(shè)計(jì)理念一樣，都屬于復(fù)雜的系統(tǒng)工作。扁平化設(shè)計(jì)風(fēng)格在UI設(shè)計(jì)中的運(yùn)用，起初是受到了國際主義平面設(shè)計(jì)風(fēng)格、現(xiàn)代主義以及包豪斯新興風(fēng)格的影響。

一、扁平化設(shè)計(jì)與UI設(shè)計(jì)的概述

就外行人看來，“扁平化設(shè)計(jì)”不過是一種設(shè)計(jì)風(fēng)格的名稱，它化繁為簡，在各行各業(yè)都以突顯3D效果為使命的潮流下反其道而行之。簡單來講，扁平化設(shè)計(jì)就是不力求營造出常規(guī)的效果。設(shè)計(jì)師們之所以會(huì)對扁平化設(shè)計(jì)贊賞有加，主要得益于其清爽明朗的風(fēng)格，充滿了濃重的現(xiàn)代化美感，加之有助于設(shè)計(jì)師把關(guān)注點(diǎn)放在核心內(nèi)容與信息要素的呈現(xiàn)方面。通過應(yīng)用扁平化設(shè)計(jì)出來的作品即使放到十年之后依然能夠奪人眼球，因?yàn)樗尳缑婵瓷先ジ蓛舸蠓健＿@種設(shè)計(jì)方法最早出現(xiàn)于上個(gè)世紀(jì)初期，時(shí)至今日仍活躍在有關(guān)設(shè)計(jì)的各個(gè)領(lǐng)域。即便扁平化設(shè)計(jì)在網(wǎng)站設(shè)計(jì)與其他藝術(shù)品設(shè)計(jì)中的應(yīng)用由來已久，但它始終處于默默無聞、名不見經(jīng)傳的狀態(tài)，直到其在微軟與蘋果等相關(guān)產(chǎn)品設(shè)計(jì)的應(yīng)用，才逐漸從幕后走到臺(tái)前，廣為人知。然而扁平化設(shè)計(jì)也并非絕對完美，很多缺陷在數(shù)字世界表現(xiàn)得尤為明顯，諸如摒棄了不可或缺的線索要素，用戶不能確定某個(gè)按鈕有沒有接收到指令。

UI設(shè)計(jì)涵蓋了對系統(tǒng)的人機(jī)交互、操作模式、界面效果等全部建構(gòu)過程的總稱。UI設(shè)計(jì)的目的主要在于兩方面：一方面是讓系統(tǒng)向著個(gè)性化與內(nèi)涵化方向發(fā)展；另一方面是為了讓系統(tǒng)便于操作，具有明確的定位與鮮明的特點(diǎn)。

UI設(shè)計(jì)有用戶體驗(yàn)師、交互設(shè)計(jì)師、視覺設(shè)計(jì)師、前端設(shè)計(jì)師等分工。用戶體驗(yàn)師需要采取多種途徑去獲知用戶對體驗(yàn)和界面的想法、需求，然后以此為依據(jù)對所設(shè)計(jì)的項(xiàng)目進(jìn)行相應(yīng)的建構(gòu)與謀劃。每個(gè)項(xiàng)目的交互環(huán)節(jié)都由專門的交互設(shè)計(jì)師來完成，每個(gè)部分所不可或缺的產(chǎn)品原型便由此而來，并研發(fā)適應(yīng)用戶體驗(yàn)的諸多設(shè)計(jì)決策，這其中不僅涉及到任務(wù)流和單獨(dú)的頁面交互，開展評測與商討等也包括在內(nèi)。視覺設(shè)計(jì)師負(fù)責(zé)各種界面的視覺設(shè)計(jì)，根據(jù)品牌形象和用戶定位設(shè)計(jì)界面，完善交互設(shè)計(jì)，準(zhǔn)確無誤地呈現(xiàn)出視覺效果。前端設(shè)計(jì)師主要通過代碼保證產(chǎn)品功能最終實(shí)現(xiàn)，為設(shè)計(jì)提供有力保障。

二、扁平化設(shè)計(jì)的優(yōu)勢

（一）便于信息有效傳達(dá)

扁平化設(shè)計(jì)是一種視覺設(shè)計(jì)風(fēng)格，不僅適于電子產(chǎn)品的UI設(shè)計(jì)，也適用于一般的海報(bào)、冊子、宣傳畫等傳統(tǒng)印刷載體，同時(shí)廣泛應(yīng)用于2D平面設(shè)計(jì)，它更多是著重于視覺傳達(dá)，與人機(jī)交互的關(guān)系并不是那么緊密。當(dāng)今AR技術(shù)可以將虛擬物體疊加到真實(shí)世界，融合并進(jìn)行互動(dòng)。不過要以復(fù)雜的真實(shí)環(huán)境作為“背景畫布”，UI的設(shè)計(jì)則要重點(diǎn)考慮如何更好地呈現(xiàn)信息，便于瀏覽與交互。那么扁平化設(shè)計(jì)的優(yōu)勢就體現(xiàn)出來了，即：更好地呈現(xiàn)內(nèi)容和數(shù)據(jù)，避免過多視覺元素對信息辨識(shí)造成干擾，適用于透明化的效果，便于用戶觀測外部環(huán)境。

（二）布局明確

目前很多扁平化設(shè)計(jì)都是基于UI技術(shù)（如 Hololens），可以對空間進(jìn)行重構(gòu)，這也讓扁平化設(shè)計(jì)在UI設(shè)計(jì)中的運(yùn)用從傳統(tǒng)2D平面轉(zhuǎn)為3D空間，從XY軸變成了XYZ軸。這也使得虛擬的數(shù)字內(nèi)容，更多地都將以3D模型的形態(tài)呈現(xiàn)。UI的風(fēng)格可以是扁平的，但是UI當(dāng)中的內(nèi)容其實(shí)也可以立體的、擬物的、豐富的，人與內(nèi)容的交互也可以是立體的。手機(jī)產(chǎn)品設(shè)計(jì)中對于空間的應(yīng)用，能讓布局更加明確，使人們意識(shí)到扁平的設(shè)計(jì)也可以是立體的。Google的Material Design 其實(shí)早就引入了Z軸的概念，將整個(gè)場景立體化而不局限于平面。通過不同的層級位置，去影響視覺的顯示效果。

（三）滿足用戶需求

不談?dòng)脩粜枨螅徽勗O(shè)計(jì)，就是閉門造車。不同的設(shè)計(jì)風(fēng)格，適用于不同的產(chǎn)品。即使是在扁平化設(shè)計(jì)大行其道的今天，還有很多應(yīng)用仍在使用擬物化設(shè)計(jì)，比如追求畫面寫實(shí)的游戲。所以說，設(shè)計(jì)風(fēng)格并不受使用設(shè)備和技術(shù)的約束，而是取決于應(yīng)用的場景。設(shè)計(jì)風(fēng)格的明顯變化是由人們的生活方式?jīng)Q定的，因?yàn)槿藗兊纳罟?jié)奏在變快，所以希望一切變得更簡潔，就像人們的閱讀習(xí)慣變成了更喜歡微信、微博這種簡短的文字，而扁平化設(shè)計(jì)的出現(xiàn)正是迎合了大眾的這種需求。這是一個(gè)時(shí)代的要求，不管我們是否喜歡這個(gè)風(fēng)格，但它是最適合當(dāng)下人們的生活方式的。

三、扁平化設(shè)計(jì)在UI設(shè)計(jì)中的運(yùn)用方法

（一）謝絕特效

極簡的風(fēng)格決定了扁平化設(shè)計(jì)要謝絕一切特效，僅采用二維元素。從圖片框到按鈕，再到導(dǎo)航欄都干脆有力，所有元素都被“壓扁”成一個(gè)二維的符號，凡是與特效有關(guān)的構(gòu)想都要扼殺在萌芽狀態(tài)，撲朔迷離、琳瑯滿目的透視效果也通通拒絕。平鋪直敘、2D、簡約化設(shè)計(jì)風(fēng)格，是扁平化設(shè)計(jì)的心頭之好。扁平化設(shè)計(jì)概念最喜歡刪繁就簡，那些風(fēng)極一時(shí)的裝飾效果它都不屑一顧，哪怕是逼真、立體、高端大氣上檔次的3D效果也難俘獲它的芳心。一言以蔽之，就是徹底的謝絕特效，特效沒有用，一切都靠簡單。

（二）使用簡潔風(fēng)格的元素和圖標(biāo)

所有應(yīng)用扁平化設(shè)計(jì)風(fēng)格的網(wǎng)站或者手機(jī)界面，界面元素都避免浮夸、花哨，力求簡單，給人清爽、干凈、平和樸實(shí)之感。每一個(gè)按鈕或者圖標(biāo)，都是設(shè)計(jì)師們極簡思維與設(shè)計(jì)智慧的集中體現(xiàn)，但這也并不意味著具象的圖標(biāo)就變得鳳毛麟角，然而目光所及之處還是那些簡單的形狀占據(jù)了更多的視力范圍。簡潔風(fēng)格的元素和圖標(biāo)使扁平化這種設(shè)計(jì)風(fēng)格給人更具大氣的感覺，不因外形花哨而亂花漸欲迷人眼，卻也因骨骼清奇、以簡唯尚而成為設(shè)計(jì)中的一股清流。

（三）用色考究

了解配色基本原理的人都知道，一個(gè)頁面最好不要超過三種以上的顏色。顏色配的好不好、正確與否，都是用戶是否愿意停留在界面的關(guān)鍵因素，因?yàn)轭伾珪?huì)給人第一個(gè)感覺，感覺不好細(xì)節(jié)都懶得看了。為了彌補(bǔ)視覺元素的單調(diào)，扁平化設(shè)計(jì)極為重視色彩的使用，無論是從色彩的色相、明度還是純度上來看，它要求最終的呈現(xiàn)一定是舒適、有活力、充滿現(xiàn)代感和趣味性。

（四）精巧的排版

優(yōu)化排版，使用特別簡單的元素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺效果，甚至可能間接影響用戶體驗(yàn)。設(shè)計(jì)師要盡量簡化自己的設(shè)計(jì)方案，避免不必要的元素在設(shè)計(jì)中出現(xiàn)。簡單的顏色和字體就足夠了，如果還想添加點(diǎn)什么，盡量選擇簡單的圖案。雖然扁平化設(shè)計(jì)風(fēng)格去除了諸多視覺元素，但這并不意味著它令界面變得毫無美觀可言。扁平化設(shè)計(jì)對界面的排版有著極高的要求，也正因?yàn)槿绱耍瓷先ズ啙嵏蓛舻慕缑孀兊镁杉?xì)致又充滿了潮流感。

（五）極簡風(fēng)格

極簡是扁平化設(shè)計(jì)的靈魂，它是指導(dǎo)扁平化設(shè)計(jì)必須滿足以上四個(gè)要素的核心。設(shè)計(jì)者可盡情以自己的風(fēng)格來選擇其所要使用的元素、顏色和版式，但這一切的最后呈現(xiàn)必須要滿足極簡的特點(diǎn)。其實(shí)最初的數(shù)碼顯示界面都是扁平化的，后來才開始擬物化，發(fā)展至今又回歸到扁平化，這種回歸是很理性的，因?yàn)楸馄降膱D標(biāo)其實(shí)更容易識(shí)別。扁平化的回歸可以認(rèn)為是人們通過歸納總結(jié)世界后得出了“需要簡約”這個(gè)答案后的一個(gè)選擇。

四、結(jié)語

總而言之，好的設(shè)計(jì)不能只是在目光所能及的表面上下功夫，它應(yīng)該是包羅萬象、涉及到表達(dá)的途徑等多個(gè)領(lǐng)域的。不考慮風(fēng)格的因素，扁平化設(shè)計(jì)與擬物化UI設(shè)計(jì)的最初目的都指向于幫助用戶提高閱讀信息內(nèi)容的效率，使用戶體驗(yàn)的滿意度實(shí)現(xiàn)最大化。擬物化設(shè)計(jì)憑借設(shè)計(jì)元素仿照生活中實(shí)際物體的輪廓與形態(tài)，使用戶對產(chǎn)品的功能一目了然。而扁平化設(shè)計(jì)則不然，它改變了借助視覺元素傳遞信息的這一設(shè)計(jì)邏輯，把所要表達(dá)的重點(diǎn)放在內(nèi)容上面，便于用戶在短時(shí)間內(nèi)更便捷地獲取到自己所需要的信息。一切設(shè)計(jì)都要以面向客戶的具體需求為出發(fā)點(diǎn)，扁平化設(shè)計(jì)在UI設(shè)計(jì)中的應(yīng)用能夠更好地解決問題，使設(shè)計(jì)的目的從復(fù)雜轉(zhuǎn)向純粹，力爭使效率與內(nèi)容達(dá)到更好的狀態(tài)。

參考文獻(xiàn)：

[1]孫明海，譚昊祥.扁平化風(fēng)格在手機(jī)UI設(shè)計(jì)中的應(yīng)用[J].設(shè)計(jì)，2016，（07）：34-35.

[2]杜翔宇.淺談UI設(shè)計(jì)中“扁平化設(shè)計(jì)”的運(yùn)用和發(fā)展趨勢——以IOSUI為例[J].大眾文藝，2016，（19）：74-75.

[3]林陽.UI設(shè)計(jì)中扁平化理念應(yīng)用研究——?jiǎng)?chuàng)造平面功能化[J].藝術(shù)科技，2014，（01）：267.

[4]高鵬，楊正.論UI設(shè)計(jì)中的扁平化與擬物化[J].美術(shù)教育研究，2014，（10）：60.

[5]加瑜.扁平化設(shè)計(jì)風(fēng)格在標(biāo)志設(shè)計(jì)中的運(yùn)用探析[J].美術(shù)教育研究，2014，（12）：57.

[6]任冬巧，楊春燕.扁平化設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用研究[J].大眾科技，2014，（06）：4-5.