如何成功运用扁平化设计与色彩趋势

经验分类: 经验/观点 / 自译外文 原作者: Carrie Cousins  翻译:蒋灿

如何成功运用扁平化设计与色彩趋势

我们在Designmodo上已经聊了很多有关扁平化设计趋势的内容。

之前瞎说了很多,也给大家展示了大量不错的示例,还开发了一套免费的用户界面以供大家下载并运用于自己的项目。

但是如果你想自己动手,则要注意这一趋势中最为重要的一个部分就是色彩。

扁平化设计温故知新

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

扁平化设计技巧,是指使用简单的效果(或省去某些效果)来打造不包含三维属性的设计方案。在扁平化设计项目中,不采用阴影、斜面、浮雕和渐变等效果。

有的人觉得扁平化设计外观很简单,但其实做起来很复杂。扁平化设计外观简单、直接,让用户一目了然,因此正日渐成为移动端用户界面以及web设计的流行趋势之一。

有关扁平化设计趋势的更多内容请见Designmodo早先的文章

制定调色板

在颜色方面,扁平化设计可以采用各种各样的颜色,但一般来说设计师倾向于大胆的亮色。

扁平化设计在颜色方面的另一出众之处,在于设计师能够将调色板从简单的一种两种颜色扩展到三种、四种乃至更多种颜色。其大多数选择都采用了明亮饱满的色调,并有时使用这种色调对称灰色或黑色。

就颜色和扁平化设计而论,很多有关色彩搭配的传统规则都被设计师抛出了脑外以求让调色板能够拥有更多色彩。

但是,我们在扁平化设计和颜色选择方面越来越多的看到了色调和饱和度的搭配。虽然设计师可能会选择使用不少的阴影,但同时也会将不同的阴影对比审查看颜色是否够深、颜色组合属于主要组合还是次要组合、是否来自不同的色调或者颜色中包含的黑白组合是否较多。

在颜色方面,扁平化设计方案的趋势通常是超高的饱和度、明亮、比较复古或单调。倒并不是说这些是唯一的办法,但随着趋势的演化,这些风格已成为最为流行的风格。

亮色

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

亮色通常是扁平化设计的标志性特征,因为其能够带来一种很独到的感觉。明亮的色彩在亮色和暗色背景上一般都能够适用,并能够形成对比感同时吸引用户。对于扁平化设计来说,其可谓是最为流行的颜色趋势。

如何着手?

FlatUICoors.com 上提供了很多扁平化设计流行色调的新手示例。从亮蓝色和绿色到黄色橙色,这些颜色能够完美地呈现出我们眼中的颜色和趋势。这个网站是个绝佳的出发点,你可以在网站上免费选择下载不同的色值。

Designmodo在其近期发布的Flat UI Free工具包中对这一亮色设计进行了进一步的解读,并使用相同的亮色色调打造了一个很棒且使用简单的界面轮廓包。这一扁平化且风格十足的图标可适用于各种不同的项目,而且还提供了颜色样本(如果你是色彩搭配新手,那就有福了)。

亮色扁平化设计的调色板中很少采用严格的主色调,例如纯红色、蓝色和黄色一般很少见,取而代之的是更加丰富的混合色。

如果你想在扁平化设计方案中搭配自己选择的亮色,请注意一定要保持简单。选择色泽与饱和度相似的颜色。另外我们也为你提供了几个颜色样本以供你入门。

如何成功运用扁平化设计与色彩趋势

亮色颜色样本:尝试一下使用上面这些颜色组合或者任意混搭来打造自己的扁平化调色板。这些颜色在白色或黑色背景上都能达到最大的冲击力。

流行颜色:蓝色、绿色和紫色

复古颜色

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

复古颜色方案对于扁平化设计项目来说也是一个潮流之选。

复古颜色的饱和度较低,但在亮色背景上添加了不同的色泽,并添加了白色让其显得更加淡雅。其外观虽然不具有蜡笔画的感觉,但明显表现出了老派风格。复古颜色方案通常包含很多橙色和黄色,有时也会采用红色或蓝色。

对于扁平化设计,复古颜色方案中常见主色和次色的区别以求让颜色更加柔和。

如何成功运用扁平化设计与色彩趋势

复古颜色样本:复古颜色在作为主色调独立使用时效果最佳。与图像或哑色搭配也能达到绝佳效果。

流行颜色:橙色、桃红色或紫红色调以及深蓝色

单色

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

如何成功运用扁平化设计与色彩趋势

单色方案搭配扁平化设计正在迅速流行。这一色彩方案依靠单色及黑白色营造明亮而独特的色彩感。

