UI大牛教你解讀界面風(fēng)格

界面設(shè)計(jì)風(fēng)在不斷發(fā)展變化，扁平化和擬物化是現(xiàn)代流行的界面設(shè)計(jì)風(fēng)格，兩種風(fēng)格本身都存在著優(yōu)缺點(diǎn)，常常讓人拿來(lái)比較。設(shè)計(jì)風(fēng)格終歸只是工具，產(chǎn)品的“可用性”才是設(shè)計(jì)本身的重點(diǎn)。

什么是扁平化和擬物化 ？

扁平化設(shè)計(jì)或者說(shuō)扁平的UI風(fēng)格是當(dāng)下界面設(shè)計(jì)最受關(guān)注的發(fā)展趨勢(shì)，人們常把它拿來(lái)與擬物化風(fēng)格做比較，兩者的設(shè)計(jì)原則與風(fēng)格截然相反。 擬物化風(fēng)格，顧名思義是模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過(guò)疊加高光、紋理、材質(zhì)、陰影等效果對(duì)實(shí)物進(jìn)行再現(xiàn)，也可適當(dāng)程度變形和夸張，設(shè)計(jì)界面模擬真實(shí)物體。擬物設(shè)計(jì)會(huì)讓你第一眼就認(rèn)出這是個(gè)什么東西。

扁平化與擬物化的區(qū)別 

扁平化設(shè)計(jì)給人的感覺(jué)是簡(jiǎn)潔、明了，讓看久了擬物化設(shè)計(jì)的用戶有了煥然一新的感覺(jué)，扁平化設(shè)計(jì)更突出主要內(nèi)容，減弱簡(jiǎn)便、高光等擬真效果對(duì)用戶視覺(jué)感知的干擾，讓用戶更加專(zhuān)注于內(nèi)容本身，從用戶體驗(yàn)上來(lái)說(shuō)也更為簡(jiǎn)單易用。

認(rèn)知和學(xué)習(xí)成本低是擬物化設(shè)計(jì)的一大優(yōu)點(diǎn)，擬物化設(shè)計(jì)展示了識(shí)別和熟悉的好處，其引入用戶在現(xiàn)實(shí)世界中使用的熟悉的對(duì)象作為用戶界面控制的元素，能讓用戶很容易地正確推斷界面控制的方法。熟悉感可以鼓勵(lì)用戶對(duì)產(chǎn)品更多的使用，更快采納產(chǎn)品的設(shè)計(jì)，減少新用戶面對(duì)產(chǎn)品的恐懼感和障礙感。其中也包含了人性化的體貼。擬物化設(shè)計(jì)也存在一些缺點(diǎn)，大多數(shù)的擬物化界面并沒(méi)有實(shí)現(xiàn)功能化，設(shè)計(jì)師卻要花費(fèi)大量的時(shí)間和精力在視覺(jué)的陰影和質(zhì)感效果的打造上。

擬物化設(shè)計(jì)的癥結(jié)與扁平化設(shè)計(jì)的局限性 

通常來(lái)說(shuō)擬物化設(shè)計(jì)有助于改善應(yīng)用的用戶體驗(yàn)，但實(shí)際上，這樣的界面設(shè)計(jì)方式有時(shí)會(huì)也降低用戶體驗(yàn)。首先應(yīng)用程序與現(xiàn)實(shí)中的實(shí)體物品有著顯著的不同。一般來(lái)說(shuō)，采用擬物化設(shè)計(jì)的應(yīng)用都會(huì)試圖模仿一個(gè)現(xiàn)實(shí)物品的外觀與功能，然而應(yīng)用的工作方式卻與現(xiàn)實(shí)物品不同，這會(huì)直接影響產(chǎn)品的用戶體驗(yàn)。

對(duì)于一個(gè)采用擬物化設(shè)計(jì)的產(chǎn)品來(lái)說(shuō)，如果做得足夠好，產(chǎn)品在視覺(jué)上將于真實(shí)世界的物品產(chǎn)生強(qiáng)烈的共鳴。但同時(shí)，共鳴越是強(qiáng)烈，越像真實(shí)的物品，它所帶來(lái)的局限性也就越發(fā)明顯，這也阻礙了產(chǎn)品的改進(jìn)與革新。

