菜单标题字体大小：16px ≤菜单标题字体大小 ≤20px
正文标题字体大小：24px ≤正文标题字体大小 ≤34px
正文内容字体大小：14px ≤正文内容字体大小 ≤16px
设计师如果喜欢，还可以用这些字体：思源黑体、segoe UI、Hiragino Sans GB。
特别注意：
同一个界面中，一定不要出现长得像的不同字体。尽量选择用户设备里自带的字体来进行设计，比如说WIN系统默认用系统自带的“微软雅黑”，退而求其次是“宋体”。不能使用特殊字体（比如隶书，兰亭黑体之类的）如果必须要用特殊字体，建议用图片替代。因为，如果用户的设备里没有你使用的这些字体的话，会默认显示设备的系统自带字体，最终效果就会和你的设计稿大不一样，就跟某宝上买衣服的照片效果，一个卖家版一个买家版的感觉一样一样的，影响用户的阅读体验。
从视觉方面来讲，为了让整体界面更简洁具有美感，体验感更好，在使用字体方面，一般字体种类不超过2种，越少越好。因为页面的层次感主要是靠字号大小拉开层次，如此此时字号在变，字体种类也各种变化，整体就会感觉很凌乱，没有美感可言了。
• 颜色（标准色），基本上包含“品牌色”、“辅助色”、“中性色”三部分。品牌色：即产品主色调，主色调的设定直接影响产品气质和直观感受，也是产品的对外的形象。品牌色是根据这ju个产品的特征和定位、用户群，以及使用场景等考虑最后确定的。品牌色的一般用于LOGO 、操作状态、按钮颜色、其他一些可操作图标等。1，品牌色一般建议选择冷色系。这样有效避免与“错误提醒”的红色、黄色相冲突，让人误解。但要是被硬性要求必须选暖色系作为主色调，就得格外注意调节好主色调与错误提醒的区别了。2，注意选的品牌色（主色调）不要太刺眼。要保证用户长时间使用也不至于颜色太亮太刺眼，而产生的视觉疲劳。
辅助色：辅助色一般用于“提示”。类似：成功、失败、警告、无效等内容等，如图：
中性色：中性色涵盖黑、白、灰三个不同层级，通常在文本、背景、边框、分割线用到它们。同一色相，只要改变它的透明度就能表现出不同的层级。
B端产品的文字中，一般会有：一级标题、二级标题、一级正文、二级正文、提示文字、辅助文字、说明文字等。为了区分层级，提升用户的阅读体验感，通常会根据具体需求，把字体颜色的深浅，大致分成3到5个层级。常见的有#333333、#666666、#999999这个组合，这个组合的层级区分比较分明，适应性比较广，设计师在设计时可以直接作为参考。
像数据可视化、统计图、多个标签的不同配色方案，可以根据具体情况而设定。
• 表单
B端产品中，表单几乎在所有类型的的网页都会出现，它是由多个列表项构成的比如：登录注册、搜索、信息录入、选择器等都能看到表单。而列表项又是由：标签和输入框组成，常见的表单有“输入框、单选框、复选框、普通按钮、开关按钮、下拉菜单”等控件，而且都会有自己的一套逻辑和顺序。
一个输入框通常包含：
标签名称（英文：label）、提示信息（英文：placeholder，输入信息后提示文字消失）、初始值（英文：value， 需手动删除）。
如果是必填的表单，一般会在标签的前面，加上红色*号。也有用别的方式提醒的。
表单的边框和圆角
由于B端产品一般比较正式和严谨，所以我们在设计表单输入框时，边框线为1px，圆角弧度一般不大于4px (常为2px）。
表单内容一般为左对齐的多，但也会根据具体情况，有别的排版方式，比如标签字符多的话，标签会统一右对齐等排版方式。
如上图所示，表单的输入框也需要自带识别功能，页面中尽量避免出现过多弹出框提示，避免影响用户体验。当输入有误时，可以直接对输入框设计不同状态下显示默认状态、选中状态、错误状态、成功状态，不可编辑状态等。另外，说明文字一般显示在输入框或选项的下方或者右边。
• 按钮
按钮是任何用户界面不可或缺的交互元素，没有按钮的页面设计是不完整的。所以，B端产品中用到按钮的场景也会特别多，类似：登录注册，保存，表单，弹窗，导航，提交，确认等等。
按钮形式
常见的按钮形式包含这六大类：图标文字组合的按钮 ，主按钮，次按钮（线性按钮），按钮菜单，文字按钮，图标按钮。如图:
按钮状态
常见的按钮交互状态又可分为这六种：
正常状态、聚焦状态（使用Tab键或方向键来对网页进行访问输入的聚焦状态，在设计时很多设计师都会把这一状态忘记，导致用户无法用方向键控制光标位置，会降低用户的使用体验感）、悬停状态（鼠标正在按钮上，但不点击，只得注意的是平板电脑和移动端设备上不会展示悬停状态，因为手指跟光标不一样，无法在屏幕上进行悬停 ）、激活状态（点击按下状态）、加载状态（等待期间不可操作，在B端产品中Loading状态特别重要，能缓解用户的焦虑情绪）、禁用状态（不可操作状态，灰置显示和透明度代表不可操作状态）如图：
按钮圆角
在开始设计产品之前，设计师都需要对按钮圆角有具体的规划。按钮四角都是直角会比较有距离感和强烈的引导性，容易分散用户注意力，所以我们一般会采用视觉上给人比较柔和亲近感觉的圆角按钮。
但按钮的圆角并不是越大越好，因为在相同尺寸下，按钮圆角小的，操作热区会更大，页面的使用效率也会更高，更容易操作。同时还要特别考虑到下拉菜单的设计，所以圆角大小一般采用偶数：2px,4px,6px,8px,16px为宜，不宜过大（这里的圆角弧度的值有一定的倍数关系或基数关系，例如：4/8/16, 4/6/8，4/8/12，都是可行的）。
注意：按钮的尺寸越大，圆角大小也会跟着按钮尺寸的大小有相应的变化。
按钮尺寸（宽度和高度）
讨论到按钮的尺寸，我们需要大致知道如何设置网格基数。在设计中，我们需要在常用的绘图软件（如：AI、Ps、Sketch）里找到我们的网格功能，设定好一个数为基数，然后按照这个基数来进行按钮的绘制，按钮就相对比较规范了。
那如何用绘图工具设置网格基数呢？方法如下：
在Ps绘图工具中找到：【编辑(win)或Mac（photoshop)】-【首选项】-【参考线、网格和切片】- 弹出首选项对话框 -【网格 - 网格线间隔 / 子网格】- 网格线间隔设为【4】- 子网格设为【1】；
把网格基数设置为【4】的原因：它是谷歌Material Design绘制小组件的规范，模块之间定义的基数就是【8】。这里的单位是dp，平时咱们设计师设计时使用的单位设为px像素就行。
本文地址：百科生活频道 https://www.neebe.cn/live/903126_3.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
