模式总览
组件回答"它长什么样";模式回答"这一页如何组织"。 五种页面原型覆盖了这套语言的大多数页面;进入详情页后,主示例会以独立的页面预览呈现。
五种页面原型
| 原型 | 页面 | 读者的任务 | 轨道 |
|---|---|---|---|
| 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 输入 / 查询工具
五份骨架都只用留白和单边线分组,不提供任何四边包围容器。
模式探索
五种原型现在各有一页,把骨架展开成真正可用的页面,包含状态、校验、异常与响应式处理: