Saga

Wx: saga_jeanne
欢迎互联网同好加weixin

转载:确定放左还是放右

相信很多做过不同平台的交互设计师可能都纠结过一个问题:“弹窗中,确定按钮是放在左边还是右边?”

这个问题困恼我很长时间,也曾经和程序员争执了很久。因为不同的平台对这个位置的规则是不一样的,单独从用户体验的角度来考虑也有

完全2种相反的设计方法,所以想要统一这个按钮的位置并不简单。


不简单的按钮位置

其实,一个弹窗中如果包含2个按钮,往往并不只是用“确定”和“取消”这么概括,实际上他们分为:

积极的按钮:就是我们希望引导用户点击的按钮

消极的按钮:就是我们希望引导用户不要点击的按钮,或者关闭弹窗的按钮

比如在关注用户的时候,"确定"是积极的按钮。但在取消关注的时候,"确定"就是消极的按钮了。


<如图:2个弹窗中取消按钮因为所赋予的意义不同,放的位置是完全相反的>

我们往往把积极的、我们希望用户点击的按钮,放在更显眼更好点击,更符合用户体验的位置。

那到底什么样的位置才是显眼的位置?更符合用户体验的位置呢?我们看看各家平台对于这个位置是如何规定的:


各个平台的区别

1,Windows平台和WindowsPhone和web

因为Windows很早以前就有过规划,积极的按钮是放在弹窗的左边的,而消极的按钮是放在右边。所以我们在使用大部分桌面

应用,以及网页的时候,都是确定在左边的。

<Windows对于按钮位置的标准>

<大部分网页也遵从Windows的标准>


另外提一下,古老的塞班也是和Windows一样的


2,Mac和ios平台

Mac平台和ios平台则完全相反,是将积极的按钮放在右边,消极的按钮放在左边的。


<Mac和ios平台>


3、Android平台

最不统一的就是Android平台呢,因为最初Android2.x的时候对于规范一直没有很好的强调,所以弹窗内的操作往往都依着开发者的喜好而定,有完全模仿ios的,也有和Win平台一致的。Android4.x之后,官方终于对此有了一个很明确的态度,并在Android Design里有了标准的定义。

<积极的操作放在了右边,而消极的操作放在左边,与ios一致。>


他们为什么有这样的区别呢?

首先,ios和Android都一致的将积极的按钮放在了右边,消极的放在了左边,我想其中的原因应该是:

1,人阅读的顺序是从左到右

绝大多数国家,尤其是英语国家,阅读的顺序都是从左上到右下的方向进行阅读的。按照阅读的习惯,“取消”是退,“确定”是进,所以“取消”会放在左边的位置,确定会放在右边的位置。


2,用户在操作时往往右边是前进,左边是后退

现在关于用户是左手持机还是右手持机的问题在网上争论还很大,但是我们如果仔细观察各大手机厂商对持机的标准不难看出:


<各大厂商的宣传视频都是左手持机>



<而各个应用界面所表现出来的也是,左边是返回,右边是继续>

所以不难理解,假设大部分人是左手持机成立的话,左面实际上是往回走的一面,右面是向前进的一面。所以消极的按钮,比如“取消”“关闭”等都是放在左面,积极的按钮比如“确定”“播放”“运行”等都市放在右边。


那么为什么Windows平台的规划完全相反呢?我想其中的原因应该是根据最早的历史,在命令行操作程序还没有弹窗时,类似的提示是这样的体验:

而<Y/N>则是由来于英语基本的口语询问方法”yes or no?“的语法格式。

可见,Windows规划是可能是由于依照最初的实现模型而转变而来的,而且符合了一部分口语询问的句式。


哪一个更好呢?

其实通过研究发现这2种不同的设计,都有其中的道理,而且都恰好符合了一方面的用户心理模型。在无法完全比较出谁优谁劣下,我个人更喜欢于ios/Android的设计标准。因为用户在使用移动设备的场景更像是阅读,而不是对话,Windows平台规则沿用的更像是古老的程序语言。

但在实际工作的时候却不能这样:

我们可以发现Windows平台,web平台,wp7的大部分产品都是很一致的准循着放左边的规则,而苹果系列的产品也都很一致的遵循着右边的原则,除了Android外各个平台的产品都挺遵循官方规划的。我曾经观察过一些pc+ios的用户,发现他们在不同平台下转换的时候,并没有感觉到左右的不同而带来的奇怪,反到是同一平台下的产品如果采用了不同的规则,会让人产生很别扭的感觉。所以可能用户会在同一平台下习惯这个平台本身的样子,也许很多用户会觉得iPhone就是这样的,PC就是那样的,不会感到不舒适。所以在真正的工作当中,还是应该以官方的规划为准,在同一平台下保持统一的体验,遵循用户的行为。

但是在很多第三方应用中,都没有区分积极的按钮和消极的按钮的区别,而是简单的通过“确定”和“取消”来区分按钮的位置,而不考虑“确定”按钮在不同情景下完全不同的含义。这一点,希望大家都能意识到并且尽快优化!


评论 ( 1 )
热度 ( 3 )

© Saga | Powered by LOFTER