一个简单的按钮需要经历无数次推敲,才能整合为设计语言

网格基数的设置

这里的网格不是平面设计中的网格系统,是包含在绘图工具中的网格功能,虽然它俩在本质上是相同的。用绘图工具绘制网格能帮助我们约束模块,使模块的比例存在一定的关系。如下图尺寸大小为137x31的按钮A,和尺寸大小为128x32的按钮B,尺寸大小为137x31的按钮A是不规范的,宽137和高31是不存在比例关系的。而尺寸大小为128x32的按钮B就是规范的,宽128和高32不仅是倍数关系(128/32=4倍),而且两个数都可以整除,在全局中设的基数4(32/4=8,128/4=32,这里的4为基数)。

网格基数

绘制一个按钮的第一步,就是设置网格基数。如果网格基数不设置4px而设置3px,那画一个高度为45px的时间选择器时,得知右面“上”的图标高度就是45/2=22.5px,这里出了小数点,22.5px中包含7个网格位,并多出了1.5个px,即22.5-21(3x7网格位)=1.5px的空位,1.5px<3px。所以网格基数设置为3px它是不规范的。在下图中也做出了相应的解释。

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

如何用绘图工具设置网格基数?

在Ps绘图工具中找到:【编辑】-【首选项】-【参考线、网格和切片】- 弹出首选项对话框 -【网格 - 网格线间隔 / 子网格】- 网格线间隔设为【4】- 子网格设为【1】;

为什么要把网格基数设置为【4】呢。这是谷歌Material Design绘制小组件的规范,而模块之间定义的基数则为【8】,这里的度量单位是DP,平时绘制网页的话单位用px像素就可以。

按钮的基础规范

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

解构按钮

按钮的绘制过程:先设一个网格基数(一般为4px) - 绘制一个宽与高存在比例关系的矩形(固定宽度的情况下) - 添加字符(中英文) - 添加按钮(功能) - 调整距离(字符/按钮与矩形之间的距离) -完成。下图就是一个按钮的线稿与正常按钮的对比图。

按钮的宽高

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

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

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

按钮的曲率

按钮的边角分为三种样式:直角、曲率圆角和圆角。直角就是边角呈90度的角,曲率圆角和圆角的差别在于,曲率圆角的角弧度没有那么大,而圆角的角弧度就是一半个圆。按钮的曲率按照不同的样式分布展示如下图所示。

直角设置无曲率/90度直角。圆角就设置为50%的曲率,刚好就是半个圆。而曲率圆角就稍微有点麻烦,因为曲率圆角是要根据按钮的大小做相对的变化的。按钮的尺寸变大曲率就应该也随之变大,按钮尺寸越大差异越明显。另外曲率弧度的值也应该有一定的倍数关系或基数关系,例如:4/8/16, 4/6/8,4/8/12,都是可取的。

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

拿4/6/8来举例吧(4/6/8数值递增为2像素),当按钮高度为32px时,可以采用4px的曲率,当按钮高度为40px时,采用6px的曲率,当按钮高度为48时,采用8px的曲率,以此类推。

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

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

按钮的常用尺寸

常用的按钮尺寸有:24px、32px、40px、48px,超出48px的按钮都属于特殊按钮,需要进行单独设置的。

这里的尺寸不是死的,可以根据自己的理解进行尺寸的设置。而采用这几个尺寸(24px、32px、40px、48px)的目的是更好的统一并规范按钮,因为24px、32px、40px、48px都是4的倍数,数与数之间也都是±8的关系,另外在绘制按钮时尺寸也可以平分,留出按钮上下均等的距离,另外这几个数值从Web端的体验上来看,比例也是相对更合适的,所以采用这几个数较为规范一些。

按钮中添加字符、功能

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

按钮的字符限制

一个按钮包含和“无图标”和“有图标”两种形式,无图标比较好处理,直接把相应文本放在按钮中水平、垂直居中就可以了,然后再算清文本与边框之间的距离就可以了。

设计有图标的按钮时,就要考虑把图标的内边距算出来,并与图标到按钮外边距的距离算出来。

掌握的以上几种绘制按钮的方法,就可以绘制出一整套符合规范的按钮组件。

英文也一样,英文与中文的差别在于细微的尺寸差异。英文字体结构要比中文字体结构看上去更小一些,英文的字符长度也要比中文长很多。但问题不大,只要把控好文本/图标和按钮边角的距离,按照基数递增,就不会有什么问题。

按钮中添加功能

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

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

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

真正在做组件时,下图这种方法才是规范的。如图所示:

对比一下规范的按钮与不规范的按钮。

按钮的交互状态

一个按钮的交互状态有四种,分布是:无状态、hover(触碰)、点击后、禁止。采用的配色可以递增(由浅到深),也可以递减(由深到浅)。按钮交互状态的配色深浅也是根据整体页面有关的。如果整体的调性偏深,配色可以递减(由深到浅),如果整体的调性偏浅,配色可以递增(由浅到深)。

而颜色按钮的交互状态是根据配色的色阶决定的,同理配色递增(由浅到深),配色递减(由深到浅)。