大多数单色方案都采用底色外加两到三种浅色调实现效果。目前最为流行的颜色貌似是蓝色,但很多设计师也选择以黑色(也有灰色)外带红色等彩色按钮或行动呼吁作为底色。

另一种办法是使用细微的色差实现单色效果。例如,如果你以蓝色为主色,可以添加一些绿色色调打造蓝绿色方案。

单色技巧是目前尤其流行的移动端和应用设计技巧。

如何成功运用扁平化设计与色彩趋势

单色颜色样本:与其他调色板一样,单色方案同样需要使用对比。混合色调,让每个不同的“颜色”区别于主色。从全色(100%)及50%色调开始,然后是20%和8%。

Popular colors: Blues, grays and greens

流行色:蓝色、灰色、绿色
结论

扁平化设计趋势的关键之一就是要新颖、有趣。你的项目应该要注意这两点。

你的调色板应该与项目色调相吻合,能够让用户知道如何使用你的网站并且外观有趣。在设计扁平化颜色方案时,不要局限于传统的颜色搭配规则,跳出自己的常识。

 

 

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/633/

(0)
Smiler李想Smiler李想
上一篇 2014-09-14
下一篇 2014-09-14

相关推荐

  • Word产品需求文档,已经过时了-快使用Axure制作产品需求文档

    说来有些惭愧,写这篇文章是用来教大家写需求文档的,但其实,我很少会写传统意义上的产品需求文档,甚至,我连word都很少用。用惯了Axure的任意布局方式,再用word感觉非常别扭,尤其是在添加图片时,简直感到捉急…

    2016-01-06
  • 【UX设计】如何成为一名更加贴心的用户体验设计师?

    我曾见过一个简单却贴心的设计,是个仅170 像素的笑脸。那是非常疲惫的一天,下班后我想要清理一下Email 收件箱,放松一下心情。以前我都是用苹果自带的邮件应用,但这次我打开刚下载的Gmail 应用,筛选了收件箱里…

    交互设计 2015-09-13
  • 交互实战|Design sprint methods 在To B产品中的应用

    在湾区很火的设计冲刺,真的能有效快速解决项目中棘手问题吗?我们在实际工作中开始了首次尝试与应用。让我们一起来体验一下Design sprint methods的设计过程吧~

    2017-04-30
  • 2017新零售用户体验观察

    互动新零售专为互联网人打造的新零售智库。关注过去的2017年被誉为“新零售元年”,从早前颜艳春的《第三次零售革命》到阿里的“五新”战略,再到京东的“新零售革命”等等,一系列关于“新零售”的概念被正式提出。而行动上,无论是互联网电商巨头,还是传统线下零售企业均在紧锣密鼓地展开此次零售变革的布局。此次“新零售”变革概念从中国提出之时,从全球范围来看,和传统零售形态不太一样的商业形态和消费者体验已经在世界各地慢慢的生长起来。这一年中各式各样关...

    2018-02-08
  • 移动界面动效设计的全方位科普指南

    读了这篇文章,你可以知道动效的作用、设计原则、动效工具、制作方法、标注技巧等等,特别全面,强烈推荐收藏学习。

    2017-05-13
  • 【分享•客户体验】“互联网+”如何提升用户体验?

    “你兜售的虽然是产品,但真正能使你获益的却是服务”。为何这样讲?众所周知,顾客就是上帝。在今天,客户体验越来越多的被提及,产品得到了更多的外延及扩展,已经不再局限于产品本身的价值,而有了更多的后续价值和服务的依托。注重交付的每个环节的规范与体验,这让卖点从产品本身逐渐渗透到整个产品的生命周期中,用户对品牌的认识也开始从产品蔓延到店面、店员、交易流程是否顺畅、售后服务是否及时到位等诸多层面。换句话说,产品是基础,而优质的服务可以帮助企业赢...

    2018-02-11
  • 从微信WeUI设计规范 解读移动界面设计

    作者:风口上的猪毛    编辑:小露 本文已经获得作者授权发布,转载请注明出处。 写在开头,以表明动机、甩掉一切可能需要承担的责任。 目的:看到传播很热的微信WeUI,应该说是一种比较简单暴力的表现形式,但落实…

    2016-04-05
  • 关注用户体验的酒店设计永不过时

    目前110000+人已加入品筑设计位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极...

    2018-04-10
  • 几乎是最完美的用户体验模型—CUBI

    【导读】我们都希望能做出引人注目的创意项目——能解决业务问题,同时通过有意义、有价值的体验吸引用户的项目。然而,紧缩的预算以及紧张的时间安排,都给创造真正新颖的设计、确定设计流程中的遗漏,以及充分考虑…

    交互设计 2015-04-24