后台系统界面框架的交互设计分析

生活中我们使用的软件常常都是系统的前端，然而，每一个软件的运行都少不了后台系统的支撑，这篇文章就为大家介绍一下默默工作的后台系统是什么样子，应该怎样做交互设计。

后台系统的界面框架

界面框架都有哪些部分？

一般的后台系统界面框架可以分为几大区域，左侧导航、顶部导航、底部信息、内容区。左侧导航的目录结构根据业务内容可分为单层级和多层级，顶部导航主要包含消息通知、个人中心和设置，底部信息一般展示版权信息和联系方式，中间最大的空白区就是可以大作文章的内容区了。

标签

标签是什么？

有些复杂的后台系统还会有标签区，我们先看下面这张图，这里的标签是指内容区上方可点击的标签，由多个标签组成的可以叫做标签栏。

上图中，我们先看左侧导航的结构。这里分为一级导航、二级导航和三级导航，其中一级标题是固定的不能被展开和收起的，可以用于项目名称展示，二级标题是可以通过点击进行展开和收起的，展开后看到的就是三级标题，请注意，这里点击二级标题，在右侧的内容区是没有内容的，当点击三级标题时，才会在内容区出现内容，所以内容区上方的标签栏其实是三级标题的展示区。

我们常见的标签还有如下：

标签的作用是什么？

标签可以用于系统结构复杂的后台设计中，尤其是在左侧导航层级复杂，目录繁多的时候，不需要在左侧多层级的目录中寻找标题，用户可以通过标签快速打开要编辑的页面。有时候，用户需要对照两个或多个页面进行查看和编辑，这时候，通过快速切换标签查看要比从左侧目录中挨个点击要便捷的多。

怎样关闭打开的标签？

所有从左侧导航点击打开的标签都会保留在内容区上方，关闭的交互形式有两种：

方式一：当用户鼠标移入某个标签时，会展示关闭icon，点击即可关闭。

方式二：关闭icon直接展示在每个标签上，鼠标点击icon即可关闭。

两种方式都可以采用。

标签的排列顺序是怎样的？

当用户打开多个标签时，最后打开的标签展示在标签栏的最前面，之前打开的标签展示在后面，即按照时间的倒序排列。当前所在的内容标签展示样式要和其他标签区分开，用于告知用户当前所在位置。

面包屑导航

什么是面包屑导航？

面包屑导航这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

面包屑导航是Web端常用的一种交互展示，下面来看两个界面：

界面中的【供应商机构>新增供应商】就是这个页面的面包屑导航，告诉用户当前页面是新增供应商页面，它的上级是供应商机构，点击供应商机构可以返回到上级页面。

这里的新增页面用的是面包屑的下级展示，有些系统的新增功能会在当前页面展示弹框，如下：

上面的交互中出现了弹框上还有弹框，这种情况是需要避免的，所以我们通过面包屑导航来避免双弹框。

优化之后的样式如下：

同理，编辑操作也可以通过面包屑导航来展示。

总结

做Web端交互设计的时候，首先要了解业务，了解业务模块和它们之间的关系，这样才能在搭框架的时候满足业务需求。其次，要研究用户，了解用户的使用习惯，怎样设计可以让用户操作便捷。总之，设计方案千千万，多思考总是能找到最合适的。