Skip to content

design_optimization_plan.md

Latest commit

 

History

History
186 lines (155 loc) · 5.66 KB

design_optimization_plan.md

File metadata and controls

186 lines (155 loc) · 5.66 KB

MarkRender 设计优化方案

概述

本方案基于TDesign设计原则和Robin Williams的四大设计原则（亲密性、对齐、重复、对比），对MarkRender应用的statusbar、sidebar以及APP底色进行设计优化，以确保整体设计语言和配色的一致性。

Robin Williams四大设计原则应用

1. 亲密性 (Proximity)

  • 相关元素分组：将功能相关的UI元素组织在一起
  • 视觉层级清晰：通过间距和分组建立清晰的信息层级
  • 功能区域明确：不同功能区域之间有明确的视觉分隔

2. 对齐 (Alignment)

  • 统一的对齐基准：所有UI元素遵循统一的对齐规则
  • 边缘对齐：确保组件边缘与容器边缘对齐
  • 文本对齐：保持文本内容的对齐一致性

3. 重复 (Repetition)

  • 样式一致性：在整个应用中重复使用相同的样式和组件
  • 颜色体系统一：使用统一的颜色体系和语义化颜色
  • 间距系统一致：基于8px网格的间距系统在所有组件中重复使用

4. 对比 (Contrast)

  • 视觉层次分明：通过颜色、大小、字体粗细建立视觉层次
  • 重要元素突出：关键操作和信息通过对比突出显示
  • 状态区分明确：不同状态（默认、悬停、选中）有明确的视觉区分

TDesign设计原则应用

1. 设计价值观

  • 简洁：去除冗余元素，保持界面简洁
  • 一致：统一的视觉语言和交互模式
  • 实用：设计服务于功能，提升用户体验

2. 色彩系统

  • 主色系：使用蓝色作为主色，传达专业和可靠感
  • 中性色系：使用灰度色彩建立层次感
  • 语义化颜色：使用特定颜色表示成功、警告、错误等状态

3. 间距与布局

  • 8px网格系统：所有间距和尺寸基于8px网格
  • 响应式布局：适应不同屏幕尺寸
  • 留白平衡：合理使用留白提升可读性

具体优化方案

1. APP底色优化

当前问题

  • 底色可能与组件背景色缺乏层次感
  • 深色模式和浅色模式切换时缺乏一致性

优化方案

  • 浅色模式：使用NEUTRAL_50 (#F9FAFB) 作为主背景色
  • 深色模式：使用BACKGROUND_DARK (#1f1f1f) 作为主背景色
  • 层次感：通过不同灰度色建立背景、组件、内容的层次感

2. Sidebar优化

当前问题

  • 按钮样式与TDesign规范不完全一致
  • 选中状态的视觉反馈不够清晰
  • 间距和对齐可能需要微调

优化方案

# 侧边栏样式优化
SIDEBAR = f"""
QWidget {{
    background-color: {NEUTRAL_50};
    border-right: 1px solid {NEUTRAL_200};
    width: {SIDEBAR_WIDTH}px;
}}"""

# 侧边栏按钮样式优化（基于TDesign）
SIDEBAR_BUTTON = f"""
QPushButton {{
    color: {NEUTRAL_600};
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: {RADIUS_SM}px;
    padding: {SPACING_XS}px;
    font-size: {FONT_SIZE_SM}px;
    font-weight: 500;
    min-width: 32px;
    min-height: 32px;
    max-width: 36px;
    max-height: 36px;
}}
QPushButton:hover {{
    background-color: {PRIMARY_50};
    border-color: {PRIMARY_100};
    color: {PRIMARY_600};
}}
QPushButton:pressed {{
    background-color: {PRIMARY_100};
    border-color: {PRIMARY_200};
    color: {PRIMARY_700};
}}
QPushButton:checked {{
    background-color: {NEUTRAL_0};
    border: 1px solid {PRIMARY_300};
    color: {PRIMARY_500};
    font-weight: 600;
}}
QPushButton:checked:hover {{
    background-color: {PRIMARY_50};
    border: 1px solid {PRIMARY_300};
    color: {PRIMARY_600};
}}
"""

设计原则应用

  • 亲密性：按钮垂直排列，间距统一
  • 对齐：按钮水平居中对齐
  • 重复：所有按钮使用相同的样式规范
  • 对比：选中状态通过背景色和边框色形成对比

3. Statusbar优化

当前问题

  • 标签样式与整体设计语言不够一致
  • 历史按钮的视觉反馈可以增强
  • 状态栏高度可能需要调整以适应内容

优化方案

# 状态栏样式优化
STATUS_STYLE = f'''
QStatusBar {{
    border-top: 1px solid {NEUTRAL_200};
    background-color: {NEUTRAL_50};
    color: {NEUTRAL_500};
    font-size: {FONT_SIZE_XS}px;
    padding: {SPACING_XS}px {SPACING_LG}px;
    height: {STATUSBAR_HEIGHT}px;
}}
QLabel {{
    margin-left: {SPACING_LG}px;
    color: {NEUTRAL_400};
}}
'''

# 标签样式优化
TAG_STYLE = f'''
background-color: {PRIMARY_100};
color: {PRIMARY_600};
padding: 2px 8px;
border-radius: {RADIUS_PILL}px;
font-size: {FONT_SIZE_XS}px;
border: 1px solid {PRIMARY_200};
'''

设计原则应用

  • 亲密性：标签紧密排列，形成信息组
  • 对齐：标签与状态栏内容保持垂直对齐
  • 重复：所有标签使用统一的样式
  • 对比：标签颜色与状态栏背景形成对比

实施步骤

第一阶段：基础样式优化

  1. 更新APP底色定义，确保浅色和深色模式的一致性
  2. 优化Sidebar样式，增强视觉层次和状态反馈
  3. 调整Statusbar样式，提升信息展示效果

第二阶段：组件一致性优化

  1. 统一按钮样式规范
  2. 优化标签和徽章样式
  3. 调整间距系统应用

第三阶段：细节打磨

  1. 微调颜色对比度
  2. 优化交互反馈动画
  3. 完善深色模式适配

预期效果

通过本次优化，MarkRender应用将实现：

  1. 视觉一致性：整体设计语言统一，符合TDesign规范
  2. 用户体验提升：界面更加清晰易用，符合用户认知习惯
  3. 品牌识别度增强：通过统一的色彩和样式提升产品专业感
  4. 可维护性提高：基于设计令牌的样式系统便于后续维护和扩展