按钮如何规范化?

0 评论 2831 浏览 7 收藏 13 分钟

编辑导读:制定按钮规范可能是大家在最初接触UI组件化时尝试的第一个项目。看似简单的按钮,在制定规范的过程中却有不少细节值得我们思考学习。本文将从按钮的规范化展开分析,希望对你帮助。

制定按钮规范的流程大概会分成以下三个步骤:

  1. 明确规范适用范围
  2. 收集按钮使用的场景
  3. 制定按钮规范

其中制定按钮规范又分为以下内容:

  1. 按钮的类型
  2. 按钮的尺寸
  3. 按钮的状态
  4. 图标与文字的搭配
  5. 多语言产品的特殊规则

一、明确规范的适用范围

一个公司,会拥有许多设计规范。设计规范能够统一产品的方向与体验,塑造一致的品牌调性。但设计规范有不同的适用范围。根据范围的不同,规范内容的颗粒度也有所不同。

大致会分为以下几个范围:

  1. 公司级别的设计规范:主要是对公司整体的用户体验、品牌等方面的规范,是公司所有产品的指导基础;
  2. 某一类产品线的设计规范:在满足公司整体设计原则的基础上,对该产品线下的若干产品制定统一的用户体验、界面语言、品牌形象等方面的规范;
  3. 某个具体产品的设计规范:主要是为此产品制定统一的用户体验、界面语言等方面的规范。

因此,在开始规范制定之前,首先要明确规范的适用的范围,这样才能判断规范内容的侧重点与颗粒度。

这里分享的按钮规范适用于某个具体产品的设计规范,因此颗粒度是最细致的,包括按钮的尺寸/状态等等。这一类的设计规范主要有以下目标:

  1. 设计侧:能够统一产品方向与体验,但同时能有一定的扩展性
  2. 用户层:对产品的体验一致性得到落地
  3. 开发侧:能够提高开发效率,减少重复工作

二、收集按钮的使用场景

明确了规范的适用范围,确定了规范内容输出的细致程度(即主体框架)后,我们接下来要做的是收集规范对象的使用场景。

我们需要尽可能收集产品目前已有的按钮样式、类型。这里不需要事先对按钮进行分类,只需要把我们认为是按钮的收集起来即可,所谓的“即可错杀,不可放过”。

三、按钮的类型

接下来是需要对收集的按钮进行分类。这是非常关键的一步,按钮的分类决定了后续的拓展性。

按钮分类的纬度和名称五花八门,如基础按钮、文字按钮、图标按钮、幽灵按钮等等。这是因为不同的平台都有自己的分类原则和命名习惯。我们不必纠结具体的叫法,按钮分类和命名的关键在于能够在团队内部达成一致,能够达到制定规定的目标,提升协作效率,就是「最合适」的分类。

以上是笔者所在团队制定的按钮分类,仅供参考~

定义类型的过程不要忘记了我们紧密合作的开发童鞋。和他们一起讨论哪些按钮作为基础类型,哪些按钮可以通过提供配置项去实现,将有助于我们的设计规范在开发侧的推进,更好地实现按钮组件化。

四、按钮的尺寸

每个的平台都会有多种不同尺寸的按钮,具体多少种可以根据自身平台的需要来制定,但数量建议不要超过5种,过多的尺寸不仅在使用过程中容易混淆,维护成本也在提高。同时,在制定过程中还需要同时考虑web端和移动端之间的适配。

一个按钮的尺寸由按钮高度、按钮宽度、按钮圆角组成,下面我们逐个看看其中的细节之处。

1. 按钮高度

每一种尺寸的按钮对应有一个固定的高度。一个按钮看起来是否舒适精致,有个关键因素在于按钮高度与文字大小的比例。若文字过大,整个按钮留白过少,显得拥挤不透气;文字过小,整个按钮过于宽松,甚至可能会影响按钮的表意。

2. 按钮宽度

按钮的宽度是不固定的,根据按钮文案的长度会有一定的适配规则,我们应该怎么去规范按钮的宽度呢?

首先是按钮宽度的适配规则。我们需要定义文字与按钮左右的边距,但是并不是所有尺寸的按钮左右边距都是一样的,需要根据按钮大小比例来制定。

除此之外,我们还需要定义按钮的最小宽度,即一些临界值。如果只有左右边距适配规则的话,有些按钮就会因为文字短,使按钮的比例变得不协调。同理,不同尺寸的按钮的最小宽度也不一样,需要根据按钮的大小比例来制定。

最后是按钮的最大宽度。按钮的最大宽度需要符合所在容器的栅格规则。

3. 按钮的圆角

按钮的高度和宽度决定了按钮的骨架,而按钮的圆角大小则可以体现按钮的气质。圆角越大,按钮越圆润,传达的产品气质会更年轻活波;反之按钮圆角越小,按钮越方正,传达的产品气质越严谨冷静。

因此我们需要根据自身平台的品牌属性去规范我们的按钮“看起来”是多圆润。为什么是看起来呢?因为并不是所有尺寸的圆角大小都是一样的,也需要根据按钮的大小比例也制定。如果大按钮和小按钮都使用同样的圆角,实际上它们“看起来”是不一样的。

五、按钮的状态

按钮的状态一般分为4个状态:正常状态(default)、悬停状态(hover)、按压状态(click)、失效状态(disable),其中悬停状态是Web端独有的。

这里主要讲2个点:

按压状态要注重不同客户端的特性,如iOS和Android。按压状态最终的效果是一样的,但按压的过程不同客户端会有其不同的特性。

按压/失效状态注意需要保持一种实现方式,确保整体的统一性。如不能是一种按钮不可点击状态是降低透明度,另一个按钮的不可点击状态是置灰。

六、图标与文字的搭配

有一些按钮会用图标搭配文字,我们还需要去规范图标大小以及图标与文字边距的。同理,我们依旧需要考虑按钮的大小比例去制定具体规范。

七、多语言产品的特殊规则

对于国内大部分的产品而言,一份较完整的按钮规范已经完成了。如果是多语言的产品(如klook/agoda/booking.com等),还需要补充哪些规则呢?因为笔者目前所在团队设计的正是这样一类产品,所以也想简单和大家分享一下:

1. 文字截断规则

文字的长度因为多语言的关系是不固定的,当达到按钮的最大宽度,文字还是超长时则需要截断省略。

按钮默认是尾部截断,可以根据不同场景选择中间截断省略。

2. 文字缩小规则

在一些场景,按钮文字非常重要,不能够被省略,那文字过长时,常用的处理方式是缩小字号。这里要注意不同客户端的实现方式有所差异,如Web端只能缩小到固定字号;而iOS和安卓则可以根据文案长度自动缩小到显示的小为止。

文字缩小规则相对比较复杂,实际运用过程中需要注意以下2个问题:

  1. Web端因为只能缩小到固定字号,需要留意是否所有的语言缩小到该字号都可以展示完整;
  2. iOS和安卓可以缩小字号直到文字展示完整,需要注意某些语言下字号是否会缩得过小,影响用户阅读。

八、小结

以上便是关于制定按钮规范的分享。在开始的部分我们聊了制定规范前的准备工作,在这个阶段最重要的是明确规范的适用范围,即服务的对象是谁,这样才能帮助我们确定规范的整体框架及规范的细致程度。

而在具体的实施阶段,需要注意的是多方沟通。如使用场景的收集,需要和不同业务的设计师沟通,确保没有遗漏场景;再如按钮的交互规则,需要和不同端的开发沟通,确保规则的合理性及可实现性。

希望能给大家在制作规范方面带来一些帮助。谢谢~

 

本文由 @设计牛奶盒 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!