文章插图
导航栏
为页面和功能提供导航的菜单列表，常用于网站顶部和左侧 。大多数的后台设计网站，多为左侧菜单栏的设计 。
文章插图
输入框/选择框
在后台设计中，数据的输入以及数据选择框会占比较大的比例，因此定义好这两个控件的交互态，一级可能出现的应用形式会让我们在后台设计中省时省力 。
输入框的交互态
默认样式、获取焦点、输入结果、 校检错误、 禁用状态
文章插图
输入框的形式
直接使用默认提示语，这种比较适合选项较少，对用户的记忆要求不是那么高的时候（尽量不要超过4个）；当选项较多的时候，适合标题+输入框的形式 。
以登录注册为例，输入数据的数量较少，可以采用无标题的形式 。
文章插图
输入表单
在我们输入的数据类型比较多的时候，输入框和选择框有很多变形，来满足我们对不同数据类型的输入 。
文章插图
输入框尺寸
输入框的长度可以根据需要调整，但是为了界面的统一，我们以8的模数对高度进行定义，24px、32px、40px 。
文章插图
表单
后台系统的页面由很多表单组成，大多数界面都是各类的表单 。大表单、默认表单、小表单尺寸的模数也采用：40px、48px、60px 。
文章插图
分页
文章插图
上传
上传包括附件以及图片，在特定比例的图片或者封面之类的图片上传中，我们设计可裁剪的弹框（不是所有人可以像我们设计师这样P图的）
文章插图
步骤条
文章插图
选择框
文章插图
文章插图
常用缺省图
缺省图，采用了情感化的扁平化的插画形式，缓解用户的焦虑等待的情绪 。
文章插图
选择了比较常出现的几个控件做了分享，还有可能遇到的更多的情况，可以参考以下网站 。如果可以把主要的控件定义，做成模版，在具体场景中进行重组，在节省开发和设计人力的同时，让界面统一有美感 。设计的同学也可以搬运组件，让设计更高效 。
【UI后台设计规范总结】
推荐阅读
- 嵌入式使用emWin进行GUI图形设计教程
- 客厅电视墙如何设计
- 程序员必备技能：设计模式之——组合模式
- 阿里微服务布道师：详解微服务架构设计
- EAdmin - 开箱即用的后台UI框架
- 艾尔登法环|华南理工的建筑师应聘家政，13年甲级院的设计师转行中介……
- 抄袭|被调侃没钱请设计师！《王者荣耀》再次被指抄袭：供应商火速回应
- 服装设计师应具备哪些专业素质
- 电视背景墙与风水有啥关系 电视背景墙设计之色调与形式宜忌风水
- 响应式网站设计，弹出框如何设计更友好？