Kototoro 核心设计语言

1. 产品气质

Kototoro 是跨漫画、小说和动画的内容消费工具。它的设计应当是：

• 内容优先：封面、页面、正文和视频始终比界面装饰更重要。
• 连续：用户随时知道自己上次看到哪里，并能用最短路径继续。
• 有上下文：Space、作品和章节关系清楚，但不侵占全局主操作。
• 平静而有表现力：通过一个清晰焦点表达状态，不依靠满屏特效。
• 紧凑且可触达：减少无意义留白，同时保留可靠的点击区域。

这五条是 Material 3 Expressive 与 iOS Glass 的共同内核。

2. 四层界面模型

所有页面按四个语义层设计，禁止以阴影、模糊或透明度随意制造新层级。

层级	内容	规则
内容层	封面、漫画页、正文、视频、列表内容	视觉权重最高；不使用 Glass
上下文层	页面标题、Space、作品与章节、进度	帮助用户定位，不与内容竞争
控制层	导航、工具栏、主要操作、Space Sidekick	可短暂覆盖内容，但必须可预测地收起
瞬态层	Sheet、Dialog、Menu、Snackbar	完成短任务；关闭后恢复原上下文

Glass 是控制层的材质，不是第五层。Expressive 形状和颜色也是语义表达，不是装饰层。

3. 共享交互语法

3.1 继续是默认主动作

• 主界面 FAB 固定表示“继续阅读/播放”。
• Space 开启后，继续当前 Space 最近的作品；不开启时继续全局最近作品。
• 作品卡片、Space 卡片与详情页的继续动作使用相同语义和进度来源。
• 没有可继续内容时隐藏主动作，不用禁用态占位。

3.2 Space 是上下文切换，不是全局创建

• Space 切换通过右侧上方的 Sidekick 进入，不占用全局 FAB。
• 切换面板保持窄、可扫读，并保留原页面上下文。
• Space 卡片以最近继续作品封面为背景；名称位于左侧图标下方，继续按钮位于右下角。
• “漫画”“小说”“动画”作为名称时不追加 Space 后缀。

3.3 渐进披露

• 首屏只展示当前任务必需的信息。
• 低频设置进入二级面板；面板不重复显示已经由标题、图标或入口表达的信息。
• 阅读器的进度常驻，避免为查看进度增加一次点击。
• 拖拽把手只在它确实说明拖拽方向或可变高度时出现。

3.4 状态可预测

• 同一动作在不同风格、内容类型和屏幕尺寸上保持相同位置与含义。
• 展开、选择、加载、错误、不可用状态必须可区分，不能只依赖颜色。
• 返回操作优先关闭瞬态层，再退出当前内容。

4. 共性视觉规则

4.1 信息层级

每个可视区域只允许一个第一视觉焦点。优先级通常为：

1. 当前内容；
2. 当前任务的主动作或进度；
3. 标题与上下文；
4. 次要工具；
5. 装饰。

如果两个元素同时要求最高饱和色、最大尺寸或最强动效，设计需要重新收敛。

4.2 排版

• 使用系统字体与动态字号，不用字体粗细代替完整层级。
• 一级目的地主标题大而明确，副标题/说明更小但保持可读对比；小字不等于低透明度文字。
• 正文以长时间阅读为目标；工具栏标签以快速辨认为目标。
• 深色模式正文与关键标签使用高对比前景色，禁止用中灰充当主文字。
• 图标与文字应随字体和显示缩放保持视觉平衡。
• 具体字号、行高、字重及组件映射以组件与令牌为准。

4.3 图像与颜色

• 封面是内容和识别线索，不是纯装饰纹理；裁切后仍需保留主体。
• 从封面提取的颜色只能用于低风险强调，不能降低文字和控件对比度。
• 语义色统一表示成功、警告、错误、选中与进度，风格不改变语义。
• 避免大面积高饱和背景；表现力集中在当前状态或主要操作。

4.4 形状

• 圆角反映容器关系：内层圆角不得看起来大于外层可用轮廓。
• 相邻、嵌套元素保持同心感；胶囊只用于短文本动作、状态或紧凑控制组。
• 不为“更现代”而把每个矩形都改成胶囊。

4.5 密度

• 视觉间距可紧凑，触摸目标不可随之缩小。
• 采用 4 dp 基本网格；常用节奏为 4、8、12、16、24、32 dp。
• 页面边距由窗口宽度和内容类型决定，不由风格决定。
• 底栏容器按内容宽度或合理最大宽度布局，不默认横向占满屏幕。

4.6 动效

• 动效解释空间关系、状态变化或操作结果。
• 同一时刻只有一个主导动效；装饰性循环动画不进入核心流程。
• 组件切换优先使用连续形变、位移和淡变，避免无来源的弹跳。
• 开启“减少动态效果”时，用淡入淡出或即时切换替代大幅位移、缩放和模糊过渡。

5. 一套体验、两种表达

不变量	Material 3 Expressive	iOS Glass
信息架构与操作位置	相同	相同
主次层级	色彩、形状、排版、容器	材质厚度、轮廓、内容响应
内容层	不透明语义 Surface	不透明语义 Surface
控制层	克制半透明，可完全不透明	可使用主题感知 Glass
动效语义	Expressive motion scheme	连续、轻量的形变与材质响应
可访问状态	语义色与轮廓	必须提供减少透明度与高对比降级

业务层不得判断风格后改变操作语义。风格差异应集中在主题、令牌和共享组件内部。

6. Kototoro 特有的判断题

设计或审查一个界面时，依次回答：

1. 用户此刻主要是看内容、找内容，还是控制内容？
2. 屏幕上唯一的第一焦点是什么？
3. “继续”路径是否比“管理”路径更短？
4. Space 是否作为上下文存在，而不是成为悬浮噪声？
5. 去掉模糊、阴影和动效后，层级是否仍然成立？
6. 深色、高对比、字体放大和减少动态效果下是否仍能完成任务？

任一问题无法明确回答时，不应继续增加视觉效果。