后台界面设计之全局解析

后台界面设计接触了有一段时间了，起初刚开始时，对于后台的设计没什么概念，网上相对的解析较少。就靠着这较少的解析以及那些优秀的后台界面设计一步一步的走到了现在，然而后台的设计也越来越多，所以我想把自己的一些感悟和一些做法分享给大家，希望对大家能有些帮助。

（我第一次写，你也第一次看我写的，就这样凑合凑合吧！欢迎来交流~）

再往下就是正文了，所以先看下目录。

目录

1.  后台界面起源

     1.1  什么是后台

     1.2  为什么有后台

2.  原型理解/功能理解

     2.1  原型理解

     2.2  功能理解

3.  页面布局

4.  设计稿尺寸

5.  字体

6.  颜色

7.  组件设计

     7.1  组件设计

     7.2  前端框架

8.  图表设计

     8.1  图表设计

     8.2  图表插件

9.  总结

1.  后台界面起源

1.1  什么是后台

百度百科说：后台，指网站后台，有时也称为网站管理后台，是指用于管理网站前台的一系列操作，如：产品、企业信息的增加、更新、删除等。

我补充一点：后台，也可以称之为网络应用程序；服务的对象主要是To B的平台型，用于企业的内部管理、产品的运维等。

如下图：

1.2  为什么有后台

简单一点说就是因为目前我们浏览的网页可以称之为网站前台，是面向用户的内容和页面。当前台页面需要修改展示内容或者功能交互（例如：用户留言、购买支付、修改权限）时，就需要网站后台进行一系列相关的操作。所以就有了后台，再后来就需要后台界面设计。

看完了起源，接下来.......

2.  原型理解/功能理解

2.1  原型理解

原型，顾名思义就是原始形状，说白了就是产品经理画的那个。
分享一下我收到的原型、没有对比就没有伤害、

原型理解，为什么要去做这一步？

当产品经理把产品原型给到我们设计时，切记不要看着原型就在Ps或Photoshop上展示你那猛如虎的操作，因为

原型可能会改！   咳咳、、开个玩笑...

拿到原型首先应该仔细浏览和体验一番，对产品先有一个初步的概念，了解一下这是怎么样的一个后台管理。

然后对于其中的一些不理解的可以先和产品经理沟通，避免后期进行多次返工。

最后，还要知道这个后台管理的3个要素：1. 时间：什么时候用；2. 人物：谁用；3. 地点：用在哪里。

知道什么时候用，可以让我们知道这个后台管理的一些操作是否经常使用或者在短时间内要多次使用，那么在进行设计时可以考虑减少页面跳转或者减少操作步骤；

知道谁用，可以让我们知道用户群体，如果用户群体中有一大部分是中年或者中年往上，那么在进行设计时可以考虑将文字偏大；

知道用在哪里，可以让我们知道大概的产品特性，那么在颜色选择和整体风格上可以做出更优。

2.2  功能理解

功能是后台管理的存在意义，也是后台管理的价值体现；

我们虽然不是开发工程师，不参与实质的开发，但是，功能理解的越透彻，越是知道原型中展示的逻辑思路是否正确，提前替开发踩坑。既提高了功能质量，又完善了页面设计细节。

3.  页面布局

话不多说直接看图：

我补充一点：实际情况下会遇到把左侧导航收缩起来，只显示icon；或者会在页面右边出现含有一些功能的快捷操作界面；又或者是其他情况。但是，整体的界面布局也就以上几种，只是灵活运用罢了。每一种布局都有适用性，具体情况具体分析，细节的分析等下次再详细说明。

4.  设计稿尺寸

说设计稿尺寸之前呢，我们先来看一下用户屏幕分辨率的统计报告。

可以看到1920x1080分辨率的占比最高，其次是1366x768分辨率的。而1920x1080的大多数应该是PC用户，1366x768的大多数应该是笔记本电脑用户。所以设计稿尺寸用1920x1080和1366x768都可以，推荐使用大分辨率。

我补充一点：目前网页基本都写成了响应式，后台页面也是如此，要考虑在不同的分辨率下网站的展示效果。所以，具体设计稿尺寸可以依据公司要求来定；如果公司暂无要求，可以和前端工程师沟通；当然分辨率越高设计效果越好，因为后台界面相对展示的东西比较多。但是要考虑不同分辨率的展示效果，所以，二者要做权衡。

