注意:圆角大小也会跟着按钮尺寸的大小有相应的变化。
6.4 按钮的高度
在B端产品中,当确定好网格基数时(通常网格设定为:4px。按钮的高度会分两种情况:
1、一种是宽度为高度的倍数关系。
2、第二种是如果宽度为高度的倍数关系,从视觉上看达不到想要的效果的话,设计师就可以灵活设置。
6.5 按钮的大小
讨论到按钮的尺寸,我们需要大致知道如何设置网格基数。
在设计中,我们需要在常用的绘图软件(如:Ps、Sketch)里找到我们的网格功能,设定好一个数为基数,然后按照这个基数来进行按钮的绘制,按钮就相对比较规范了。
那如何用绘图工具设置网格基数呢?方法如下:在Sketch绘图工具中找到:【视图】-【画布】-【网格设置】- 弹出网格设置对话框进行设置就好了。
把网格基数设置为【4】的原因:它是谷歌Material Design绘制小组件的规范,模块之间定义的基数就是【8】。
假设我们定这个基数为4,那采用的尺寸数值就需要是基数4的倍数。比如B端产品中,常用的按钮高度尺寸有:24px、32px、36px 、40px、48px,这些都是可以整除基数4的值。例如:32/4=8,40/4=10,这里的4为基数。
按钮的宽度尺寸,一般是确定好文字到边框左右两边的距离(例如如图Padding值为12px)后,开发会根据文字内容的多少自适应的。
按钮间距,按钮之间的间距也遵循基数为4的倍数,比如:16,24,32,40,48等。这里的基数定为偶数(一般为4或8)
7. 表单
从广义的定义来讲,表单是指用于数据录入的一切形式。从狭义上来讲,表单在大家更广泛的认知印象中,表单则是一类包含输入框、下拉选择框等常见控件的组合形式的页面才属于表单。表单的本质核心是提交数据,所以凡是具备采集数据并完成采集后提交数据的交互形式均可称之为表单。
表单在设计上的结构有:1、标题;2、表单标签;3、占位符;4、表单域;5、提示信息;6、操作按钮;
7.1 表单设计目标
表单的设计必须优先考虑为用户减负,提高效率并简化填写流程。另外表单中组件的选择需要依据具体的数据类型和具体的业务场景进行合理正确的选用,为用户提供高效的数据录入表单,降低用户操作成本、认知负担,并提高数据采集效率才是表单设计的根本目的。
7.2 表单的输入域
可交互输入域,是构成表单的核心内容,是表单用来采集数据的入口。输入区是用户交互最多也是最能影响使用体验的区域,不同类型数据选择与之相应的录入方式,对提高表单操作效率和用户体验大有裨益。