B端设计规范

前言

刚入门产品没多久，就上手了画原型，通过学习，逐渐了解到一些B端的设计规范。在此记录下。

页面布局

一、常见的原型布局有以下4种：

• 上下布局

• 左T布局

       比较适用于：Web后台产品，可以很好的展示产品的菜单导航，方便快速找到所需功能。

• 右T布局

• 国字布局

       比较适用于：Web 用户产品，可以很好展示产品的各种内容，方便查阅网站的全部内容和结构。

二、设计尺寸

据统计，PC端用户屏幕分辨率占比排名前三的是：1920*1080、1366*768、1440*900。以1440来设计比较合适，向上和向下适配误差会比较小。

三、颜色

主色的选择，需要依据使用人群，目标用户，使用场景，产品属性等因素综合进行考虑，在颜色使用上B端与C端的目的并不相同，C端颜色使用更大胆自由一些，以抓人眼球为主。而B端端使用则是以辅助产品功能为主，需要遵循对比原则，提升产品易读性。

四、字体

用户的电脑一般是PC和Mac。PC的默认字体是：微软雅黑。Mac的默认字体是：平方。

1. 字号与字重

字体：选择以4为基数进行等差递增方式。

字号：默认采用偶数。

Mac 的3种规格字重（regular、Medium、Smlbold）。标题一般采用Medium，正文一律Regular，强调内容采用颜色区分（大于字重区分）。

五、分割与间距

参考现有的成熟系统以后，依据亲密性原则与格式塔原理，整理出符合现有业务的间距规范。

Tips：

pt：

独立像素，iOS开发的基本单位（Point）

px：

像素，设计基本都是用px来标注（Pixel），Axure 上的尺寸也是以此为单位。

亲密性原则：

彼此相关项应该靠近，归组在一起，如果多个项目之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。有助于组织信息，减少混乱，为用户提供清晰的结构。

格式塔原理：

格式塔源自德语“Gestalt”，意思为”整体、完形“格式塔理论也被称为完形理论。核心理论：我们习惯于以规则、有序、对称和简单的方式，把不同的元素加以简单的组织。一个不断组织、简化、统一的过程，正是这一过程，才产生出易于理解、协调的整体。

1. 横向间距

8px、12px、16px、或8的倍数

常用于组件内/组件与组件间距

2.竖向间距

24px、32px、48px

信息组与信息组/模块之间间距

3.分隔间距

64px、88px

模块与顶部/底部间距

六、图标规范

B端图标功能主要用来降低用户认知。

图标可大致分为2大类：

• 基础图标 

          常规图标，复用性高且出现地方多。

•  业务拓展图标

          依据不同业务场景进行定制化的图标，跟着业务走。

图标尺寸：12px、16px、20px、24px，遵循偶数原则。

1. 图标尺寸规范

• 12号字体搭配 12px 图标
• 14号字体搭配 16px 图标
• 16号以上字体搭配 20px 图标

七、按钮尺寸规范

常用的按高度可设定为：24px、32px、40px、48px,超出48的属于特殊按钮，需要进行单独设置宽度随内容区域自适应。

常规的按钮分类：

• 主要按钮
• 次要按钮
• 虚框按钮
• 失效按钮
• 危险按钮
• 文字按钮

八、表格

表格分解为2大区域：信息展示区域 + 操作区

信息展示区：

• 表头
• 信息展示单元格
• 分页控件

操作区：

• 标题
• 工具栏（例如：筛选功能）
• 操作单元格

1. 表头

表头分为带icon与不带icon。需注意：表头上的文字表达要简洁清晰。需考虑字数限制。若过长无法删减，应考虑使用tooltips。

表头数量：7+/-2 ，为最佳。

2. 表格

对齐方式：

• 常规文本字段：可点击的字段、普通文本类、数字字母等，此类长短参差不齐的，建议采用左对齐的方式
• 特殊字段：日期、时间、字符数一致且比较短可控的，建议与表头居中对齐
• 特殊字段：日期、时间、字符数一致且比较短可控的，建议与表头居中对齐

九、弹窗

B端业务中使用的弹窗主要分为：

• 模态弹窗 （要求用户必须基于操作）
• 非模态弹窗  (不会打断用户当前的操作流程，紧紧是提醒用户的作用，展示一段时间后消失)

最大的区别在于：是否会打断用户的操作流程。

常见的模态弹窗：

• 对话弹窗
• 表达弹窗
• 分步弹窗

常见的非模态弹窗：

• 通知
• 全局提示
• 警告提示
• 气泡提示
• 文字提示等