docs: 补充现代工作台设计规范

- 完善产品主题、组件语言与交互动效的设计说明

- 补充导航骨架、表面层级与设计 Token 的现代化规范

docs/design/easyflow-product-design-spec.md

@@ -14,7 +14,7 @@
 
 ### 2.2 一句话定义
 
-EasyFlow 是一个克制、可信、现代、交互友好的智能工作台。
+EasyFlow 是一个克制、可信、现代、富有表达力且交互友好的智能工作台。
 
 ### 2.3 品牌气质关键词
 
@@ -25,6 +25,9 @@ EasyFlow 是一个克制、可信、现代、交互友好的智能工作台。
 - 可信
 - 精致
 - 顺手
+- 现代
+- 鲜明
+- 灵动
 
 ### 2.4 明确避免的方向
 
@@ -33,6 +36,12 @@ EasyFlow 是一个克制、可信、现代、交互友好的智能工作台。
 - 为了“科技感”牺牲信息层级和可读性
 - 为了“高级感”弱化交互反馈或降低操作效率
 
+说明：
+
+- 顶栏、侧栏、浮层等导航骨架允许使用轻度液态玻璃质感，包括低对比半透明表面、柔和背景染色与克制的模糊。
+- 这种玻璃质感必须服务于空间分层和手感提升，不能依赖重描边、强高光、厚阴影或大面积彩色铺底制造存在感。
+- `冷静智能` 不等于保守、僵硬、缺乏表现力，不应默认落成传统 ERP 式的重线条后台。
+
 ## 3. 产品体验目标
 
 EasyFlow 需要同时承载企业级管理平台与 AI 应用开发平台的双重身份，因此整体体验必须同时传达以下四类感受：
@@ -52,6 +61,30 @@ EasyFlow 需要同时承载企业级管理平台与 AI 应用开发平台的双
 
 界面不喧宾夺主，主任务、主操作与主信息始终占据视觉优先级。
 
+### 4.2A 现代但不保守
+
+EasyFlow 应主动吸收 Apple HIG 与 Google Material Design 3 中成熟的现代界面语言，包括：
+
+- 用表面层、材质、色调和留白建立层级，而不是依赖大量分割线
+- 用语义色和色彩角色建立品牌表达，而不是把色彩收缩到只剩按钮
+- 用流动、适配和组件一致性提升高级感，而不是靠硬框和堆叠结构显得“专业”
+
+克制不是收缩表达，而是让表达有秩序、有重点。
+
+### 4.2B Apple-first 的 toB 应用策略
+
+EasyFlow 在视觉与交互方向上，默认以 Apple HIG 作为第一参照系，再用 Material Design 3 补足系统化的色彩角色、自适应布局与组件一致性。
+
+这不意味着机械模仿平台样式，而是意味着：
+
+- toB 系统不必天然长成传统 ERP 的厚边框、重分区、强表单压迫感界面
+- 导航骨架可以更通透、更轻盈、更有悬浮感，让内容真正成为主角
+- 工具栏、搜索、筛选、切换控件应更像现代工作台的控制层，而不是一排表单框堆叠
+- 组件要像高质量产品控件，而不是“能用就行”的业务控件
+- 大屏界面要保留留白、呼吸感和动态层次，不因空间变大而自动增加线框和容器
+
+若 `传统后台习惯` 与 `现代工作台体验` 冲突，默认优先后者，但必须保证可读性、可学习性和操作效率。
+
 ### 4.3 统一胜过局部惊艳
 
 单页的“特别设计”如果破坏了全局一致性，不应视为正向设计资产。
@@ -95,6 +128,8 @@ EasyFlow v1 使用 `冷静智能蓝` 作为统一品牌色策略。
 - 色彩比例建议控制为：`70% 中性背景 + 20% 结构层级色 + 10% 品牌强调色`。
 - 成功、警告、错误色属于语义系统，不参与品牌表达，不作为页面主装饰色。
 - 深色模式延续同一品牌策略，但背景使用石墨深灰体系，避免纯黑带来的生硬与失真。
+- 品牌色不应只停留在按钮，可合理参与导航当前态、重点操作、选中反馈、局部染色表面和关键数据强调。
+- 参考 Material 3 的 `color roles` 思路，未来 EasyFlow 应逐步建立主色、表面色、容器色、文本色、状态色的语义映射。
 
 ### 5.4 语义色原则
 
@@ -116,12 +151,31 @@ EasyFlow 的界面风格定义为：
 - 大留白
 - 强对齐
 - 少装饰
+- 轻材质
+- 鲜明重点
 
 ### 6.2 层级建立方式
 
 - 优先依赖留白、分组、对齐、字号、字重和弱分隔线建立层次。
 - 少用“卡片套卡片”“面板套面板”建立结构。
 - 避免粗边框、重阴影、过多色块同时出现。
+- 对于全局导航骨架，可适度使用轻度液态玻璃表面替代硬分割线，但仍应以低对比、低装饰为前提。
+- 参考 Material 3 的 `tonal elevation` 思路，优先通过表面明度、色调差和轻阴影区分层级，而不是靠边框切出一个个盒子。
+
+### 6.2A 导航骨架材质
+
+导航骨架默认可以更现代一些：
+
+- 侧栏、顶栏、tab 区、搜索框、轻浮层允许使用轻度液态玻璃
+- 导航项的当前态允许更鲜明的品牌强调、柔和胶囊和轻染色背景
+- 工具按钮、搜索入口、切换控件可以比正文组件更具材质感，但不能厚重
+- 内容区仍应保持清晰和稳定，避免整页都被玻璃化
+
+补充：
+
+- 导航骨架的现代感优先来自透明度、模糊、染色、圆角、轻阴影和动态响应，而不是边框和分隔条
+- 面包屑、标签导航、全局搜索、工具按钮应作为同一套“控制层语言”统一设计
+- 这种表达要让页面看起来更像现代软件工作台，而不是更像传统管理表单容器
 
 ### 6.3 字体与信息层级
 
@@ -142,6 +196,11 @@ EasyFlow 的圆角应柔和但理性，不追求玩具感或夸张圆润。
 - 弹窗 / 抽屉 / 高阶浮层：`20px`
 - 徽标 / 标签胶囊：`999px` 或 `8px`
 
+补充：
+
+- 导航工具按钮、搜索入口、轻浮层中的控制点，可以适度更圆润，以获得更现代的触感。
+- 这种更圆润的表达应集中在骨架和交互热点，不扩散到整页所有容器。
+
 ### 6.5 阴影策略
 
 阴影只承担“层级提示”功能，不承担风格表达主角。
@@ -208,6 +267,13 @@ EasyFlow 的圆角应柔和但理性，不追求玩具感或夸张圆润。
 - 次级动作、帮助说明、附属信息应主动退后。
 - 响应式下优先保持层级和操作顺序，再压缩尺寸与布局。
 
+### 8.3 自适应与现代布局
+
+- 参考 Material Design 的 `adaptive layout` 思路，页面骨架应优先考虑不同窗口尺寸下的重排，而不是仅靠缩小组件。
+- 大屏页面应保留呼吸感和内容聚焦，不因空间变大而增加无意义边框和容器。
+- 导航和内容的关系应尽量“浮于内容之上”或“包裹内容而不压迫内容”，避免传统后台式的刚性框架感。
+- toB 页面不应因为信息复杂就默认采用“满屏表单 + 满屏线框”的保守构图；复杂度应通过层级与编排解决，而不是通过框线堆砌解决。
+
 ## 9. 交互哲学
 
 ### 9.1 总体方向