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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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