設(shè)計(jì)社區(qū)不停討論關(guān)于扁平風(fēng)格。

這種風(fēng)格很帶感，但大多數(shù)設(shè)計(jì)師不能彰顯這種風(fēng)格，或者直接討厭這種風(fēng)格。

我很現(xiàn)實(shí)，創(chuàng)件有用的設(shè)計(jì)才是好的設(shè)計(jì).由于最近流行的扁平風(fēng)格，而去設(shè)計(jì)這個(gè)風(fēng)格，但它不適合所有的項(xiàng)目，所以別硬套這種設(shè)計(jì)風(fēng)格。

我們來(lái)看一下，這有五個(gè)很獨(dú)特的扁平風(fēng)格的例子。我們分析一下，再"戲說(shuō)"一下什么叫扁平風(fēng)格。

去除特效

扁平化設(shè)計(jì)以其形命名。平的設(shè)計(jì)就是其獨(dú)特的二維風(fēng)格，簡(jiǎn)單地平。
 

這一概念不加點(diǎn)綴——陰影、棱臺(tái)、壓花、漸變、不用其他工具的增加色彩深度.每個(gè)元素、框,從圖像幀到按鈕再到導(dǎo)航工具,注重干凈利落,不使用邊緣羽化和陰影。

不添加額外的元素看起來(lái)更加逼真些，不同于skeuomorphic設(shè)計(jì)項(xiàng)目中使用技巧來(lái)使元素更逼近3D。扁平化的圖層反映在其他項(xiàng)目中，就是不設(shè)計(jì)另類(lèi)的背景圖、前景色或按鈕、文本和導(dǎo)航.

那么它是如何工作的捏？平面設(shè)計(jì)有獨(dú)特的外觀和感覺(jué),但沒(méi)別的了。它需要設(shè)計(jì)明確的層次結(jié)構(gòu)和元素放置,使用戶(hù)可以更加容易專(zhuān)注項(xiàng)目,理解交互。雖然越來(lái)越多的網(wǎng)站使用扁平化設(shè)計(jì)風(fēng)格,或許移動(dòng)設(shè)計(jì)和應(yīng)用中的風(fēng)格更受歡迎。較小的屏幕占用,少的按鈕和選項(xiàng),讓扁平界面的應(yīng)用使用起來(lái)嘎嘎容易(soeasy?).

簡(jiǎn)元素

平面設(shè)計(jì)使用一些簡(jiǎn)單的用戶(hù)界面元素如按鈕和圖標(biāo)。設(shè)計(jì)師只需找些簡(jiǎn)單的形狀，如矩形、圓形或正方形，保持每個(gè)形狀孤立。形狀邊緣可以***地方角化或者包含一點(diǎn)點(diǎn)曲率。

每個(gè)UI元素應(yīng)該只是簡(jiǎn)單和容易單擊或切換。對(duì)用戶(hù)很直觀的互動(dòng)，沒(méi)有一些為設(shè)計(jì)而作的過(guò)度設(shè)計(jì)。

除去簡(jiǎn)單的樣式，鼓勵(lì)大膽的去可點(diǎn)擊的按鈕上色。但不要混淆簡(jiǎn)單元素和簡(jiǎn)單設(shè)計(jì)，扁平設(shè)計(jì)的概念也可以像其他設(shè)計(jì)方案一樣復(fù)雜。

需要獲得幫助開(kāi)始你的設(shè)計(jì)嗎(譯者注：下面是廣告)？Designmodo提供了各式各樣的UI工具包使用平面樣式——從SquareUIFree和FlatUIFree，包含一些簡(jiǎn)單的PSD/HTML用戶(hù)界面工具包與基本組件，到SquareUI和FlatUIPro完整打包PSD/HTML用戶(hù)界面包的網(wǎng)站和應(yīng)用的設(shè)計(jì)項(xiàng)目。

專(zhuān)心搞排版

由于元素在平面設(shè)計(jì)中的簡(jiǎn)單特性，排版是極其重要的。

字型的定格應(yīng)和整體方案的設(shè)計(jì)相符——高度點(diǎn)綴的字體可能看起來(lái)奇怪反對(duì)一種超簡(jiǎn)單的設(shè)計(jì)。使用加黑字體和簡(jiǎn)單地和高效的單詞來(lái)使最終產(chǎn)品具有一致性，可以在可視化方式和文本上作些努力。

