♝点击上方“交互设计学堂”关注我们,送电子书

一次做设计的时候,一个同事很好奇的问了下确定按钮是在左侧还是右侧!我这段时间正好有空闲,也很好奇想去了解,所以就有了这篇文章,与大家分享。

一、调研主流规范和主流应用1. iOS系统规范

我先去iOS设计规范的官方网站查阅,发现苹果规范没有提到取消和执行按钮的位置要求!只说到弹出框可以包含最多3个按钮,其中一个必须要是不执行按钮,用于取消执行操作。

但我们可以看到展示的demo上,取消按钮是在左侧的,执行按钮是在右侧。

左边右边是阑尾炎_左边右边是哪个电视剧的主题歌_l是左边还是右边?

同时我也查询了按钮的相关规范,也没做出相关的说明。但展示的demo,也是取消在左侧,右侧为执行按钮。

l是左边还是右边?_左边右边是阑尾炎_左边右边是哪个电视剧的主题歌

以上截图取自:macOS Design Themes/Human Interface Guidelines/windows and Views 章节 Alerts 内容。

2.安卓Material Design规范Dialogs章节

后来我去查阅了安卓端的规范,也没有给出详细的文字说明,但展示的demo显示取消在左侧,执行在右侧和iOS的规范是一样的。截图来自Material Design Dialogs 章节。

左边右边是哪个电视剧的主题歌_l是左边还是右边?_左边右边是阑尾炎

左边右边是哪个电视剧的主题歌_l是左边还是右边?_左边右边是阑尾炎

左边右边是哪个电视剧的主题歌_左边右边是阑尾炎_l是左边还是右边?

3.蚂蚁金服移动端设计规范

l是左边还是右边?_左边右边是阑尾炎_左边右边是哪个电视剧的主题歌

截图来自蚂蚁金服Ant Design移动端设计规范。

4. 主流应用

我们随机选择了一些app下载量比较大的应用,分别查看了安卓和苹果的应用,发现也是取消在左侧,执行在右侧。

二、分析原因

我们知道了绝大部分主流app都是这样设计,这个是表现,深层的原因是什么呢?

我先在网上查询相关文章,有的同学做了如下解释:

1. 阅读视线的顺序造成视线无意识回跳

左边右边是哪个电视剧的主题歌_左边右边是阑尾炎_l是左边还是右边?

我们可以看到当消息提示我们进行下一步操作的时候,我们会下意识的寻找动作(action)按钮,上图左侧是WP的弹窗,确定/取消。

我们需要点确定的时候会先进行扫视,确定按钮放置在左边的时候,往往会从左往右看一遍再无意识回跳到左边。而不是说我先看到左边有确定就停止往下浏览了。

2. 古腾堡法则

古腾堡法则指人们在浏览页面的时候,视觉都趋向于从上到下,从左到右的眼动规律。左上角是视觉的第一落点区,而右下角是视觉最终落点区。

用户的视觉中心往往在页面的左上方,而结束浏览时视线往往落在右下角,所以合理利用这个法则可以帮助用户更好地获取内容并采取行动。

l是左边还是右边?_左边右边是哪个电视剧的主题歌_左边右边是阑尾炎

文章来自。

古腾堡法则的弱项

特意去查询了《设计的原则》一书,里面讲到了古登堡图的介绍,里面有一条关于这个理论似乎只适合于大量同质信息平衡分布的情况。设计的元素的也会影响视线的变动。

图来自:《设计的原则》第102页。

l是左边还是右边?_左边右边是哪个电视剧的主题歌_左边右边是阑尾炎

三、定量分析

也有人做了定量研究,这30人被分成A和B两组,A组先使用放在左边的确定按钮,再使用放在右边的确定按钮;B组先使用放在右边的确定按钮,再使用放在左边的确定按钮。

l是左边还是右边?_左边右边是哪个电视剧的主题歌_左边右边是阑尾炎

有感兴趣的同学可以去看看此篇文章,文章来自 。

这个实验的观点:确定/执行按钮在右侧,出错率会更低。

我个人觉得有几个方面的疑问:

测试者来自哪个国家,因为国外版本的产品体验和国内的产品体验有很多的不同,使用产品的方式也有不一样的地方。

第二次操作操作者可能会带有“第一次操作的记忆”,因为测试的人更想早点结束获得一定的佣金,所以不一定会认真去看按钮文字,所以第一次的测试错误率更有价值,真实反应了用户的习惯操作。

结论

从理论、实验来看也只是推敲这个情况的深层原因,但无不例外的说明一点,就是确定/执行按钮在右侧,更符合人们的使用习惯。

这个习惯是从大量的产品使用当中,逐渐养成的习惯。我们做产品设计的时候,更多要依靠这种习惯,才可以让产品使用更加顺手。

如果产品想让用户更多执行确定操作,更应该把按钮放置在右侧。但如果你想让用户不执行相关操作,反其道而行之或许是一个办法,但这样也会引起用户的反感。

感谢阅读!

限时特惠:本站每日持续更新5-20节内部创业项目课程,一年会员
只需199元,全站资源免费下载点击查看详情
站长微信:
jjs406

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注