flutter-ui-design

Flutter UI 设计

创建协调一致且充分考虑平台特性的 Flutter 界面，让人感觉它们是为产品量身打造的，而非由框架默认样式拼凑而成。

范围

负责艺术指导、视觉表现力、层级、构图、语义令牌、排版、色彩、表面、形状、状态呈现和渲染后的视觉审查。

将实现结构、可复用组件 API、表单和 UI 状态归属交给 flutter-ui-patterns。将约束机制交给 flutter-responsive-layout，将动画实现交给 flutter-animation，将高级模糊、折射、着色器或自定义光学渲染交给 flutter-visual-effects，将无障碍合规交给 flutter-accessibility，将导航行为交给 flutter-navigation。

前期检查

提出重新设计方案前：

1. 检查 pubspec.yaml、支持的平台、相邻屏幕、资源、字体以及提供的参考资料。
2. 找出现有的 ThemeData、ColorScheme、TextTheme、组件主题、ThemeExtension 和设计系统组件。
3. 除非请求明确授权重新设计，否则保留既有品牌和组件风格。
4. 如果项目可运行，请在有代表性的视口中检查当前屏幕。仅凭源代码不足以判断其视觉基准。
5. 不要仅仅因为某个 UI 包、字体、图标集或其他主题很熟悉，就将其加入项目。

设计工作流

1. 用可观察的描述说明屏幕的主要用户任务和视觉问题。
2. 将任务归类为保留、优化、明显改造或参考复刻。匹配请求的改造力度；对于要求明显重新设计的请求，不要只给出几乎没有变化的安全默认样式。
3. 制定简洁的设计风格说明，涵盖背景、表面处理、字体个性、强调色的使用方式、形状语言、动效和内容语气。每项选择都必须服务于同一个产品构想。
4. 在为单个组件设置样式之前，先建立或扩展语义令牌。将项目现有令牌和共享组件视为事实来源；仅当产品缺少稳定的语义概念时才扩展，不要重命名或重复现有系统。
5. 围绕真实的文案和数据构建具有代表性的完整屏幕，其中至少包含一个会触发换行或截断的长内容用例；随后覆盖相关的空、加载、失败、离线、数据过期、禁用和交互状态。对于每个可操作状态，选择一个主要的恢复或推进操作；不要在具体状态矩阵中留下“重试或关闭”之类尚未确定的备选项。不要仅为让截图更好看而填充生产数据。
6. 通过现有主题和组件系统实现设计。如果 Flutter 核心组件足以表达设计方向，就优先使用它们，而不引入新依赖。除非设计要求或检查项目所得的证据确有必要，否则不要添加第二套主题系统、字体、图标包或 UI 依赖。
7. 使用相同的用例分别渲染改造前后的界面。评估层级、辨识度、信息密度、默认组件样式残留、状态质量和与参考设计的差距，然后再进行一轮实现，修复重要问题。

设计规则

• 优先通过字体排印、间距、对齐和分组来组织界面，再添加装饰。
• 为每个界面区域设置一个明确的主要操作，并让次要操作明显处于从属地位。
• 不要把每组内容都做成卡片；如果提升层级没有实际意义，就使用留白和分隔线。
• 有辨识度不等于追求繁复。只有当渐变、半透明、模糊、光晕、富有表现力的形状或纵深感属于选定的视觉特色时，才使用它们，并确保它们不会喧宾夺主。
• 检查设计中是否残留框架默认样式。原样使用的组件可以作为行为基础，但如果设计要求鲜明的视觉识别度，就不能让它们未经调整的外观主导整个屏幕。
• 将颜色、字体、间距、形状、图标和层级效果控制在一套精简的语义系统中。
• 使用真实内容；占位文本往往会掩盖层级和溢出问题。
• 为含义不明确的图标搭配标签或其他上下文信息。
• 在适配目标平台时，保留品牌识别度，同时调整控件、手势、信息密度和导航惯例。
• 如果提供了精致的参考设计或同系列原生应用，应先匹配其视觉追求和产品关联，再适配平台机制。不要仅仅为了避免模仿，就把富有表现力的参考设计简化成通用的 Material 风格。

按需加载参考资料

• 如果请求范围开放、要求明显改造、指出 UI 显得普通，或提供了精致的参考设计，请阅读 art direction。
• 选择或扩展设计令牌、字体排印、颜色、形状、图标或层级效果时，请阅读 visual foundations。
• 构建层级结构或重新设计完整屏幕时，请阅读 screen composition。
• 如果界面需要加载数据、接收输入、处理失败或优化交互细节，请阅读 states and feedback。
• 如果目标平台不止一个，或需要转换 iOS、Android、Web 或桌面端参考设计，请阅读 platform adaptation。
• 在宣称重新设计已完成之前，请阅读 visual verification。

验证

为有代表性的状态和设备规格捕获稳定的屏幕截图或黄金测试样例。对于可见的重新设计，至少包含一个内容已填充的主要状态和最重要的边缘状态。明确制定验证矩阵，列出浅色和深色主题、正常和放大的文字比例、自定义前景色与背景色组合的实际对比度检查，以及有代表性的紧凑和宽屏设备规格；在适用时，还应加入本地化、指针或键盘焦点以及平台专属控件。不要假设框架默认设置能让自定义组合符合无障碍要求。行为和外观应分别测试。

如果未提供可运行项目或所需资源，请制定最精简的代表性测试样例矩阵，并说明后续需要渲染哪些内容；不要仅凭设计提案或源文本就声称已完成视觉验证。

不要在首次成功渲染后就停止。请与基线和任何提供的参考设计进行比较，修复明显的视觉差异，并捕获最终验收结果。报告可观察到的改进，例如产品识别度更强、操作优先级更清晰、默认组件样式残留更少、信息密度经过合理设计，以及状态覆盖完整，而不要只声称屏幕“很漂亮”。

来源

• Flutter 的 Material Design
• 使用主题共享颜色和字体样式
• 平台适配
• 自适应与响应式设计
• 字体排印