不要忽视色彩在手机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

相关推荐

  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • 2018年产品经理交互设计交流分享大会

    活动背景一个优秀的产品经理不仅能引导产品的发展,而且还能引导公司的发展。同时,他还是一名优秀的执行者、项目管理和团队管理者,具备敏锐的洞察力,能在用户心理和产品细节间灵活游走,打磨出令人惊叹的产品。所以,在成为CEO之前,先成为一名出色的产品经理吧。然而当我们投入到实际工作中时,总是一次又_次遇到阻碍:和运营、枝术部门沟通不畅,项目推进难。公司要求不高,任务很轻松就能完成,想要挑战大公司,却深知自己还欠火候。看过许多千货,听过许多直播,...

    2018-04-17
  • 017. 单选按钮、复选按钮——axure线框图部件库介绍

    有时候发现这做事情坚持下来是一件很不容易的,写教程也一样,不过听到很多朋友对我说 这个全部是图片的教程 对他们入门帮助很多,我就想想 在坚持坚持把基础部分先完善了! 1. 简单的问卷调查: 您的性别?  答案…

    2014-09-12
  • 掌握这5个方面,让你具备真正的交互设计思维!

    Z Yuhan(英国约克大学人机交互硕士):交互思维是什么?网上的搜索结果大多是一些交互设计 的方法。但是我这里要讲的,是真正做交互设计 所具备的思维方式。交互设计在国内发展的并不成熟,还有很长一段路要走。很多人,甚至包括交互设计师自身,对这一工作的性质和价值都未必有足够的了解。

    2017-08-21
  • 怎样做好汽车交互设计?

    文章来源:汽车造型设计编辑整理:IO酱车内交互系统看似只是整车的一小部分,但由于承担了车辆和用户的“交流”任务,因此里面涉及到的内容很多,每一项拿出来都需要巨幅讨论,今天我们就和大家概括谈谈这里面的几点。目前重点汽车交互设计是决定智能汽车发展水平的重要标志,现阶段智能汽车在此方面关注的主要一点是用户体验。设计流程汽车交互设计的一般流程包括:1. 需求沟通;2. 资料调研;3. 专家评估;4. 用户研究;5. 需求及信息架构梳理;6. 概...

    2018-03-15
  • 为什么蓝色会成为UI设计中最常用的色彩?

    蓝色依然是一种安全的色彩,当你的产品或者网站契合蓝色的气质的时候,不妨选择它,但是始终记住一点:选择适合自己的产品的色彩,才是正确的选择。

    2017-06-08
  • 移动APP:2015 UI/UX 趋势,Material design布局未来!

    移动APP:2015 UI/UX 趋势,Material design布局未来! 在国内,移动端的发展远远超过网页,初创公司们想拓展品牌都会首选手机App。那么你知道近期App设计风格的趋势么,想要做出不土、高逼格的App,以下的趋势你是…

    2015-08-04
  • 纽约视觉艺术学院SVA交互设计硕士毕业展 | 点赞按钮背后的学问

    SVA的交互设计专业汇集享有国际盛誉的设计师及其当今各大领域的专业人士,学生背景来自不同行业,有交互、数字媒体、纯艺、产品、平面、家居、建筑、计算机、社会学等等,学生之间能互补知识,拓展思路。要你设计一个点赞按钮,你会怎么设计?交互设计是什么?不知道的话,你可以回顾「谷歌UX交互设计师丨郑嘉」的分享会:用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX,她认为交互设计思维是用逻辑支持你的设计决定。SVA交互设计看点读交互的学生,...

    2018-05-04
  • 交互设计自查表的建立:思路与项目实例解析

    我习惯从层级的角度由高至低地排查各个交互层面可能存在的问题——首先是信息架构与流程这一最高层级,然后是界面的具体呈现,以及基于界面呈现的交互过程,最后才是以上自查中均未涵括的其他特殊情形。(1)确定当前阶段 → (2)阅读设备、数量、所属项目、请购人员、发起时间等基本信息 → (3)确定自己在本流程中的身份(因为部分场景下,当前用户的身份可能有多种可能性,需要用户再做确认)→ (4)在列表区阅读此前的流程历史,必要时可上下滑动或点击查看附件 → (5)确定当前步骤等待自己完成的是什么任务 → (6)执行该任务。

    2017-05-12
  • 智能窗帘:场景化智能应用 让用户体验“懒”生活

    科技总是带给我们惊喜。智能家居不再是一个研发层面的概念,在日常生活中已经越来越普及。智能窗帘是智能家居系统中常常被忽视,却又见微知著的家装部分。智能窗帘无需手动,一键掌控家居空间的透光度,智能防紫外线、隔音隔热和保温环保,给用户细致的关怀。智能窗帘的场景化智能应用,让用户体验懒惰带来的享受。冬天清晨,想打开窗帘让阳光温暖房间,却又懒得起身离开暖被窝,使用智能窗帘,应时自动打开,敞开度适宜,光线强弱刚刚好,惬意的在阳光中醒来。炎热夏日,离...

    2018-02-25