其次还要考虑分辨率兼容问题，当然，也不是所有的分辨率都要考虑，那些实在是小的就不要考虑了，费时又费力，还不一定有好的效果！

5.  字体

后台界面设计用到的文字种类不多，也就是中文、英文和数字。本来这块没什么可分享的，但还是稍微写点吧。

来、看图：

我补充一点：最小的字号就到12px，不要在往下了，再往下容易累，往上选取就看具体情况了；这个字体选择我只想说字体不要过多，各选一种字体就够用了。

友情提示：尽量不要使用有版权字体在商业项目上。

6.  颜色

这里的颜色只是说一下页面设计上的颜色，不涉及统计图表，后台页面设计所用的颜色比较少，用色方法也比较简单。

来、继续看图：

我补充一点：颜色选择尽量高亮一点，太昏暗的使页面显的特别脏。放置内容的背景色最好是纯白，整体页面的背景色可以为灰色。边框和分割线能起到区分的作用就好，不需要特别显眼。

7.  组件设计

7.1  组件设计

后台界面设计与App设计一样，都有许多公共组件，这些组件就是功能的体现。那后台界面设计又有哪些组件呢？

来、看图：

上图只是列举常见常用的组件，想想平时在网站操作时是否遇见过？是否使用过？是否还记的ta的模样？

不管怎样，我都帮你回忆那刹那间~

来、继续看图：

有些也就长上面那样，差不了太多。是不是经常看见、是不是经常使用、是不是想起来了、

还想看到更多吗？

7.2  前端框架

现在的前端工程师们都在用框架，就像我们UI一样有一些现成的组件。为什么用框架呢？首先框架整体成熟，比起前端自己原生写，框架bug少而且稳定；其次，速度快、方便、简单，还不容易出错。然后这些前端框架我们UI也要有所了解。

了解什么呢？了解它的基本样式、基本交互、基本准则。想象一下，你UI图里的组件样式和前端框架里的组件样式一样，那么产品的开发进展是不是就快了很多，而且还稳定。

也许你会觉得样式都用现成的，那还设计个什么，让前端自己写不就好了吗！框架里的组件是单个呈现的，而界面是将这些单个组合在一起，至于组合的美不美，那就是UI的事了。

那么我就分享几个，框架不在多，在于灵活的运用。

Ant Design    https://ant.design/index-cn                  出自于蚂蚁金服；

Element        http://element-cn.eleme.io/#/zh-CN     出自于饿了么；

iView            https://www.iviewui.com/                     出自于iView；

8. 图表设计

8.1 图表

后台界面中有不少的数据需要展示，然后通过数据的展示来进行分析决策，而展示数据最好的方法就是图表。所以我们要先明确每种图表的定义和使用范围，然后才能正确的使用，最后将数据完美展示出来。

后台界面中有三种常用的基础图表，分别是柱形图、折线图、饼图。

统计图表还有许多样式，每种都有自己的定义和使用范围，依据数据的特性合理的去选择图表样式，才能将图表的目的和价值体现出来。才能帮助决策者做出正确的选择。

我补充一点：在图表设计时会遇到颜色的选择，柱形图的每一条要选取统一的颜色，折线图也是，每单条中线条的颜色要统一；饼图中会出现较多的分项，而每个分项又要做区分，那么再选择颜色时可以是同一“色系”的不同色彩，也可是页面中出现过的“色系”，但不要引入过多的“新色系”。

8.2  图表插件

设计图表前，我们还有一个问题需要去考虑，就是我们所设计出来的图表样式前端工程师能否实现，或者实现起来是否困难？网上有很多把图表设计很酷炫的效果图，但是实用性高吗？尤其是在实际项目中；一个产品的好坏不是取决于个人力量，要综合全部，选出最优的方案。如果有简单的方法能把图表展示出来，而且效果满足要求，何乐而不为呢？

我分享两个关于图表插件的网站，便于参考:

Echarth    https://echarts.baidu.com/examples/          来自百度；

Antv         https://antv.alipay.com/zh-cn/index.html    来自蚂蚁金服；

不要一味的追求技法和效果，最适合的才是最优的！

9.  总结

我最后补充一点：功能大于一切！

当做不到页面又好看，功能又能完美体现时。优先考虑功能的设计，因为后台管理有很强的实操性和实用性，绝对不允许出现功能错误；而页面美化不是短时间内能做到的， 需要一定的设计积累。

加油吧！各位