扁平化設(shè)計(jì)的特點(diǎn)之一是盡可能地簡(jiǎn)潔，然而界面中的一些細(xì)節(jié)對(duì)于用戶能否順暢地使用應(yīng)用，起到了至關(guān)重要要的作用，比如說(shuō)：按鈕上帶有輕微漸變的圓角設(shè)計(jì)，表單部分淺淺的陰影效果，導(dǎo)航欄輕微懸浮的效果。如果去除這些細(xì)節(jié)，界面中的每個(gè)元素都將被置于同一水平面，用戶在使用時(shí)將不可避免地產(chǎn)生疑惑：這是一個(gè)按鈕還是一個(gè)導(dǎo)航欄？如果我點(diǎn)擊它，會(huì)出現(xiàn)什么？

扁平化設(shè)計(jì)要素 

1、簡(jiǎn)單的元素：扁平化這個(gè)概念最核心的地方就是放棄一切裝飾效果，諸如陰影、透視、紋理、漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈俐落，沒(méi)有任何羽化、漸變或者陰影。

2、字體：從精美裝飾性的字體，到簡(jiǎn)潔的非襯線字體，漂亮的字體是優(yōu)秀的扁平設(shè)計(jì)的關(guān)鍵組成之一。由于界面更加簡(jiǎn)潔，可以使用字體來(lái)創(chuàng)建設(shè)計(jì)者所期望的風(fēng)格。

3、色彩：扁平化設(shè)計(jì)中，配色是最重要的一環(huán)，扁平化設(shè)計(jì)所采用的色彩模式與其他的調(diào)色板相比傾向于更加醒目、更加明亮。同時(shí)，扁平化設(shè)計(jì)中的配色還意味著更多的色調(diào)。

4、簡(jiǎn)化的交互設(shè)計(jì)：設(shè)計(jì)師要盡量簡(jiǎn)化設(shè)計(jì)方案，避免不必要的元素出現(xiàn)在設(shè)計(jì)中。簡(jiǎn)化界面的同時(shí)，更重要的是做到使用上的簡(jiǎn)潔方便。

形式服務(wù)于功能 

形式服務(wù)于功能、“少即是多”是20世紀(jì)極簡(jiǎn)主義運(yùn)動(dòng)中提出的著名口號(hào)，對(duì)現(xiàn)代設(shè)計(jì)影響深遠(yuǎn)。優(yōu)秀的界面交互設(shè)計(jì)應(yīng)該是既有“形式上的優(yōu)美和婉約”，又有“技術(shù)上的精確和簡(jiǎn)潔”。

1、簡(jiǎn)潔的完整：優(yōu)秀設(shè)計(jì)的經(jīng)典要素之一即形式的簡(jiǎn)約：以簡(jiǎn)馭繁。對(duì)于界面設(shè)計(jì)，就是用最少的元素來(lái)完成任務(wù)。

2、內(nèi)在的和諧：渾然一體的感覺(jué)是每個(gè)優(yōu)秀的設(shè)計(jì)應(yīng)該不斷追求的標(biāo)準(zhǔn)。能夠始終以一種文雅而易于理解的方式傳達(dá)信息，并且向用戶展現(xiàn)我們真正希望他們看到的東西，是保持交互設(shè)計(jì)內(nèi)在的和諧的不二法則。

3、順應(yīng)的情感認(rèn)知：越來(lái)越多的產(chǎn)品設(shè)計(jì)開(kāi)始追求某個(gè)單一的用戶渴求，既凌駕于用戶需求之上的一種情感追求，但很多時(shí)候追求的單一性，往往會(huì)失掉了產(chǎn)品最基本的用戶感知和認(rèn)可。順應(yīng)用戶的情感認(rèn)知，才能調(diào)動(dòng)用戶的情感。

可用性比設(shè)計(jì)風(fēng)格重要 

從設(shè)計(jì)發(fā)展史上來(lái)看，流行的風(fēng)格趨勢(shì)往往在復(fù)雜和簡(jiǎn)單之間不斷交替變化，這一現(xiàn)象在可視化設(shè)計(jì)領(lǐng)域，尤其是界面設(shè)計(jì)領(lǐng)域表現(xiàn)地尤為明顯。扁平化和擬物化本身都存在著優(yōu)缺點(diǎn)，設(shè)計(jì)風(fēng)格終歸只是工具，產(chǎn)品的“可用性”才是設(shè)計(jì)本身的重點(diǎn)。沒(méi)有一種設(shè)計(jì)風(fēng)格是完美無(wú)缺的。為每個(gè)產(chǎn)品量身定制的設(shè)計(jì)，才能使界面風(fēng)格與產(chǎn)品要傳達(dá)的信息、實(shí)際功能相吻合。



相關(guān)文章--《做為電商產(chǎn)品經(jīng)理你不得不懂的基礎(chǔ)——跳出率和退出率》