不要忽视色彩在手机APP设计中的作用

在本文中,我们将讨论在APP中与色彩相关的重要知识点。 我们将涵盖传统的配色方案模式(单色,相似色,互补色),不严格基于任何一种模式的自定义色彩组合,同时我们还将学习如何为你的APP选择色彩与对比度来增强可用性。


在本文中,我们将讨论在APP中与色彩相关的重要知识点。 我们将涵盖传统的配色方案模式(单色,相似色,互补色),不严格基于任何一种模式的自定义色彩组合,同时我们还将学习如何为你的APP选择色彩与对比度来增强可用性。

不要忽视色彩在手机APP设计中的作用

就重要性而言,在app应用中色彩元素扮演的角色仅次于功能。 人与计算机的互动主要基于与图形用户界面元素的交互,而色彩在该交互中起着关键作用。 它可以帮助用户查看和理解APP内容,与正确的元素互动,并了解操作。 每个APP都会有一套配色方案,并在主要区域使用其基础色彩。

正因为有无数种色彩组合的可能,在设计一个新的APP时,人们往往很难决定一个效果好的配色方案。 在本文中,我们将讨论在APP中与色彩相关的重要知识点。 我们将涵盖传统的配色方案模式(单色,相似色,互补色),不严格基于任何一种模式的自定义色彩组合,同时我们还将学习如何为你的APP选择色彩与对比度来增强可用性。

如何选择有效的配色方案

在创建配色方案时,需要考虑很多因素,包括品牌色彩及色彩在你缩在区域的特殊意义。

有多少色彩?

保持色彩组合简洁有助于改善用户体验。 一个简洁的配色方案不会使人眼花缭乱,并且使你的内容更容易被理解。 相反,在太多的地方有太多的色彩很容易搞砸设计。

多伦多大学关于人们如何使用Adobe Color CC的研究显示大多数人更倾向于仅依赖2-3种色彩的简单色彩组合。

如何创建方案

那么,你如何选择这2-3种色彩? 色环可以帮助我们。

不要忽视色彩在手机APP设计中的作用

十二色环图是创建配色方案的重要工具。

有许多预设的配色方案可以使创建新方案更容易,特别是对于初学者来说。

单色配色

单色方案是最易于创建的配色方案,因为每种色彩取自相同的基色。 单色的色彩可以很好地结合在一起,产生和谐的效果。

不要忽视色彩在手机APP设计中的作用

单色是单一色系的搭配,它在色彩的深浅、明暗或饱和度上有所调整而形成明暗的层次关系。

单色方案是非常容易被视觉感受到的,特别是蓝色或绿色。

不要忽视色彩在手机APP设计中的作用

图片来源:Adobe Color CC

不要忽视色彩在手机APP设计中的作用

图片来源:Louis Saville

正如你看到的,这个配色方案看起来干净简洁。

相近色

相近色的配色方案是选取相互不冲突的的相关色彩; 一种色彩用作主色,而其它色彩用于丰富该方案。

不要忽视色彩在手机APP设计中的作用

相近色配色方案是由在十二色环图中相邻的三种色彩创建的。

这个方案相对容易使用,其诀窍是选择哪种颜色作为主调色来突出。 例如,Clear,一款手势操作任务管理APP,它使用相近的色彩,从视觉上区分任务的优先级。

不要忽视色彩在手机APP设计中的作用

图片来源:Adobe Color CC。

不要忽视色彩在手机APP设计中的作用

Clear中的默认配色方案让人联想到热点热图,其中较紧迫的项目以明亮的红色显示。

Calm,一款冥想APP,使用相近的色彩蓝绿色彩,帮助用户感到轻松和平和。

不要忽视色彩在手机APP设计中的作用

图片来源:Adobe Color CC

不要忽视色彩在手机APP设计中的作用

Calm使用相近的色彩来塑造整体的氛围。

补色搭配

色彩并不总是互相冲突的; 互补色是对立的色彩。

不要忽视色彩在手机APP设计中的作用

互补色是色环上两个正对立的颜色。

它们对比强烈,可以用来吸引观众的注意力。 当使用互补色方案时,重要的是选择主色并且使用其互补色用于强调。 例如,当人眼看到一块不同色调的绿色物体时,一点红色就会很突出。

不要忽视色彩在手机APP设计中的作用

使用互补色是让内容脱颖而出的最简单方法。

但是你必须谨慎使用互补色,以防止你的内容在视觉上显得不和谐。

自定义配色方案

创建自己的配色方案不像许多人想象的那么复杂。最简单的方法就是将一个明亮的主色添加到一堆中性色中,这也是一个最能引起视觉冲击的方案。

不要忽视色彩在手机APP设计中的作用

 图片来源:Adobe Color CC。

向灰度设计中添加一种色彩可以很轻易地吸引眼球。

白底加灰色文本,点缀以蓝色高亮,就是Dropbox的配色方案。

不要忽视色彩在手机APP设计中的作用

