设计语言 - 按钮 (Button) 补充篇文章/经验设计

转至：https://www.zcool.com.cn/article/ZODgwNzUy.html

目录

1.解构按钮
2.网格基数（不设3或5）
3.按钮的比例关系（绝对关系与相对关系）
4.按钮的比例关系（绝对关系）
5.按钮的曲率关系（比较主观）
6.按钮中添加字符
7.按钮中添加功能

1.解构按钮

首先得先解构一个按钮，把按钮中各个元素都提取出来，就能明白按钮是如何规范的了。按钮的绘制过程：先设一个网格基数（一般为4） - 绘制一个宽与高存在比例关系的矩形（固定宽度的情况下） - 添加字符（中英文） - 添加按钮（功能） - 调整距离（字符/按钮与矩形之间的距离） -完成。然后我们一步步来，一步步讲。下图就是一个按钮的线稿与正常按钮的对比图。

2.网格基数（不设3或5）

绘制一个按钮的第一步，就是设置网格基数。那上一篇文章讲这块可能没讲明白，有的朋友问为什么网格基数要设置4而不设置其他基数呢。如果网格基数设置为3，当我们画一个高度为45px的时间选择器时，右面“上”的图标高度就是45/2=22.5px，因为这里出了小数点，22.5px中包含7个网格位，并多出了1.5个像素，即22.5-21（3x7网格位）=1.5个空位，1.5<3。所以网格基数设置为3它是不规范的。在下图中也做出了相应的解释。

把上面这张图再拆分的精细一下，方便大家更好的理解它。我把按钮中样式为“上”的这个图标拆解出来，再来分析它。如图所示，图标宽高为22.5px，多出了1.5像素的，如果宽高为21px，就刚好是7个网格位。所以说把网格的基数设为3，在绘制模块时会出现小数位，小数位不满一个网格位，则网格基础设为3就是不规范的。
如果在绘制模块或图标时不考虑小数位，那绘制出来的模块和图标等，都是不规范的。一般我制作图标时采用的尺寸有，16px、24px、32px、48px等。都是4的倍数，完全符合网格基数位，不管是前端制作、切图、设计和迭代，都比较快速和精确。

3.按钮的比例关系（绝对关系与相对关系）

我们先来下“按钮比例关系”的绝对关系，这里的关系指的是按钮宽度与字符之间的关系。绝对关系可以理解为“固定”，相反相对关系可以理解为“随之变化”。按钮的宽度是字符数量决定的，字符数越多，按钮的宽度就越宽。而这里的绝对关系，指的是像“确认按钮”这样永远都只有4个字符而不会另增加字符的情况，这时的关系就是绝对关系。如下图所示：
按钮与字符之间处于绝对关系时（谁都不因谁而改变时），按钮宽高比例可以成倍数。那当按钮与字符之间处于相对关系时，在不影响视觉效果时，按钮的宽高可以按比例来规定，但如果影响了视觉效果，例如周围留白过大等，类似视觉差的问题，他们之间可以不成比例，并按照网格基数来规定并约束。

4.按钮的比例关系（绝对关系）

上面我已经讲了，绝对关系就是按钮与字符之间，不会因谁而变化的关系，相反的相对关系就按钮中字符数越多按钮宽度就要越宽，道理相通我就不讲了。那如何规定按钮矩形的“宽”和“高”之间的关系，那我在上一篇的评论中提到了人体比例的问题，其实绘制矩形要像人体比例那样，具有隐性的设计关系。例如人体中手的宽度就是你的身高，头-胸-脚都存在隐性的黄金比例关系。这种比例关系直观上是看不出来的，但身体比例和谐的人，看上去就是有一定的美感的。我们做设计语言也一样，看上去这个按钮很普通，但实际却是包含很多规则约束出来的，好的设计经得起时间的考验，道理也是相同的。
按绘制按钮时，按钮之间最好成倍数关系；当然也不能局限在按钮，做组件时模块之间做好也要成倍数关系，或者遵循一定的规律，这个规律就看设计师时如何把控了，就像有的设计师定义字号，喜欢用斐波那契数列数列一样，规律有很多，最重要的还是在什么样的场景采用什么样的规则。我们做设计不能一直都运用方法论，掌握了核心基础，再根据自己的理解（审美与认知）去布置元素与要素，使他们具有一定的美感。

5.按钮的曲率关系（比较主观）