考慮一個(gè)簡(jiǎn)單無(wú)襯線(sansserif)類(lèi)型族有很多變化和權(quán)重的主版式的使用平面設(shè)計(jì)的站點(diǎn)。添加一些別致的觸點(diǎn)，一個(gè)新奇的字體來(lái)作為設(shè)計(jì)的元素，但小心別使用過(guò)火的專(zhuān)業(yè)字樣。

字體設(shè)計(jì)中還應(yīng)該告訴用戶(hù)如何使用該設(shè)計(jì)。標(biāo)簽按鈕和其他元素增加引入的易用性和交互性。

專(zhuān)注于顏色

顏色是平面設(shè)計(jì)的很大一部分。不同于其他網(wǎng)站設(shè)計(jì)，扁平設(shè)計(jì)中顏色調(diào)色板往往是強(qiáng)調(diào)很多更亮、更鮮艷。

扁平設(shè)計(jì)中的顏色調(diào)色板的項(xiàng)目通常包含更多的色調(diào)。雖然大多數(shù)顏色調(diào)色板最專(zhuān)注于兩三種顏色，但扁平設(shè)計(jì)中調(diào)色板通常使用六至八個(gè)顏色。

扁平設(shè)計(jì)中色調(diào)趨向充滿(mǎn)活力——想想顏色轉(zhuǎn)盤(pán)——   沒(méi)有淡色或最純色。初級(jí)和次級(jí)的顏色是***的。另外，一些特定顏色的使用頻率較高，在重復(fù)的扁平設(shè)計(jì)中，方位色，復(fù)古的顏色——包括鮮肉色、紫色、綠色和藍(lán)色—— 這些是較受歡迎。

#p#

簡(jiǎn)約的方法

扁平化的設(shè)計(jì)本質(zhì)上是簡(jiǎn)單的，它與整體簡(jiǎn)約的設(shè)計(jì)方法相得益彰。

在網(wǎng)站的整體設(shè)計(jì)中避免太多花哨的東西。簡(jiǎn)單的顏色與文字就已足夠。如果你要添加視覺(jué)效果，選擇簡(jiǎn)單的圖像。

有些零售網(wǎng)站，比如Svpply(見(jiàn)上)，使用效果很棒的扁平化設(shè)計(jì)，這是將一些條目放在一個(gè)簡(jiǎn)單的背景上做到的。（提醒一下這些圖片確實(shí)具有一些自然深度，但仍然和諧融入到整個(gè)扁平化的設(shè)計(jì)中）

“接近”扁平化的設(shè)計(jì)

一個(gè)更多設(shè)計(jì)師都傾向于贊同的風(fēng)格，就是“接近”扁平化的設(shè)計(jì)。

在“接近”扁平化的設(shè)計(jì)中，使用了扁平化風(fēng)格的基本主題，但是一些特效被添加到設(shè)計(jì)方案中。例如按鈕，可能包含輕微的梯度或者陰影。設(shè)計(jì)師通常挑選一種特效并專(zhuān)門(mén)用在一種“接近”扁平化的項(xiàng)目中。

這個(gè)風(fēng)格，相對(duì)于一些扁平化設(shè)計(jì)背后的、無(wú)特效思想中的剛性，容納了更多一些的彈性。

設(shè)計(jì)師們因?yàn)楦郊拥纳疃群图y理而喜歡它。用戶(hù)們喜歡它是因?yàn)椋@個(gè)風(fēng)格沒(méi)有那么生硬，并且有利于引導(dǎo)適當(dāng)?shù)慕换?。另一方面，設(shè)計(jì)師們不喜歡它是因?yàn)?，它以一種方式結(jié)合了兩種風(fēng)格，而這種方式可能缺少了對(duì)于一個(gè)真正風(fēng)格的定義。

關(guān)于扁平化設(shè)計(jì)的更多信息

Designmodo已經(jīng)成為扁平化設(shè)計(jì)趨勢(shì)的討論中的***。閱讀我們之前的文章，了解關(guān)于扁平化設(shè)計(jì)的更多信息。

• FlatDesign:CanyouBenefitfromtheTrend? （扁平化設(shè)計(jì)：你能從這個(gè)趨勢(shì)中獲益嗎？）
• FlatWebDesign:BeautifulExamplesofWebsites （扁平化Web設(shè)計(jì)：網(wǎng)站的美麗實(shí)例）
• BeautifulExamplesofFlatIconDesign （扁平化Icon設(shè)計(jì)的美麗實(shí)例）
• MakingitWork:FlatDesignandColorTrends （讓它生效：扁平化設(shè)計(jì)及色彩趨勢(shì)）

英文原文：PrinciplesofFlatDesign

原文鏈接：http://www.oschina.net/translate/flat-design-principles