ToB 按钮使用指南(一)

按钮是最常使用的组件之一,但是在与人交流时,大家还是会存在很多误区。本文将分析按钮的痛点、状态以及类型,方便大家加深对按钮的理解和使用。

ToB 按钮使用指南(一)
按钮是任何用户界面当中(无论是桌面还是移动用户界面)必备的交互元素:甚至可以说,如果页面中没有一个按钮,整个页面设计将是不完整的。

在日常生活中,按钮也是随处可见的:一个电灯开关、遥控器按钮。

现实生活中按钮反复地出现也可以帮助我们不断去理解屏幕世界中按钮应该如何操作,从而衍生出屏幕世界中的按钮的具体形态。

人机交互中最重要的就是:把我们从小到大对于这个世界的认识映射到屏幕世界中,比如苹果最为经典 iOS 的滑动解锁。

ToB 按钮使用指南(一)

而到了屏幕世界中,控件的设计更应该与物理世界保持相对的一致,这也是按钮设计中,尤为重要的一个环节。

最近常问身边的朋友,按钮究竟是什么?

他们多数的回答:按钮就是按钮呗,还能是什么。

因为对于他们而言,按钮不就是一个操作区域加上文字,没什么特别的。

也正因如此,对于按钮的具体构造也不太了解。这篇文章主要是根据自身的工作经验,结合当下对于按钮设计的理解,去分析如何进行更合理的按钮设计。

ToB 按钮使用指南(一)

一、按钮的痛点

对于每个设计师来说按钮并不陌生。在每天的设计中,都会使用按钮进行页面设计;但又不是每一个设计师都能够将按钮设计好,因为它存在三个方面的复杂性:

  • 它使用的场景过多:不是每个场景都需要相同的按钮。比如在登录页当中,登录和注册就是使用不同的按钮形式。这些情况特别在 B 端产品中,业务在每个步骤中需要突出和强调的点不同,导致设计师很难通过具体场景进行按钮设计;
  • 按钮出现的频率太高:B 端产品中,每个页面当中都会有按钮不停的重复;而高频的出现会让我们感到麻木,导致很多设计师都将其忽略;
  • 按钮形式太多:在我总结的按钮形式当中,一共分为 10 类,且情况多种多样;很多时候都没有意识到不同形式之间的差距,导致乱用混用。

ToB 按钮使用指南(一)

因此一个看上去小小的按钮,其实经常会困扰着我们。如果刚开始没有将按钮进行整体的梳理,那么在你的设计过程中,按钮会经常打断自己的设计思维。为了让大家能够对按钮有更深的理解,我将按钮进行系统的拆解,结合实际案例,使按钮更浅显易懂。

ToB 按钮使用指南(一)

在文章按钮类型的分析中,我将按钮分为两大类、十小类。将其分类也是为了更好地为大家去分析每一个按钮所涉及到的状态,当我们理解按钮之前,你需要了解它的内部构造。

 

二、按钮状态

按钮状态,可以让用户知道这个按钮当前是在进行哪一种操作,方便帮助用户进行判断。

常见的按钮状态分为:正常状态(Normal)、聚焦状态(Focus)、悬停状态(Hover)、激活状态(Active)、加载状态(Loading)、禁用状态(Disabled),下面分别对这六大状态进行拆解。

ToB 按钮使用指南(一)

1)正常状态 (Normal)

除了其他五种状态外的情况都是正常状态,它是按钮最为常规的状态形式,也是设计师必须设计的一种状态。

2)聚焦状态 (Focus)

主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎,我来讲他背后的原理,主要是方便一些键盘使用的用户,可以使用 Tab 键或者方向键来对网页进行访问输入。

比如在 Mac OS 以及 Windows 的使用中,通过点击 Tab,便展示出文件的 Focus 状态。

ToB 按钮使用指南(一)

3)Focus 状态

是一个非常重要的交互形式,但是很多设计师都会忽略,甚至在很多网站,直接就是将这个样式所去除,导致使用 Tab 键无法获取聚焦的反馈,比如常见的百度、Google 再到各大操作系统都会有这类反馈,去除这类反馈,会导致用户无法用方向键控制光标位置,在很大程度上降低用户使用的可能性。

4)悬停状态 (Hover)

在桌面端的设计当中,即使用户知道它是可以点击的,但是你还是需要设计悬停状态,表明鼠标现在正在按钮上。

平板电脑和移动端的设备上永远不会展示悬停状态,因为你的手指是无法在屏幕上进行悬停的(虽然 iPad OS 更新了 13.4 版本后,会有 Hover 态的出现,但是是通过鼠标进行操作,因此这里不予以讨论)。

ToB 按钮使用指南(一)

5)激活状态 (Active)

激活状态因为叫法不同,在有的地方也称之为 Press 状态。它的表现就是将按钮按压下,将颜色变深同时会涉及到内阴影等效果的出现。

6)禁用状态 (Disable)

按钮禁用状态作为最难设计的状态之一,主要在于禁用状态的表现形式以及禁用状态与激活状态之间如何的切换,我具体来分析一下两个难点。

  1. 禁用状态在颜色上首先会给人灰色块的感觉,行业里也称之为置灰。在设计上,也需要注意光标移动时需要展示禁用光标,即让前端大哥将 Cursor 的 hover 状态更改为 not-allowed,你可以优雅地在前端面前装个 X。
  2. 禁用与激活状态的切换,比如在一个注册页面中,需要姓名与电话必填。当用户没有填写完成姓名与电话时,应该将按钮置灰,提示用户不可以点击。当用户填写完成必填字段后,将禁用按钮转变为激活按钮,提示用户可以点击登录。

