“行高”根据文字大小和使用场景来定,公式如下,
行高=文字大小 8px(或6px,视情况而定,我常用8)
例如:12号字体的行高=12 8=20px
同一个界面中,一定不要出现多个不同字体。尽量选择用户设备里自带的字体来进行设计,比如说WIN系统默认用系统自带的“微软雅黑”,不能使用特殊字体。
如果必须要用特殊字体,建议用图片替代。如果用户的设备里没有你使用的这些字体的话,会默认显示设备的系统自带字体,最终效果就会和你的设计稿相差很多。
从视觉方面来讲,为了让整体界面更简洁具有美感,体验感更好,在使用字体方面,一般字体种类不超过2种,越少越好。因为页面的层次感主要是靠字号大小及颜色拉开层次,如果字号在变,字体种类也各种变化,整体就会感觉很凌乱,没有统一性。
5. 颜色
颜色规范包含“品牌色”、“辅助色”、“中性色、图表色”四部分。
5.1 品牌色系
品牌色系:即产品主色调,主色调的设定直接影响产品气质和直观感受,也是产品的对外的形象。品牌色是根据这个产品的特征和定位、用户群,以及使用场景等综合考虑最后确定的。
品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。
1、品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突,让人误解。但要是被硬性要求必须选暖色系作为主色调,就得格外注意调节好主色调与错误提醒的区别了。
2、注意选的品牌色(主色调)不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼,而产生的视觉疲劳。
5.2 辅助色系
辅助色系:辅助色一般用于“提示”。类似:成功、失败、警告、无效等内容等。
5.3 中性色系
中性色系:中性色涵盖黑、白、灰三个不同层级,通常在文本、背景、边框、分割线用到它们。同一色相,只要改变它的透明度就能表现出不同的层级。
B端产品的文字中,一般会有:一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。
为了区分层级,提升用户的阅读体验感,通常会根据具体需求,把字体颜色的深浅,大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合,这个组合的层级区分比较分明,适应性比较广,设计师在设计时可以直接作为参考。
5.4 图表色系
图表色:我们常见的后台管理类产品, 像数据可视化、统计图、多个标签的不同配色方案,所以一般还会设定图表的颜色。
6. 按钮
按钮是任何用户界面不可或缺的交互元素,B端产品中用到按钮的场景特别多,类似:登录注册,保存,表单,弹窗,导航,提交,确认等等。
6.1 按钮的形式
常见的按钮形式包含这六大类:图标文字组合的按钮 ,主按钮,次按钮(线性按钮),按钮菜单,文字按钮,图标按钮。
6.2 按钮的交互状态
常见的按钮交互状态包含六种:
正常状态、聚焦状态(使用Tab键或方向键来对网页进行访问输入的聚焦状态,在设计时很多设计师都会把这一状态忘记,导致用户无法用方向键控制光标位置,会降低用户的使用体验感)
悬停状态(鼠标正在按钮上,但不点击,需要注意的是平板电脑和移动端设备上不会展示悬停状态,因为手指跟光标不一样,无法在屏幕上进行悬停 )
- 激活状态(点击按下状态)
- 加载状态(等待期间不可操作,在B端产品中Loading状态特别重要,能缓解用户的焦虑情绪)
- 禁用状态(不可操作状态,置灰显示和透明度(40%)代表不可操作状态)
6.3 按钮的圆角
按钮圆角:在开始设计产品之前,设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性,容易分散用户注意力,所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。
但按钮的圆角并不是越大越好,因为在相同尺寸下,按钮圆角小的,操作热区会更大,页面的使用效率也会更高,更容易操作。同时还要特别考虑到下拉菜单的设计,所以圆角大小一般采用偶数:2px,4px,6px,8px,16px为宜,不宜过大(这里的圆角弧度的值有一定的倍数关系或基数关系,例如:4/8/16, 4/6/8,4/8/12,都是可行的)。