2016流行这2种色彩!附优秀网页设计案例

@十萬個為什麽 :潘通为2016年选出的“年度色彩”令人拍案叫绝,融合了蔷薇粉与宁静蓝来构成这组色调。这组柔和的配色很可能会成为接下来一年的配色趋势。正如潘通往年的选择,这些颜色通常都会成为设计、时尚与其他项目的标杆。对于某些设计师而言,柔和色彩可能不太好处理。不过,今天我们来看看,有哪些方法能够在项目中充分运用这些色彩。

蔷薇粉与宁静蓝

2016流行这2种色彩!附优秀网页设计案例2016流行这2种色彩!附优秀网页设计案例

自2000年起,潘通就开始推选年度色彩,其中多数都是明亮的色彩——从去年的玛萨拉酒红,到2013年的翡翠绿和2008年的鸢尾蓝。所以今年发布的色彩,某种程度上来说是一种惊喜,因为它包含了两种柔和色彩,共同构成了今年的年度代表色。

下面是潘通对今年所选颜色的定义:

「人们不懈追求正能量与幸福安乐,以缓解现代社会的压力。为此,我们非常需要迎来一款能够给予人们心灵慰藉与安定的色彩。蔷薇粉与宁静蓝相互结合,在温暖的玫瑰色调与清凉宁静的蓝色之间,呈现出一种与生俱来的平衡,象征连接与健康,还有抚慰人心的秩序与平和。

蔷薇粉与宁静蓝的流行组合,对于色彩联想的传统认知是一种挑战。

在时尚圈,世界各地都在经历一场去性别化运动,它也通过色彩的趋势逐一影响了其他设计领域。这种色彩上的归一,恰恰迎合了许多社会现实:性别平等与流动,人们更习惯于将颜色作为一种表达方式,这个时代不必担心千篇一律或是被妄加评判,数字信息的开放交流让我们见识了丰富的色彩运用。」

蔷薇粉

蔷薇粉是一种淡粉色,这种颜色很容易使人联想到小女孩与新生命。

  • 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

有了这些颜色样本,你可以将这个色彩概念运用于各种类型的项目。也不必拘泥于它们给人的第一印象(例如这两种颜色都是非常流行的发色)。用上这些颜色、或者它们的变种(在下面的案例中你会看到),玩得开心!

背景底纹

Christmas

2016流行这2种色彩!附优秀网页设计案例

Carandache

2016流行这2种色彩!附优秀网页设计案例

Labs.convoy.me

2016流行这2种色彩!附优秀网页设计案例

潘通今年的代表色可以作为很好的背景。这种色彩组合很容易在自然界找到,如果你拍摄晚霞,就能看到它充满了粉色与蓝色。将它用作一种背景底纹,你可以最大限度地用这种色彩营造出自然的环境。

得益于它们的柔和天性,这两种色彩也能很好地用作背景色,因为色彩融入背景中,不会从前景和图片上夺走注意力。

上面这个Camper的案例演示了蔷薇粉与宁静蓝的运用。注意两种色彩之间的美妙渐变,衬托出了前面的小狗图片。这种色彩营造了一种平和的视觉,与白色的小狗相得益彰,并没有形成干扰。

图片与色彩叠加

Gonebraskacity

2016流行这2种色彩!附优秀网页设计案例

Katafarkas

(该网站搭梯子访问)

2016流行这2种色彩!附优秀网页设计案例

Loveholidays

2016流行这2种色彩!附优秀网页设计案例

使用这些颜色最简单的方法,就是用在主画面中。从照片到插画,蔷薇粉与宁静蓝都可以结合到设计中,不会有生硬的感觉。上图的案例,展示了这种色彩组合能在照片(Nebraska City)或更艺术化的色彩表现(Kata Farkas)中呈现出怎样的华丽。

还有一种方案,可以通过这种色调来创造温暖或清凉的颜色叠加。Holiday Memories的网站熟练运用了粉色调来遮盖整张图片,蓝色的文字与之相称。得益于照片的处理和清凉酷爽的文字颜色,这样的搭配极具魅力。色彩相互协调,营造出阴阳的效果,感觉恰到好处。

强调元素

Totallywaggedout

2016流行这2种色彩!附优秀网页设计案例

通常,你考虑将红色作为按钮颜色时,较柔和的色彩或许是正确选择。柔和色彩也能用于按钮的设计,尤其按钮元素或行动号召面积太大的时候。而蓝色按钮,则是一种普遍存在,将颜色改为宁静蓝轻而易举。

还有个很有趣的做法,选定潘通的年度代表色,与它衍生出的梯度色彩相结合,然后用在按钮或其他元素上。

这些颜色能用于文字元素(尤其在深色背景上)或是链接、粗体文字,这取决于整体美感。注意上图的网站中,使用了多种近似的粉色与蓝色元素,包括文字左侧的小爪印。

颜色的变种

Holmmarcher

(该网站搭梯子访问)

2016流行这2种色彩!附优秀网页设计案例

虽然你已经迫不及待要在项目中运用这些颜色了,但它或许并不适合所有情况。这时候就更应该使用其变种。可以考虑加入黑色营造更暗沉的美感,或者增加白色创造更柔和的色调。

这正是年度代表色有趣的地方,可以看到这股潮流会将我们引向何方。最终方向完全取决于你。并非要死守着精确的色彩搭配,才算搭上了这趟潮流列车,你也可以实验创造出属于自己的东西。

来自Design Shack Gallery的一组设计灵感

Design Shack Gallery里充满了各种案例——还能通过颜色搜索——可以看到其他人如何处理这些颜色。下面这些项目,可以帮助你思考应该如何运用粉色与蓝色。

Byanise

2016流行这2种色彩!附优秀网页设计案例

Appon Calendar

2016流行这2种色彩!附优秀网页设计案例

Mel Louie

2016流行这2种色彩!附优秀网页设计案例

Melodrama Boutique

2016流行这2种色彩!附优秀网页设计案例

FForever

2016流行这2种色彩!附优秀网页设计案例

NeatFolio

2016流行这2种色彩!附优秀网页设计案例

Dockpop

2016流行这2种色彩!附优秀网页设计案例

结论

年度代表色为我们打开一扇未来之窗,让我们见证接下来这一年的潮流趋势。如何将其运用于项目中取决于你,但还要敢于打破常规,以非传统的方式运用这组颜色。(这本就是非传统的年度代表色)。

可以看一下AcFun总监写的2016年UI设计流行趋势:《不拖后腿!从3个方面聊聊2016年的UI设计新趋势》

【技多不压身的设计师工资更高!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:designshack
译文地址:colachan
译者:@十萬個為什麽

2016流行这2种色彩!附优秀网页设计案例

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量108万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 12
点赞 2

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。