上周在一个项目验收会上,我盯着屏幕上的移动端页面,产品经理问了一句:“这个列表的第一条,用户进来应该先看什么?” 我正准备解释信息层级,开发同事在旁边接了一句:“现在第一条是‘推荐活动’,但用户可能只是想查一下自己的积分有没有到账。” 会议室安静了几秒。那个瞬间让我意识到,信息层级这件事,我们纸上谈兵谈得太多了,真正落到屏幕上,往往连第一屏都扛不住用户的实际任务。
首屏应该回答的问题,只有一个
那次之后,我把自己经手过的十几个移动端项目拉出来重新扫了一遍。发现不少问题其实有一个共同源头:设计师太想把所有信息都塞进首屏,结果反而没人记得住任何一个。
拿其中一个后台的移动端首页来说,顶部是 Banner,下面依次排着“待处理任务”、“最近订单”、“常用功能”、“公告通知”,外加一个浮动客服入口。视觉上做了卡片和分割线,信息密度看着也不低。但用户访谈时,好几个运营同事说:“我每天进来就是点一下那个待办数字,其他很少看。” 说白了,首屏做得再精致,用户只认一个入口。
那次我做了个实验:把所有模块按用户真实使用频次排序,把频次最高的两个模块直接拉满宽度,其他折叠成二级入口。结果测试时,用户完成“查看待办”的平均时间从 4.2 秒降到了 1.5 秒。首屏不是在展示信息,而是在帮用户省时间。
状态设计,比颜色对齐重要
我见过不少团队做移动端改版,第一件事是统一颜色和圆角。不是说不重要,但状态设计一旦出问题,视觉统一也救不了。
有次一个同事问我:“按钮禁用态用灰色,会不会让用户以为失效了?” 我反问:“禁用态旁边有没有提示?” 他说没有。这才是关键。很多移动端页面的状态设计,只覆盖了正常态和点击态,忽略了加载态、空状态、错误态,甚至禁用态到底该怎么告诉用户“为什么不能点”。
举个例子:一个表单页面的提交按钮,点击后要等 2 秒才有反馈。如果你只把按钮颜色变成灰色,用户大概率会再点一次,然后页面卡住。如果按钮旁边加一个小字“提交中…”,用户就知道等等。这个细节我测过,带状态的按钮比纯颜色变换,用户重复点击率下降了 67%(基于我们内部 200 个样本的测试)。
操作路径要短,但不是越短越好
移动端屏幕小,操作路径越长,用户越容易中途放弃。但“短”不是唯一标准。
有次做一个审批流程,我一开始把“通过”和“驳回”两个按钮直接放在卡片上,用户不需要进入详情页就能操作。看起来很快吧?但上线后发现,驳回率反而上升了。查日志才发现,很多人是随手一点“驳回”,根本没有看详情。因为操作太直接,反而少了确认环节。
后来加了一步:点击驳回后弹出一个确认气泡,里面显示驳回原因和“确定驳回”按钮。这个改动让误操作减少了大概三成。操作路径的“短”,要建立在用户有足够上下文的前提下。
一个容易踩的坑:导航的视觉权重
移动端导航,最常见的问题是底部 Tab 的视觉权重分配不当。我见过不少产品把“个人中心”放在正中间,视觉上用了图标+高亮,结果用户一进来就被“个人中心”吸引,忽略了真正的核心功能。
导航的视觉权重,应该和用户的核心任务频率成正比,而不是和产品经理的喜好成正比。 有次我建议把一个低频但“看起来很酷”的模块从底部 Tab 移到二级页面,测试
留给自己的备注
设计没有唯一正确答案,这篇只是一次取舍记录。
好体验来自克制