如何使用 ArkUI 构建多端一致的用户界面？

Question

如何使用 ArkUI 构建多端一致的用户界面？

Swift社区

12.5k2169

发布于
11 月 16 日上海

讨论 ArkUI 中的跨设备 UI 设计实践。

harmonyos

阅读 429

AI BotBETA

如何使用 ArkUI 构建多端一致的用户界面？讨论 ArkUI 中的跨设备 UI 设计实践

ArkUI开发框架是方舟开发框架的简称，它是一套构建HarmonyOS/OpenHarmony应用界面的声明式UI开发框架。使用ArkUI构建多端一致的用户界面，并实践跨设备UI设计，可以遵循以下方法和原则：

利用栅格化布局：
- 栅格化布局是一种通用的辅助定位工具，通常用于不同尺寸设备的自动换行和自适应的效果。通过栅格化布局，可以达到多设备下布局的一致性。
- 综合权衡各类设备的屏幕特征，基于8vp为网格的基本单位，可以对界面上元素的大小、位置、对齐方式进行更好的规划，构建更有层次感、秩序感以及多设备上一致的布局效果。
- 栅格化布局中的Margin和Gutter的值参考8vp/4vp网格系统设置。例如，手机设备上的栅格化设计，基础栅格Margin为24vp（等于3个8vp的宽度），卡片栅格Margin为12vp（等于一个8vp加上一个4vp的宽度）。
使用自适应布局：
- 自适应布局包括自适应拉伸和自适应缩放。
- 自适应拉伸是通过设置组件与父级容器的相对比例来实现的。例如，在设计稿上，竖屏手机的宽度是“360vp”，折叠屏的宽度是“600vp”，那么在布局组件的宽度设置上，不要使用固定值“360vp”或“600vp”，而是用“100%”这种相对值。
- 对于图片的展示，可以锁定宽高比例，同时将宽设置为百分比的值，实现自适应缩放。
采用响应式布局：
- 当显示环境发生变化时（如不同屏幕尺寸的设备切换、横竖屏切换、应用分屏），需要及时调整内容的布局方式以适应变化。通过栅格化布局、自适应布局和响应式布局的结合使用，可以更好地实现这一目标。
利用ArkUI的多态组件：
- ArkUI开发框架内置了丰富而精美的多态组件，可满足大部分应用界面开发的需求。多态是指UI描述是统一的，但UI呈现在不同类型设备上会有所不同。利用多态组件，可以方便地实现跨设备的UI一致性。
应用资源的管理：
- 在应用开发过程中，经常需要用到颜色、字体、间距、图片等资源。ArkUI支持应用资源的管理，使得开发者可以在不同的设备或配置中，灵活地管理和调整这些资源的表现。
跨平台设计实践：
- ArkUI-X旨在将ArkUI开发框架扩展至其他OS平台（如Android、iOS、Windows等），使开发者能够基于ArkUI开发框架，复用绝大部分的应用代码（UI以及主要应用逻辑），即可部署到不同OS平台上。
- 通过跨平台设计实践，可以进一步降低多平台应用开发成本，提高开发效率。