详解如何写后台系统UI设计规范

标准字

后台系统在字体选择上都比较单一，中文：微软雅黑、英文：Arial即可。只是注意在给前端开发培训规范的时候重点提醒他们需要做字体样式的重置，不然当你后期走查界面的时候一个页面同时有宋体、有微软雅黑强迫症严重受不了啊，会非常影响看界面的心情。体会过走查这一步的设计师都懂。

图标

图标现在几乎不用切图的方式去做了，都在是制作完成后上传到阿里巴巴的字体图标库中。前端调用方便调整大小和颜色也方便，关键是怎么处理都不会失真。

页面布局框架

我们在设计过程中，还需要考虑我们基于什么样的尺寸进行基础设计。划分哪些区域需要固定尺寸、哪些需要做适配、菜单是否支持收缩功能等等。据统计，使用中系统的用户的主流分辨率主要为 1920、1440 和 1366，个别系统还存在 1280 的显示设备。具体适配最低和最高分辨率也可根据你的用户使用情况来决定，我们一般基于1920设计，下限考虑1366的分辨率即可。页面包括顶栏、页签、各应用左侧菜单、主体内容等区域。各系统有部分差异根据自身情况来定。

按钮

最按钮是交互设计中必备的元素，它在用户和系统的交互中承担着非常重要的作用。后台中常见的按钮类型分为线性按钮、面状按钮、文字按钮、图标按钮、文字+图标按钮。规范中要写出按钮的样式包括宽高、圆角以及文字按钮的字数一般限制6个以内(这个是给产品同事看，有时候会拿到原型一个按钮字数特别长。想想看一个正常的按钮字数太多了用户都需要花很长时间去读取这个按钮的功能然后再操作，非常影响用户体验)。

按钮的宽度给一个常规的宽度和高度，然后操作正常宽度文字离边框的间间距是多少都需要写清楚。

以及按钮的各种状态：默认状态、鼠标悬停、焦点获取、按住/激活、禁用

表单

常见表单是由多个列表项构成的。而每一个列表项都是由最基本的标签(标题)和输入框组成，常规的表单包括单选、多选、下拉选、输入框、时间选择、开关选择、图片附件上传等众多控件。

标签与控件之前的对齐方式有左标签、顶部标签、行内标签

 

左标签是比较常见的对齐方式，对与后台系统也是比较常用的一种方式，比较符合pc端常规显示屏横向空间比较充足的场景

顶部标签是标签在控件的上方，标签可以和控件很整齐的靠左对齐，对于横向空间不足的情况是一种很好的方案，但它同时也增加了整个表单的竖向高度，表单内容太多时，用户可能需要多次使用滚动条才能填完整个表单。

行内标签非常大的节省了空间，但是填写错误率非常高，当空间获取焦点的时候标签名就消失了，用户可能忘记了当前填写的标签是什么内容，需要用户的记忆成本。

每个标签都有它的优缺点根据自己的产品选择一种最适合自己产品的方式，规范中确定标签的对齐方式，每个控件的宽高度，控件之间的间距以及控件的各种状态(默认、激活、禁用、错误提示)。表单填写中错误提示的引导尤为重要，例如我们在填写手机号码时，用户填写可能少填了一位提示文字如果是“您填写的号码有误”，这时候需要用户自己去查找错误点在哪里。如果我们能快速给用户定位错误点给出提示“手机号不足11位”，这样的提示能帮助用户快速正确填写完表单，提高用户的工作效率。