Software_Architecture/.promptx/resource/domain/qt-ui-optimizer/knowledge/ui-ux-principles.knowledge.md

UI/UX设计原则与最佳实践

现代UI设计原则

Material Design 核心理念

• 物理隐喻：界面元素模拟真实世界的物理特性
• 大胆的图形设计：使用鲜明的色彩和清晰的层次
• 有意义的动画：动画应该有目的性，引导用户注意力
• 自适应设计：界面应该适应不同的屏幕尺寸和设备

Fluent Design 设计语言

• 光线：使用光线效果突出重要元素
• 深度：通过阴影和层次创建空间感
• 动画：流畅自然的过渡动画
• 材质：半透明和模糊效果的运用

色彩设计理论

色彩心理学应用

主色调选择指南：
- 蓝色：专业、可信、科技感 (适合企业应用)
- 绿色：自然、安全、成功 (适合健康、金融应用)
- 红色：紧急、重要、激情 (适合警告、重要操作)
- 灰色：中性、专业、现代 (适合工具类应用)

配色方案设计

经典配色组合：
1. 单色配色：同一色相的不同明度和饱和度
2. 互补配色：色轮上相对的两种颜色
3. 三角配色：色轮上等距的三种颜色
4. 分裂互补：一种主色加上其互补色的邻近色

无障碍设计考虑

• 对比度要求：文字与背景对比度至少4.5:1
• 色盲友好：不能仅依靠颜色传达信息
• 色彩测试：使用色盲模拟器测试界面效果

排版设计原则

字体层次设计

字体大小层次：
- 主标题：24-32px，粗体
- 副标题：18-24px，中等粗细
- 正文：14-16px，常规
- 说明文字：12-14px，细体
- 标签文字：10-12px，大写

行距和间距

间距设计规则：
- 行距：字体大小的1.2-1.5倍
- 段落间距：行距的1.5-2倍
- 元素间距：8px的倍数 (8, 16, 24, 32...)
- 页面边距：至少16px，推荐24-32px

字体选择原则

• 可读性优先：选择清晰易读的字体
• 系统字体：优先使用系统默认字体
• 字体数量：一个界面最多使用2-3种字体
• 中英文搭配：确保中英文字体协调统一

布局设计原则

网格系统应用

12列网格系统：
- 容器宽度：1200px (桌面)
- 列宽：75px
- 间距：30px
- 边距：15px

视觉层次构建

层次设计方法：
1. 大小对比：重要元素使用更大尺寸
2. 颜色对比：重要元素使用突出颜色
3. 位置对比：重要元素放在显眼位置
4. 空白空间：用留白突出重要内容

F型和Z型布局

• F型布局：适合内容密集的界面，用户从左到右、从上到下浏览
• Z型布局：适合简洁界面，引导用户视线按Z字形移动

交互设计原则

可用性启发式原则

1. 系统状态可见性：用户应该知道系统当前状态
2. 系统与现实匹配：使用用户熟悉的概念和语言
3. 用户控制和自由：提供撤销和重做功能
4. 一致性和标准：遵循平台约定和标准
5. 错误预防：设计时预防用户犯错
6. 识别而非回忆：让选项可见，减少记忆负担
7. 使用灵活性和效率：为专家用户提供快捷方式
8. 美观和简约设计：避免无关信息干扰
9. 帮助用户识别、诊断和从错误中恢复：错误信息要清晰
10. 帮助和文档：提供必要的帮助信息

反馈机制设计

反馈类型和时机：
- 即时反馈：按钮点击、输入验证 (<100ms)
- 短期反馈：表单提交、数据保存 (1-3秒)
- 长期反馈：文件上传、数据处理 (>3秒，需要进度指示)

状态设计

控件状态设计：
- 默认状态：控件的初始外观
- 悬停状态：鼠标悬停时的视觉反馈
- 激活状态：控件被点击或选中时
- 禁用状态：控件不可用时的外观
- 焦点状态：键盘导航时的焦点指示

动画和过渡

动画设计原则

• 有目的性：动画应该有明确的功能目标
• 自然性：模拟真实世界的物理规律
• 一致性：整个应用中保持动画风格一致
• 性能考虑：避免影响应用性能的复杂动画

缓动函数选择

常用缓动函数：
- ease-in：慢开始，适合元素消失
- ease-out：慢结束，适合元素出现
- ease-in-out：慢开始慢结束，适合状态转换
- linear：匀速，适合循环动画

动画时长建议

动画时长指南：
- 微交互：100-200ms (按钮点击反馈)
- 小元素：200-300ms (工具提示显示)
- 中等元素：300-500ms (对话框打开)
- 大元素：500-800ms (页面切换)
- 复杂动画：800ms+ (数据可视化)

响应式设计

断点设计

常用断点：
- 手机：320-768px
- 平板：768-1024px
- 桌面：1024px+
- 大屏：1440px+

自适应策略

• 流式布局：使用百分比而非固定像素
• 弹性图片：图片随容器大小缩放
• 媒体查询：针对不同屏幕尺寸应用不同样式
• 移动优先：从小屏幕开始设计，逐步增强

可访问性设计

键盘导航

• Tab顺序：确保逻辑的Tab键导航顺序
• 焦点指示：清晰的焦点视觉指示
• 快捷键：为常用功能提供键盘快捷键

屏幕阅读器支持

• 语义化标签：使用正确的HTML语义
• Alt文本：为图片提供描述性文本
• 标题层次：正确的标题层次结构

设计系统构建

组件库设计

基础组件：
- 按钮 (Button)
- 输入框 (Input)
- 选择器 (Select)
- 复选框 (Checkbox)
- 单选框 (Radio)

设计令牌 (Design Tokens)

颜色令牌：
- primary-color: #4CAF50
- secondary-color: #2196F3
- success-color: #4CAF50
- warning-color: #FF9800
- error-color: #F44336

间距令牌：
- space-xs: 4px
- space-sm: 8px
- space-md: 16px
- space-lg: 24px
- space-xl: 32px