淺析扁平化互聯(lián)網(wǎng)界面設(shè)計的特點

周黎鈴

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

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

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

1 色彩設(shè)計分析

1.1 單色漸變配色

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

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

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

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

2 字體設(shè)計分析

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

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

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

2.2 纖細感的字體

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

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

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

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

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

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

3.2 磨砂感的圖像處理

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

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

參考文獻：

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

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

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

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