首先我要说明这小节比较主观！按钮的曲率关系有点绕，像直角、圆角上篇文章也讲过就不讲了，那我们主要讲一下圆角曲率按钮。圆角曲率按钮，它的曲率是相对的，我就来解释一下它，正好解释一下 4/8/16, 4/6/8，4/8/12 是什么意思。圆角按钮的曲率，是针对不同业务层采用的应对方法，如果我们定义一套按钮，曲率统一为4px，当我们要解决间距非常大的页面时，这时的按钮曲率非常别扭，很像方块脸，但这时所有组件已经模块化了，能修改但有一定的成本，所以我们在定义组件的时候，要把所有的高度都配置不同的曲率，并准确应用到相应的业务上。另外按钮尺寸越大方块脸的效果就越明显，这一点值得注意一下。

下面的例子中，按钮的曲率增长也是有一定规律的，这里增长的规律采用倍数关系就不太合适了。这是我在长期工作中根据个人审美调试出来的几种增长规律，那就是在上一篇提到的，4/8/16, 4/6/8，4/8/12 了。就拿4/6/8来举例吧（数值递增为2像素），当按钮高度为32px时，可以采用4px的曲率，当按钮高度为40px时，采用6px的曲率，当按钮高度为48时，采用8px的曲率，以此类推。

那如果随着按钮的高度的增加，不做曲率的变化，那按钮就会给人一种“方块脸”的感觉。按钮高度越高，这种感觉就越强烈。所以我个人建议，在不同的项目需求中，运用不同的曲率更合适一些。
另外有一个问题值得注意。在相同项目中采用不同的曲率，这时按钮做小规律的变化是没有问题的，如果按钮曲率递增过大，那就会造成所有按钮缺失统一性，曲率变化太大每个按钮的独立性就会变强，他们之间的差异化就会更明显，所以从视觉上看上去就不像是一个组件中规范出来的。

6.按钮中添加字符

按钮中添加字符就比较简单了，这章字写得有点多了，这块也比较简单就一带而过吧。在按钮中添加字符，要注意的是字符与按钮边框之间要留多少距离就可以了，问题不大。但它们之间的距离不能过少，太少就会显得很挤，给人感觉很小气。也不能太大，太大给人感觉字符上下有种压迫感。距离还需要设计师自己根据自身审美去掌控。

7.按钮中添加功能

在按钮中添加功能，这里的“功能”指的就是“图标”。在按钮中添加一个下箭头的图标，那不就变成了“功能按钮”了吗。所以一般我们不会讲说按钮中包含图标的按钮是“图标按钮”，而是会之称为是“功能按钮”。绘制功能按钮跟添加字符类似，但绘制功能按钮会考虑视觉差与平衡性的问题，就稍微麻烦一些。
以上这种方法是错误的，如果按水平垂直方向进行对齐，会产生视觉差。为什么会产生视觉差呢，原因是，从视觉上来讲，左面的字符“视觉重量”要大于图标“视觉重量”，这个视觉重量我在Lawrence_R的《建立条理 2 - 版式设计基础》中有讲过，这里讲起了就比较麻烦了，大致意思是，字符和按钮转化为颜色的灰阶度，字符的颜色灰阶度要大于按钮的颜色灰阶度，就会造成视觉不平衡。
那我们要这样解决这个问题呢。用秤砣或平衡原理来描述比较准确，但不好理解。一般我们会这样做，看哪边视觉不平衡，就手动调整使他保持平衡。如果按钮左面从视觉上看要大，就在按钮右面加一些留白；如果按钮右面从视觉上看要大，就在按钮左面加一些留白。
当我们学会了如何保持按钮的视觉平衡，就要再严谨一些。因为方便大家的理解，上图中按钮是去了外边框直接放上去的，那真正在做组件时，这么做是不规范的。绘制按钮也有一定的规范，那个就太麻了这章就不讲了。最正确的示例如下：
最后让我们上一张对比图，对比一下规范的按钮与不规范的按钮。
好的那大家看到这里，就说明本章的内容全部都讲完了。但大家如果有什么疑问或不解，留言给我，比较难理解的知识部分，我可能在下章节做补充，好理解的知识部分，我就会为大家一一解答。

谢谢阅读
感谢支持

那在这里我就多说几句吧。一般情况吧，好的作品（有规则有逻辑）与不好的作品（无规则无逻辑），他们从形式与视觉上，直观的欣赏，差别并不是很大的。我希望大家看问题不要看表象，也就是我常说的“形式主义”，从心理学角度讲人们确实容易受“美好事物”的影响。但大家也要理性看待问题，不能过于感性，寻找作品中的“主观唯心主义”，并支持他们，学习他们好的一面，并运用到自己的设计思维当中。行吧今天就说这么多吧。

用一句话做结尾吧：好的作品经得住时间的考验，而那些形式主义只存于某时某刻，止步不前并永不前进

记得点个赞哦
∨