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

表格

表格，对于大家来说再熟悉不过了，表格在后台系统设计中应该能占40%左右的比重，它看似简单横竖条。却有着非常多细小却影响用户体验的小细节。总结几点我每次写规范会考虑到的

操作列按钮：每个按钮字数不得超过6个字。超过4个的按钮采用折叠方式，用“更多”收缩多余按钮

列数太多：默认展示范围：3-8列，若出现更多，可固定重要列，剩余列滚动条展示(做好能支持用户队列的自动排序)

列表的宽度：宽度自适应，但根据字段的重要性显示，重要字段优先完整显示，出宽度限以“...”代替，鼠标经过展示全部内容

列标题：表头列标题最多输入8个字符(在复杂的后台系统中，会出现字数较多的标题，这些需要和产品共同讨论选取简短又能表达清楚含义的名称)

表行：表格行高可设置为字体高度的2.5倍到3倍，采用斑马线方式展示，加强视觉流的横向引导。表头与表体的颜色做区分

滚动条：表格内容超过一屏需要显示竖向滚动条时， 需要固定表头和页码。只需滚动表体内容部分

空数据：表格某部分无数据时用“-”来填充显示,对于数据为零的单元格，填上0

对齐：表格数值型内容左对齐，非数值型右对齐

弹框

弹框主要分为两个大类模态弹框和非模态弹框，他们最大的区别就是是否强制用户交互。模态弹框会打断用户的当前操作流程，只允许用户在当前弹窗上进行操作,非模态则反之。后台中常见的有

模态框：对话框、抽屉式侧滑窗

模非模态：警示框、气泡提示框、通知提示

我们在写弹框规范时，应了解各自项目中需使用弹框的有哪些内容，给出相关大小弹框的比例，哪些为固定尺寸，哪些为适配比例。对于通知提示给出停留多少时间后自动消失。

缺省状态

缺省页面是当页面没有数据、用户没有建立资料或者网络连接不通畅的情况下所展现的页面。为了缓解用户面对这类情况产生焦虑情绪以及面对这类情况的手足无措，设计师可以用一些插画和文字的结合来引导用户进行下一步的操作。

总结

经过设计师的规范整理，最终需要落地实现才是最重要的一步。规范确立以后我们需要对前端同事进行规范内容的培训，让前端同事清楚每一块内容的细节部分。规范培训的这步工作非常重，因为前端同事也会分好几个人一起项目，同时一个大的产品都会分成多个小模块来逐步开发，这样的工作模式是在无形中会增加样式不统一的几率。所以我们在开发前期要做好培训这一步，也会减少后期的返工量。规范也需要给标注(我一般上传到蓝湖)，方便前端开发根据规范样式组建他们的控件库。在实际工作中，也会有一些特殊的控件是由根据前端提供的控件库让我们来选择合适的控件然后更改样式。现在各种好用又比较完善的控件层出不穷，选择现有的控件可以节省开发很多的工作时间。

把公司一个项目的规范发出来大家学习互相讨论一下。