源起

由于之前曾经在后台系统开发公司工作过的缘故，所以有些后台管理系统界面的产出。后来虽然从那家公司离职，但也接到过一些后台界面设计和优化的项目，前前后后也快十来个了。

这里想分享下一些关于后台界面设计的观点（tucao）。

一，定义好表格规范强于为每个表格出设计稿

表格是构成后台使用界面的重要组成之一，聚合了众多信息并提供操作入口。并且后台系统中一般会需要数量众多的表格。

这种情况下如果每张表格都出设计稿，是一件很费时费力的事情，更关键的是对开发落地不一定有什么实际意义。

所以这种情况下，定义好表格规范要远远强于为每个列表出设计稿。

下图是在某系统设计中定义的表格规范，定义了不同信息之间的间距，信息块内部的浮动间距等

二，考虑未来页面信息密度增高的情形，避免使用过大的组件。

2019年在某系统设计中，由于初期页面内容比较少，为了让用户拥有更大的点击操作区域，利用页面空间，所以让下拉菜单，输入框等控件略微大了一点点。

后来页面内容逐步增多，特别是筛选功能越来越多时，就尴尬了。使用原有的控件，筛选区域就会臃肿不堪，挤占信息展示区域的空间。新设计控件又会与其他页面不统一，修改工作量会很大。

所以即便页面信息少，也要考虑页面信息密度增高的情形，避免是使用过大的组件。

三，根据用户常用的显示器分辨率设计后台

一般情况下我们会按1920px的宽度出设计稿，然后再交付给开发做自适应。

但是后来发现页面信息密度很高时，简单粗暴的自适应难免会不尽人意。

并且实际工作环境中，很多后台的使用者几乎全部情形都是用笔记本，这种情形下使用笔记本的尺寸设计更为合适，或者使用1440px的宽度出设计稿，平衡对大小屏幕的设计考虑。

最好的方式当然是与需求方充分沟通，商定设计稿宽度。很多需求部门的电脑都是统一采购的，显示器分辨率是全部统一的。

2020年某ERP设计项目，一张表单以1920px宽度出了设计稿，后来应甲方需要，另外单独出了一版1200px版本。

四，与开发讨论使用何种组件库，基于组件库提供界面优化方案

在实际的后台项目开发过程中，很多项目并不使用自己定制的组件库，而是使用第三方框架。这种情形下最合适的方式是与开发讨论使用何种组件库，基于组件库提供界面优化方案，基于组件库提供高密度复杂页面的编排，重难点页面的设计。

设计的产出应该以实际实现效果为导向，而不是止步于设计稿。

几个常用的组件库

https://www.iviewui.com/

https://element.eleme.cn/#/zh-CN/resource

https://ant.design/docs/spec/introduce-cn

五，尝试考虑使用卡片展示列表信息

后台页面中经常会存在大量列表的情形，如果某个列表字段不多并不会随便增加，可以尝试一排信息放在一张卡片上，使用卡片展示列表信息，改变页面单调的版式。

不过字段，操作按钮一旦增加，就比较麻烦了。

六，导航区不要过大，尽量给工作区留出空间。

如果使用固定宽度的导航区，过宽的导航区会挤占工作区的空间，在笔记本等小屏幕电脑上会更加明显。所以需要合理控制大小。

七，灵活使用不同板块样式，分隔方式区分高密度页面中的信息

后台设计中经常会遇到一个页面需要显示很多不同类型信息的需求，可以使用不同底色，卡片，不同层级的分隔线来分割版面，实现不同类型信息的区别显示。

应客户需要，这张客户详情页面只能以弹窗形式出现。反复使用底色分割，在尽可能简洁的同时将不同信息区分开来。

结语

以上的观点仅代表个人的看法，可能有一些无法令人接受，欢迎各位一起探讨，或者给出更好的解决方案。

感觉有帮助的话点个赞哟~

Powered by Froala Editor