扁平化風(fēng)格在手機UI設(shè)計中的應(yīng)用

孫明?！∽T昊祥

摘要：

扁平化設(shè)計是近年來界面設(shè)計中廣泛運用的一種新的設(shè)計風(fēng)格。本文以手機軟件界面設(shè)計方面的認(rèn)知規(guī)律為基礎(chǔ)，從用戶與界面之間的交互關(guān)系著眼，探討如何使扁平化風(fēng)格和手機交互界面設(shè)計研究緊密結(jié)合起來，從而設(shè)計出既符合當(dāng)代審美潮流，又符合人機交互式體驗的產(chǎn)品。

關(guān)鍵詞：

扁平化 人機交互 界面設(shè)計

隨著科學(xué)技術(shù)的不斷發(fā)展，手機不再像傳統(tǒng)時期那樣，僅僅用來通訊和短信互聯(lián)，現(xiàn)今的手機早已擺脫了傳統(tǒng)時期的單一模式，逐步向著多功能使用方向發(fā)展，現(xiàn)今的手機能滿足人們對于社交、娛樂、學(xué)習(xí)等多方面的需求，同時現(xiàn)今的智能手機的觸屏設(shè)計替代傳統(tǒng)手機的按鍵模式，UI界面變得愈發(fā)的豐富，各種各樣的圖標(biāo)設(shè)計也愈發(fā)的吸引人們的眼球，人性化的設(shè)計為智能手機的發(fā)展迎來了更多的好口碑，為后續(xù)的不斷發(fā)展打下了堅實的基礎(chǔ)。

一、智能手機UI界面設(shè)計

所謂的UI包含有UI交互、UI界面、UI圖標(biāo)三大塊，是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。作為一個軟件產(chǎn)品，往往給人的第一印象就會決定人們對它的使用頻率和接受能力。這里面的第一印象就是說UI界面在設(shè)計上要緊跟現(xiàn)今人的時尚眼光，界面設(shè)計要符合現(xiàn)今人們的審美觀，同時還應(yīng)該兼具方便快捷、賞心悅目的特性。由于這種要求的出現(xiàn)，就不僅僅指的是要有高超的界面設(shè)計技術(shù)，還要求作為界面設(shè)計者要有敏銳的洞察力和審美能力，使得人機在相互聯(lián)系的時候，能夠通過界面之間的信息傳遞來減少用戶的記憶負(fù)擔(dān)。

二、扁平化風(fēng)格

從2010年10月，微軟公司正式發(fā)布了智能手機操作系統(tǒng)Windows Phone，同時將谷歌的Android和蘋果的IOS列為主要競爭對手之時起，扁平化設(shè)計就開始逐漸進入我們的眼球。近年來，扁平化這個詞的出現(xiàn)頻率越來越高，已經(jīng)成為了一個受矚目的社會熱點，對移動設(shè)備界面設(shè)計甚至整個設(shè)計領(lǐng)域都有著巨大的影響。

扁平化設(shè)計（flat design），又稱“零3D屬性的設(shè)計”，是近年來視覺傳達設(shè)計領(lǐng)域出現(xiàn)的一種新的設(shè)計風(fēng)格，是相對于“擬物化”的一種設(shè)計理念。它的核心意義是：去除冗余、厚重和繁雜的裝飾效果。而具體表現(xiàn)在去掉了多余的透視、紋理、漸變以及能做出3D效果的元素，這樣可以讓“信息”本身重新作為核心被凸顯出來。同時在設(shè)計元素上，則強調(diào)了抽象、極簡和符號化。這種崇尚簡約、平面化的表現(xiàn)形式，更易為現(xiàn)代快節(jié)奏生活中的人們欣賞和接受。

對于設(shè)計師而言，提高用戶體驗是一切設(shè)計的出發(fā)點。扁平化風(fēng)格已經(jīng)成了當(dāng)下最流行的界面設(shè)計風(fēng)格，如何在保證用戶體驗的前提下，又達到視覺上的簡潔、清晰，是值得當(dāng)代設(shè)計師思考的問題。

三、UI設(shè)計中的“扁平化”

1.從“平面化”到“擬物化”再到“扁平化”

界面設(shè)計起源于1970年代末，最開始是以一種無裝飾的“平面化”風(fēng)格出現(xiàn)，之后開始向“擬物化”演變，所謂擬物化（Skeuomorphism），原本是希臘詞匯，在wikipedia里是這樣解釋的：“擬物化是指對象保留了舊時特質(zhì)的裝飾性元素，這些元素對于當(dāng)前對象的功用已不再必要?！睌M物化曾一度在材料應(yīng)用領(lǐng)域廣泛使用，比如人造革，仿木紋的塑料地膠，都屬于擬物化。當(dāng)擬物化風(fēng)格逐步在界面設(shè)計領(lǐng)域占據(jù)主導(dǎo)地位后，似乎逐步陷入一種怪圈。眾多設(shè)計師投入過多精力到諸如反復(fù)修整皮革背景紋理或反復(fù)調(diào)整投影角度的工作中，反而忽略了交互行為本身。擬物化風(fēng)格在主宰界面設(shè)計多年之后，大眾也逐漸對其從最初的震撼吸引變?yōu)榱?xí)以為常，甚至審美疲勞。風(fēng)格潮流的輪回至此，將扁平化設(shè)計風(fēng)格推到了風(fēng)口浪尖。2013年的WWDO大會上，IOS7系統(tǒng)的發(fā)布引起了人們的熱議，雖然此前“擬物化”圖標(biāo)一直是IOS的標(biāo)志，但扁平化的IOS7似乎更受各大設(shè)計者的青睞。

