网站管理系统的后台设计历程

从一开始接触Drupal 7,就发现其内容的复杂多样,但作为非web开发人员,即普通客户操作的网站后台管理系统,它显得有点过于专业。我们在诸多实践中发现,有必要基于原始的框架制作一个全新的后台,更加简单易用,小白也能快速上手。

 

起初在构思如何改善后台的思路上,我有点被Drupal和原先设计过的一套后台禁锢了,总想在原有的基础上出发,思考有什么体验上可以改进,甚至是一些bug,具体如下。

首先,我们看Drupal 7原生的菜单,UI风格都很原始,且十分细小,不醒目,而类别却很多,概念模糊,不好找东西,初学者大多数情况下是很难找到想要修改的位置,并且很多功能作为客户的一般后台管理人员是用不到的,有大量冗余信息,一定程度上造成了体验的不畅通。

屏幕快照 2016-08-23 下午3.59.34.png

在参考了公司之前制作过的一个后台,我们把结构整合,并美化了UI。

dms后台.png

如此将原本横置于上方的导航,调整结构,将大部分同类型的功能归类在一起,一部分高频的低层级菜单挪到一级,竖置于左侧固定,这样比原来的导航更简洁明了。我们也曾想过给予类似收藏菜单的快捷路径,不过现阶段并没做,后续阶段可能会添加,留一手😊。

屏幕快照 2016-08-23 下午4.44.02.png

增加全局内容搜索的功能,包括二三级菜单的名字也能被检索,搜索结果能快速跳转对应页面。一个系统没有搜索功能,就是残缺的,但实际上开发过程中实现上述预期的效果还是颇为曲折的,尤其是在精确结果定位上,改良多次。

原生的编辑器按钮特别多,鼠标移到按钮上需等待较长时间,寻找相应的功能按钮很累,故优化成立刻显示文字。此外,编辑器的样式也很陈旧,改进方案下文中会提及。

pasted image 0.png

欢迎界面除了展示最近的更新日志外,还在首排区块增加登陆者基本信息-头像、用户名、角色、邮箱等,且增加编辑按钮跳转到该用户管理界面。

诸如此类的小改小动还有不少,但大家总觉得缺了点什么。虽然我一直知道要改整体风格,使之美观易用,但介于每一个编辑页面的内容都有不同,切入点始终找不到,如何做一个通用的改进方案。后经Stephen点拨,可以取一个典型的编辑页面为例,谈整体改版,比如我选择了博客的编辑页面。

在大量借鉴了WordPress并结合我们系统自身的需求后,大刀阔斧,设计了一套全新的改版方案,并据此画了一套wireframe,后再由设计师制作了一套设计图。

屏幕快照 2016-08-23 下午6.18.05.png

wireframe地址:http://lm1g2y.axshare.com/#p=博客编辑页方案一

进一步整合了各级菜单及添加按钮,并将所有的配置信息都固定到了右侧,几个最常用的按钮——保存、预览、历史也被固定在右上方,而预览和历史也是此改版方案新增的重点功能。

中央区域全部留给内容编辑,只保留标题、摘要和一个无限延伸的编辑器区域;明显感到整体风格比原来简约美观,细节可见去掉了Title字样,隐藏text_field边框,默认field内显示——标题 字样等。

更多细节就不一一累述了,请直接看设计图吧~

blog_distribution_20160805_2.jpg

上文提到,一开始就针对编辑器诟病,但一直都没有完整像样的模型template出来,直到这次将其按钮区域去掉里外所有多余的轮廓,只保留最外面一圈,简约。

blog_distribution_20160805_3.jpg

同样的Drupal 7原生的上传图片功能体验极差,界面粗糙堪忧,这次改动的设计思路就是要操作更便捷,步骤缩减到最少,界面清爽。

blog_distribution_20160805_1.png

不详细介绍每一环了,总的来说,这次改善计划的设计方向,所见即所得,让用户在操作干净整洁的界面同时,提高工作效率。

当然了,在写这篇博文时,这个项目的实际开发工作仍处于启动阶段,作为产品的一部分,非常期待它最终的样子。