如何成功運(yùn)用扁平化設(shè)計(jì)與色彩趨勢(shì)

我們?cè)贒esignmodo上已經(jīng)聊了很多有關(guān)扁平化設(shè)計(jì)趨勢(shì)的內(nèi)容。

之前瞎說了很多，也給大家展示了大量不錯(cuò)的示例，還開發(fā)了一套免費(fèi)的用戶界面以供大家下載并運(yùn)用于自己的項(xiàng)目。

但是如果你想自己動(dòng)手，則要注意這一趨勢(shì)中最為重要的一個(gè)部分就是色彩。

扁平化設(shè)計(jì)溫故知新

扁平化設(shè)計(jì)技巧，是指使用簡(jiǎn)單的效果（或省去某些效果）來打造不包含三維屬性的設(shè)計(jì)方案。在扁平化設(shè)計(jì)項(xiàng)目中，不采用陰影、斜面、浮雕和漸變等效果。

有的人覺得扁平化設(shè)計(jì)外觀很簡(jiǎn)單，但其實(shí)做起來很復(fù)雜。扁平化設(shè)計(jì)外觀簡(jiǎn)單、直接，讓用戶一目了然，因此正日漸成為移動(dòng)端用戶界面以及web設(shè)計(jì)的流行趨勢(shì)之一。

有關(guān)扁平化設(shè)計(jì)趨勢(shì)的更多內(nèi)容請(qǐng)見Designmodo早先的文章。

制定調(diào)色板

在顏色方面，扁平化設(shè)計(jì)可以采用各種各樣的顏色，但一般來說設(shè)計(jì)師傾向于大膽的亮色。

扁平化設(shè)計(jì)在顏色方面的另一出眾之處，在于設(shè)計(jì)師能夠?qū)⒄{(diào)色板從簡(jiǎn)單的一種兩種顏色擴(kuò)展到三種、四種乃至更多種顏色。其大多數(shù)選擇都采用了明亮飽滿的色調(diào)，并有時(shí)使用這種色調(diào)對(duì)稱灰色或黑色。

就顏色和扁平化設(shè)計(jì)而論，很多有關(guān)色彩搭配的傳統(tǒng)規(guī)則都被設(shè)計(jì)師拋出了腦外以求讓調(diào)色板能夠擁有更多色彩。

但是，我們?cè)诒馄交O(shè)計(jì)和顏色選擇方面越來越多的看到了色調(diào)和飽和度的搭配。雖然設(shè)計(jì)師可能會(huì)選擇使用不少的陰影，但同時(shí)也會(huì)將不同的陰影對(duì)比審查看顏色是否夠深、顏色組合屬于主要組合還是次要組合、是否來自不同的色調(diào)或者顏色中包含的黑白組合是否較多。

在顏色方面，扁平化設(shè)計(jì)方案的趨勢(shì)通常是超高的飽和度、明亮、比較復(fù)古或單調(diào)。倒并不是說這些是唯一的辦法，但隨著趨勢(shì)的演化，這些風(fēng)格已成為最為流行的風(fēng)格。

亮色

亮色通常是扁平化設(shè)計(jì)的標(biāo)志性特征，因?yàn)槠淠軌驇硪环N很獨(dú)到的感覺。明亮的色彩在亮色和暗色背景上一般都能夠適用，并能夠形成對(duì)比感同時(shí)吸引用戶。對(duì)于扁平化設(shè)計(jì)來說，其可謂是最為流行的顏色趨勢(shì)。

如何著手？

FlatUICoors.com 上提供了很多扁平化設(shè)計(jì)流行色調(diào)的新手示例。從亮藍(lán)色和綠色到黃色橙色，這些顏色能夠完美地呈現(xiàn)出我們眼中的顏色和趨勢(shì)。這個(gè)網(wǎng)站是個(gè)絕佳的出發(fā)點(diǎn)，你可以在網(wǎng)站上免費(fèi)選擇下載不同的色值。

