管理控制面板的用户体验趋势

2024 十二月
M	T	W	T	F	S	S
« Jan
	1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

The design techniques for administration panels are not as openly shared as website layouts. This is because you do not always find examples of admin designs open on the web. To gain access you would need a user/password combo, so designers are often left building with trends found in other examples. But the dashboard interface has grown very quickly as a popular layout style for administrators. In this article I want to look into various styles and ideas for creating administration dashboard pages. These are typical website layouts built using HTML5/CSS3/JS. Except users will not ever see these designs because the admin CP is only needed for website settings, templates, or updating posts/pages. But there are still lots of exceptional designs for admin dashboards and I hope to showcase a number of trends in this article.

管理员控制面板的设计没有像网页前台设计那样共享通用，因为一般管理员的控制面板都不会暴露在外。要进入管理面板，你必须有帐号和密码，所以设计师在设计时总是趋于其他参考的例子。但是作为十分流行的管理员页面控制面板的界面设计发展是十分迅速的。在本文中，我想尝试深入了解员控制面板页面的几种风格和创意。这些都是经典的使用HTML5/CSS3/JS的网站布局。普通用户是不会看到这些界面的，因为这是给网站设置，模版管理或者页面更新的控制面板。不过也有很多管理版面例外的设计，我希望在本文中展示一下这些设计的趋势。

Tabbed Navigation 标签导航

Utilizing tab buttons for page navigation has been a common trend for years. The reason it works so well in dashboard pages is because you often need to organize a lot of similar tools under the same umbrella. Using both horizontal and vertical tab menus can offer related sub-menu positions for including tons of links.

利用标签按钮导航是近些年的趋势。标签按钮在控制面板中很有用武之地，这是因为通常你需要组织一堆工具（按钮）摆放在一个板块下。使用水平和垂直的菜单可以方便关联你那些数不尽的链接。

Any form of tabbed link design can work for a navbar. You do not need to handle the typical rounded corners and button interface design. More often it helps to make very simple tabs which behave as links, also using background images for icon artwork. This helps users to determine which links go to which section of the administration panel. Tabbed designs also offer a very flashy interface, using big text and bold letters will help the links stand out among other text.

任何形式的标签按钮都可以做到导航。你并不一定需要搞圆角和界面设计，很多时候使用图片背景的图标也可以做很简洁的链接类的标签。标签式的导航可以让用户很容易区分去哪个板块点哪个链接。标签设计也可以达到华丽的效果，使用大字体和加粗，可以使得导航链接醒目于其他文本。

I can’t make the claim that every control panel navigation should be using tabs. If we look at WordPress’ dashboard it certainly looks more like blocks of list items compared to a tabbed navbar. And WordPress is an extremely popular CMS which goes to show any navigation can work. A good strategy is to plan out a sitemap of links and then follow those ideas to a core group of link items.

我不能说每个控制面板都要用导航标签。看看WordPress的控制面板，对比标签式的导航条，他更是模块式的项目列表。WordPress是一套很流行的内容管理系统, 可以配置显示任意的有效导航。一个较好的策略是列出网站左右的链接，然后将他们分类。

Toolbar Icons 图标工具条

I had briefly mentioned icons earlier but I think this design trend is important even outside of navigation. Icons are a picture symbolising the content of a link or some page information. Text requires more time for the brain to read and process what it all means, but pictures are clear and concise. I think icons should be included as interface elements on buttons, tables, headers, input fields, and really any potentially confusing areas on the page.

上面我只简单提到图标，不过我认为图标设计是一个趋势，而且这不仅仅对于导航条来说。图标是链接内容或者页面信息的象征性图片。相对来说，大脑需要更多的时间来阅读和处理文字的意思，而图片则清楚和简洁。我认为，图标应该包括这些界面元素：按钮，表格，标题，输入框，以及页面上任何可能会导致混淆的地方。

Modern designers have a much easier time building these interfaces because of the many freebie icon releases to be found online. There are so many collections built using various themes, techniques, and design styles, that you should have no problem locating a set for your admin interface. You can determine good icon placements by scanning the page for content which seems overbearing and might benefit from visual graphics.

现在的设计师很容易就可以搞好这些界面，因为网络上有很多免费的图标。网上有那么多使用各种不同主题，技术和风格的图标集，所以你不难找到一个适合你的管理界面。你可以扫描一遍页面，以确定图标放在哪里更显霸气，视觉上更佳。

