后台界面 初做后台界面，该如何下手？

原地址:海盐社会(微信官方账号)

平时由于项目时间紧张，设计后台界面的时间往往不多。今年年初什么都没有。老板让我们在Element规范的基础上做一套通用的模板来满足日常需要，让工程师按照模板规范搭建好界面效果。但是平时很少设计后台界面，对Element也不熟悉。怎么开始？下面我主要从三个方面来说。

目录

1、了解元件设计规范

2.确定设计尺寸和标准

3.制作后台模板界面

理解元件设计规范

Element是一个基于Vue 2.0的面向开发者、设计师和产品经理的桌面组件库，由饿了么出品。其优点是可以根据构件库快速搭建接口，工程师可以使用前端框架封装的代码进行快速开发，提高接口的统一性和开发效率。

由于我们的后台界面是基于Element的框架开发的，所以要求我们在设计的时候掌握Element的设计规范，然后根据这个框架的规范进行设计。

进入Element官网，点击组件。边栏中有相应的设计规范，包括布局、颜色、字体、图标、按钮、表单、数据、提示、导航等。此外，您可以在资源中下载草图的规范文档。

确定设计尺寸和标准

众所周知，网页设计一般采用1920 x 1080的设计尺寸。但是由于大部分后台界面都是全屏设计的，使用大尺寸会导致小屏幕电脑数据无休止的显示。因此，需要确定设计标准尺寸和布局框架。

1.设计标准尺寸

根据百度网页流量平台的统计，我整理出网页的主流分辨率是1920 x 1080，1366 x 768，1440 x 900，1600 x 900，1024 x768。它们的屏幕分辨率使用如下。

为了更好的上下适应，同时也整合了Ant Design的设计尺寸，所以这里选择了中间位置1440 x 900的分辨率来设计。

但是由于浏览器的任务栏会占据一部分高度，如果高度是用900px设计的，一些主要信息不会在第一屏显示。哪个尺寸比较合适？

根据Script Home中分析的一组Web尺寸规格统计，从上图可以看出，当高度大于720时，82.64%的人看不到下面的内容，所以在设计中可以将高度作为720的中间值，这样前端适配的错误率更低。

所以在做后台设计时，最好采用1440 x 720的设计尺寸。

确定布局框架

Element中有两种主要的导航样式:顶部导航和侧边栏导航。

侧边栏导航是在左侧固定导航，多用于仪器或行政数据量较大的后台界面。它的优点是提高了导航的可视性，方便了页面之间的切换，常用工具如搜索栏、帮助按钮和通知按钮可以放在顶部。

顶部导航是自上而下的布局。导航信息可以在导航中显示。导航次数往往少于7次，多用于数据量减少的普通网页后台。其优点是自上而下的正常浏览顺序，方便浏览信息。

由于我们的大多数项目都是工具管理，我们可以在侧边栏导航的布局中设计它们。

元素中边栏布局框架的尺寸

导航高度为60px横向布局采用24栏的删格布局，侧边栏占4个删格为240px间距为24px(间距一般是8的倍数，因此在8、16、24、32中选择，模块间距采用24px最为舒适)

侧边栏导航的内容区宽度是自适应的:W=屏幕宽度-侧边栏-间距x ^ 2，1440分辨率下W=1440-240-24x2=1152。

制作背景模板界面

布局框架确定后，我们可以结合设计规范和Element组件库，制作通用的模板样式。一般需要做成模板的接口有哪些？

这是根据实际项目确定的。一般来说，列表页面的可重用性最高，所以在制作模板页面的时候，我主要是设计列表页面。

列表页面主要由三部分组成:基本框架+过滤器+表格。设计的时候可以先做一个基本风格。

基本列表完成后，我们可以制作其他状态，如高级过滤样式和多级列表等特殊样式。

在界面效果上，我这里融合了基于元素的蚂蚁设计。主要是Ant Design有很多背景模板可以应用，另外就是它的风格和布局比较紧凑。

模板接口建立后，我们无法为其制作所有的样式，所以此时可以将所有的状态制作成组件，让前端在使用时可以自由组合。

最后模板样式做好之后，可以提交给前端进行封装，在以后的开发中可以通过这些模板进行应用。当然，实际工作中会遇到更复杂的页面，可以在当时重新设计。

总结

本文主要对我做的后台模板界面进行梳理，主要从以下三个方面展开。

1、了解Element设计规范，这是设计的基础。

2.确定设计尺寸和标准。通过分析，更适合采用1440 x 720的尺寸。

3.创建一个后台模板界面，根据公司需要选择一个复用性高的界面。可以为多种状态设计特殊样式和常规样式，也可以为其他状态制作组件。

参考链接:

http://t.cn/E7cjOH2

网格系统及其在后台设计中的应用——后台设计经验总结01

http://t.cn/RqQbbICWeb

尺寸规格

http://t.cn/EVR1KGB

http://t.cn/EVR1CjOAnt设计