设计对话框的时候，设计师很常碰到的问题就是“ok”跟“取消”两个按钮要怎么摆。

“ok”钮是完成使用者动作的最关键;“取消”也同样重要，因为可以刚刚的动作复原，回到原来的页面，防止犯错。根据上述的功能，要怎么决定它们摆放的顺序才是最好的呢?到底谁在左边谁在右边?

照惯例嘛，好不好?

很多人都觉得就照惯例来吧，但真的可以吗?

惯例无法解决这个问题。其实要大家遵照惯例设计顺序，是因为要让使用者有一致的体验;一致的体验在设计界是个满热门的词，也可能导致一种盲点，蒙蔽大家深刻思考使用者真正碰到的问题。如果大家都不明白惯例从何而来，那又如何知道遵守这??惯例有什么好处?如果这个惯例对使用者并没有好处要怎么办呢?

当然我们有一些设计惯例是被广泛使用的，但这里的重点是UI设计师不应该被限制住，必须要能更深入看待问题，了解设计背后的理由。

视觉份量、标示很重要，如同顺序

要让按钮更明显的话，可以加强文字的视觉份量(例如使用加粗的文字)，或者使用特别的标示(例如颜色)。而针对这两项传统来说，大家觉得比“顺序”重要许多;可是视觉份量与标示虽然重要，如果忽略了顺序，设计就不完整。

“ OK “应该放在右边

要仔细分析这个问题，其实需要先看设计师们常有的假设是否站得住脚。

有些设计师相信把第一顺位的“确认”钮放在左边，也就是在第二顺位的“取消”前面对使用者是比较好的，因为这样比较先看到“确认”，可以花比较少时间按。听起来也许有道理，但不能忽略使用者在决定要按什么钮之前，会先把所有的选项看过。

这代表大部分的使用者不会盲目的只按在左边的(第一顺位)按钮，而不注意到在左边的(第二顺位)按钮。在视觉上，很明显就是一个在左边，一个在右边。然后他们就会把眼睛移回到左边的按钮然后按下去，这样一来，就有三次的眼球动作。

当“ok ”放在左边，视觉方向比较复杂。

OK 按钮放在右边，视觉方向就一致了。

比较“ok”放在左边跟右边的效果：若把“ok”放右边，就只有两个视觉定点与一种视觉方向，视觉流动的速度就快许多。但如果放在左边，会让使用者比较比较容易按，但的确就会造成三个视觉定点，两个视觉方向。所以把“ok”放在右边的确会让使用者的速度快很多。

经验的ATAE匹配设计要求

当使用者按“取消”的时候，他们不会预期有什么动作，只是会回到原来的页面而已。

所以，“取消”按钮就像是“上一页”一样;但当使用者按了“ok”，就会期待接下来会如同按钮上说的，把他们带到下一个页面。所以“ok”就像是“下一步”一样。

把“上一页”放在左边，“下一步”放在右边，其实也配合了使用者的心智模式，是他们可以预期的动作。把使用者带到下一步的按钮放在右边，到上一步的在左边，这种顺序有逻辑的原因就是它符合使用者的左到右阅读习惯，右边代表的是向前，而左边代表的是后退。

下图的“ok ”钮把使用者带往“下一步”，而取消就是回到原来的视窗。

提供使用者更流畅的流程：放在右下的按钮相当于是结束区

放在右下角的按钮会让使用者比较好按，是因为这遵守了Gutenberg diagram，也就是下面图片所展示的“阅读重力(reading gravity)”流向。

在Gutenberg diagram里面，放在右下的按钮相当于是结束区，也就是使用者视觉浏览方向的最后一站，放在这个位置能让使用者了解最后一件要做的事是什么。

这不仅改进了视觉方向的复杂度，也改善了使用流程。使用者浏览的时候不用再跳过“ok钮”，因为在视觉的最后一站就会刚好看到它，所以就可以立刻按下去，进到下一步。

下图这种对话框就比较方便浏览，因为视线会直接停留在“ok ”钮

要分开还是一起?

还有个设计师常常思考的问题是：要把两个都放在右下角，还是一个放左下，一个放右下?

当你把两个按钮各放在两边角落时，也同样能与“上一页”“下一步”的使用习惯配对。但是，因为“ok”与“取消”按钮并不完全是像“上一页”“下一步”那样的流程钮，所以这样做并没有必要，而且坏处可能比好处多。

下图这样的摆放造成过大的视觉距离，让人难以比较两个按钮。但在某些状况中，我们需要衡量按这些钮会发生什么事情是。

如果要执行的是重要的动作，而且无法修改，那把“取消”跟“ok”放在一起是很重要的。

在这个情况里，“取消”按钮就像是“上一步”，但比“上一步”更重要，因为那更是一个“安全钮”，可以防止任何不理想的改变。如果把“取消”分开放在左下，会造成的危险是使用者可能会忽略“取消”这个选项，因为与“ok”隔得太远。把两个按钮放在一起可以让使用者一次看到有两个按钮。这就能让他们更有效率的比较两个按钮，一眼就看出要采取什么行动??。

结论：放哪里很重要

这种对话框经常被使用，尤其是在有重要讯息需要使用者详细阅读的时候，或是在需要执行重要动作的时候。在这种情况下，放置按钮的顺序将会影响使用者会采取什么动作。正确的顺序摆位能让资讯更清楚。当资讯够清楚，就可以防止使用者因为按错钮而造成严重错误。

文章评价

匿名用户

发布

全部评论：0

发布