百科问答小站 logo
百科问答小站 font logo



在 App 里,遇到告警或者提示用户,「确定」按钮应该放在左边还是右边? 第1页

  

user avatar   moonmonster 网友的相关建议: 
      
iOS说,「 I'm always right 」,于是「确定」就在了右边。
Android倔强的说,「要在左边」,于是「确定」就在了左边。
接着,iOS把Android胖揍了一顿,「 stay foolish ,foolish......都TM要在右边」,Android被硬拗到了右边。

这是个老话题了,只是时间流转,各平台都在更新,我们也要与时俱进,有必要再拿出来提一提。

移动端三大主要平台,Android、iOS、Windows Phone,咱们逐个说。

1. 先从WP开始吧,WP平台内的弹出提示称之为「raw notifications」,延续Win桌面平台的设计原则。

图1

如图1所示,dialog内操作按键称之为「Commit button」,肯定性操作位于左边,否定性操作位于最右边。Win平台定义了具体的用法与顺序:Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel。传送门:msdn.microsoft.com/en-u ps.注意OK键没有在此间出没,后面具体说明。

图2

WP平台及Win8平台dialog内操作按键的左右顺序也是一致的(图2)。

2. iOS平台,它的出身与历史注定了与OS X在设计上的传承。与Win相反(或者说Win有意与OS X相反,这里面又要翻出一堆历史遗留问题了 ^_^)肯定性操作位于右边,否定性操作位于左边。(大多数情况下)ps. iOS需要注意按键高亮的状态。

图3

OS X用户预期所有的按键位于dialog的右底部,启动一个操作的按键总是位于最右侧。该按键称之为「Action button」,以确认当前dialog最重要的操作。取消按键位于「Action button」的左侧(图3左)。 OS X Interface Guidelines,传送门(参见Dialog章节): developer.apple.com/lib

iOS继承了OS X的设计原则(图3右),只是稍稍有些不一样,体现在对于Cancel的理解上:

  • 当操作涉及潜在的风险时,两个按键中「Cancel」按键应位于右侧,并高亮提示。
  • 当需要引导人们进行所期望的操作时,两个按键中的「Cancel」按应位于左侧,相对应的操作按键高亮提示。

iOS中「Cancel」可能位于左侧,也可能位于右侧,这取决于所执行的操作是否具有破坏性。 iOS平台更看中的是按键的高亮状态(iOS高亮状态始终在右侧,OS X则不然)。同时在dialog弹出的情况下按下Home键,应当是等同于点击了「Cancel」按键,并不执行任何操作。iOS Human Interface Guidelines,传送门(参见alert的描述): developer.apple.com/lib

3. Android平台,这才是最头痛的家伙,大多数的坑都在这里。刚出道时,可能是因为当时设计规范执行力度、Android系统的碎片化等原因,导致dialog内的操作按键顺序随着各应用开发者喜好而定,大多数与Win平台保持一致。更新至Android 4.x后,官方终于对此有了一个很明确的态度,并在Android Design里有了标准的定义。

图4

Dialog操作按钮通常是「取消」/「确定」,确定键同时也是首选操作以及最可能执行的操作。但是,如果涉及特殊操作例如关闭或等待,那么所有的按钮都应该使用动词。同是,dialog中肯定性的操作总是安排在右侧,而否定性的操作放在左侧。与iOS理念上统一,但也有所保留!^_^ ps.就算是到现在还是能看到大量的Android应用与该原则相悖,或许是惯性,或许是迁就低版本系统... -_-'

Android Design,传送门(参见Dialog章节):developer.android.com/d

聊完了各平台的设计规范,对各平台dialog内操作按键的顺序有所了解,大家知道怎么去进行设计了,但是身为设计者需要更进一步的思考,有兴趣的请越过下面华丽的切糕线。

-----------切糕线-----------

-----------切糕线-----------

如果你是一个苦逼的设计者,在完全没有设计原则指导的情况下,将如何安排Dialog内操作按键的顺序呢?...... 想个五分钟吧。

以下仅为个人观点!!欢迎打脸 ^_^

我倾向于肯定性操作位于右边,否定性操作位于左边,也就是「取消」/「确定」。ps.所说皆错

「确定」/「取消」,采用这种顺序最大的理由是符合自然的阅读顺序,也就是大部分从左起语言的顺序。用户在执行某操作弹出dialog后,视线最先接触的是需要执行的「Action」,因为设计者认为「Action」重要程度比「Cancel」要高,需要着重强调(这里涉及认知领域的首因效应,以后有机会再讲吧。)ps.由于是Win平台所采用的顺序,就简称为Win顺序吧。

「取消」/「确定」,由于主要是水果平台采用,以下简称为 OS X顺序,或者iOS顺序。说说具体为什么倾向它的几个理由:

  • 阅读视线流
  • 扫视时的阅读顺序
  • 逻辑顺序

