上周一个做后端的同事发来一张截图,问了我一个很具体的问题:“这个列表页的按钮我不想用绿色了,但换了灰色用户会不会找不到?”我当时没急着给建议,反而先问了他一句:你觉得用户进这个页面,第一件事是什么?他愣了两秒,说:“应该是查订单状态吧。”我回他:“那先别换颜色,先看看用户能看到订单状态吗。”


一、一个被我删掉的筛选栏

这个页面是一个后台的订单管理列表,业务逻辑不算复杂,但第一次打开的时候,我花了大约七秒钟才找到当前页面可以做什么。原因不是设计丑,而是信息过于密集——筛选条件占了页面将近三分之一的宽度,七个下拉框、一个日期范围、三个快捷标签,再加上一个“高级筛选”入口。视觉上很完整,但操作上很疲惫。

我做的第一件事不是调色,而是问了一个问题:这七个筛选中,过去三十天真正被用过的,是哪几个?同事翻了翻数据,反馈回来,四个下拉框的使用率不足 6%。也就是说,用户每次打开这个页面,都要花费注意力在那些几乎不会使用的控件上。我建议他把那些低频筛选收进“高级筛选”里,首屏只保留订单状态、时间范围和关键词搜索。页面瞬间空出一大块,主内容区终于能正常呼吸了。

减少选项不是削弱功能,而是降低判断成本。这个原则放到配色上也适用。


二、我最后只用了三种颜色

配色方案在这个项目里其实很简单,因为页面本身承担的任务很明确:查状态、点操作、做标记。我给自己设了一个限制——整个列表页,除了中性背景和边框之外,只允许用三种有颜色的色值:一个用于状态标识,一个用于主操作按钮,一个用于需要强调的数值或标签。

状态标识我选了蓝、黄、红三色标签,分别对应处理中、待处理、异常。主操作按钮用了深蓝,在页面里只出现在表格的每一行右侧。强调部分用了浅灰色里夹一点紫的对比,用于金额或时间等关键数字。整个过程没有思考“哪个颜色好看”,而是在想“用户扫一眼页面,三秒内能不能判断出哪个订单需要处理”。

有一次评审时设计师问我,为什么没有给“已关闭”的订单也用颜色标记。我的回答是:因为用户不需要快速定位已关闭的订单。颜色是一种注意力资源,不能平均分配。


三、异常状态比正常状态更值得花时间

这个项目的命名我也花了点心思。一开始表头写的是“状态”,但后来改成“处理状态”,因为我想让用户在一眼扫过时,能区分“订单状态”和“支付状态”这两个不同的维度。真正花时间的不是这个,而是异常状态的覆盖。

我记得上一次做类似复盘时,发现在加载态、空状态、错误态这些边缘场景里,往往藏着最多影响体验的问题。这次也一样。我模拟了大约七个异常场景:无搜索结果、筛选返回零条、接口超时、网络断开、权限不足、批量操作失败、重复提交。每一个场景都写了一个简短的状态提示,并且确保主操作按钮在异常情况下要么不可见,要么明确引导用户下一步做什么。

比如无搜索结果时,页面不会只显示一张空荡荡的灰色图片加“暂无数据”,而是加上一行“试试修改筛选条件或清除当前筛选”,并且放一个“清除筛选”的按钮在那儿。用户不需要思考,照着点就行。


四、一次取舍比十次修饰更值钱

整个页面改完之后,我不太确定效果,就拿给团队里另一位设计师看。他看了几秒,说了一句:“这个页面好像没什么好改的。” 我当时觉得,这大概就是目标达成了——不是漂亮,而是让用户没有多余

留给自己的备注

先留在这里,方便以后对照。


好体验来自克制