it-swarm.cn

确定/取消按钮应右对齐还是居中对齐?

我应该在对话框的哪里放置“确定/取消”按钮?在底部居中还是对齐?我已经看过两者,但我个人并不在乎,但是我想在我的应用程序中创建一致的外观。是否有任何指导方针,还是我应该做我想做的事情?

46
Jouke van der Maas

我认为这也适用于此问题并回答:

(剧透:没关系

在这种情况下,通常无关紧要。任何一种选择都有其良好的论据,并且任何选择都不会造成可用性灾难。如果在某些情况下选择“正确”的选择,可能会节省一些用户0.1秒的时间,但进行足够详尽的研究以找出该选择是什么根本不值得。最好将可用性资源花在那些可以使关键绩效指标变化83%或更多的事情上。

更多信息: seit.com/alertbox/ok-cancel.html

45
Nacho

当严格讲对齐时,除了保持一致之外,没有正确的答案。

但是,按钮的对齐方式与 按钮的位置或逻辑顺序 有关。

有两种通用范例可以应用于按钮**的定位。

  1. 阅读顺序-阅读顺序中遇到的第一个按钮是主要按钮(确定),并且其优先级高于后续选项(取消)
  2. 前进/后退-前移进度或动作(Ok)与向右移动相关,而后退或撤消(Cancel)与向左移动相关联。

按钮的对准可以影响用户的感知范例。这样,对齐和位置的某些组合可能会冲突,从而使用户感到困惑。

alt text

**假设从左到右阅读;从右到左阅读语言可能不一样。

35
g .

进行适合您的应用程序和目标操作系统的操作。

但是,正如您指出的那样,在整个应用程序中保持一致可能更重要。

24
ChrisF

我认为最好将它们正确对齐。

4
megubyte

它们始终在右边,用户希望它们在右边。确保为它们留出足够的空间,并给它们提供不同的样式以突出显示主要动作。

3
giancarlo

我更喜欢将最可能的操作(在这种情况下为“ OK”)定位在右侧,并给它提供某种颜色以使其易于发现,而在左侧将不太可能的操作(在这种情况下为“ Cancel”)设置为灰色或灰色。沿着表单背景的颜色。

我认为将它们并排放置是不好的设计。遵循“不要让我思考”的方法,当我需要取消时-我停下来寻找按钮,但在其他所有时间中,我只想自动执行操作。

另外 请参阅有关ui.stackexchange的问题

3
idophir

这取决于您的平台。 Windows将按钮按<确定> <取消>的顺序放置在右侧,将Mac OSX按<取消> <确定>的顺序放置。像其他答案一样。对于按钮放置,我希望使用右下侧。

2
sysscore

我认为应按“ OK”或您优先的操作按钮位于左侧,原因如下:1:用户在表单或对话框上使用键盘的比例很高,如果用户使用制表符位于左侧,则用户将花费更少的时间通过制表键来执行最有利的操作。 2:眼睛旋转或菲特定律3:在以语音模式驾驶或访问应用程序时,请考虑盲人(半盲人)或应用程序的使用。 4:最后至少要使用动词作为动作

该论坛中有很多可用的主题,请仔细阅读

另外请记住,我的建议不适用于小型设备。

2
Hemchandra

对于线性过程(如安装程序),将“下一步”按钮向右对齐(在西方环境中)可能更直观。

我想说您的按钮顺序更为重要。在Windows上,“确定”按钮始终位于左侧,而“取消”按钮始终位于右侧。因为用户不阅读,所以交换“确定”和“取消”按钮(就像某些已移植的Mac应用程序一样)会使用户感到困惑。

2
Petrus Theron

我认为这取决于设计。如果您在表单中使用标准设计,则可以将“确定/取消”按钮放在右侧(http://bit.ly/9IzQo0),但是如果您使用CSS来更改表单,则可以将它们放置在表单中在中心(http://www.tumblr.com/register)。

1
rgaspary

如果您的表单字段是左对齐的,那么将按钮也左对齐似乎也是有意义的。以下是一些有关用户的眼睛实际去向和反应速度的研究: http://www.lukew.com/ff/entry.asp?571

这表明这两个选项的左对齐是最佳的设计选择-尤其是当上述表单控件也左对齐时。将“提交”和“取消”按钮放在左侧,意味着人们的眼睛可以走的距离更短。

就他们的眼动而言,人们在使用[按钮右对齐的选项]时效率最低。

1
Luke

我认为按案例批评这样的主题很容易,但是我认为每个人在发表自己的意见和/或测试结果时都应考虑整个设计系统和/或模式库。事实是,根据内容和测试,某些内容可能会显示更高的转化率,左侧为OK,右侧为OK。

但是,在考虑整个设计系统时,您是否认为一致性比在单个左右测试中效果最好的情况要好?我同意,当存在体贴的负面外部因素(例如“删除付款资料”,不可逆的内容等)时,您希望有意地逆转“转发”操作,在这种情况下,将CTA放在左侧并取消在右边。

但是,即使考虑到这一点,我们也可以假设(此时)大多数用户是Windows用户,并且您将进入逐步的进度检查流程。您可能希望“结帐”或“继续”在右侧,而后退或取消在左侧。大多数模式用法取消/确定布局(Foundation除外)也是如此,但是对于那些争论单个A/B测试或使用更高转换率的测试的人来说,这并不是一件好事左,右。

就个人而言,就测试经验而言,CTA在右边工作得最好,但是我一直很好奇人们使用的哪些度量标准具有样式指南或设计模式,在最左侧显示了CTA。

1
Arondale
  1. 只要它们靠得很近就暗示他们是兄弟姐妹,顺序就没有关系。也就是说,“确定”和“取消”按钮执行不同的操作,但是它们影响相同的元素。
  2. 对于从左到右的语言,我会将按钮放在中间或向右平移。
  3. 我会强调使用与商标匹配的颜色的“确定”按钮。
0
Tim Huynh

我通常在左侧使用“确定”,在右侧使用“取消”。

我可以看到更改此模式的唯一情况(请注意,这是在割裂头发)将是用户方面不可撤消的操作(即删除我的帐户,杀死所有人类等),然后我可能希望偏离以迫使他们考虑该操作或将默认操作强制为更安全的选择。

0
drivingmenuts

根据 Gutenberg图 ,终端区域(用户在扫描页面内容之后站点将显示其最终呼叫的区域)位于屏幕的右下角。由于西方读者的自然阅读方式,将按钮放在此位置实际上减少了用户的疲劳感,因为他们在此位置完成了浏览。如果按钮位于左下角,则用户通常会在终端区域中结束,并且必须根据召回操作返回到左侧以进行操作。此模式适用于弹出窗口以及编辑/添加屏幕。

此一般模式也适用于按钮放置的顺序。如果您在“取消”之前列出“确定”,则用户几乎总是在选择所需选项之前先查看所有选项。在大多数情况下,用户将要在“取消”上单击“确定”。这意味着他们先查看“确定”,然后单击“取消”,然后再移回“确定”。很小,但是仍然需要增加工作量。

0
Brad Hutchison

很好的答案在这里。没有人提到菲特定律,该定律控制着GUI中单击目标的速度(和难易程度)。它为放置主按钮提供了一些硬性的科学依据。

基本上,菲茨定律( https://zh.wikipedia.org/wiki/Fitts%27s_law )指出,目标的大小和距离可预期地影响击中目标的时间。当按钮位于“框”的一角时,目标大小可以说是无限的(唯一真正无限的目标大小是计算机屏幕的各个角,光标会自行停止移动)。尽管速度并非始终是首要考虑因素,但舒适性(易用性)应该成为首要考虑因素。

交互式演示(没有角落!): http://simonwallner.at/ext/fitts/

0
Rashcom