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

经验分类: 经验/观点 / 自译外文 原作者: 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

相关推荐

  • 关于文档的价值

    作者:杨蓉(资深用研专家,现任极客网运营总监)   高歌在产品经理的培训中,提到了研究分析、产品定义和交互设计,展示了不同格式的文档,几个来自创业公司的童鞋提到了老板不鼓励用文档的问题。让我想起来几个去…

    交互专题 2017-08-07
  • 老年用户的体验思考:如何保证界面适合阅读

    老年用户群仍然有巨大的增长潜力。但就像其他任何用户群体一样,老年用户需要我们设计出符合他们需求的体验。随年龄而产生的局限意味着,数字科技中一些常规的吸引用户手段对老年用户不管用。

    2017-04-28
  • 干货推荐|关于无线C端产品的一些UX建议

    开始之前,先来看一下Eric WK.See-To的一项最新研究成果(Eric WK.See-To等人针对如何提升移动端视频的UX满意度做了以下研究)。

    2017-05-29
  • 浅谈“效率导向”的交互设计

    作者: 欢童鞋 周二下午,送妈妈上车后,去奈雪点了杯奶盖,坐在面对门口的位置,看着络绎不绝的人流队伍,除了感叹生意好以及好奇心使然查阅奈雪的开店背景之外,不由的思考“效率”在这里的重要性,店员需要高效为…

    交互专题 2017-12-05
  • 2018年用户体验趋势(一)

    2017年,我们见证了很多。在与全世界的189489位设计师策划并分享了1926条链接后,我们从行业内的所写、所说和所想中,预见了几个趋势。以下就是2018年用户体验的预期。#1UX的死亡和重生作为设计师,我们一直致力于能够参与早期的战略决策。如今,我们获得了一席之地,接下来要怎么做呢?APP关掉了新手体验怎么办?这有一份最好的实践清单;不确定网站适合哪种菜单?就用这个模板库吧;首页的标题不够吸引人?咱们来做做A/B测试...与此同时,...

    2018-02-28
  • 2016必掌握的交互设计趋势

    设计趋势是什么样的,出于各种原因,很多设计趋势在演进中逐渐消失,有的则甚正蜕变成为主流。作为一个专注于网页和平面设计的设计机构,我们对所有相关的技术和设计趋势都极度敏感。通过多位设计师们对2015的总结…

    2016-01-10
  • Sketch 49 新增交互原型能力

    看到更新弹窗蛮讶异的,完全没有见到相关消息或Beta版本,官方博客与Medium也毫无动静,太过突然,总之就是这样:“Prototyping: You can now connect Artboards with Links and Hotspot layers to create prototypes of your designs that can be viewed in Sketch Preview,Sketch Cloud,a...

    2018-03-02
  • 【用户体验.春节特辑】我的记事(总第265期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第265期“我的记事”——家庭、个人故事随时记录,方便存储。直接点击主页面“我的记事”按钮,即可进入“我的记事”页面,随时随地添加、修改、记录个人及家庭资料和故事。同时点击方框内加号键,可以添加照片,点击完成上传。上传后可根据提示选“分享”键转发至微信、朋友圈、微博、QQ好友、QQ空间;选“删除”键进行删除记事内容;选...

    2018-02-16
  • UX文案优化12字真言:定风格—查现状—设标准—推落地

    定风格—查现状—设标准—推落地

    2017-05-26
  • 【读书笔记】方寸指间——实战指导手册

    导航设计 标签式:能让用户直观地了解到App的核心功能。根据逻辑和重要性控制在5个以内,通过视觉表现用户的当前位置,页面之间的切换快速又不容易迷失,简单高效。 桌面式:类似于手机桌面各个应用入口的导航方式…

    2015-07-17