小纽扣
在任何的设计界面或者设备中,一个页面可以有多个按钮,但是只有一个是最重要的。设计师应该如何清楚的知道按钮的设计种类、大小、曲率以及优先等级,在不同场景下按钮的设计都不相同,应该如何进行分类区分呢?

01一个按钮 

分类

1-4依次为:

  • 文字按钮(text button)
  • 线框按钮(outlined button)
  • 实心按钮(contained button)
  • 可切换按钮(toggle button)

 

组成按钮的3元素:容器、文本、图标(icon)

 

1.文字按钮

存在感很弱,视觉重量最轻;由于文字按钮没有容器,容易和正文混淆,所以,纯英文的文字按钮需要所有字母大写,中文字(方块字)需要用字体加粗、变色等特征来区别于正文;文字按钮多出现在卡片和对话框中。

 

2.线框按钮

又叫幽灵按钮,它的容器没有填充色(如果填充白色那是实心按钮);它的存在感较强但不是页面中最重要按钮,其文本的要求和上方文字按钮一致;由于没有填充所以请注意在不同背景上的易读性。

 

3.实心按钮

最为醒目,常常是页面中的最重要按钮;(目前流行的风格是)没有描边;英文文本可以是首字母大写。

 

4.可切换按钮

这是以组合形式出现的按钮,几个icon共用一个容器;同时只能选中、激活一个icon。最常见于文字编辑器中,但可切换按钮的形式并不止这么单一,能代表单选的icon也算是可切换按钮的一种:

图片源:Material Design

请注意:所有按钮中的文字不可以换行。

 

状态

以上的按钮属性都是默认情况下的,在交互中,组件的状态会随用户的操作而变化,如下图,本来无填充的线框按钮在悬停状态下出现了填充色:

图片来源:Material Design

 

组件在常见的终端(移动端、网页和电视)中一共有哪些状态呢?

 

tips:

由于悬停和聚焦不会同时存在,所以两者样式可以近似,但理论上,聚焦比悬停需要更醒目,因为它没有光标的辅助指引。

文字按钮、线框按钮、填充按钮的所有状态示意:

 

可切换按钮的所有状态示意:

 

tips:

字按钮的悬停状态为半透明填充,按下状态填充加深,始终没有描边;

线框按钮的悬停状态为半透明填充,按下状态填充加深,但描边一直不变;

实心按钮的悬停和按下可以有两种方式:

  • 1. 悬停比默认填充浅,因为有抬起(raised)的效果,而按下比默认更深因为是按下去(距眼睛更远);那按下状态到底变的多深呢?一个简单的方法:把默认的填充色明度降低15(和加15%黑色蒙版效果一致),并加深饱和度。不要忽略加深饱和度的操作,没有这一步的话,颜色会看上去死灰死灰的;
  • 2. 悬停状态比默认状态填充浅且阴影加深,按下则更浅且阴影更深,同时,给按下瞬间加上涟漪渐渐覆盖的动效。这也是Madteial Design的规则,因为他们的界面有海拔高度的概念,每个组件的每个状态都有固定的高度,来个栗子:

图片来源:Material Design

禁用状态可以试试直接把默认按钮整个变成45%不透明;

往往禁用按钮的辨识度不是那么高,看上去可以是识别度很低的一坨;

对所有非禁用状态的按钮一定要在不同背景上展示效果保证辨识度。

这里有加载状态的更多样式:https://coreui.io/docs/components/loading-buttons/

 

02按钮的属性

尺寸

按钮的长度和宽度尽量为网格基数的整数倍(网格基数参考:4px、8px等),且长度尽量是宽的整数倍,内边距也可以多利用到网格基数。诸如ps的很多设计软件都自带网格工具,可使用它们来帮助设计。

不同终端的按钮有几类常见高度,以下数据不是绝对的,仅供参考:

移动端
 
 
web端
 
 
 
电视端
 
 
  
tips:
当一个按钮中同时有icon+文字,由于文字(中文方块字)量感较重,左右内边距(padding)往往不同,重要的是保证视觉居中:
 
材料设计的左右内边距是32px;
文本字数为2时,宽可以是高的两倍,否则尽量成倍数或基于网格基数调整;
上下左右内边距太大或太小都不好,按钮一般是高于文字高度的两倍的(按钮越大倍数越大);
文本内容宜简短、明确、具体,尽量用“升级”、“同意”、“返回”等明确用词代替“是”、“否”、“取消”等文本,以节约用户阅读其他内容的时间。
 

曲率

指按钮的角参数,有四种类型:

  • 直角:严肃、专业、力量、高端(奢侈品、健身、金融);
  • 曲率圆角:通用、中性、用户范围广(社交);
  • 全圆角:年轻、活泼、亲切(儿童、娱乐、购物);
  • 多边形(六边形八边形):少见、个性、科技感、文艺;

角越圆,越柔和。在一套UI规范中,曲率应随着按钮尺寸而变化,如果所有圆角曲率一致,那是不对的,视觉上也不会和谐。

 

常用的圆角曲率:

web端:

 

微信:

 

03界面中的按钮

按优先级选择

在任何界面或设备中,一个页面可以有多个按钮,但只能有一个最重要,它能被一眼认出,那就是上文经常提到的最重要按钮,通常,它是个填充了高饱和度颜色的实心按钮。

次要按钮尽量不要使用高饱和度实心,但同时,它又需要和禁用按钮区分开来。在设计中,最重要按钮和次要按钮的优先级判断依据:

  • 1. 用户操作逻辑,哪个是用户最需要点击的?“去支付”还是“再逛逛”?
  • 2. 引导逻辑。哪个是我们最想引导用户点击的?

如果有人把交互任务分为主线场景和支线场景,那么,主线场景的按钮一定更加重要,而支线按钮多为文字按钮或幽灵按钮。

 

tips:

三种按钮(文字、线框、实心)互相之间都可以并列展示:

图片来源:Material Design

 

最重要按钮在几个按钮的最下或最右,符合用户阅完就操作的习惯;

最重要按钮多数情况下只有一个,但有时也允许一个页面重复出现–它们长得一摸一样、排列整齐,例:机票酒店页的“预定”按钮:
图片来源:携程

 

最重要按钮的文本可以加粗;

左右内边距越大,按钮越重要。反之普通功能会用线框按钮,内边距也较小,移动端注册登录页的按钮总是很宽的;

图片来源:淘宝APP

这些就是按钮的知识,下次见

 

原文地址:UI设计语言(公众号)
作者: 珠珠

转载请注明:学UI网 » UI设计组件-按钮

登录收藏
 
你可能喜欢的:
你真的会设计小标签吗?你真的会设计小标签吗?
用户访谈——哪些原则简单却有效用户访谈——哪些原则简单却有效
按钮规范系列 - 「取消按钮」的设计详解 | 细节分析按钮规范系列 – 「取消按钮」的设计详解 | 细节分析
产品图标 - 谷歌 Material 规范产品图标 – 谷歌 Material 规范
设计语言 - 选择器设计语言 – 选择器
如何让按钮设计的更迷人如何让按钮设计的更迷人
iOS平台设计规范-精简总结篇iOS平台设计规范-精简总结篇
移动端表单设计准则:酒店表单重构实践移动端表单设计准则:酒店表单重构实践
5个设计小技巧,越早会越好5个设计小技巧,越早会越好
内容植入式运营设计内容植入式运营设计