網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn)發(fā)布者：本站     時(shí)間：2022-01-10 15:01:07

自從Windows8的Metro風(fēng)格出來(lái)后，扁平式的設計風(fēng)開(kāi)始成為網(wǎng)頁(yè)設計和UI設計的年度流行設計趨勢，但現在我們不稱(chēng)它為Metro風(fēng)格了，國外設計師都說(shuō)是Flat Design(即扁平化設計)，或者你很討厭Metro風(fēng)格，但你不定討厭Flat Design，它的設計很有特色，那么什么是扁平化設計呢?國外設計師Carrie Cousins在網(wǎng)站上介紹了扁平化的五個(gè)特點(diǎn)，下面看看扁平化設計(Flat Design)的五個(gè)特點(diǎn)：

1.拒絕特效

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

扁平化這個(gè)詞來(lái)自于這種設計所使用的樣式和形狀，它完全屬于二次元世界，一個(gè)簡(jiǎn)單的形狀加沒(méi)有景深的平面，不叫扁平化都浪費這個(gè)詞了。

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

這一設計趨勢極力避免任何擬物化設計的元素，這導致這一設計風(fēng)格在其它平臺有時(shí)候顯得突兀，前景圖片、按鈕、文本和導航欄與背景圖片格格不入，各成一派。

那么，扁平化的效果如何呢?

因為這種設計有著(zhù)鮮明的視覺(jué)效果，它所使用的元素之間有清晰的層次和布局，這使得用戶(hù)能直觀(guān)的了解每個(gè)元素的作用以及交互方式。如今從網(wǎng)頁(yè)到手機應用無(wú)不在使用扁平化的設計風(fēng)格，尤其在手機上，因為屏幕的限制，使得這一風(fēng)格在用戶(hù)體驗上更有優(yōu)勢，更少的按鈕和選項使得界面干凈整齊，使用起來(lái)格外簡(jiǎn)單。

2.界面元素

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

扁平化設計通常采用許多簡(jiǎn)單的用戶(hù)界面元素，諸如按鈕或者圖標之類(lèi)。設計師們通常堅持使用簡(jiǎn)單的外形(矩形或者圓形)，并且盡量突出外形，這些元素一律為直角(極少的一些為圓角)。

這些用戶(hù)界面元素方便用戶(hù)點(diǎn)擊，這能極大的減少用戶(hù)學(xué)習新交互方式的成本，因為用戶(hù)憑經(jīng)驗就能大概知道每個(gè)按鈕的作用。

此外，扁平化除了簡(jiǎn)單的形狀之外，還包括大膽的配色。但是需要注意的是，扁平化設計不是說(shuō)簡(jiǎn)單的搞些形狀和顏色搭配起來(lái)就行，它和其他設計風(fēng)格一樣，是由許多的概念與方法組成的，想要學(xué)習具體設計方法的朋友可以看看 Designmodo，這里有許多現成的設計實(shí)例可以讓大家分享：《40+扁平化的APP應用UI和網(wǎng)頁(yè)設計素材》、《給你靈感的扁平化UI設計作品收集》、《50個(gè)漂亮的扁平化網(wǎng)頁(yè)設計欣賞》、《設計非常細致的扁平化Icon圖標-附PSD》。

3.優(yōu)化排版

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

詳細解析網(wǎng)頁(yè)UI扁平化設計的五個(gè)特點(diǎn),PS教程,

由于扁平化設計的使用特別簡(jiǎn)單的元素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺(jué)效果，甚至可能間接影響用戶(hù)體驗。

字體是排版中很重要的一部分，和其他元素相輔相成。想想看，一款花體字在扁平化的界面里得有多突兀。上圖是一些扁平化網(wǎng)站使用無(wú)襯線(xiàn)字體的例子。無(wú)襯線(xiàn)字體家族龐大分之眾多，其中有些字體會(huì )在特殊的情景下會(huì )有意想不到的效果。但注意，過(guò)猶不及，不要使用那些極為生僻的字體，因為保不齊它就把你帶進(jìn)坑里了。

如何使用字體也是一門(mén)學(xué)問(wèn)，要學(xué)會(huì )讓不同的字體表達不同的概念，通過(guò)字體告訴用戶(hù)這某一設計/功能的含義，努力使字體成為你簡(jiǎn)化設計的有力武器。