第一屏会做出判断
首页承诺了访客进入的是一个怎样的地方。每增加一个模块,这项承诺都会改变,即使那个模块本身设计得非常漂亮。天气卡片、最近活动、项目列表和长篇自我介绍都可能单独成立,但放在一起却让整个网站无法被一句话解释。
首页应当先解释网站的形状,然后才向访客索取注意力。 我会用四个问题判断一个候选区域:
| 问题 | 有力的答案 | 警告信号 |
|---|---|---|
| 它能否说明作者或作品是谁? | 立刻可以 | 需要额外解释 |
| 它是否通向有用的地方? | 目的地明确 | 装饰性的死路 |
| 它会长期保持准确吗? | 来自被维护的数据源 | 依赖手工复制 |
| 它值得占据第一屏吗? | 访客经常需要 | 只是内部很兴奋 |
最终可以形成一个很小的层级:
- 身份: 姓名、短介绍和主导航。
- 当前信号: 最近文章或正在进行的工作。
- 稳定路径: 博客、项目、使用清单和联系方式。
- 次要质感: 状态、实验或一个小型实时区域。 个人网站不需要模仿产品仪表盘。清楚的语义化 HTML 和内容顺序,往往比一组权重相同的卡片更有表达力。
通常适合首页
- 姓名和简洁身份
- 最重要的目的地
- 一项当前工作
- 稳定的联系方式
通常适合更深一层
- 完整工具库存
- 尝试过的所有项目
- 很长的历史叙述
- 对访客没有价值的指标
删除测试
把一个模块隐藏一周,然后询问:
- 访客是否失去了真正会使用的路径?
- 网站的身份是否变得不清楚?
- 其他模块是否自然接管了它的职责?
- 维护工作是否变轻了?
- 页面是否加载更快、阅读更安静? 删除很有价值,因为设计讨论经常高估“把库存展示出来”的意义。一个区域可以包含真实工作,却仍然处于错误位置。把它下移一层,既保留了材料,也恢复了首页层级。 实时数据也遵循同样原则。一个 live 模块只有在 stale、loading 或 unavailable 状态下仍不破坏首页完整性,才真正值得存在。如果整个第一屏依赖某个第三方响应,视觉设计就意外变成了可用性依赖。
一个合理的例外
临时发布、公告或紧急通知可以占据不寻常的位置,但它必须有负责人和失效日期。没有期限的临时模块,最后通常会悄悄变成永久架构。增加模块时,就应该同时记录移除条件。
最终结果不应该显得空,而应该显得经过决定:每个可见元素都知道自己为什么出现在首页,而不是更深一层。