后台设计小总结

后台其实趋于相同，除了你定义的品牌色以及业务逻辑的不同，设计控件以及设计方法差不多。

布局

---

统一的布局，会让页面统一，并具有秩序之美。设计是感性的，也是理性的，统一的布局以及统一的模度，让界面有秩序感和韵律感。

统一画板尺寸

---

后台设计的统一画板尺寸的宽度为1440，一方面为了不同设计师设计的统一性，另一方面在设计师用笔记本演示的时候是全屏的体验效果。

适配

---

设计画布尺寸和实际屏幕的宽度是有出入的，主流屏幕分辨率从1920、1440、1360以及小屏幕的1280的显示设备，我们设计的时候，可以根据设计需要设置版心的宽度，在主流屏幕中，可以全部显示数据，其他部分留白或者工作区根据设计的布局动态缩放。

（1）左右栏布局：导航栏长度以及位置固定，工作区动态扩展

（2）上下布局：导航栏上部固定，工作区宽度固定，左右空白间距动态扩展

主题色

---

品牌色是根据已有的颜色进行设计，因为后台一般是与客户端配合使用，可以使用与客户端相匹配的颜色，如果自主重新配色的话，建议使用冷色系

功能色

---

功能色主要有四种：成功、链接、警告错误四种，用来表达信息及流程的状态

文字

---

网页端文字大小，最小文字一般大小为12px，正文为14px。配合16px、20px、24px、30px使用，行间距在字体基础上加8px

图标

---

图标基于1024x1024的画板上绘制，留出出血位，根据里面的形状进行设计，保证视觉的统一。图标尺寸按照8的倍数进行延展。包括圆角以及线的宽度。图标管理可以使用iconfront建立自己的图标库，方便开发以及多次使用

按钮

---

按钮是用户进行点击操作，分类一般为，文字按钮、线性按钮、填充按钮、虚线按钮。

按钮大小可以根据8的模数变化，small、default、big，以填充性按钮为例。

交互态，主要为正常、按压，悬停、不可用。

为了统一样式，对于悬停样式，采用文字改变透明度；按压采用按钮背景色变身（填充色采用添加一层10%的黑色蒙板，线性按钮采用添加灰色背景额填充）；不可用的按钮，采用灰色背景

导航栏

---

为页面和功能提供导航的菜单列表，常用于网站顶部和左侧，大多数的后台设计网站，多为左侧菜单栏的设计

输入框/选择框

---

（1）输入框的交互态

默认样式、获取焦点、输入结果、校检错误、禁用状态

（2）输入框的形式

直接使用默认提示语，这种比较适合选项较少，对用户的记忆要求不是那么高的时候；当选项较多的时候，适合标题+输入框的形式

（3）输入表单

在我们输入的数据类型比较多的时候，输入框和选择框有很多变形，来满足我们对不用数据类型的输入

（4）输入框尺寸

输入框的长度可以根据需要调整，但是为了界面的统一，我们以8的模数对高度进行定义。24px、32px、40px

表单

---

后台系统的页面由很多表单组成，大多数界面都是各类的表单，大表单、默认表单、小表单尺寸的模数也采用：40px、48px、60px

上传

---

上传包括附件及图片，在特定比例的图片或者封面之类的图片上传中，我们设计可裁剪的弹框

步骤条

---

选择框

---