如何通过按键颜色的对比来引导用户

你有没有过意外点错按键的时候?当用户没有被正确引导时往往会在模态窗口上做出错误的决策。很多模态窗口会在不明确不同行动区别的条件下就弹出来。

不同按键之间明确的颜色对比能够引导用户进行正确的选择。确实明确的行动指示则会让用户困惑并降低他们的效率。这甚至还可能导致他们做出产生恶劣影响的错误选择。

正面、中性和负面行动

所有的按键都从属于三个大类之下:

1 正面 —— 改变、发送、添加信息

2 中性 —— 不做改变、返回屏幕(比如“取消”)

3 负面 —— 删除、重置、阻止信息

一个模态窗口上的几个按键通常会集成好几个行动。为了让用户能识别出它们之间的区别,每个按键的颜色对比是我们不可忽视的论题。

正面行为需要最高的对比度

正面行动时在模态窗口上最常见的一类。用户需要知道那个行为能帮助他们完成任务。你应该给这类行动按键最高的颜色对比度来帮助用户去达成目的。放在它旁边的其它任何中性或负面行动按键应该具有较低的颜色对比。

要想达到最高的对比度,给你的正面行为按键填充上一个冷色以及白色的文字。所谓冷色就是蓝、绿和紫色等那些看着较为舒缓的颜色。而此类实色上的白色文字会比普通一般的黑字更加出挑些。

在正面行动旁边的中性或负面行动按键不应该被填充颜色。如果你那么做了会导致所有的按键之间的颜色对比变得太过相近。反之,如果只让它们显示边框则能较好地凸显正面行为按键。

当负面行为按键拥有最高的对比度时

相较正面行动,负面行动不应该具备更高的对比度。正面行动往往使用频率更高且更安全,而对于负面按键,我们要确保用户不会因为误点而出错。但是如果只有负面和中性两种行动存在时,我们应该赋予负面行动更高的对比。

在这个案例中,你应该给负面行动按键填充上暖色。所谓的暖色就是指红、橙、黄等略刺眼的颜色。当用户看到它时,他们自然会明白点击之前要三思。

赋予中性行动最低的对比度

中性行动永远不会在一个模态窗口里单独存在,它总是会和正面或负面行动成对出现。它应被赋予最低的颜色对比以不干扰到另外两者。

黑色边框对于用户识别来说已经足够了。无填充颜色让用户的注意力不会从正面或负面行动上移开。

但注意了,不要灰化边框+字,不然用户很可能会误认为这是一个禁按(disable)的按键。再怎么样他们也需要按键能和背景有所区别开来。

结语

如果颜色对比明晰的话,正面、中性和负面行动可以一块出现。它们之间的对比越是清楚,用户就能越快地完成任务。颜色在界面上扮演着非常重要的角色——不仅仅是美感,页同样是能引导用户行动的一种强力工具。

译者:励定洲

原文链接:http://dwz.cn/1P4brw

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2015-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据的力量

吸睛大法!如何突出网页中的关键内容?

我有特别的抢眼技巧!今天的好文非常值得拜读,此文从对比、色彩、字体、留白等方面帮同学们将最关键的内容呈现出来,文末还附上一个特别有效果的检测方法,一眼就能看出你...

9810
来自专栏Golang语言社区

【Golang语言社区】H5游戏开发-从零开始开发一款H5小游戏(五) 必要的包装,游戏规则和场景设计

到这里我们已经讲了游戏的整体设计和实现。一个游戏要完整,还需要给它制定一个评分机制,它是整个游戏的关键所在。就好比一部电影,特效再好看,如果剧情狗血,那也是一部...

403120
来自专栏编程微刊

一份来自前端开发工程师的规范简历

43440
来自专栏hightopo

原 HT for Web中3D流动效果的实

25030
来自专栏无原型不设计

界面设计中如何增强CTA按钮召唤力?

以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

2.2K100
来自专栏phodal

前端读书路线图:从入门到编写框架

某天,我在阅读《JavaScript 框架设计:第 2 版》的时候,发现我在 2015 年画的读书路线系列中的前端篇,被收录到其中。

12400
来自专栏九彩拼盘的叨叨叨

扁平化设计开始流行啦~

在最近几年里,我们发现软件和应用的界面快速的从立体,纹理化变为扁平,简洁化。这种变化趋势是普遍存在的,我们来花些时间来看看这些变化是如何发生的,以及这些变化产生...

10140
来自专栏互联网杂技

视觉设计师需要懂的4个设计原理

把你的工作当作一门手艺,因为总有一些你能改进的东西。靠激励自己成为一个更好设计师。 ? 上周,我的一位读者发了一个问题:如何成为一个好的视觉设计师? 正如我在想...

38750
来自专栏无原型不设计

从iOS 11 UI Kit中谈谈iOS 11的新变化

北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新,UI、系统...

35990
来自专栏罗超频道

iPhone 6S会带来新一代输入法吗?

iOS每一次升级,App开发者都会如临大敌、严阵以待,以求App能够适配最新版iOS,各类应用纷纷较量谁是最先兼容iOS新版本的。9月16日被视作iOS史上最重...

35970

扫码关注云+社区

领取腾讯云代金券