1. 阅读视线流,Win顺序虽然能够用户视线更早接触到「Action」,但不可否认一个事实,用户会阅读完所有可操作的选项,这意味着用户的视线不会停留在「Action」上,它将继续向后进行扫描,在查看完所有可选项后,再返回之前的的「Action」执行相应操作。采用iOS顺序,用户的视线流将会更平滑,视线最终停留的位置也是「Action」所处的位置。通过图5对比,可以得知「确定」放置于左侧,将导致用户的视线流发生改变,用户视线流无意识的回跳,而放于右侧将保持视线流在一个方向,减少视线曲折搜索的过程。

图5

2. 扫视时的阅读顺序,有人可能会问了这与第1条理由有什么区别?阅读是由扫视(saccades)和凝视(fixation)两个动作连续组合、切换的过程。第1条的理由基于凝视(fixation)运动过程。

为什么在dialog弹出时会出现扫视?因为,用户对于dialog里的内容只是快速的浏览,或者说是没有人会认真阅读dialog里的内容。由此也引申出dialog设计时的一个重要原则:不要在dialog相关的action按键里写上「好」或「确定」等,应该用实际会发生的动作来命名。这也是为什么建议使用动词的原因。如:你需要执行一个「保存」操作,那你的dialog里出现的相关Action应该是「取消」和「保存」。

说回扫视,用户的在进行扫视时顺序往往如图6,最终视觉的落点是在视觉界面的右下角(Terminal Area),扫视终点往往就在「Action」区域上,该区域能够获得更多的视觉关注。这也是为什么Win及OS X桌面系统内的dialog按键均非居中显示,而是位于右下角的原因。Gutenberg Diagram(古藤堡图表)也是用以描述扫视顺序的模型(传送门:studiodino.com/info/new)。。ps.注意图6标识出的区域1,iOS在右侧「Action」键上加了高亮效果,这对视觉搜索有益。

图6

3. 逻辑顺序,首先让我们来对dialog内按键定义一下,「确定」按键是用户以执行相关操作的按键,点击后将对现有状态发生根本性的改变。「取消」按键是使用户返回到原来状态,取消当前dialog。

这意味着,用户点击「Action」后将进入下一步操作,点击「Cancel」将执行返回操作。想想我们常见的:浏览器上的导航按键、kindle上的左右翻页按键、安装软件过程当中的「上一步」「下一步」......等等!

如图7,用户在dialog内所看到的视觉顺序与逻辑顺序是一致的。

图7

另外,桌面平台上还考虑到用户左右手使用习惯,这其实与dialog内的逻辑顺序也有所关联。我们知道大部分的人主要是右手用户,当dialog内的「Action」位于右侧时,用户在操作时能够更为顺应他们自身的使用习惯。 这一点还体现在Win和OS X桌面文件排布顺序方面,OS X为了大部分的右手用户将桌面文件分布在屏幕的右侧。

图8

最后来个Ending,其实视觉顺序在设计时,或系统设计时是一条很重要的原则,需要设计师重视这条原则,举例说明(图9),从下图中将Win和OS X的窗口控制按键抽离出来,并将「关闭」替换成「取消」,如果将这些操作放置在一个dialog中,有没有发现它们还是符合这两个系统分别坚持的设计原则呢?

图9


BTW. 有同学建议采用上下结构解决左右顺序问题,这其实,与本文讨论的标的稍微有点偏差。-_-'

iOS及其它移动平台内有这样的结构,只是将其做了区分!iOS设计指导内将类似本文内描述的dialog称之为「Alert」,上下结构的dialog称之为「Action Sheet」,如图10及图11。两者之前的应用场景和交互方式均有所不同,在遭遇实际问题时,需要设计者考虑使用哪种方式。ps.之前我对iOS官方进行「Alert」及「Action Sheet」的区分也有点想不太透,在写完本文并

@ArtS

同学提出该问题后,终于有所明晰... ^_^

  • Action sheet为当前任务提供一系列的操作,即多操作选项。
  • Action sheet在执行涉及潜在风险操作时,让用户进行确认,并将潜在风险操作按键设置为红色,图11。
  • Action sheet在iPhone设备(小屏设备),从屏幕底部弹出,并提供「Cancel」操作。ps. iPad无视这条。

图10

图11

休假后的第一篇,略长...略长....... 囧




  

相关话题

  你遇到过哪些好的防呆设计? 
  LCC的交互设计和金史密斯的交互设计哪个比较好啊? 
  如何评价 2018 年 6 月 20 日微信订阅号的全新改版?为何要做此改变? 
  学工业设计要看那些网站? 
  iOS 和 Android 平台上,你最近看到哪些应用的界面设计的最好? 
  月薪2w的UI设计师都会什么? 
  设计师在工作中通过哪些方式获取灵感? 
  有哪些「无用」却充满灵光的设计? 
  为什么工业设计能力强大的苹果对于手机窄边框没有追求? 
  你认为现在的健康码设计有什么弊端吗? 

前一个讨论
有没有一张图片让你瞬间明白了什么叫没气质?
下一个讨论
GB 18030 根上跟 Unicode 有关系吗?





© 2024-11-25 - tinynew.org. All Rights Reserved.
© 2024-11-25 - tinynew.org. 保留所有权利