聊一聊：设计语言系列之按钮

五连环画

虽然说这篇与上篇的标题相同，但内容却是完全不同的。这篇讲的更细化，操性更强。另外呢，设计语言这个系列我写的较为随意，不像写平面设计知识那样更严谨，如果哪里有讲的不对的地方，也希望大家多多批评，多多指点。当然也要感谢大家的支持，感谢你们。inspirationde的最新消息可以到我们平台网站了解一下，也可以咨询客服人员进行详细的解答！

目录






1解构按钮


2格基数


按钮的宽高


4按钮的曲率


5按钮中添加字符


6按钮中添加功能














1解构按钮






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













2格基数






绘制一个按钮的第一步，就是设置格基数。如果格基数不设置4而设置，那当我们画一个高度为45的时间选择器时，得知右面上的图标高度就是452=225，这里出了小数点，225中包含7个格位，并多出了15个，即225-21（7格位）=15的空位，15。所以格基数设置为它是不规范的。在下图中也做出了相应的解释。





我把图上按钮中为上的这个图标拆解出来，再来分析它。图标宽高为225，多出了15的。如果宽高为21，就刚好是7个格位。所以说把格的基数设为，在绘制模块时会出现小数位，小数位不满一个格位，则格基数设为就是不规范的。



规范的尺寸有16、24、2、48等，都是4的倍数。不管是前端制作，切图还是设计都比较精确的。










按钮的宽高






当我们绘制按钮并选择宽高时，要看它的字数是固定的还是随之变化的。字数固定指的是像确认按钮这样永远都只有两个字的情况。而随之变化指的是，按钮的宽度要随着字数的变化而变化。在字数固定的情况下，按钮的宽高可以采用倍数关系，即按钮宽80高40的两倍。





但要注意的是，在按钮宽度随着字符数的变化而变化时，按照比例来绘制按钮的宽高，造成的视觉效果不理想，就可以不采用倍数关系，直接用格基数来绘制按钮。例如：按钮宽88高2。


绘制矩形要像人体比例那样，具有隐性的比例关系。这种比例关系直观上是看不出来的，但身体比例和谐的人，看上去就是有一定的美感的。我们做设计语言也一样，看上去这个按钮很普通，但际是很多规则约束出来的。










4按钮的曲率






按钮的曲率要针对不同的业务需求选用不同的数值。如果统一了按钮曲率，当对应很多高度与间距不同的产品时，会造成几个产品中按钮曲率不和谐的问题。间距和高度越大的产品，按钮的曲率就越接近直角矩形，差异性也越来越小。但在同一个产品时，曲率的变化幅度也不要太大，这样就会失去一致性。





这里拿上一章提到的468来举例吧（468数值递增为2像素），当按钮高度为2时，可以采用4的曲率，当按钮高度为40时，采用6的曲率，当按钮高度为48时，采用8的曲率，以此类推。






那如果随着按钮的高度的增加，不做曲率的变化，按钮就会越来越接近直角矩形。按钮高度越高，这种感觉就越强烈。所以我个人建议，在不同的业务需求中，运用不同的曲率更合适一些。



在相同产品中采用不同的曲率，这时按钮做小规律的变化是没有问题的。如果按钮曲率递增过大，那就会造成所有按钮缺失统一性，曲率变化太大每个按钮的独立性就会变强，他们之间的差异化就会更明显，所以从视觉上看上去就不像是一个组件中规范出来的。










5按钮中添加字符






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













6按钮中添加功能






在按钮中添加功能，这里的功能指的就是图标，加了图标的按钮就变成了功能按钮。绘制功能按钮跟添加字符类似，但绘制功能按钮会考虑视觉差与平衡性的问题，就稍微麻烦一些。


以上这种方法是错误的，如果按水平垂直方向进行对齐，会产生视觉差，就是失去了视觉平衡性。字符和图标需要转化为颜色的灰阶度，才能测出它们的重量，才能知道它们从视觉上看谁轻谁中。测试得知，字符的颜色灰阶度，要大于图标的颜色灰阶度，造成视觉不平衡。


解决这个问题的方式，是看哪边的视觉不平衡，就手动调整使他保持平衡。如果字符这边重了，就在字符与按钮之间加一些留白，如果图标这边看上去重了，就在图标这边加一些留白。


当我们学会了如何保持按钮的视觉平衡，就要再严谨一些。因为方便大家的理解，上图中按钮是去了外边框直接放上去的，那真正在做组件时，下图这种方法才是规范的。如图所示：


最后让我们上一张对比图，对比一下规范的按钮与不规范的按钮。


大家看到这里，就说明本章的内容讲完了。大家有什么疑问或不解留言给我，比较难理解的知识部分，我会在下章节做补充，另外也会为大家解答。














谢谢阅读


感谢支持









好的作品（有规则有逻辑）与不好的作品（规则逻辑），他们从视觉的差异并不是很大。大家看问题不要看表象，形式主义缺乏内涵。当然从心理学角度讲人们很确容易受美好事物的影响，但大家要理性看待问题，不能过于感性，寻找作品中的主观唯心主义，学习作品中好的一面，并运用到自己的设计思维当中。






好的作品经得住时间的考验，而那些形式主义只存于某时某刻，止步不前并永不前进






记得点个赞哦