图片来源:Dropbox

ADOBE COLOR CC让你的生活更简单

Adobe Color CC,以前称为Kuler,能让选择色彩变得非常容易。只需点击几下鼠标,调色板上的每种色彩都可以单独修改或选择为基础色彩。

不要忽视色彩在手机APP设计中的作用

每种色彩下都支持导出代码(包括十六进制)。

不要忽视色彩在手机APP设计中的作用

调色板可以保存并直接添加到库中。此外,社区提供了许多现成的配色方案。

不要忽视色彩在手机APP设计中的作用

来看看吧,你无需从头开始。

对比度的应用

通常用户界面上的色彩对象或区域是不会单独出现的,而是比邻或重叠在在另一个色彩对象或区域上, 从形成对比效果。 对比能使一种色彩与另一种色彩想分离。 正确使用它,可以缓解眼睛疲劳,并通过清晰划分屏幕上的元素来聚焦用户的注意力。

不要忽视色彩在手机APP设计中的作用

高对比时色彩容易彼此分开,低对比则不易分开。

对比度和文本易读性

色彩对比是体现色彩理论对于设计可用性至关重要的领域。 设计师经常喜欢使用低对比以使事物看起来美观,和谐。 然而,美观并不意味着有好的易读性。 当你在文本中使用色彩时,你需要知道把两种对比不明显的颜色放在一起会导致你的内容难以阅读。 特别是在手机端,用户会经常处于户外或者光线较为充足的地方,这时用户会因为屏幕反光根本看不到内容。

不要忽视色彩在手机APP设计中的作用

这行文本难以从其背景色彩中辨认出来。

为了确保界面对比度处于一个合理的范围内,你只需要检查下对比度。对比度体现了一种色彩如何区别于另一种色彩(通常写为1:1或21:1)。 比率中的两个数之间的差越大,色彩之间的相对亮度的差越大。W3C建议对正文和图像文本使用以下对比度:

  • 较小的文本与背景的对比度最少要达到5:1
  • 较大的文本(14pt 粗体/18pt 正常或以上)与背景的对比度要达到3:1以上。

这条建议也可以帮助低视力,色盲或视力恶化的用户看到并阅读屏幕上的文字。

不要忽视色彩在手机APP设计中的作用

这行文本符合色彩对比度建议,从背景色彩中清晰可辨。

图标或其他关键元素也应使用上述推荐的对比度。

不要忽视色彩在手机APP设计中的作用

 图片来源:Material Design

左:图标不符合色彩对比度建议。 右:图标遵循色彩对比度建议,从背景中清晰可辨。

有几个免费工具可对你所选调色板的对比度提供有意义的反馈。 WebAIM’s Color Contrast Checker是其中一个,它可以让你测试已经选择的色彩。

对比度和用户焦点

除了建立易读的文本之外,对比度还可以引起用户对屏幕上的特定元素的注意。 一般来说,高对比度是重要内容或关键元素的最佳选择。所以如果你想让用户看到或点击什么东西,可以使其与众不同! 举例来说,用户更可能点击与背景对比强烈的具有号召性的按钮。

不要忽视色彩在手机APP设计中的作用

对比度使得红色区域看起来不同于屏幕的其他部分。

针对色盲用户群体的设计

你有没有想过你的APP使用人群中会有视力障碍者?

当人们谈论色盲时,他们通常指的是不能感知某些色彩。 大约8%的男性和0.5%的女性患有不同程度的色盲。其中最常见的是红绿色盲。

不要忽视色彩在手机APP设计中的作用

正常人和红绿色盲看到的相同色彩(黑色和绿色缺陷)

因为色盲有多重表现形式,例如红绿色盲,蓝黄色盲和单色色盲。所以运用多样的视觉线索来连接你APP的重要状态是很重要的。绝不要仅仅依靠色彩来表示系统状态。 相反,应使用元素(如笔画,指示符,图案,纹理或文本)来描述操作和内容。

Avocode允许你可视地比较设计的修订版本。

此外,Photoshop有非常实用的工具来帮助模拟色盲。这个功能让设计师可以看到在色盲用户的眼中你的界面是什么样子的。

不要忽视色彩在手机APP设计中的作用

Airbn bAPP登录页面(图片来源:Pinterest)

总结

我们仅涵盖了如何通过色彩来提高APP UI设计的基本理论。提升色彩使用技能是一个不断努力和积累的过程。如果你想学习如何创建美观,使用的配色方案,需要的是实践,决心和大量的用户测试。

 

原作者:Nick Babich

原文地址:点击查看

作者:cc, yuan

译文地址:携程设计委员会

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24313/

(0)
CatherineCatherine
上一篇 2017-05-08 08:04
下一篇 2017-05-08 09:53

