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

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

相关推荐

  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28
  • iOS8 Human Interface Guidelines 精选阅读(中英对照)

    用了两个星期时间断断续续读完iOS的guidelines英文原版,原文是写得有点啰嗦,所以精选了以下觉得比较重要的点,并加以自己的解释;当然如果你有时间,还是推荐阅读英文原文。首先是因为翻译的版本基本是不全的、旧的,就像ISUX的翻译的对比原文就会发现中间省略了好多。本文的作用并不像多数的翻译那样,让你粗略地了解里面的内容,而是精选出一些点使你体会到苹果的设计思想。 我读guidelines的目的不仅仅是要看他们是怎样规定的,而是要看他们为什么这样规定,在了解了制定规则背后的原因之后不仅便于记忆规则本身,还能了解苹果的设计思路,当吸收了设计思路之后,就不再是墨守成规,而是更自信和灵活地运用规则,甚至创造属于自己的规则。就像tweetie发明下拉刷新手势之后苹果反而把这种手势加进了自己的guidelines。 读英文原版还有一个显然易见的好处就是熟悉专业英语表达,guildlines的措辞显得优美而精确,值得去读读。

    2017-06-02
  • 儿童键盘输入交互方式探讨:为熊孩子设计的输入法

    想必针对婴幼儿用户所设计的产品出发点与普通的产品设计出发点一定有所不同,那么在设计幼儿产品时,应该考虑哪些交互细节点呢?文章以一款儿童输入法为例,为我们解读了在儿童产品设计过程中该注意的一些交互细节点。

    2017-04-27
  • 阅读好体验的准则:100% Easy-2-Read

    阅读好体验的准则:100% Easy-2-Read | 艾欧交互设计 译者:前两天看到一篇文章,觉得挺不错的,就简单翻译一下分享给大家。   大多数网站都挤满了小号的文字,使人阅读起来感到很痛苦。产生这个问题的原因是…

    2014-11-13
  • 什么才是正确的原型设计?

    草图,线框图,设计草稿,高分辨率的可视效果:原型对交互式应用发展的作用是必不可少的。下面跟大家一起探讨一下其中的联系和区别,哪些方式适用于哪些项目。 在电子产品的开发中没有一个最终目的是原型。原型的目…

    2017-03-14
  • Google发布"范本App”:手把手教你实现跨平台开发

    Google今天发布了一个全新的范本app,名为Universal Music Player,它能够在智能手机、平板电脑、Android Auto、Android Wear以及Google Cast上工作。将它称为"范本app"的原因主要是:它是Google公司为开发者们推出…

    2015-03-13
  • APPLE WATCH案例学习!

    编者按:这篇实战的对象是Wallaby,一款个人财务APP,文章总结了四点经验:导航、通知、复杂任务以及动效。每个方面都有需要注意的问题和对应的解决方法,进入译文 >>> Wallaby是一款个人财务app,可以在…

    2015-05-21
  • 产品原型设计之交互体验的思考过程(二)

    接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

    2017-05-23
  • 2018年用户体验趋势(一)

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

    2018-02-28
  • 产品需求沟通出问题怎么办?

    产品制作的流程中,发现需求并定义需求是首要环节,假如产品需求沟通出现问题了怎么办?你需要解决三个问题,避免含糊性,定义需求和功能,明确功能和属性。  一:如何避免含混性出现 含混性,指的是不清晰的程度。…

    2014-11-14