Designmodo在其近期發(fā)布的Flat UI Free工具包中對(duì)這一亮色設(shè)計(jì)進(jìn)行了進(jìn)一步的解讀，并使用相同的亮色色調(diào)打造了一個(gè)很棒且使用簡(jiǎn)單的界面輪廓包。這一扁平化且風(fēng)格十足的圖標(biāo)可適用于各種不同的項(xiàng)目，而且還提供了顏色樣本（如果你是色彩搭配新手，那就有福了）。

亮色扁平化設(shè)計(jì)的調(diào)色板中很少采用嚴(yán)格的主色調(diào)，例如純紅色、藍(lán)色和黃色一般很少見，取而代之的是更加豐富的混合色。

如果你想在扁平化設(shè)計(jì)方案中搭配自己選擇的亮色，請(qǐng)注意一定要保持簡(jiǎn)單。選擇色澤與飽和度相似的顏色。另外我們也為你提供了幾個(gè)顏色樣本以供你入門。

亮色顏色樣本：嘗試一下使用上面這些顏色組合或者任意混搭來打造自己的扁平化調(diào)色板。這些顏色在白色或黑色背景上都能達(dá)到最大的沖擊力。

流行顏色：藍(lán)色、綠色和紫色

復(fù)古顏色

復(fù)古顏色方案對(duì)于扁平化設(shè)計(jì)項(xiàng)目來說也是一個(gè)潮流之選。

復(fù)古顏色的飽和度較低，但在亮色背景上添加了不同的色澤，并添加了白色讓其顯得更加淡雅。其外觀雖然不具有蠟筆畫的感覺，但明顯表現(xiàn)出了老派風(fēng)格。復(fù)古顏色方案通常包含很多橙色和黃色，有時(shí)也會(huì)采用紅色或藍(lán)色。

對(duì)于扁平化設(shè)計(jì)，復(fù)古顏色方案中常見主色和次色的區(qū)別以求讓顏色更加柔和。

復(fù)古顏色樣本：復(fù)古顏色在作為主色調(diào)獨(dú)立使用時(shí)效果最佳。與圖像或啞色搭配也能達(dá)到絕佳效果。

流行顏色：橙色、桃紅色或紫紅色調(diào)以及深藍(lán)色

單色

單色方案搭配扁平化設(shè)計(jì)正在迅速流行。這一色彩方案依靠單色及黑白色營造明亮而獨(dú)特的色彩感。

大多數(shù)單色方案都采用底色外加兩到三種淺色調(diào)實(shí)現(xiàn)效果。目前最為流行的顏色貌似是藍(lán)色，但很多設(shè)計(jì)師也選擇以黑色（也有灰色）外帶紅色等彩色按鈕或行動(dòng)呼吁作為底色。

另一種辦法是使用細(xì)微的色差實(shí)現(xiàn)單色效果。例如，如果你以藍(lán)色為主色，可以添加一些綠色色調(diào)打造藍(lán)綠色方案。

單色技巧是目前尤其流行的移動(dòng)端和應(yīng)用設(shè)計(jì)技巧。

單色顏色樣本：與其他調(diào)色板一樣，單色方案同樣需要使用對(duì)比?；旌仙{(diào)，讓每個(gè)不同的“顏色”區(qū)別于主色。從全色（100%）及50%色調(diào)開始，然后是20%和8%。

Popular colors: Blues, grays and greens

流行色：藍(lán)色、灰色、綠色

結(jié)論

扁平化設(shè)計(jì)趨勢(shì)的關(guān)鍵之一就是要新穎、有趣。你的項(xiàng)目應(yīng)該要注意這兩點(diǎn)。

你的調(diào)色板應(yīng)該與項(xiàng)目色調(diào)相吻合，能夠讓用戶知道如何使用你的網(wǎng)站并且外觀有趣。在設(shè)計(jì)扁平化顏色方案時(shí)，不要局限于傳統(tǒng)的顏色搭配規(guī)則，跳出自己的常識(shí)。

翻譯：蔣燦

原文地址：http://designmodo.com/flat-design-colors/