跳到主要内容
文心 · 万形

模式总览

组件回答"它长什么样";模式回答"这一页如何组织"。 五种页面原型覆盖了这套语言的大多数页面;进入详情页后,主示例会以独立的页面预览呈现。

五种页面原型

原型页面读者的任务轨道
A阅读 / 详情从头读到尾阅读轨
B索引 / 列表扫描并挑选阅读轨
C展示 / 作品集快速判断此人此物阅读轨
D着陆 / 首页十秒内判断是什么、是否继续阅读轨
E工具 / 查询
提交表单
完成一件明确的事应用轨
原型 E 会翻转轨道

一个工具型页面,即使住在一个纯阅读轨的站点里,也按应用轨判定—— 可以有分组表面、一个直接推进任务的填充主按钮、完整语义色。读者在这一页的任务不是阅读,是完成操作。

怎么选

不要问"这是什么页面",问"读者到这一页要做什么"。 同一份内容在不同任务下属于不同原型:一篇文章是 A,文章列表是 B, 而"在文章里搜索并批量导出"是 E。

可复制的骨架

kit/patterns/ 下有五份 HTML 骨架,直接复制即可。它们不自带媒介样式—— 使用者按实际场景加载对应的 CSS 并声明轨道。

kit/patterns/a-reading.html    文章 / 文档
kit/patterns/b-list.html       索引 / 搜索结果
kit/patterns/c-showcase.html   简历 / 作品集
kit/patterns/d-landing.html    首页 / 着陆页
kit/patterns/e-tool.html       输入 / 查询工具

五份骨架都只用留白和单边线分组,不提供任何四边包围容器。

模式探索

五种原型现在各有一页,把骨架展开成真正可用的页面,包含状态、校验、异常与响应式处理:

  • 详情页(A)—— 长文结构、目录、旁注
  • 列表页(B)—— 筛选、排序、分页、空态
  • 展示页(C)—— 判断顺序、时间线、印章预算
  • 着陆页(D)—— 十秒三件事、文字 CTA、不用卡片罗列
  • 工具与查询页(E)—— 输入、执行、结果、空态与恢复路径
  • 表单页(E)—— 布局、校验时机、错误汇总、提交状态
  • 结果与异常页 —— 成功、失败、404、无权限。不是一种原型,是每种原型都会遇到的状态。