产品营销场景
首屏 Hero -> 价值条 -> 特性网格 -> 工作流/用例 -> 定价 -> 信任背书 -> 转化区
Northstar 工作空间
方法论
说明 Stylish 如何在固定场景结构上，通过 token 系统切换主题表达。
核心理念
Stylish 在共享场景结构内比较设计语言表达差异，先锁定结构不变量，再通过 token 切换视觉变量。
场景优先，主题其次
如果主题切换会改变模块顺序或内容主线，就无法进行公平比较。因此先固定场景，再注入主题变量。
- 主题切换不改变模块集合。
- 模块顺序固定，保证横向比较公平。
- 三个页面共享同一虚构产品叙事。
- 关键交互目标保持一致。
不变量场景矩阵
Product / Admin / Task 三个场景共享结构约束。
管理工作台场景
侧边栏+工具栏 -> KPI 总览 -> 分析区 -> 审批队列 -> 数据表格 -> 详情面板
任务应用场景
顶部导航 -> 今日摘要 -> 任务列表 -> 详情窗格 -> 快速创建 -> 设置区 -> 状态反馈
| 差异维度 | Apple HIG | Material 3 | Fluent 2 |
|---|---|---|---|
| 空间节奏 | 更大段落留白 | 平衡且亲和的分组 | 更紧凑但保持可读 |
| 形态与边界 | 边界更弱、层级更轻 | 圆润控件与状态层 | 边界更清晰、分区更稳 |
| 控件气质 | 克制安静 | 友好可亲近 | 高效率导向 |
| 动效节奏 | 更慢、更细腻 | 中速、反馈明显 | 更快、不中断任务流 |
共享不变量
为保证主题间可比较性，这些内容保持锁定。
- 共享同一产品叙事主线，文案语气保持中性一致
- 使用静态 mock 数据，并保持信息层级一致
- 场景模块集合与顺序
- 核心交互目标
主题变量
通过 token 驱动，而不是复制组件。
- 背景与表面层级
- 文本对比与边框强度
- 圆角、阴影、间距与密度
- 控件高度、图标尺寸、动效曲线
Inspired-by 免责声明
本项目仅提炼 Apple、Google、Microsoft 相关设计语言的通用特征，不代表任何官方合作、授权或背书，也未使用其 logo、商标与品牌专有素材。