我真是服了,昨天测试我们公司新APP,那个订单列表页面做得跟特么电脑版后台一样,十几列信息挤在5寸屏上,字小得要用放大镜看,我滑了三屏还没看完一条完整记录,当时就想把手机砸了——这玩意儿是我自己团队做出来的你敢信?千万别把Excel思维直接搬到手机上,那是自寻死路。
核心就一个字:拆。把横着铺的信息给我竖过来,或者直接扔掉。想想用户举着手机用拇指操作的时候最需要什么?是快速扫一眼抓住关键,然后决定“点进去看详情”还是“左滑删除”。
首先,触控尺寸是爹。按钮、点击区域小于44x44像素(@1x倍率)那就是反人类设计,用户点不中会暴躁的,别问我怎么知道的,测试用户骂街的录音我听了不下十遍。留白要大方,行间距、字间距挤在一起的信息在移动端就是一团浆糊。
其次,信息密度必须降维打击。PC端能同时展示“订单号、用户名、商品名、价格、状态、创建时间、操作”,手机上你最多展示三个关键字段,其他全部收进详情页。状态用颜色+图标(比如一个绿色的勾),价格用加粗大字体,这才是视觉层次。什么?你说字段都重要?那请你反思一下需求,是不是把用户当成了需要一眼看完所有数据的监控机器人。
具体怎么搞?看场景:
1. 首列固定?那是PC的遗毒。 在手机上玩首列固定,右边横向滚动,体验堪比用牙签掏耳朵——难受又容易捅伤。对于这种多列对比数据,直接做成卡片式,一张卡片一条完整数据,上下滑动才是手机的正道。或者,用交互上的手势,比如左右滑动切换不同维度视图(左滑看财务数据,右滑看物流信息),但学习成本高,慎用。
2. 操作按钮别堆成麻将桌。 “编辑、删除、查看、复制”四个按钮排一排?直接毁灭吧。优先只放一个核心操作(比如“处理订单”),其他全部收进“...”更多菜单,或者用左滑/右滑手势唤出(iOS左滑删除经典永流传)。记住,手势操作要有明确视觉提示(比如露出一点点下一个图标的边),别让用户猜。
3. 筛选和排序,别学PC搞浮层。 在手机屏幕中央弹个巨大浮层选择筛选条件,会打断心流。试试顶部固定筛选栏,或者做成可展开收起的区域。更高级的做法是,像一些电商APP,直接在列表页用标签式筛选,点一下“仅看待发货”,列表实时刷新,流畅得一匹。
最后,字体用系统默认的,别瞎搞艺术字。颜色对比度检查一下,阳光下能看清是底线。数据为空的时候,放个有趣的插图和一句人话(比如“这里还没有订单哦,快去下一单吧!”),比一个干巴巴的“暂无数据”强一万倍。
总之,设计手机表格时,把自己想象成一个站在地铁里、一只手拉着吊环、另一只手拇指操作、同时还在担心坐过站的普通用户。你给他的,必须是一眼知重点、一指可操作的东西。别再制造信息恐怖片了,求求了。
