周黎鈴

摘 要：隨著扁平化風(fēng)格互聯(lián)網(wǎng)產(chǎn)品的相繼推出，扁平化設(shè)計(jì)成為互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)中的熱潮。在日新月異的互聯(lián)網(wǎng)大背景下，如何通過完善用戶體驗(yàn)，讓扁平化設(shè)計(jì)更好地滿足用戶的需求，成為當(dāng)下一個(gè)極其有意義的課題。本文從視覺體驗(yàn)角度，通過色彩、字體、圖形的特點(diǎn)分析對(duì)扁平化設(shè)計(jì)方法進(jìn)行了整合。

關(guān)鍵詞：扁平化視覺設(shè)計(jì)；互聯(lián)網(wǎng)產(chǎn)品

2013年9月，蘋果公司推出了全新的iOS7系統(tǒng)，最為直觀的便是煥然一新的視覺設(shè)計(jì)，拋棄了iOS系統(tǒng)最為經(jīng)典的“擬物化設(shè)計(jì)”，采用了圖形簡潔、色彩明快的“扁平化設(shè)計(jì)”，從此扁平化設(shè)計(jì)成為設(shè)計(jì)熱潮，并廣為人知。何為扁平化設(shè)計(jì)？首先，扁平化是一種設(shè)計(jì)風(fēng)格，是指去除擬真效果（包括給人立體錯(cuò)覺的漸變、陰影、高光、肌理、羽化等），追求簡潔的整體設(shè)計(jì)，不僅是視覺上的扁平化還包括信息層級(jí)的扁平化。在日新月異的互聯(lián)網(wǎng)大背景下，如何通過完善用戶體驗(yàn)，讓扁平化設(shè)計(jì)更好地滿足用戶的需求，成為當(dāng)下一個(gè)極其有意義的課題。本文從視覺體驗(yàn)角度，通過色彩、字體、圖形的特點(diǎn)分析對(duì)扁平化設(shè)計(jì)方法進(jìn)行了整合。

1 色彩設(shè)計(jì)分析

1.1 單色漸變配色

所謂單色漸變，就是在色相環(huán)中選取一種色相，通過改變的明度和純度來區(qū)分色彩層次。同一色相的色彩對(duì)比較弱，因此為避免單調(diào)，在扁平化的界面中，往往會(huì)用單色漸變配以某個(gè)明度的灰色作為基底色，或者選擇另一種顏色，在色彩上出現(xiàn)冷暖或明度的對(duì)比。一般單色會(huì)用在最為關(guān)鍵的頁面元素上或者文字部分。背景削減理論在單色漸變中發(fā)揮了重要作用。

單色會(huì)給人帶來單純、柔和、平靜、雅致、秩序的感受。單色配色的界面相較于多色配色的界面，視覺上顯得更加簡潔、統(tǒng)一，同時(shí)這種極簡的配色能夠通過同色相的明暗、純度的對(duì)比突出重要信息，有效地區(qū)分界面中元素的主次對(duì)比。

1.2 明度、純度相似僅改變色相的配色

設(shè)計(jì)師只要在色相環(huán)中選取相近的明度、純度，僅色相不同的色彩搭配在一起，給人以和諧感。這樣的配色分兩種情況。當(dāng)這些色彩沒有特定的形狀，在沒有強(qiáng)烈背景色的襯托的情況下會(huì)呈現(xiàn)出一種迷幻、縹緲的色彩。相同明度的色彩與光學(xué)混合有很多的共同點(diǎn)，但是大色塊明度相同的顏色并不會(huì)像光一樣融合在一起成為新的顏色，與此相反，反而會(huì)形成一種新的質(zhì)感，無明顯邊界感的色彩，仿佛有一起漂浮的錯(cuò)覺，這樣的色彩搭配有種神秘的感覺。當(dāng)這些色彩與更亮或更暗的背景色彩一起使用時(shí)，就會(huì)呈現(xiàn)出極為扁平的效果。從而達(dá)到色彩扁平感。因?yàn)槊鞫认嗨?，就缺乏了因?yàn)槊靼祵?duì)比而帶來的空間效果。各色彩元素在界面中就呈現(xiàn)出“極平”的狀態(tài)，多種明度相近的色彩一起使用雖然視覺上扁平，但界面會(huì)顯得豐富、活潑。

2 字體設(shè)計(jì)分析

2.1 現(xiàn)代感的字體

現(xiàn)代感即簡潔明快。在英文字體中，字腔寬、幾何圖形化的無襯線字體擁有現(xiàn)代氣質(zhì)。一般無襯線體的x高比襯線體來的高，且腰線均勻。無襯線體中，字腔寬的字體會(huì)給人輕松的感覺，排列在一起不會(huì)產(chǎn)生緊張的密度感，便于閱讀，不論是在單色還是花哨的背景上，都有較強(qiáng)的識(shí)別性。幾何圖形感的無襯線體線條極為簡潔，沒有任何裝飾感的字體與結(jié)構(gòu)明快的扁平化風(fēng)格界面設(shè)計(jì)是天造地設(shè)的一對(duì)，這樣的組合應(yīng)用是最為保險(xiǎn)的。除此之外英文中的一部分襯線體也頗具現(xiàn)代感，如使用細(xì)的直線作為筆畫連接處襯線的字體，雖然腰線并不均勻，但筆畫轉(zhuǎn)折和銜接處處理得非常簡練，同樣能帶給用戶現(xiàn)代化的印象。

在中文字體中，幾何感腰線均勻的無襯線體，與字面大、胸線大、幾何感襯線的襯線具有現(xiàn)代感。一般中文中的無襯線體是指黑體，在眾多的黑體中，橫豎筆畫為水平、垂直且腰線均勻的字體呈現(xiàn)出簡明的幾何感，而字面大、胸線大的黑體會(huì)給人以開放的感覺。

2.2 纖細(xì)感的字體

若將蘋果手機(jī)iOS6和iOS7中英文字體系統(tǒng)字體對(duì)比，從視覺上能直觀地感受到，新系統(tǒng)的字體除了去除斜體字體更顯現(xiàn)代感以外，變得更為纖細(xì)。

中英文的無襯線體中有一種字體，腰線有一定曲線的幅度，字體筆畫呈現(xiàn)出一種猶如女性般優(yōu)美、輕巧的感覺。這樣的英文字體x高較高、字腔寬，中文字體胸線字面大。例如，英文Arial Regular字體是經(jīng)典的無襯線體，腰線較粗且?guī)в凶兓?；NexaLight字體腰線纖細(xì)圓潤、字腔寬很有幾何感，非常適合用作大塊單色底的界面中的標(biāo)題；Swis721 Lt BT Light字體x高很高腰線也比一般的字體更為細(xì)一些，適合用作正文字體；而Microsoft Yi Baiti字體筆畫帶有一定的粗細(xì)變化，更加典雅，比較適合作為女性用戶為主的界面標(biāo)題字體。再如中文字體，蘋果公司原先使用的中文字體“黑體—簡”字體較為復(fù)古且厚重，方正蘭亭超細(xì)黑簡體胸線、字面都非常大，好似只勾畫出了字體的骨架，適合用作個(gè)性化的副標(biāo)題；思源黑體腰線比較均勻，字面很大，頗具幾何感，適合用作正文字體；方正纖黑簡體則明顯能看到腰線中的變化，包括筆畫轉(zhuǎn)折處的處理，纖細(xì)中帶有女性的優(yōu)雅，適合女性用戶為主的界面標(biāo)題字體。

3 圖形、圖像設(shè)計(jì)分析

3.1 色塊拼貼圖形與線性圖形

無邊框是扁平化設(shè)計(jì)中功能圖標(biāo)的一大特點(diǎn)，幾乎去掉了所有的描邊線條，只用色塊來交代圖形的結(jié)構(gòu)。當(dāng)不能用線條來交代結(jié)構(gòu)關(guān)系時(shí)，色彩的構(gòu)成成為此類圖形設(shè)計(jì)的主力之一。確定色調(diào)后，通過色彩的冷暖、明度對(duì)比可交代出不同面的前后、轉(zhuǎn)折關(guān)系，通過色相的改變可區(qū)分不同的部位和物體，并且前期形的提煉過程相比擬物化設(shè)計(jì)要求更高。

扁平化設(shè)計(jì)中線性圖形一般出現(xiàn)在各種欄、按鈕、輸入框等交互性控件內(nèi)，或某些應(yīng)用內(nèi)，且線條更加簡練、纖細(xì)且符號(hào)化，常常與單色背景搭配使用。在扁平化設(shè)計(jì)中為與精致的字體保持一致，線性圖形比例增加，線條更加均勻。線性的圖形通常不會(huì)單獨(dú)使用，而是與形狀相同的單色圖形一起成對(duì)使用，當(dāng)用戶點(diǎn)擊該圖形時(shí)，形狀相同的單色圖形會(huì)作為操作反饋代替線性圖形。因此，設(shè)計(jì)師在設(shè)計(jì)時(shí)不僅要考慮線性時(shí)圖形的美觀性，還必須注意“填色”后圖形的樣式，是對(duì)圖形抽象能力的雙重考驗(yàn)。

3.2 磨砂感的圖像處理

使用照片作為背景是扁平化設(shè)計(jì)中常見的一種，在不影響網(wǎng)速的情況下，適當(dāng)使用照片來做界面背景可以提升視覺效果。全屏圖片加上半透明的處理是常見的一種搭配，半透光或半透明的視覺效果給人帶來流動(dòng)性的情感體驗(yàn)的同時(shí)還能產(chǎn)生一種磨砂般的觸覺幻覺。在移動(dòng)設(shè)備中這樣的設(shè)計(jì)配合手觸的操作方式能帶來絕妙的感受。圖片的磨砂處理不僅增加了視覺美感，更重要的是它有助于信息層次和界面層次的區(qū)分。磨砂感的視覺處理其實(shí)主要是對(duì)圖片的模糊處理和圖層疊加，造成一種相片“失焦”般的視覺感受，弱化了圖片在界面中的“搶鏡”感，從而強(qiáng)調(diào)了非磨砂的信息，起到突出重點(diǎn)的作用。

磨砂處理對(duì)象一般有兩種：一種是對(duì)底圖的磨砂處理；另一種是對(duì)各種菜單、欄等提示性界面的磨砂處理。第一種主要起到突出重要信息的作用，而第二種則是區(qū)分兩個(gè)界面層次的作用。第二種的磨砂界面往往可以收縮，在網(wǎng)站中常用作鼠標(biāo)的懸停效果，而移動(dòng)端則常用于收縮性菜單欄。

參考文獻(xiàn)：

[1] 王娟.基于用戶體驗(yàn)的互聯(lián)網(wǎng)產(chǎn)品界面設(shè)計(jì)研究[D].浙江：浙江農(nóng)林大學(xué)，2012.

[2] 張雅秋.圖形界面設(shè)計(jì)的表達(dá)和解讀[D].上海：華東師范大學(xué)，2010.

[3] 馬娜娜.簡潔而不乏味——淺談扁平化界面設(shè)計(jì)[J].大眾文藝，2013（16）：137-138.

[4] 趙大羽，關(guān)東升.交互設(shè)計(jì)的藝術(shù)：iOS7擬物化到扁平化革命[M].北京：清華大學(xué)出版，2014.