相关推荐

  • 为了生存!QQ空间升级改变非主流印象,论用户体验的重要性

    关注留学签证移民的新资讯分享学习工作生活的新鲜事JT EDUCATION点击上方关注非主流、火星文、酷炫的QQ空间45度叫仰望天空、明媚的忧伤十年前,谁还不是个中二症患者?曾经的中二少年变成了大人大人不再点开的QQ空间也变样了面对微博微信这样的对手总要活下去这次QQ空间品牌升级重点在于对用户体验的设计哦?又是用户体验这个词真的是使用频率越来越高什么产品和服务都强调用户体验但具体说起来是什么意思呢?比如有人说现在发微博就像玩扫雷不知道发个...

    2018-03-06
  • 怎么策划一个成功的活动——线上篇

    怎么策划一个牛逼哄哄的线上活动?大家都说网络营销火爆,都在搞线上活动,那么,一份完整的线上策划案,应该怎么准备呢?知乎用户柒石二为我们提供了一份可行的回答。 始。 先问度娘: “线上活动是指依托于网络的…

    交互设计 2014-12-13
  • 【干货】超全面!阿里设计师教你写好一份设计文档

    鸿影:一份设计文档 的 结构大概可以分成Background项目背景、Schedule排期、History版本历史记录、Information Architecture信息架构分析(包括Site Map、Experience Map、Flow等)、Framework框架设计、Wireframe线框图和Mockup视觉稿等。取决于实际项目的情况,部分内容可以省略,也可以 加入更多,比如Storyboard故事板,Prototype可交互原型等。

    2017-06-05
  • 关于外卖产品的交互设计与用户体验分析

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2017-05-23
  • 4种用户体验研究方法,提升最优化测试

    本文讲述的是户研究与A/B测试相结合,发现问题的真实原因,并进行有效的判断处理。“实验可以证实一个理论,但实验永远无法创造出一个理论。   ” —— 爱因斯坦

    2017-05-09
  • UX设计师不得不掌握的心理学技巧

    不要让视觉效果过重以至于霸占了整个网页的重心
    视频比起文本和图片更容易吸引用户的注意力
    女性和孩子的形象更容易吸引用户的注意力
    用户浏览页面的视觉轨迹是“F”型的

    动机
    能力
    触发

    2017-05-23
  • iOS 9设计规范 中文版 完整版

    文章索引 1.1 为iOS而设计(Designing for iOS) 1.1.1 设计跟随内容 (Defer to Content) 1.1.2 保证清晰(Provide Clarity) 1.1.3 用深度层次来进行交流(Use Depth to Communicate) 1.2 iOS应用解析(iOS App Anatomy)…

    2016-05-18
  • 做好用户体验是赢得口碑营销的关键

    点击上方蓝色字体关注-商业洞察与您一起把脉商业未来趋势,洞见企业未来成功之道文/陈楠华:中国管理科学研究院特聘研究员,2015年度新三板十大新锐人物,2015年度中国创新经济领军人物,中国富爱产业链控股集团董事长,富爱科技产业发展有限公司董事长。本文由商业洞察战略合作伙伴竹石文化授权发布转载请标明作者、来源和ID用户体验:口碑的源头“用户体验”在近几年被热炒的“互联网思维”中是一个重要的关键词。现在的商业评论在点评各大公司最新推出的品牌...

    2018-03-26
  • 是时候聊聊具有直觉性的UI和交互设计了

    UI和交互设计中常常会强调某项设计需要足够的“直觉性”,但是直觉性的设计说来容易,实现却往往差强人意。但是不得不承认,它是目前交互和UI设计的刚需。“想象一下,如果桌面上反过来一颗球让你去转动控制,感觉应该比鼠标运作顺畅些。我们原本认为这是个好点子……可是我以前从未观潮这种触感的细节。”“当孩子们操作鼠标和遥控杆的时候,会不自觉地低头看输入装置……后来有人想到,如果操作时运动肌肉群范围较大,也许他们可以不必低头。我们做了一个大型轨迹球装置,让他们可以用手臂甚至肩膀牵动来操作,这样就把问题解决了。”“我们先是观察什么样的操作方式比较合乎自然,然后提出想法,再进行测试。”“心智模型指一个人对于事物运作的思维过程,即一个人对于周遭世界的理解。心智模型的基础是不完整的显示、过去的经验甚至直觉感知。它有助于形成人的动作和行为,影响人在复杂情况下的关注点,并确定人们如何着手解决问题。”(如果你仔细观察,会发现这个时候的设计师将纸的纹理运用到窗口上,此处的设计和Material Design 中纸的隐喻不谋而合,这又何尝不是一种潜意识的引导呢?)

    2017-05-16
  • 从设计默认值开始,给用户和产品带来更好的用户体验

    默认值是你的数字产品的默认基准设定值,这些填充设置的默认值虽然常常不多,但是换个角度来看,它更像是是设计师为设计作出一些基本的“决定”,帮助用户更快的让产品运行起来,上手使用。默认值对于产品和用户而言很重要,今天的文章,我们将会探讨设计师要如何设置默认值的样式、交互和字段细节,确保给用户和产品都能带来更好的用户体验。

    2017-05-03