后台其实趋于相同,除了你定义的品牌色以及业务逻辑的不同,设计控件以及设计方法差不多。
布局
统一的布局,会让页面统一,并具有秩序之美。设计是感性的,也是理性的,统一的布局以及统一的模度,让界面有秩序感和韵律感。
统一画板尺寸
后台设计的统一画板尺寸的宽度为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
上传
上传包括附件及图片,在特定比例的图片或者封面之类的图片上传中,我们设计可裁剪的弹框
网友评论