2016流行這2種色彩！附優(yōu)秀網(wǎng)頁設計案例

@十萬個為什麼?：潘通為2016年選出的“年度色彩”令人拍案叫絕，融合了薔薇粉與寧靜藍來構成這組色調(diào)。這組柔和的配色很可能會成為接下來一年的配色趨勢。正如潘通往年的選擇，這些顏色通常都會成為設計、時尚與其他項目的標桿。對于某些設計師而言，柔和色彩可能不太好處理。不過，今天我們來看看，有哪些方法能夠在項目中充分運用這些色彩。

薔薇粉與寧靜藍

自2000年起，潘通就開始推選年度色彩，其中多數(shù)都是明亮的色彩——從去年的瑪薩拉酒紅，到2013年的翡翠綠和2008年的鳶尾藍。所以今年發(fā)布的色彩，某種程度上來說是一種驚喜，因為它包含了兩種柔和色彩，共同構成了今年的年度代表色。

下面是潘通對今年所選顏色的定義：

「人們不懈追求正能量與幸福安樂，以緩解現(xiàn)代社會的壓力。為此，我們非常需要迎來一款能夠給予人們心靈慰藉與安定的色彩。薔薇粉與寧靜藍相互結合，在溫暖的玫瑰色調(diào)與清涼寧靜的藍色之間，呈現(xiàn)出一種與生俱來的平衡，象征連接與健康，還有撫慰人心的秩序與平和。

薔薇粉與寧靜藍的流行組合，對于色彩聯(lián)想的傳統(tǒng)認知是一種挑戰(zhàn)。

在時尚圈，世界各地都在經(jīng)歷一場去性別化運動，它也通過色彩的趨勢逐一影響了其他設計領域。這種色彩上的歸一，恰恰迎合了許多社會現(xiàn)實：性別平等與流動，人們更習慣于將顏色作為一種表達方式，這個時代不必擔心千篇一律或是被妄加評判，數(shù)字信息的開放交流讓我們見識了豐富的色彩運用。」

薔薇粉

薔薇粉是一種淡粉色，這種顏色很容易使人聯(lián)想到小女孩與新生命。

• Pantone: 9281 C
• RGB: 242 R, 221 G, 222 B
• CMYK: 0 C, 14 M, 9 Y, 0 K
• HTML: F2DDDE

寧靜藍

寧靜藍是一種淡藍色，略微偏向紫色。

• Pantone: 7451 C
• RGB: 137 R, 171 G, 227 B
• CMYK: 46 C, 23 M, 0 Y, 0 K
• HTML: 89ABE3

有了這些顏色樣本，你可以將這個色彩概念運用于各種類型的項目。也不必拘泥于它們給人的第一印象（例如這兩種顏色都是非常流行的發(fā)色）。用上這些顏色、或者它們的變種（在下面的案例中你會看到），玩得開心！

背景底紋

Christmas

Carandache

Labs.convoy.me

潘通今年的代表色可以作為很好的背景。這種色彩組合很容易在自然界找到，如果你拍攝晚霞，就能看到它充滿了粉色與藍色。將它用作一種背景底紋，你可以最大限度地用這種色彩營造出自然的環(huán)境。

得益于它們的柔和天性，這兩種色彩也能很好地用作背景色，因為色彩融入背景中，不會從前景和圖片上奪走注意力。

上面這個Camper的案例演示了薔薇粉與寧靜藍的運用。注意兩種色彩之間的美妙漸變，襯托出了前面的小狗圖片。這種色彩營造了一種平和的視覺，與白色的小狗相得益彰，并沒有形成干擾。

圖片與色彩疊加

Gonebraskacity

Katafarkas

（該網(wǎng)站搭梯子訪問）

Loveholidays

使用這些顏色最簡單的方法，就是用在主畫面中。從照片到插畫，薔薇粉與寧靜藍都可以結合到設計中，不會有生硬的感覺。上圖的案例，展示了這種色彩組合能在照片（Nebraska City）或更藝術化的色彩表現(xiàn)（Kata Farkas）中呈現(xiàn)出怎樣的華麗。

還有一種方案，可以通過這種色調(diào)來創(chuàng)造溫暖或清涼的顏色疊加。Holiday Memories的網(wǎng)站熟練運用了粉色調(diào)來遮蓋整張圖片，藍色的文字與之相稱。得益于照片的處理和清涼酷爽的文字顏色，這樣的搭配極具魅力。色彩相互協(xié)調(diào)，營造出陰陽的效果，感覺恰到好處。

強調(diào)元素

Totallywaggedout

通常，你考慮將紅色作為按鈕顏色時，較柔和的色彩或許是正確選擇。柔和色彩也能用于按鈕的設計，尤其按鈕元素或行動號召面積太大的時候。而藍色按鈕，則是一種普遍存在，將顏色改為寧靜藍輕而易舉。

還有個很有趣的做法，選定潘通的年度代表色，與它衍生出的梯度色彩相結合，然后用在按鈕或其他元素上。

這些顏色能用于文字元素（尤其在深色背景上）或是鏈接、粗體文字，這取決于整體美感。注意上圖的網(wǎng)站中，使用了多種近似的粉色與藍色元素，包括文字左側的小爪印。

顏色的變種

Holmmarcher

（該網(wǎng)站搭梯子訪問）

雖然你已經(jīng)迫不及待要在項目中運用這些顏色了，但它或許并不適合所有情況。這時候就更應該使用其變種。可以考慮加入黑色營造更暗沉的美感，或者增加白色創(chuàng)造更柔和的色調(diào)。

這正是年度代表色有趣的地方，可以看到這股潮流會將我們引向何方。最終方向完全取決于你。并非要死守著精確的色彩搭配，才算搭上了這趟潮流列車，你也可以實驗創(chuàng)造出屬于自己的東西。

來自Design Shack Gallery的一組設計靈感

Design Shack Gallery里充滿了各種案例——還能通過顏色搜索——可以看到其他人如何處理這些顏色。下面這些項目，可以幫助你思考應該如何運用粉色與藍色。

Byanise

Appon Calendar

Mel Louie

Melodrama Boutique

FForever

NeatFolio

Dockpop

結論

年度代表色為我們打開一扇未來之窗，讓我們見證接下來這一年的潮流趨勢。如何將其運用于項目中取決于你，但還要敢于打破常規(guī)，以非傳統(tǒng)的方式運用這組顏色。（這本就是非傳統(tǒng)的年度代表色）。

可以看一下AcFun總監(jiān)寫的2016年UI設計流行趨勢：《不拖后腿！從3個方面聊聊2016年的UI設計新趨勢》

【技多不壓身的設計師工資更高！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優(yōu)秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎如何系統(tǒng)地學習前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》
8. 交互設計自學路徑圖：《零基礎入門！給非科班生的自學路徑圖之交互設計篇》

原文地址：designshack
譯文地址：colachan
譯者：@十萬個為什麼

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量108萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com