- 设计理论 -

那些充满心机的“组合按钮”

作者:洋洋Leony 原文出处:海盐社
2018-07-20

9.jpeg

为什么说组合按钮有心机,是因为我们平常在遇到它们的时候并没有深入去了解这些组合按钮为何要这么排列和用色,大多数情况下我们的行为都是被动地被这些按钮携带的隐形目的所驱使。所以,身为设计师首先要明白在当下的场景中这些按钮承担了什么样的功能,这样我们才能更准确地设计出符合需求的组合按钮。

目录

1、按钮的功能种类

2、什么是组合按钮?

3、心机按钮组都有哪些特征?


01 按钮的功能种类

① 主按钮

② 次按钮

主按钮:

出场次数:在同一个操作区域最多出现一次。

展现方式:CTA(行为召唤按钮)通常以色彩鲜艳的纯色或者渐变色为填充色,吸引用户注意力,其主要作用就是引导人们做出某些特定行为,例如购买,联系或订阅等。

次按钮

出场次数:同一个操作区域可出现多个。

展现方式:

① 普通按钮,通常以较浅的颜作为按钮的填充色。

② 幽灵按钮,通常以较细的线框作为按钮的轮廓,无任何填充背景色。

02 什么是“组合按钮”

组合按钮:1个主操作 + n 个次操作

特征:组合按钮为引导用户做出特定行为,以纵向或者横向排列的方式,在大小、颜色或者操作顺序上做了明显的主次区分。

03 心机按钮都有哪些特征

① 鲜艳的色彩

下图左侧的iOS相册的组合按钮中鲜艳的红色按钮文字让人一眼就注意到了它。然而这个红色的“删除”按钮的本意并不是让你去点击它,而是告诉你:没考虑清楚就点击它,这张照片可就没了喽!所以,红色在这里代表警告的信号,以告知用户谨慎点击,以唤起对重要信息的注意力。

640.jpeg

② 反向操作顺序

除了用颜色可以提醒用户谨慎操作之外还有另一个办法,那就是组合中的反向操作顺序。

按钮的操作顺序包含:正向操作顺序和反向操作顺序

在垂直排列的组合中,通常情况下我们会把最重要的信息在顶部,最次要的信息在底部,因为我们人眼的阅读顺序是自上而下的,如上方右图微信页面的“发消息”和“视频通话”这两个组合按钮,就是按照正向操作顺序排列的;所以用户不需过多的思考就能识别出排在最顶部的绿色按钮就是我应该去点击的按钮。

而iOS相册中的“删除”按钮则是反向操作顺序,作为一个不可逆的的操作按钮却被赋予了较重的视觉关注,但这种视觉关注却又背负着让用户警惕的功能,所以这时,我们需要把它放在一个最末尾的位置上,至少在没过脑子就点击之前,我们的眼睛在毫不费力的情况下顺带阅读了其他几个按钮,所以,在这一组按钮中“操作正确”比“操作速度”更重要。所以,这张页面的目的不是让用户快很准地点击谁,而是让用户花时间留心一下不该轻易点击谁!

而在横向排列的组合按钮中,通常情况下会遵循从左至右的阅读顺序,例如下方淘宝的一组按钮会根据按钮之间的逻辑关系来确定谁应该排在最左侧而被用户第一个看到,即:外观→演示→效果,如果打乱顺序会让用户觉得非常疑惑。

640-1.jpeg

当然,商家为了达到某些特殊的目的,也会打乱阅读顺序,例如下方淘宝的“待评价”中的话费充值按钮:

640-2.jpeg

“待评价”页面主要目的是引导用户进行评价,所以“评价”按钮的颜色用了橙色来与其他的按钮在主次功能上进行区分。但是下方的“待评价”列表中,话费充值的“评价”按钮却在最左侧,并没有按照按钮之间的逻辑关系进行从左至右的排序。好奇心驱使我点开了话费充值的评价按钮,弹窗提示:因为部分用户的不当评价行为,淘宝已禁止发布评论。既然不能评价,那么就要想办法让用户在点击评论按钮时设置一些障碍,即打乱组合按钮的阅读顺序。

把“评价”按钮放在左侧,主要是放在不利于右手操作的左侧可以降低用户的点击欲;另外,“再次充值”按钮放在方便点击的右侧,仿佛在告诉用户:少说话,多充值!

至于为什么不能评价还依然使用橙色作为按钮色,我个人理解是为了保持所有“评价”按钮的视觉一致性。

另一种反向排列却是正向操作的组合按钮则用在侧滑交互动作的组合按钮中,例如下方的QQ和微信,对某个联系人进行向左侧滑动时,第一个映入眼帘的是”删除“按钮,“标为未读”和“置顶”则渐次入场。由此可见,这一组按钮并没有遵循从左至右的阅读顺序,而是遵循用户的交互顺序,即:删除→标为未读→置顶。

640-3.jpeg

说它是正向操作是因为作为主按钮的“删除”是放在方便操作的右侧,所以用户也不用去多想就能明白“删除”是这一组按钮中的主按钮。但是这里我想发句牢骚,一看到这个大色块的红色按钮我总有种点击下单购买的错觉,可能是国内的主流电商多以红黄的大色块作为CTA按钮的缘故,总让我忍不住想点击。不过好在QQ和微信的删除按钮都是可逆的操作按钮,万一真的不小心手抖做了误操作,那就麻烦了~

总结:

1、组合按钮的排列方式:

① 垂直排列 

② 横向排列

2、影响用户点击按钮的因素:

① 鲜艳的色彩

② 操作顺序

3、操作顺序包含:

① 正向操作

 ② 反向操作

4、心机按钮的特征:

① 引导用户点击(添加鲜艳的色彩,方便单手操作)

②  障碍用户点击(打乱阅读顺序,反向操作顺序)

参考:

一个 UI 设计语言

https://ant.design/components/button-cn/

按钮的优先级选取https://www.uisdc.com/primary-secondary-action-buttons

10.jpeg

海盐社.jpeg

喜欢就分享
精选评论