B端后台项目总结

该项目为真实案例，只展示部分界面，参与了后台系统从无到有的设计，从前期的产品分析、设计规范与设计稿的制作，到最后交付开发落地执行，针对项目中遇到的问题、交互细节同时如何快速的制图，作出以下项目总结，一些思考和经验的分享。

在设计的过程中，利用symbol创建控件，可以有效的提高设计效率；

页面布局

目前使用系统的用户的主流分辨率主要为 1920、1440 和 1366，在设计的过程中，根据需要设置内容宽度，在主流屏幕中，可以全部显示数据，其他部分留白或者内容区根据设计的布局动态缩放。

框架

结构及模块

布局采用24栅格系统

布局采用24栅格体系。本文以 1440x900 大小的画布，对宽度为 1200 的内容区域进行栅格的划分设置，页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

总宽度=23列 + 1 column， 1 列 = 1 column + 1 gutter，1 gutter=24px；

标准字

后台系统通常采用系统默认字体，Windows系统采用中文Microsoft YaHei，英文Arial；Mac系统中采用中文PingFang SC，英文Helvetica；

在此后台设计中采用中文字体：思源黑体 / Noto Sans Han，英文数字字体：Roboto；

后台系统中常用字体大小为12px、13px、14px、16px、18px、20px、24px、30px。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+8px；

例文字14px，行高为14px+8px=22px；

颜色

我们一般通过颜色来有目的地展示产品的功能、层次和风格。

中性色

中性色使用场景应用于：文本、边框和分割线线、背景

功能色

功能色使用场景应用于：成功、失败、警告、错误、链接等

图标

图标用以辅助用户理解界面信息，给予用户正确、友好的指引。规范化的图标，会使得界面具有更好的体验；

图标网格

导航栏

选择导航用于页面切换

按钮

按钮有三种视觉层次：主按钮、次按钮、普通按钮。

不同的类型可以用来区别按钮的重要程度，高度统一为32px；

后台中常见的按钮类型分为线性按钮(实现/虚线)、面状按钮、文字按钮、图标按钮、幽灵按钮；

统一设置按钮组件大小,以及按钮的各种状态：默认状态、鼠标悬停、按住/激活、禁用;

为了统一样式，对于悬停样式，采用文字改变透明度；按压采用按钮背景色变深；不可用按钮，采用灰色背景。

表单

表单由输入框、选择器、单选框、多选框等元素组成，用以收集、校验、提交数据。

单选框

引导用户在可选择的范围内完成单选操作，默认有一项选中

复选框

引导用户在可选择的范围内完成多选操作，初始状态默认勾选一项

输入框/选择框交互形态

一般样式分为：默认样式、获取焦点、输入结果、校验错误、禁用状态

输入框、选择框样式和尺寸

样式采用标题在左，输入框在右的对齐方式，在后台系统设计中也是比较常用的一种方式，比较符合pc端常规显示屏横向空间比较充足的场景

宽度根据具体需求调整，高度为8的倍数，本次系统设计中采用40px

表格

后台系统设计中，大多数页面是表格设计，表格设计很容易被人忽视很多交互细节，下面总结几点设计过程中遇到的细节，本次系统设计中采用48px；

对齐方式：文本采用左对齐，数值采用右对齐；

滚动条：表格内容过多时，需展示横向滚动条，序号固定，拖动展示更多内容；

操作按钮：当操作按钮过多时，应进行划分权重，对次级操作进行隐藏；

标题：标题文字过长时，应根据具体情况进行换行或者超过一定字符“…”；

其他组件

结语：

梳理和设计的过程中以及专业术语的来源参考了以下网站：

Ant Design：https://ant.design/docs/spec/introduce-cn   

Element：http://element-cn.eleme.io/#/zh-CN/component/checkbox

https://www.zcool.com.cn/article/ZOTE4Mzcy.html（站酷设计师）

页面展示

页面布局

部分页面