五條法則，幫你打造典型扁平化產(chǎn)品

如今設(shè)計(jì)界最炙手可熱的明星大概就是扁平化設(shè)計(jì)了吧，關(guān)于它的討論至今都沒(méi)有冷卻的跡象。諸多設(shè)計(jì)師分成了涇渭分明的兩個(gè)陣營(yíng)，一邊努力把扁平化做到極致，一面對(duì)其不屑一顧。扁平化究竟該怎么實(shí)現(xiàn)怎么應(yīng)用呢？下文將要做的就是分析扁平化的五個(gè)最典型的特征，同時(shí)也介紹一下偽扁平化。

我是個(gè)騎墻派，不支持也不反對(duì)，在我看來(lái)，優(yōu)秀的設(shè)計(jì)的定義就是好用，只要能設(shè)計(jì)出優(yōu)秀的產(chǎn)品，我可以采用任何方式，扁平化也是其中之一。但是必須意識(shí)到，沒(méi)有哪種風(fēng)格是包打天下的，不能強(qiáng)行將一種風(fēng)格應(yīng)用到不該用的地方。

那么，扁平化究竟該怎么實(shí)現(xiàn)怎么應(yīng)用呢？下文將要做的就是分析扁平化的五個(gè)最典型的特征，同時(shí)也介紹一下偽扁平化（不含貶義，只是一種折衷的設(shè)計(jì)方式)。

一 、拒絕特效

扁平化這個(gè)詞來(lái)自于這種設(shè)計(jì)所使用的樣式和形狀，它完全屬于二次元世界，一個(gè)簡(jiǎn)單的形狀加沒(méi)有景深的平面，不叫扁平化都浪費(fèi)這個(gè)詞了。
這個(gè)概念最核心的地方就是放棄一切裝飾效果，諸如陰影、透視、紋理、漸變等等能做出 3D 效果的元素一概不用。所有的元素的邊界都干凈俐落，沒(méi)有任何羽化、漸變或者陰影。

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

那么，扁平化的效果如何呢？
因?yàn)檫@種設(shè)計(jì)有著鮮明的視覺效果，它所使用的元素之間有清晰的層次和布局，這使得用戶能直觀的了解每個(gè)元素的作用以及交互方式。如今從網(wǎng)頁(yè)到手機(jī)應(yīng)用無(wú)不在使用扁平化的設(shè)計(jì)風(fēng)格，尤其在手機(jī)上，因?yàn)槠聊坏南拗?，使得這一風(fēng)格在用戶體驗(yàn)上更有優(yōu)勢(shì)，更少的按鈕和選項(xiàng)使得界面干凈整齊，使用起來(lái)格外簡(jiǎn)單。

二 、 界面元素

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

這些用戶界面元素方便用戶點(diǎn)擊，這能極大的減少用戶學(xué)習(xí)新交互方式的成本，因?yàn)橛脩魬{經(jīng)驗(yàn)就能大概知道每個(gè)按鈕的作用。
此外，扁平化除了簡(jiǎn)單的形狀之外，還包括大膽的配色。但是需要注意的是，扁平化設(shè)計(jì)不是說(shuō)簡(jiǎn)單的搞些形狀和顏色搭配起來(lái)就行，它和其他設(shè)計(jì)風(fēng)格一樣，是由許多的概念與方法組成的，想要學(xué)習(xí)具體設(shè)計(jì)方法的朋友可以看看 Designmodo，這里有許多現(xiàn)成的設(shè)計(jì)實(shí)例可以讓大家分享（免費(fèi)矩形ui、免費(fèi)扁平化ui，這兩個(gè)地方是一些簡(jiǎn)單的 PSD/HTML ui kit 和一些最基本的組建；專業(yè)矩形ui、專業(yè)扁平化UI，這兩個(gè)地方是一些完整的網(wǎng)頁(yè)／APP PSD/HTML UI 包）。

三 、 優(yōu)化排版

由于扁平化設(shè)計(jì)的使用特別簡(jiǎn)單的元素，排版就成了很重要的一環(huán)，排版好壞直接影響視覺效果，甚至可能間接影響用戶體驗(yàn)。
字體是排版中很重要的一部分，和其他元素相輔相成。想想看，一款花體字在扁平化的界面里得有多突兀。上圖是一些扁平化網(wǎng)站使用無(wú)襯線字體的例子。無(wú)襯線字體家族龐大分之眾多，其中有些字體會(huì)在特殊的情景下會(huì)有意想不到的效果。但注意，過(guò)猶不及，不要使用那些極為生僻的字體，因?yàn)楸２积R它就把你帶進(jìn)坑里了。
如何使用字體也是一門學(xué)問(wèn)，要學(xué)會(huì)讓不同的字體表達(dá)不同的概念，通過(guò)字體告訴用戶這某一設(shè)計(jì)／功能的含義，努力使字體成為你簡(jiǎn)化設(shè)計(jì)的有力武器。
四 、 如何配色