Popover Hover Menus 泡泡提示菜单

There will not always be enough space on the page to include all the inputs and details you need. Sometimes a good way of handling this problem is to initially hide some features, and then display them later using a popup menu. This could be triggered on hover or by clicking a button/link on the page.

并非所有的页面都有足够的空间给你显示输入框和其他你想要的细节。有时这种情况的最佳处理办法是初始化时隐藏某些功能，然后用泡泡窗口菜单。可以用按钮或链接，通过鼠标悬浮或单击事件来切换。

You may also include popover menus for hidden input fields related to some data on the page. Administrators are often busy editing pages or adding new content into the website. This requires a lot of work and patience to put everything together. Obviously a popup block may contain a lot of data – even including modal windows using a lightbox or shadowbox effect.

你可以为输入框设置关联了数据的泡泡窗口。给网站编辑页面和添加内容对于管理员是家常便饭，这要求做大量的工作和耐心把所有东西组织在一起，显然的，泡泡提示窗会包含大量的数据，甚至会是一个灯箱效果和带阴影效果的模拟窗口。

I really like the example above labeled Mango Admin. You can hover the messages link block and it’ll display some of the messages within the inbox. This trend could be expanded for new posts, drafts, user comments, and tons of other queue systems. Any typical CMS generally requires some content management to keep everything running smoothly. By reorganizing some of this content to appear hidden on the page, it can alleviate room for a more relaxed interface.

我真心喜欢上图的Mango管理例子。你可以将光标移到消息链接，这将会弹出一个带有信息的窗口。这个效果可以应用到新产品，草稿，用户评论，以及其他大量队列信息的系统。每个典型的CMS系统通常都要求内容管理以便网站运行平滑。通过隐藏和显示来重构页面内容，可以有效缓解页面空间，得到宽松的界面。

Content Display Styles 数据显示样式

All the various administration panels do share one thing in common – their purpose is to display information. We may also use the word “content” which can include tables, lists, buttons, graphs, really anything. The entire layout is generally focused to encapsulate this content where is it easy to read and easy to edit.

所有各种管理面板都有一个共同点——他们的目标都是展示信息。更确切的说应该是是“内容”，包括表格，清单，按钮，图形，所以一切。整个布局都是着眼于概括好内容，以方便用户阅读和编辑。

I like the small icons you can see in the table which would appear to be quick access buttons. You may quickly add, edit, or delete content from within a row of the table. And the icons are colored so you will be able to tell from a distance what they do. Of course, this is just one simple example but trends like these are hard to find. Always keep thinking of new ideas or techniques which would make your administration powers easier and simplified.

我喜欢那些表格中的小图标，它们是快捷按钮，你可以快速的添加，编辑或者删除表格中某一行的内容。而且这些图标不同颜色，所以你可以立马区分它们是干什么的。当然，这只是一个简单例子，但是很难发现这些的趋势。始终关注新概念和技术，会让你的管理控制面板更加易用和简洁。

It is notable that not all administration interfaces will have graphs and charts and statistics. Sometimes you will just be dealing with straight information. And even though this may seem boring, you have to think about how you will be interacting with all this data. Then you will be looking at the challenge from a user’s perception. No matter how many ideas you try out they are all worth it, because nobody has the perfect design UI and there are always new trends on the horizon.

值得注意的是，并非所有的管理面板都会有图形，图表和统计。有时候只是需要处理单一的信息，而且尽管这是枯燥的事情，设计界面时你还必须把所有的数据考虑进去。这样你就可以在用户角度面对挑战，无论你尝试了多少的想法都是值得的，因为没人可以设计出完美的UI，新的流行总是不经意的在地平线升起。

Showcase Gallery 样本集

All of the trends listed in this article provide a nice starting point for designers. But I think you can learn a lot by studying other common examples for admin dashboards. I have put together a small collection of screenshot pages from Dribbble shots. I hope you will notice some of the trends I have listed, plus some fresh ideas to use in your own designs. And if you have questions or resources in relation to admin dashboards feel free to share with us in the discussion area.

上文中列举的各种设计趋势为设计师提供了一个很好的起点。不过我想你还可以从其他常见的管理面板中学到很多。我从Dribbble收集了一些截图，希望你注意到里面有些设计我已经提到，加上你自己的一些新点子就可以成为你自己的设计。