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

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

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

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

去除特效

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

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

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

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

簡元素

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

每個UI元素應(yīng)該只是簡單和容易單擊或切換。對用戶很直觀的互動，沒有一些為設(shè)計而作的過度設(shè)計。

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

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

專心搞排版

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

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

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

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

專注于顏色

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

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

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

#p#

簡約的方法

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

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

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

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

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

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

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

設(shè)計師們因為附加的深度和紋理而喜歡它。用戶們喜歡它是因為，這個風(fēng)格沒有那么生硬，并且有利于引導(dǎo)適當(dāng)?shù)慕换?。另一方面，設(shè)計師們不喜歡它是因為，它以一種方式結(jié)合了兩種風(fēng)格，而這種方式可能缺少了對于一個真正風(fēng)格的定義。

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

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

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

英文原文：PrinciplesofFlatDesign

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