扁平化UI設(shè)計(jì)技巧

對(duì)于設(shè)計(jì)師來(lái)說(shuō)，如果你觀察微軟的Windows Phone的平臺(tái)，你可能會(huì)發(fā)現(xiàn)一個(gè)特別的現(xiàn)象：那就是難看的應(yīng)用不多，但令人印象深刻的應(yīng)用也不多。應(yīng)用很有統(tǒng)一感，但是很難張揚(yáng)個(gè)性，以至于有的開(kāi)發(fā)者感嘆，它們看起來(lái)都是一個(gè)樣子。設(shè)計(jì)師Johnny Holland將Metro語(yǔ)言比作是包豪斯風(fēng)格，并且指出，“因?yàn)槿コ搜b飾，使得個(gè)性化的空間很小”，這可能給人以“缺乏生命力”的感覺(jué)，所以要想設(shè)計(jì)做出好的扁平化設(shè)計(jì)，也是非常需要技巧的。

你們趕緊讓來(lái)看看 簡(jiǎn)單的設(shè)計(jì)元素　　　　扁平化完全屬于二次元世界，一個(gè)簡(jiǎn)單的形狀加沒(méi)有景深的平面，不叫扁平化都浪費(fèi)這個(gè)詞了。這個(gè)概念最核心的地方就是放棄一切裝飾效果，諸如陰影、透視、紋理、漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈俐落，沒(méi)有任何羽化、漸變或者陰影。尤其在上，因?yàn)槠聊坏南拗疲沟眠@一風(fēng)格在用戶體驗(yàn)上更有優(yōu)勢(shì)，更少的按鈕和選項(xiàng)使得界面干凈整齊，使用起來(lái)格外簡(jiǎn)單。　　　　強(qiáng)調(diào)字體的使用　　　　字體是排版中很重要的一部分，它需要和其他元素相輔相成，想想看，一款花體字在扁平化的界面里得有多突兀。上圖是一些扁平化站使用無(wú)襯線字體的例子，無(wú)襯線字體家族龐大分支眾多，其中有些字體會(huì)在特殊得情景下會(huì)有意想不到得效果。但注意，過(guò)猶不及，不要使用那些極為生僻的字體，因?yàn)楸２积R它就把你帶進(jìn)坑里了。　　　　關(guān)注色彩　　　　扁平化設(shè)計(jì)中，配色貌似是最重要的一環(huán)，扁平化設(shè)計(jì)通常采用比其他風(fēng)格更明亮更炫麗的顏色。同時(shí)，扁平化設(shè)計(jì)中的配色還意味著更多的色調(diào)。比如，其他設(shè)計(jì)最多只包含兩三種主要顏色，但是扁平化設(shè)計(jì)中會(huì)平均使用六到八種顏色。另外還有一些顏色也挺受歡迎，如復(fù)古色淺橙、紫色、綠色、藍(lán)色等。　　　　簡(jiǎn)化的交互設(shè)計(jì)　　　　設(shè)計(jì)師要盡量簡(jiǎn)化自己的設(shè)計(jì)方案，避免不必要的元素出現(xiàn)在設(shè)計(jì)中。簡(jiǎn)單的顏色和字體就足夠了，如果你還想添加點(diǎn)什么，盡量選擇簡(jiǎn)單的圖案。扁平化設(shè)計(jì)尤其對(duì)一些做零售的站幫助巨大，它能很有效的把商品組織起來(lái)，以簡(jiǎn)單但合理方式排列。　　　　偽扁平化設(shè)計(jì)　　　　不要以為扁平化只是把立體的設(shè)計(jì)效果壓扁，事實(shí)上，扁平化設(shè)計(jì)更是功能上的簡(jiǎn)化與重組。比如，有些天氣方面的應(yīng)用會(huì)使用溫度計(jì)的形式來(lái)展示氣溫，或者計(jì)算應(yīng)用仍用計(jì)算器的二維形態(tài)表現(xiàn)。在應(yīng)用軟件當(dāng)中，溫度計(jì)的形象則純粹是裝飾性的，而計(jì)算器的計(jì)算方式也并不是最簡(jiǎn)單直接的。相比于擬物化而言，扁平風(fēng)格的一個(gè)優(yōu)勢(shì)就在于它可以更加簡(jiǎn)單直接的將信息和事物的工作方式展示出來(lái)。