OpenHarmony高级UI组件有哪些设计原则

OpenHarmony高级UI组件的设计原则

一 视觉一致性与轻量化

• 统一设计语言：在色彩、字体、间距、动效、阴影等维度保持全应用一致，优先使用系统级设计令牌（Design Tokens），避免“同功能不同形”。
• 主色与层级：主色建议统一为 #007DFF，仅用于关键操作与选中态；文字与背景使用系统标准色，避免自定义灰度层级。
• 字体与排版：优先 HarmonyOS Sans，正文建议 16 sp、行高 1.5；标题 20–24 sp；辅助文本 14 sp；按钮文本 16 sp。
• 留白与密度：采用 8 dp 基数网格，常用内边距 8/16/24 dp；段落间距 16 dp；控制色彩数量（≤3 主色），减少视觉噪音。
• 阴影与圆角：卡片投影保持“轻微高斯模糊 + 低投影”；默认圆角 8 dp，大屏可适度放大；避免纯黑 #000000 或纯白背景。

二 多设备自适应与响应式

• 栅格化布局：以 8 vp 为基本单位，配合 Margin/Gutter（如 8 vp/4 vp） 建立可复用网格；手机常见 Margin 24 vp（3×8 vp），卡片 Margin 12 vp（8 vp + 4 vp）。
• 自适应与响应式：优先使用相对尺寸（如 100% 宽度）、锁定宽高比（AspectRatio）、断点切换布局；横竖屏、分屏、窗口尺寸变化时，组件应自动重排。
• 多态组件：同一 UI 描述在不同设备上呈现差异化结构，保持交互语义一致、信息密度适配。
• 断点与尺寸：可参考 12 列栅格 与断点（如 watch ≤200、phone ≤400、pc ∞）进行列宽与间距自适应；大屏（如智慧屏）可将间距与字号适度放大（如 ×1.5）以提升可读性。
• 热区与精度：不同输入方式的最小热区建议——手表 ≥8 mm、手机 ≥7 mm、PC ≥4 px，组件交互目标需满足可触达性。

三 组件规范与交互反馈

• 按钮体系：区分主按钮（实底主色）、次按钮（描边主色）、文字按钮（无背景主色文字）；全应用统一高度——手机 48 dp、大屏 64 dp；圆角建议 24 dp（大屏可更大）。
• 列表与分割线：仅在需要隔离时使用分割线；左侧图标统一 24×24 dp，与文字间距 16 dp；保持 Item 高度一致，提供水波纹点击反馈。
• 卡片与容器：卡片结构建议“图片（可选）+ 标题 + 描述 + 操作区”；最大宽度——手机 ≤360 dp、平板 ≤500 dp；必要时使用投影表达层级。
• 动效与过渡：页面转场与组件反馈保持轻量与一致性，优先短时长、缓入缓出曲线，避免打断用户任务流。

四 可访问性与国际化

• 可访问性：支持系统字体放大、高对比度、语义化标签与焦点顺序；为图标与交互元素提供可访问名称，确保屏幕阅读器可用。
• 国际化与资源：通过多语言资源与布局方向（LTR/RTL）适配，日期、数字、度量衡按本地化格式展示；主题与色彩对比度满足 WCAG 基本要求。

五 工程化落地与资源组织

• 主题与组件库：以 ThemeData/设计令牌 统一色彩、字体、圆角、阴影等；封装符合规范的原子组件（如 OHButton/OHCard/OHNavigationBar），全应用一致调用。
• 资源与多端：按设备与配置管理 颜色、字体、间距、图片 等资源，利用多态组件与资源限定符实现差异化呈现；建立 UI 规范文档与示例库，保障团队协作与长期维护。