之前在一个web系统的设计中,和另一个设计师讨论,“保存”和“取消”按钮该怎么设计。我的观点是,保存是比取消更常用的按钮,也是用户的主要目的(用户不会为了取消来使用表单),所以在视觉上,保存按钮应该比取消按钮更醒目,这样更容易被用户先看到,从而提高用户的效率。
下图:Google analytics系统中,Apply以按钮的形式表现,cancel以链接形式表现
后来碰巧看到Luke Wroblewski写的“Primary & Secondary Actions in Web Forms”这篇文章。作者把“提交”、“保存”,“继续”这样的按钮定义为主要动作。因为它们是用户操作表单的主要目的,而“取消”、“重置”、“撤销”这样的按钮定义为次要动作,因为这些动作不是操作表单的主要目的,并且它们的点击效果是负面的。
作者一共设计了6种视觉形式,并通过眼动仪来测试哪种表现最好。结果有点出乎我的意料,视觉上不区分主要动作和次要动作的设计方案,用户完成表单的速度最快。但即便如此,作者仍然建议采用视觉提示更明显的方案:“按钮+链接”。
想更进一步讨论下,为什么会有这个问题。按照don’t make me think的说法,在没有选择的情况下,用户更容易快速地做出决定。或者不应该说是决定,因为本来就不需要用户去判断。没有多余的按钮吸引注意力,也没有多余的按钮可以点,用户不假思索地就完成了操作。比如当“下一步”按钮独立出现时,用户往往点得很愉悦。
下图:独立出现的“下一步”
但是当按钮成对或者多个出现时,问题就来了,用户必须看完所有的按钮文字,才能做出判断,这无疑是设计师不愿意看到的。所以会在按钮上做一些引导,客户端比较常见的做法就是把最常用的按钮或者主要操作的按钮设为焦点状态。
下图:opera浏览器退出时的弹出对话框,Exit被设为焦点按钮
而网页端因为不存在按钮焦点状态,所以需要通过别的方法来实现同样的效果。常见的拉开视觉层次的几个手段有:
1.按钮的排序
Windows系统上主要操作都是放在左侧,用户的浏览顺序也是从左侧开始,所以左侧的按钮最容易先被用户看到。
2.按钮的大小
一般是指按钮的长短。可以通过加长文字,或者直接加长按钮的手段来拉开视觉层次。这样的按钮更容易先被用户的视线捕捉到。
下图:“上一页”按钮只有一个箭头,而“下一页”按钮为文字加箭头
下图:“确定”按钮比“取消”按钮更长
3.按钮的颜色质感
通过给按钮添加颜色或质感,以模仿客户端焦点按钮的表现。
下图:wordpress将“publish”按钮人为地设为高亮
在Google analytics这样的web系统中,由于采用的是系统默认样式的按钮,所以它选择把次要操作以链接的形式展现,从而拉开视觉层次。这样的设计在“登录”,“注册”中也很常见。
下图:google帐号的登录
最后再多说一句,表扬下opera的设计。Opera的弹出框,让像我这样的用户,只看按钮就能快速做出判断,而不用浏览对话框主体文字。如果我需要更快做出判断,只看焦点按钮就可以了。
相比之下,大多数软件的按钮上仅仅写着“确定”,“取消”;我必须阅读按钮之上的大段文字,才敢按下其中一个。不仅强迫我选择,还强迫我阅读…
下图:三个按钮上很清楚的写明了动作
总结一下刚才所说:
1.如果可能,尽量只给用户一个按钮。
2.当需要呈现多个按钮,并且它们之间存在主要动作和次要动作的关系时,通过拉开视觉层次的方法给用户更好的引导。
3.按钮的文字应该引起设计师足够的重视,承担更重要的角色,帮助用户快速做出判断。
原文链接:http://cdc.tencent.com/2122
原文作者:死猫
分享到:
相关推荐
企业如何与环境共荣共存——以电信大厂Nokia为例.ppt
如何实现普及普惠与竞赛选拔共存——“青少年机器人教育”分论坛.pdf
2020高考历史二轮主题升级练(九)多元共存——世界经济模式的探索Word版含解析.docx
"狂风与静音共存——自制CPU风扇隔音罩" 本文主要介绍了一种自制CPU风扇隔音罩的制作方法,旨在解决CPU风扇噪音问题。作者使用的CPU是AMD Athlon XP1700,发热量非常高,特别是在炎热的夏天,于是作者购买了一个...
IE多版本共存的解决方案——IETester 升级版本到IE7就可以用IE7的tab了
麦肯锡:人机共存的新纪元—— 自动化、就业和生产力.pdf
Android12多网共存patch
《征服高考化学选择题之二——离子共存》 离子共存问题是高中化学的重要知识点,尤其在高考中占据显著地位,历年高考题中无一例外地涉及到这一考点。解决离子共存问题,需要掌握以下几个核心原则: 首先,观察溶液...
IE多版本共存,支持多个版本的IE,可以同时安装5.0-8.0的IE浏览器,便于测试开发
考热点选择题——02离子共存[精选].doc
本报告提供了大量信息,旨在通过算法给我们的日常生活带来的变化来指导公民社会。 它探讨了算法在家庭、工作场所和市场中的作用。 该指南以简单的方式介绍了算法的各种有用应用,并讨论了公民数据在算法驱动市场中的...
Android13多网共存patch
电影中的几个代表性人类角色——探员史普纳、科学家卡尔文和资本家罗伯特森,分别代表了人类面对智能化未来的态度:抗拒、接受和利用。 史普纳因为与机器人的不愉快经历,对所有机器人持有戒备和疏离的态度。他的...
m_imgBtn.SetWindowTextW(_T("按钮文本")); // 设置文本 } ``` 至此,你已经成功地创建了一个能够同时显示图标和文本的自定义按钮。通过这个过程,你可以学到MFC中类的继承、成员变量的管理、消息处理、以及自定义...
【人机共存的新纪元——自动化、就业和生产力】报告揭示了自动化技术对现代经济和劳动力市场产生的深远影响。随着机器人技术、人工智能(AI)和机器学习的迅速发展,机器在越来越多的工作领域中展现出与人类相媲美的...
IE多版本共存的解决方案——IETester
后整体世界的拓展——两种社会制度的共存与竞争_图.pptx
总的来说,共存版QQ是一项便利的技术,它满足了用户同时管理多个QQ账号的需求,但同时也需要注意其潜在的安全风险和对设备性能的影响。用户在享受多账号共存带来的便利时,也要提高警惕,做好数据安全和设备维护的...
机械设备行业周报:二季度板块经营回顾——高景气持续与周期反转共存.pdf
Office多版本共存方法和随意设置打开方式 Office多版本共存方法是指在同一个操作系统中同时安装多个版本的Office办公软件,例如Office 2003、Office 2007、Office 2010和Office 2013等。这种方法可以满足不同用户的...