“取消”在左,“确定”在右

现在很多App模态窗口的button排列都是“取消”在左,“确定”在右,Android 4.0在HIG里也规定了该排列法则,看了一些文章研究了一下为什么是这样排列,相当有意思。

具体的原因,分以下大致三点:

1.视觉流

首先认定绝大多数模态窗口的客观意图是引导用户进行积极操作即点击“确定”。

“取消”在右,“确定”在左的情况下,视觉轨迹是 content—确定—取消—确定

用户需要浏览完所有内容并回到“确定”处进行操作,一共4个轨迹点,3次寻迹。

“取消”在左,“确定”在右的情况下,视觉轨迹是 content—取消—确定

用户浏览到“确定”时就可以做出选择了,一共3个轨迹点,2次寻迹。

由此可见“取消”在右,“确定”在左的布局可以减少视觉焦点移动次数。


2.古腾堡法则

该法则描述了一个理论:人的眼球移动规律趋向于从上到下,从左到右,在视觉区域中,左上角通常为视觉起始点,右下角为视觉终点,而右上和左下是视觉落盲点。

从这个理论出发,把“确认”按钮放在视觉终点区域,这样用户既不会错过“确认”这个重要操作,也保证用户在这之前都扫描到了所有的操作。


3.“上一步”以及“下一步”的操作习惯

“取消”对应“上一步”,类似于撤销动作

“确定”对应“下一步”,类似于肯定行为

这个很好感觉出来吧...


如果看不明白,可以参考下面的链接,文章是配图的很好懂,感谢原文作者~

http://www.yixieshi.com/ucd/12690.html 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容