上个月帮一个老同事看他们内部的会员后台,他拉我进 Figma 文件的时候说了一句:“子微,你先别看视觉,我觉得这个功能堆得我自己都走不通了。”
我笑了笑没接话,但心里很清楚——后台设计最容易出问题的,从来不是颜色或图标,而是信息的摆法。那次我花了一个下午,从头到尾走了一遍他设计的页面,发现很多问题其实都卡在同一个地方。
信息层级
这不是一个新鲜词,但真正做对的人不多。
第一步:首屏到底该看什么
我把页面切成了三个区域——状态区、操作区、辅助信息区。状态区放当前会员等级、积分余额、到期时间;操作区放续费、升级、兑换;辅助区放历史记录或活动提醒。听起来简单,但很多后台的首页就是把这些东西揉在一起,用户一打开就懵了。
我问同事:“你希望用户进来第一眼做哪个操作?”他说续费。那好,续费按钮就必须在视觉上最先被捕捉到,而且状态区要明确告诉用户“你现在是什么等级,续费后能获得什么”。这些信息缺一个,用户就得花时间猜。
第二步:组件状态比组件本身更重要
我通常把一个后台页面的状态拆成三部分:正常态、空状态、错误态。很多人花大量精力画正常态的卡片、表格、按钮,但空状态和错误态往往只放一个占位文案,甚至直接留白。
这次我重点检查的就是空状态。比如积分兑换模块,如果用户还没兑换过任何东西,页面显示的不是“暂无记录”,而是一句引导语加上一个可点击的“去看看能换什么”按钮。同事当时有点犹豫,觉得多此一举。我说你换位想一下,你自己第一次打开一个新功能,看到一片空白,第一反应是“这里还没做好”还是“我现在该做什么”?
他想了想,改了。
第三步:文案要和业务动作匹配
这个点我反复提过,但每次都能发现新问题。比如页面里有一个“升级”按钮,点进去却是“续费”流程。用户点了之后发现不是自己想的那样,就会产生挫败感。
后台用户通常是在完成一个具体任务,不是来逛页面的。所以按钮上的文案、弹窗里的描述、空状态里的引导语,都必须跟用户下一步的真实动作对齐。哪怕只是把“提交”改成“确认并保存”,用户的理解成本都会低很多。
第四步:风格统一不是为了好看
同事问我:“你这些间距、字号、颜色的调整,是不是为了把页面做得更精致?”
我说不是。真正的目的是减少用户的大脑负担。当所有卡片的内边距一致,所有标题的字号一致,所有按钮的圆角一致,用户就不需要每次重新适应。后台用户往往同时开着好几个页面,如果每个页面的信息密度和交互节奏都不一样,他的注意力会被不断打断。
那次改完之后,同事自己走了一遍流程,说“感觉顺了很多”。我说这才是正常的——用户不应该在后台里思考“这个按钮为什么在这里”,他只需要思考“我要做什么”。
最后复盘的时候,我在笔记本上写了一句话:复杂业务更需要克制,因为用户不是来欣赏页面的。
后台设计的专业度,很大一部分体现在那些“用户没注意到但也不会觉得奇怪”的地方。好的信息层级是隐形的,用户感受不到它的存在,只会觉得操作顺畅、决策轻松。这就够了。
留给自己的备注
先留在这里,方便以后对照。
好体验来自克制