做产品 PMaker 首页
搜索
跟随系统
颜色主题
空格的键盘
功能齐全和主次分明是两回事功能平铺五块等大的卡片,每样都一样重用户进来要先做一道选择题一屏一件事一个主任务,其余让位:缩小、靠后、收进导航用户不用想就知道该干什么如果用户只能点一个东西,应该是哪个?答不上来,页面就没设计完

同一个工作台。左边把所有功能都摆在首屏,右边只留下「接着上次干活」这一件事。

一屏一件事

每个页面只承担一个主任务,其余的让位。

每个页面只承担一个主任务,其余的让位。功能都做出来了,用起来却很累。因为页面上每样东西都一样重,用户每进一个页面都要先做一道选择题。hick

你会遇到的现象:

  • 让 AI 做工作台,它把你提到的五个功能做成五张一模一样的卡片
  • 自己看着还行,别人打开第一句话是「我该点哪个」
  • 想突出某个功能,只能靠加粗、加框、加底色,越加越乱

一个页面应该有一个明确的主任务。用户走到这里是来干这件事的,页面上的其他东西全都为它让位:尺寸更小、位置更靠后、或者干脆收进导航里。让 AI 生成页面时,它倾向于把你提到的所有功能平铺展开,因为它没有理由认为哪个比哪个重要。你说「做一个工作台,要有项目列表、数据看板、团队管理、消息、设置」,它就给你五块等大的卡片。每一块都存在,每一块都不突出,用户进来要先做一道选择题。功能齐全和主次分明是两回事,前者 AI 帮你做到了,后者只能你来定。

判断一个页面是否合格,问一句:如果用户在这个页面上只能点一个东西,应该是哪个?如果答不上来,说明这个页面还没设计完。

怎么找出那一件事

  • **看用户是从哪来的。**从搜索结果进来的详情页,主任务是确认这是不是他要找的;从推送进来的,主任务是看那条更新。
  • **看统计。**如果已经上线,八成的点击集中在一两个位置,那就是主任务,页面应该照着它重排。
  • **看频率。**每天做的事放最外面,每月做一次的收进设置,一次性的(比如初始化配置)做完就该消失。

从首屏赶走的东西不会消失,它们要落到导航里。导航形式基本就四种,选哪种取决于系统有多少个一级模块。

设计考量

  • **主任务只配一个主按钮,同屏不出现第二个同等份量的按钮。**两个一样醒目的按钮等于没有主按钮。次要操作降级成文字链接或幽灵按钮,视觉重量拉开三倍以上,用户的眼睛才会自动落到该落的地方。
  • **低频功能收进导航,不占首屏面积。**账单、成员管理、集成配置这类一个月碰一次的东西,放进顶部菜单或设置页即可。它们出现在首屏的唯一效果是稀释主任务。
  • **宁可多一个页面,不要一页塞两件事。**页面是廉价的,注意力是昂贵的。两个任务硬塞进一屏,用户每次都要先分辨自己在哪一半;拆成两个页面加一个清晰的入口,反而更快。
  • **用位置和尺寸做层级,别用边框和底色。**给次要模块加个灰底想让它退后,通常效果相反——多一块颜色就是多一个视觉重心。真正让它退后的方式是缩小、下移、去掉图标。
  • **首屏不滚动的区域,留给主任务和它的上下文。**用户不滚动就能看到的那部分是最贵的地方。它应该回答用户在哪、能干什么,而不是塞公告栏和推广位。
  • **同一个页面在不同角色下主任务可能不同。**管理员进来是审批,成员进来是提交。与其做一个兼容两者的折中页面,不如按角色渲染不同的主区域,导航保持一致。

给 AI 的话

AI 不会自己判断主次,你得把主次写进需求。这段模板适用于任何一个新页面。

PROMPT · 页面需求

页面:[页面名]
用户从哪来:[入口,比如「从侧边栏点进来」/「从邮件通知点进来」]

主任务(这个页面只服务这一件事):
[一句话,比如「快速回到最近在做的项目」]

页面上还需要出现,但都属于次要的:
- [次要项 1]
- [次要项 2]

低频功能,收进顶部导航或设置页,不要出现在首屏:
- [低频项...]

布局约束:
- 整页只有一个主按钮,对应主任务。次要操作用文字链接或
  幽灵按钮,视觉重量必须明显低于主按钮。
- 不滚动就能看到的区域,只放主任务和它必要的上下文。
- 次要模块靠缩小字号、下移位置来降级,不要用灰底或加边框。

先用一段文字描述你打算的布局顺序和每块的视觉权重,
我确认之后你再写代码。

如果 AI 给回来的布局描述里出现了三个以上「重要的」模块,说明主任务还没定清楚,回到需求那一步改,别在代码上调。

真实案例

  • **Google 首页:**这个模式最极端的版本。整页只有一个输入框,其余几十个产品全部收进右上角一个九宫格图标里。
  • **Gmail:**主任务是「处理收件箱」,整个中区都是邮件列表,唯一的主按钮是写邮件。标签、过滤器、设置全部在侧边和角落。

参考资料

  1. Hick's law — Wikipedia