江苏龙网

  1. 首页 > 资讯 > 科技 > >

|按钮如何规范化？( 二 )


一个按钮的尺寸由按钮高度、按钮宽度、按钮圆角组成 ， 下面我们逐个看看其中的细节之处 。
1. 按钮高度
每一种尺寸的按钮对应有一个固定的高度 。 一个按钮看起来是否舒适精致 ， 有个关键因素在于按钮高度与文字大小的比例 。 若文字过大 ， 整个按钮留白过少 ， 显得拥挤不透气；文字过小 ， 整个按钮过于宽松 ， 甚至可能会影响按钮的表意 。
|按钮如何规范化？
本文插图

2. 按钮宽度
按钮的宽度是不固定的 ， 根据按钮文案的长度会有一定的适配规则 ， 我们应该怎么去规范按钮的宽度呢？
首先是按钮宽度的适配规则 。 我们需要定义文字与按钮左右的边距 ， 但是并不是所有尺寸的按钮左右边距都是一样的 ， 需要根据按钮大小比例来制定 。
|按钮如何规范化？
本文插图

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

最后是按钮的最大宽度 。 按钮的最大宽度需要符合所在容器的栅格规则 。
|按钮如何规范化？
本文插图

3. 按钮的圆角
按钮的高度和宽度决定了按钮的骨架 ， 而按钮的圆角大小则可以体现按钮的气质 。 圆角越大 ， 按钮越圆润 ， 传达的产品气质会更年轻活波；反之按钮圆角越小 ， 按钮越方正 ， 传达的产品气质越严谨冷静 。
因此我们需要根据自身平台的品牌属性去规范我们的按钮“看起来”是多圆润 。 为什么是看起来呢？因为并不是所有尺寸的圆角大小都是一样的 ， 也需要根据按钮的大小比例也制定 。 如果大按钮和小按钮都使用同样的圆角 ， 实际上它们“看起来”是不一样的 。
|按钮如何规范化？
本文插图

五、按钮的状态
按钮的状态一般分为4个状态：正常状态（default）、悬停状态（hover）、按压状态（click）、失效状态（disable） ， 其中悬停状态是Web端独有的 。
这里主要讲2个点：
按压状态要注重不同客户端的特性 ， 如iOS和Android 。 按压状态最终的效果是一样的 ， 但按压的过程不同客户端会有其不同的特性 。
|按钮如何规范化？
本文插图

按压/失效状态注意需要保持一种实现方式 ， 确保整体的统一性 。 如不能是一种按钮不可点击状态是降低透明度 ， 另一个按钮的不可点击状态是置灰 。
|按钮如何规范化？
本文插图

六、图标与文字的搭配
有一些按钮会用图标搭配文字 ， 我们还需要去规范图标大小以及图标与文字边距的 。 同理 ， 我们依旧需要考虑按钮的大小比例去制定具体规范 。
|按钮如何规范化？
本文插图

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


推荐阅读


上一篇：金十数据|连续6年亏损，苹果御用供应商27亿卖厂还债！关键时刻中企出手

下一篇：|爱的方式有万千种，独宠联通小燕的这份爱