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

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

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

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

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

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

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

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

制定調(diào)色板

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

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

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

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

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

亮色

亮色通常是扁平化設(shè)計(jì)的標(biāo)志性特征，因?yàn)槠淠軌驇?lái)一種很獨(dú)到的感覺(jué)。明亮的色彩在亮色和暗色背景上一般都能夠適用，并能夠形成對(duì)比感同時(shí)吸引用戶。對(duì)于扁平化設(shè)計(jì)來(lái)說(shuō)，其可謂是最為流行的顏色趨勢(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)色和黃色一般很少見(jiàn)，取而代之的是更加豐富的混合色。

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

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

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

復(fù)古顏色

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

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

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

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

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

單色

單色方案搭配扁平化設(shè)計(jì)正在迅速流行。這一色彩方案依靠單色及黑白色營(yíng)造明亮而獨(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)開(kāi)始，然后是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/