2.“扁平化”在UI設(shè)計中的表現(xiàn)

（1）簡約的圖形

扁平化設(shè)計中僅使用簡單的形狀，放棄不必要的裝飾效果，不再使用高光、紋理、材質(zhì)、陰影等擬物化的視覺元素。基本形多由幾何形與幾何形、或曲直線條與幾何形組合而成，如放大鏡、書本、指南針等，圖形全部采用最簡練的方式表現(xiàn)，圓形為底、線條簡潔、圖形高度凝練概括，裝飾性幾乎為零。當(dāng)然越是看似簡單的圖形設(shè)計起來越有難度，這種高度概括的表現(xiàn)形式對設(shè)計師的專業(yè)要求非常高，它不僅要提煉事物的圖形特點，還要放棄多余的裝飾，突出主題，讓使用者對其內(nèi)容一目了然，減少人們接受、適應(yīng)信息時花費的時間和精力。

（2）鮮活的色彩

任何設(shè)計都離不開色彩，在放棄了一切不必要的裝飾之后，只留下形狀和色彩，所以色彩的設(shè)計在扁平化設(shè)計中就變得尤為重要。扁平化設(shè)計都有個共同的特點，色彩鮮艷、明亮，通過這個方面來增強圖標(biāo)的視覺沖擊力。在其風(fēng)格的作品中，色調(diào)層次很豐富，非常講究色彩之間的和諧搭配，顏色搭配溫和協(xié)調(diào)。扁平化設(shè)計多用色塊來表現(xiàn)各種關(guān)系，單純的顏色配合幾何形的塊面，讓人看上去干凈清晰，一目了然。

（3）合理的排版

在扁平化設(shè)計中的視覺元素都相對簡單自然，那么它的字體與排版的匹配，應(yīng)該與整體界面風(fēng)格相一致。所以在扁平化設(shè)計中，盡量不要用生僻、高度裝飾的字體，那樣界面看起來就會不倫不類。

此外，扁平化設(shè)計是由自然和簡約的理念形成設(shè)計風(fēng)格，避免l了過多的零碎出現(xiàn)在整個界面中?？紤]到手機分辨率與屏幕的大小，簡單的顏色和文本的編排就已經(jīng)足夠體現(xiàn)產(chǎn)品風(fēng)格了。

四、從用戶體驗的角度分析扁平化的特點及其影響

手機界面設(shè)計趨于扁平化，實質(zhì)上是產(chǎn)品設(shè)計從“物本”向“人本”回歸的一個重要體現(xiàn)。具體而言，扁平化思想應(yīng)用于手機界面設(shè)計的優(yōu)勢主要體現(xiàn)在信息訪問的開放性以及快捷性2個方面，開放性有利于避免用戶在信息查詢過程中出現(xiàn)迷航的情況，快捷性則有效提高信息訪問的效率，幫助用戶省時省力。

（1）信息訪問效率高

由于扁平化設(shè)計主要以單純的矢量風(fēng)格圖形表示，對像素精度要求沒有擬物化那么高，因此在程序運行的過程中，速度較快，圖片加載率較高，用戶界面的適應(yīng)度較大，系統(tǒng)運行更為流暢，從而使用戶的操作體驗得到提高。在執(zhí)行同樣的命令時，扁平化的界面設(shè)計可以縮短用戶的等待時間，這將極大成都的影響用戶對該手機APP的滿意度。

（2）布局明確，滿足用戶的需求

簡潔樸實的扁平化設(shè)計，可以更直接更清晰地為用戶展現(xiàn)出產(chǎn)品所要傳達的關(guān)鍵信息。扁平化的界面突出重要信息，弱化次要部分甚至隱藏在下拉菜單中，通過簡潔的線條和色彩搭配，簡單的信息布局，使用戶更方便的瀏覽界面，能夠?qū)θ中畔⑦M行觀察，從而提高用戶的滿意度。

5.結(jié)語

隨著生活水平的不斷提高，人們對于智能手機的使用情況也在逐漸向一人一機的使用模式轉(zhuǎn)變，正是由于此需求的出現(xiàn)，手機UI界面的設(shè)計就應(yīng)該更符合時代的發(fā)展，簡潔、便捷、舒適、美觀早已成為了現(xiàn)今智能手機UI界面在設(shè)計上的趨勢。扁平化手機界面設(shè)計憑借信息訪問效率高、布局明確，滿足用戶的需求等優(yōu)勢，較好的符合了用戶與產(chǎn)品雙方面的要求。在以用戶為中心的設(shè)計思潮中，扁平化的界面設(shè)計能夠較好的契合手機用戶需求，已經(jīng)成為移動設(shè)備界面設(shè)計之趨。在未來的手機ul設(shè)計中，扁平化的思想將會搭載更加多樣化的交互技術(shù)呈現(xiàn)在用戶面前，為用戶與信息之間搭建起和諧互通的橋梁。endprint