UI 对象

有效的 UI 对象命名和布局规范有助于提高可读性、可维护性和性能。此部分概述了 UI 元素命名、组织和设计的规范，以确保清晰性和一致性。

为 UI 对象命名

请避免使用基于角色的前缀，应尽可能保持 UI 对象名称简洁、清晰且有意义，同时避免冗余。
  • 使用简洁且具有描述性的名称定义对象功能，避免使用不必要的前缀。例如：
    • StartAction
       而不是
      btnStart
    • TemperatureString
       而不是
      lblTemperature
    • Username
       而不是
      txtUsername
重要提示: 避免使用含糊不清的名称，例如
Object1
 或
UIElement
。

分组和层次结构

分组和对象组织对于协作环境以及在创建项目时节省时间至关重要。
  • 按功能对 UI 对象进行组织，例如按钮、标记、图形、容器等。
  • 使用嵌套层次结构以获得更好的结构和可扩展性。
  • 通过避免冗余属性尽量减少节点计数。
  • 减少仅在设计时需要的不必要的动态链接。
    小贴士: 有关此主题的更多信息，请参见动态链接。

大小调整和布局

确保对象大小和位置一致，从而让应用程序的布局更加均衡。
  • 确保类似 UI 对象的大小一致。
    小贴士: 有关此主题的更多信息，请参见图形对象布局。
  • 使用相对定位（锚定）来支持不同画面大小。
  • 如果您希望小组件自动适应内容更改（如字体大小），请使用
    自动
    大小功能。
    小贴士:
    自动
    功能专为适合内容场景而设计，非常适用于容器需要根据其内容调整大小或文本需要适应容器维度的情况。
    要激活
    自动
    ，请打开
    属性
    面板，然后从
    高度
    或
    宽度
    字段中移除值。清除后，该字段将自动切换到
    自动
    ，从而启用基于内容的动态大小调整。

一致的设计

请为精心加工的应用程序实现一致性。
  • 遵循统一的颜色、字体和边框样式。
  • 对齐 UI 元素，以打造结构条理的专业外观。
小贴士: 有关更多信息，请参见图形对象及其子章节。

可重用类型

使用可重用类型和全局样式，以确保 UI 组件间的一致性并简化维护。
  • 为常见 UI 对象（如按钮和文本字段）创建可重用类型。
  • 为文本和按钮使用全局样式以保持统一。

间距、对齐和网格系统

应用一致的间距和布局对齐，以创建简洁、可扩展且视觉平衡的 UI 布局。
  • 遵循 8 像素规则：保持间距和边距以 8px（8px、16px、24px）为单位递增。
  • 使用基于网格的布局，以获得更好的 UI 结构。
  • 确保填充和边距保持一致，以呈现统一的外观。
提供反馈
对本文档有问题或反馈吗？ 请在这里提交您的反馈 。
Normal