网站后台设计具体的操作步骤是什么呢

后台设计跟前台完全是两码事。前台要的是好看吸引人，后台要的是好用不误事。做后台设计，说白了就是给运营和编辑搭一个顺手的工具，让他们每天干活儿不骂娘。我自己做过好几个内容管理系统的后台，踩过不少坑，也总结出一些实打实的步骤。

第一步，摸清使用场景和用户底细。后台的访客就三种，编辑、运营、管理员，最多加个客服。他们在后台干的活儿就那么几件，发文、改图、审评论、看数据、处理订单。你要去跟真正的使用者聊一圈，问问他们每天点得最多的按钮是哪个，哪个页面让他们等到想砸电脑。数据比直觉靠谱，某电商平台做过统计，后台编辑每天要打开图片上传功能四十多次，这个按钮要是藏得深，一天得浪费十分钟。我认识一个运营妹子，她说最崩溃的是找不到上次编辑的文章存哪儿了，所以后台的文章列表一定要有最近编辑排序，这个比什么炫酷设计都管用。

第二步，画草图做信息架构。拿张纸或者用画图板，把后台要放哪些模块列出来。这一步别急着上电脑，铅笔加白纸效率最高。左侧导航栏是必须的，这是后台的骨架。一般按内容类型分组，文章、图片、用户、设置这四大金刚跑不了。要注意的是导航层级别超过三级，超过三级你自己都会迷路。我看过某政府网站的后台，光是“系统管理”下面套了五层子菜单，管理员找个权限设置要点七八次鼠标，这种设计就是典型的不做用户调研的后果。

第三步，定交互原型。这步可以用Axure或者墨刀，不必追求高保真，把结构理清楚就行。交互的关键就三条，反馈要及时，跳转要少，操作要能撤销。比如保存文章的时候，点一下按钮要立刻变灰显示“保存中”，完了要给绿色的成功提示，而不是跳到一个空页面。批量操作一定要有全选框和反选，我就见过不少后台，删个文章得一个一个点删除，二十篇文章删到怀疑人生。上传图片要支持拖拽，这个现在基本上是标配了，用户就喜欢这种不用点击文件选择的直接操作。

第四步，设计视觉稿。后台的视觉风格跟企业官网不一样，不要花里胡哨，主色调选一个稳重的中性色就行。我见过最舒服的后台配色是白底灰字配一个品牌蓝点缀，重点元素用蓝色，警告用橙色，错误用红色。字体大小要给到14像素以上，很多后台使用者盯着屏幕一整天，字太小眼睛受不了。表格的斑马纹要保留，隔行变色能在视觉上防止看串行。按钮的尺寸至少40像素高，你要考虑到有些人可能是用老旧的笔记本操作，触控板不好用，点小了很费劲。

第五步，前端实现。写代码这块得注意几个细节。后台的界面要能适配1280宽的屏幕，这是大多数办公电脑的分辨率基线，不要再为1920的大屏优化了，那会害了用笔记本电脑操作的用户。页面加载速度要克制，后台首页控制在2秒内打开，超过三秒用户流失率直接增加一半。我测过我们公司的后台，一个图表插件加载了一堆用不上的JS库，首屏整整耗了8秒，后来精简掉那些库，降到1.8秒，月度活跃率立刻涨了六个百分点。

第六步，跟功能开发对接。后台设计跟前端页面不同，它背后连着数据库和业务逻辑。所以设计稿出来以后，一定要跟开发把流程对清楚。比如删除文章这个操作，我们是做成软删除还是物理删除，是直接删了还是先进回收站。这个决定你的弹窗文案怎么写。保存按钮是改成自动保存还是手动保存，这影响到你页面顶部的操作栏布局。我建议跟开发过一遍所有状态流转，成功、失败、超时、无权限、数据为空这些情况都得有对应的界面设计。

第七步，做用户验收测试。后台测试不是找程序员来点，要叫真正的内容编辑来操作。给他们布置几个具体任务，比如把一篇带图的文章从草稿箱发布到线上，然后观察他们在哪里卡住了。测试的时候用录屏软件记录鼠标轨迹，那种来回滑动找不到按钮的痕迹最有价值。我们当时测过一次，发现编辑找“分类管理”这个入口花了七十秒，就把它从二级菜单提升到了一级菜单，操作时间缩短到不到十秒。测试用的数据也要真实，不要用测试账号测试数据，拿真实要发布的文章让编辑操作，这样能暴露出真实业务中的边角情况。

后台设计没有止境，上线以后要持续看使用数据和用户反馈。可以用热力图工具看后台每个页面的点击分布，看看哪个功能根本没人用，哪个功能访问量超乎预期。没人用的功能考虑删掉简化界面，访问量大的功能要优化操作路径让它们更顺手。后台设计说到底就是一门做减法的艺术，去掉花花肠子，留下干活儿的硬道理，做到了，后台自然好用。