我们发现，对后台设计的技巧通常不会像普通网页布局设计那样公开分享。这是因为我们通常很难在网络上找到后台的一些样例。由于要进入后台界面都需要账户和密码，所以很多设计师只能从其他样例中探寻设计趋势。但是对于管理者来说，后台仪表板的界面布局已经形成一种通用的风格了。

       在本文中，作者希望和大家一起探究dashboard的布局多样性及其设计理念。大多数典型网站的布局都是通过Html/CSS来搭建的。但网站管理者和用户不一样，他们只需要设置网页、套用模板或者更新内容页面。那相对特殊的管理后台设计是怎样呢？作者就打算对后台管理的设计进行讨论。

Tab 标签导航

       利用Tab标签作为网站导航一直是多年来的流行趋势。它在后台界面表现如此良好的原因是，我们通常会把相似的工具放置在一个区块下。使用同一水平或垂直线上的选项卡菜单可以容纳大量的相关的子菜单位置，以承载大量的链接。

图片1：Tab导航样例

       任何形式的Tab链接都可以为导航服务。你不必过多地考虑标签的常用圆角或在界面上的视觉设计，通常运用的就是简单的文字链接或者运用一些背景和icon。这能够帮助用户决定某个链接将会链到管理界面的哪个模块池。Tab导航的呈现通常一闪而过，运用字体加粗或者放大，能够让选中的Tab标签在导航栏中脱颖而出。

图片二  tab样式的设计样例

      并不是说控制板块的导航都是要用Tab标签的形式。当我们看WordPress的管理界面时，它看起来更像一个列表组，而不是Tab导航。而WordPress是一个非常出名的CMS管理系统，这就说明任何形式的导航都能发挥它的作用。一个比较好的思路，是先规划出一个站点地图及其链接的对象，再根据这个思路对链接项进行整合。

工具栏图标

      作者之前简要地提到过关于icon的设计，其实在他看来icon是导航栏中非常重要且容易出彩的元素。icon能够对其链接或跳转的内容页进行图像化的表征。文本则需要大脑花费更多的时间去进行识别和加工其含义，而图形更直观和简洁。我认为icon应该被包含在界面元素诸如：按钮、表格、页头、输入区或者页面上任何可能引起人困惑的区域。

图片三  工具栏样例

       现代设计师们更容易搭建页面，因为有很多免费开放的图标可供下载。有很多根据不同主题、不同技法和不同设计风格的收藏集，你能毫不费力地找到一套icon用于你的后台界面。你可以通过合理的icon摆放，让用户能够在繁杂的内容信息页面快速浏览，并且有益于视觉表现。

弹出悬停菜单

        当你需要展示更多的输入内容或者明细介绍，而页面上又实在没有足够的空间。在初始加载时适当隐藏，当鼠标移入时以弹出菜单的形式来展示，不失为一个好办法。通常通过点击页面上的某个链接或按钮来触发。

        你也可以在页面上运用弹出悬停菜单用来隐藏于输入字段相关的一些数据。网站管理员通常有大量的编辑页面或编写内容的工作，这就需要花很多耐心和心思把很多内容聚合在一起。很显然一个弹出框会包含很多内容，甚至包含一些流行的窗口样式和阴影效果。

       我真的非常喜欢上面提到的这个被标记为芒果管理的。当你鼠标移入这个message链接按钮时，会展示几条具体的message概要。这还可以类似地运用在扩展诸如发送、草稿、用户评论和一些涵盖大量列表数据的功能。任何典型的CMS系统都需要一些内容管理功能,以确保一切正常运转顺利。将页面上这些内容重新组合，适时隐藏和展示，能够给拥挤的页面腾出很多位置。

内容样式显示

      多种多样的后台管理系统，归根到底都有一个最基本的目的，就是信息的展示。其实像什么表单、列表、按钮、图形这些统统都可以称为“内容”。整个布局的设计一般都是为了将信息整合组装，以便于更好地阅读和编辑。

      我喜欢那些表单中的小icon，它们能让你快速发现哪些是可访问的按钮。你可以快速添加、编辑或删除表的行中的内容。图形的特征和颜色，能够让用户一样明白他需要做什么。当然,这只是一个简单的例子,但很难找到这样的趋势。多去思考和创新，才能让你设计出来的后台更简洁易用。

       值得一提是,并不是所有的管理界面都需要图形、图表或是统计数据。有时你只需直接处理信息。尽管有可能有些枯燥，但是你必须想好如何处理数据的交互。这时候你会发现考虑用户的认知是一个挑战。无论尝试多少次新的想法都是值得的，要知道没有人能进行最完美的界面设计，新的设计走向永远是即将到来的。

样例展示

       本文中展示的所有设计样例都是只为了给设计师们抛砖引玉。但我相信大家能够从大量的案例中获得一些后台界面设计的通用知识。这里一些整理过的精美后台设计模板 供大家自取。从中您可能会发现一些和我所说的一样设计走向，又或者您能从中发现新的点子用在您自己的设计中。

（翻译仅出于兴趣，欢迎共同学习，互相交流）

原文地址：https://speckyboy.com/user-experience-trends-for-admin-dashboards/