设计师必修课:后台设计的要点你理解了吗?

355 阅读3分钟

后台是工作的地方,对于后台的设计至关重要,后台的设计要遵循简单实用的原理,让使用者更好更快上手,一流设计网(yiliusheji.com)带您来看看相关的后台设计要点。

![](https://upload-images.jianshu.io/upload_images/23542015-fd18eee06b1aca00.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.内容区和导航栏一深一浅的颜色来对比区分,使模块清晰。

2.比较创新的一种布局版式,适用于Saas系统。设计师利用了少量的分割线将菜单栏和右边的内容区划分,降低了视觉噪音。既统一了模块,又能够让用户一眼感知模块功能。

3.最吸睛的数据图表,克制的蓝色和跌宕起伏的折线图呈现给用户一个趋于自然真实的效果,符合用户心理预期。

4.优先级最高的四项重要指标横向排版符合市面主流样式,符合F型浏览模式。各项单一指标模块采用左对齐的方式统一版面,利于用户阅读。

![](https://upload-images.jianshu.io/upload_images/23542015-1a0be09187a68954.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](https://upload-images.jianshu.io/upload_images/23542015-5657681c0e251547.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.内容区使用统一的圆角卡片,使得模块信息更加聚焦。

2.卡片之间合理的栅格间距让版式看起来更加透气、整洁。

3.使用统一的线性图标,设计师应该是想让整体视觉更加轻量化。这里可以根据自身平台属性来考虑使用面性还是线性图标。

![](https://upload-images.jianshu.io/upload_images/23542015-14673a4b191104ce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

▲常见的菜单栏换肤和收缩样式,没有灵感的时候没有样式的时候可以参考一下

1.菜单栏的背景色通常是品牌色或者浅色二选一。除非是业务需要,常见的CRM、OA系统使用一个主色调就能够cover主功能页面。这样既降低了视觉噪音,这种全局也降低了程序猿冗余的代码量,会感谢你的~

2.图中面性和限行图标保持了识别性、易理解、体量感的设计感。唯一缺憾的是面性图标还不是非常统一。

![](https://upload-images.jianshu.io/upload_images/23542015-52c6f292e02f7d85.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

▲整张设计稿比较特别的是三个色块的卡面设计。用腻了单一色块和常规渐变效果的同学可以试试径向渐变的设计手法。干净又不失设计感。

![](https://upload-images.jianshu.io/upload_images/23542015-bdb3b787e7b65447.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

1.简笔插画现在国外后台系统界面设计中用的比较多,在国内主要是由于业务和甲方爸爸“审美”的限制,用的地方会少很多。但是在常规单一的空状态页面中可以尝试加入,增加趣味性。有兴趣的同学可以研究一下体量较大的钉钉、飞书等成熟产品。

2.数据图表的数据油墨比合理,颜色对比干净利落,没有过多的色彩干扰。

![](https://upload-images.jianshu.io/upload_images/23542015-46a0290d78e14a56.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

▲整个界面背景层使用了多色渐变模糊效果,比较潮流新颖的设计手法,看起来很高级。区别于市面主流的浅灰色背景。

![](https://upload-images.jianshu.io/upload_images/23542015-905e50c7e1554da7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

▲很多设计师都处理不好繁冗夯长的字段排版,对于字段的取舍拿捏不定,布局样式单一。图中设计师对于内容字段的排版值得学习称赞。多样的布局排版能够极大的提升阅读性,降低视觉疲劳。

![](https://upload-images.jianshu.io/upload_images/23542015-415db301dc0cae31.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

▲后台界面也可以加入一些有质感的设计细节。图中的仪表盘、switch都加入了一些轻微的质感,用细节增强了观赏性。切记不能设计过猛,会有种喧兵夺主的感觉。

结语:

一流设计网(yiliusheji.com)认为后台设计其实也可以吸引人的眼球,看似越简单的设计内容就越能够看出来一位设计师的基本功底扎实与否。多看看国外设计师的设计手法,每天吸收一点,脑海中过一遍,通过一年365天的积累。回过头再看看,会发现对设计的理解能够有质的提升。