扁平化設(shè)計(jì)中，配色貌似是最重要的一環(huán)，扁平化設(shè)計(jì)通常采用比其他風(fēng)格更明亮、炫麗的顏色。同時(shí)，扁平化設(shè)計(jì)中的配色還意味著更多的色調(diào)。比如，其他設(shè)計(jì)最多只包含兩三種主要顏色，但是扁平化設(shè)計(jì)中會(huì)平均使用六到八種。
而且扁平化設(shè)計(jì)中，往往傾向于使用單色調(diào)，尤其是純色，并且不做任何淡化或柔化處理（最受歡迎的顏色是純色和二次色）。另外還有一些顏色也挺受歡迎，如復(fù)古色（淺橙、紫色、綠色、藍(lán)色等）。

五 、 最簡(jiǎn)方案

設(shè)計(jì)師要盡量簡(jiǎn)化自己的設(shè)計(jì)方案，避免不必要的元素在設(shè)計(jì)中出現(xiàn)。簡(jiǎn)單的顏色和字體就足夠了，如果你還想添加點(diǎn)什么，盡量選擇簡(jiǎn)單的圖案。
扁平化設(shè)計(jì)尤其對(duì)一些做零售的網(wǎng)站幫助巨大，它能很有效的把商品組織起來(lái)，以簡(jiǎn)單但合理方式排列。（編者注：有興趣的讀者可以自行尋找一些例子，原文作者推薦看 Svpply，但是網(wǎng)站與作者的描述略有不符，故略過(guò)不提。）

另：偽扁平化設(shè)計(jì)

最近還有一種趨勢(shì)值得關(guān)注，一些設(shè)計(jì)師把某一項(xiàng)特效融入整體的扁平化之中，是其成為一種獨(dú)特的效果。比如說(shuō)，在簡(jiǎn)單的按鈕加一點(diǎn)點(diǎn)漸變或陰影，從而使這種風(fēng)格成為其特色，產(chǎn)生出一種扁平化設(shè)計(jì)的變種。這種設(shè)計(jì)要比單純的扁平化更具有適用性和靈活性。
許多設(shè)計(jì)師比較喜歡這種設(shè)計(jì)，因?yàn)檫@意味著他們可以加點(diǎn)陰影或透視在某些元素上。用戶可能也會(huì)喜歡這種稍微圓滑一點(diǎn)的設(shè)計(jì)方式，這能引導(dǎo)他們進(jìn)行一些適當(dāng)?shù)慕换ァ?br />但是，還有另一部分設(shè)計(jì)師并不喜歡這種定位模糊的設(shè)計(jì)方式。
關(guān)鍵詞：成都品牌網(wǎng)站建設(shè)公司, 網(wǎng)站制作公司, 重慶網(wǎng)站建設(shè), 網(wǎng)站設(shè)計(jì), 網(wǎng)站建設(shè), 手機(jī)網(wǎng)站開發(fā)

網(wǎng)站名稱：五條法則，幫你打造典型扁平化產(chǎn)品
分享路徑：http://bm7419.com/news/169714.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、品牌網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)