ToB 按钮使用指南(一)

7)加载状态(Loading)

按钮需要时间进行加载的一种状态,通常会被用户忽略,但是在 B 端产品中,Loading 状态尤为重要。这里有很多细节和小技巧,展开讲篇幅太大,在文中 4.3(按钮细节)会详细解答。

三、按钮类型

首先,抛出一个问题给大家。

下图中,共有几种按钮形式?分别是什么?

给大家五秒钟时间思考。

ToB 按钮使用指南(一)

如果你对上图的按钮形式并不完全了解,建议你拿好小本本,做好笔记。

1. 主按钮 (Primary Button)

主按钮为页面中按钮区最为核心的操作。在日常场景中,主要按钮一般都为新建、编辑、保存这一类正向的操作,强调页面中最为核心的功能。能够让用户一看到主按钮就明白大致在页面中需要如何操作。

但在主按钮的使用中,要遵循以下两个原则:

1)在页面当中,按钮区域的主按钮最好只有一个,否则会对页面的主要功能造成干扰。

ToB 按钮使用指南(一)

2)并不是每一个页面都需要有主按钮,不要因为页面缺失主按钮而强行加上。因为在实际使用中,时常遇到按钮之间为平级的关系,强行添加,容易造成页面层级混乱。

ToB 按钮使用指南(一)

在主按钮中,按钮状态的设计也会跟随物理世界进行相应的映射,因此在设计时需考虑现实生活中的状态。

比如用户的 Hover 时,一般都将按钮抬起并亮度增加,其目的是为了提示用户可以点击。而用户在按下时,用加黑来表示用户按下的状态,与现实生活中按钮的状态类似,因此按钮状态应该映射物理世界。

ToB 按钮使用指南(一)

2. 次按钮/标准按钮(Default Button)

次按钮在页面中出现最为频繁。在日常使用中,如果你不太确定使用何种按钮时,那使用它,大概没有错。因为它运用广泛,出现频率也最高,因此也被人们称为标准按钮。

在次按钮的设计形式中,我们团队将设计形式分为两类:

  • 字线型:此按钮整体以文字+边框的形式,这类形式在视觉层面上感知较弱,适合几个按钮同时展示。在B端项目中,字线型也是在使用中最为频繁的形式。
  • 字面型:字面型更偏向表达按钮整体,常见于各类移动端的按钮当中。整体的表达也更适合移动端这类屏幕尺寸较少的设备当中,更符合卡片化设计的思路,反而不太适合桌面端的设计。

ToB 按钮使用指南(一)

3. 文字按钮/链接(Text Button/Link)

文字按钮为页面中视觉层级较低的按钮形式。因而可以在页面中大面积重复使用,文字按钮与链接(Link)基本一致,且没有太多区分。所以在设计上,文字按钮与链接基本相同。

文字按钮重复地出现,以表格页面当中的操作列表最为突出;因为表格当中常用的操作最好能够直接展示出来,因此表格中基本都采取文字按钮的形式。

ToB 按钮使用指南(一)

4. 图标按钮(Icon Button)

图标按钮为页面中空间占比最小的按钮,所以在页面中的使用也是最为高效的。因为没有了文字元素,会导致用户在图标的理解上出现偏差。为了解决这一问题,主要是通过用户在 Hover 时使用展示 Tooltip 提示按钮的含义,同时建议在图标按钮的使用上多为高频且易理解的图标。

ToB 按钮使用指南(一)

我举一个简单例子,在桌面端产品中,帮助文档一定是非常重要的一个入口;当用户对页面中的功能有所疑惑时,可以通过此来帮助用户进行理解。通常需要在大多数页面当中展示帮助中心的入口,这时图标按钮就变得最为合适。

因此,我们可以得出图标按钮的应用场景通常为:当页面中需要高效地展示一个或几个图标时,同时图标按钮的展示最为频繁时,当同时满足以上两点,使用图标按钮就是一个更优的解决方案。

ToB 按钮使用指南(一)

5. 按钮菜单(Menu Button)

按钮菜单为页面中许多操作的集合,通常是将高频的操作以及一些低频的操作进行整合,组成的按钮菜单。这样既能够减少页面元素的冗杂,同时也能够满足业务对于功能的需求。

ToB 按钮使用指南(一)

举个例子,在表格页面当中,B 端设计师最常见到的按钮菜单就是新建,这类新建按钮其实是必不可少的;同时业务需要,还需要多个业务按钮进行展示。按钮菜单的出现,帮助用户进行按钮的整理,同时也满足业务需求。

6. 按钮中加图标(Icon add Button)

这其实是主按钮的一种衍生,通过图标对主按钮的含义进行解释,从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调,那便可使用在按钮中添加图标,这样既能够强化图标的含义,同时也加深了用户对于按钮的印象。

在六个常见按钮形式中,我们根据重要的优先级,给常见按钮进行一个简单的排序:

图标按钮-按钮菜单-主按钮-次按钮-文字按钮-图标按钮

ToB 按钮使用指南(一)

由于内容较多,下面一篇文章介绍关于按钮其他形态和使用场景!

本文由 新媒体之家 作者: ydq 发表,其版权均为原作者所有,文章内容系作者个人观点,不代表 新媒体之家 对观点赞同或支持,未经许可,请勿转载,题图来自Unsplash,基于CC0协议。
0

发表评论