鸿蒙一次开发,多端部署(三)应用UX设计原则

设计原则

当为多种不同的设备开发应用时,有如下设计原则:

差异性

充分了解所要支持的设备,包括屏幕尺寸、交互方式、使用场景、用户人群等,对设备的特性进行针对性的设计。

一致性

除了要考虑每个设备的特性外,还需要考虑不同设备的共性,并使用通用性设计方法提供既符合设备差异性,又具有跨设备一致性的设计,从而减少用户学习的难度,降低应用开发的成本。

灵活性

在硬件能力、交互方式、使用场景类似的设备上,应主要考虑布局位置、内容宽度、横向组件数量的调整,避免出现因横竖屏切换、窗口尺寸变化造成的界面元素不合理空白、模糊、变形、截断的问题。

兼容性

在硬件能力、交互方式、使用场景差异较大的设备上,除了考虑布局位置、内容宽度、横向组件数量,还需支持不同的输入方式、考虑功能架构的调整,避免出现输入不识别、功能不可以用、使用困难的问题。

设计要点

很多用户的多设备体验以默认设备为核心或从默认设备往外延伸,因此,围绕全场景体验的OpenHarmony UX设计,将优先确保用户在不同的设备上获得跟使用默认设备类似的体验,同时充分利用设备的优势使体验最大化。

在进行OpenHarmony的多设备应用设计时,需考虑应用以下内容:

自适应应用架构

使用自适应应用架构,可以确保应用在不同终端上,以最佳的导航形式来访问应用。OpenHarmony 在开发SDK上提供了便利,开发者可以通过简单配置轻松完成,无需从0开始构建。

例如:默认设备上的底Tab的结构,在Pad上一般使用侧边Tab来代替,在大屏上则是顶部Tab。

响应式界面布局

应用会在不同的场景下使用,常见的有横竖屏切换、分屏。这些场景会导致界面的尺寸和长宽比例发生变化。因此需要考虑内容的响应式布局,确保在各种场景下都有最佳的显示效果。

OpenHarmony 提供了多种布局能力,开发者通过组合运用使内容布局更符合业务需要与用户预期。

例如:默认设备上的滚动banner,在其他设备上可进行延伸,平板上露出更多banner,大屏上完全显示两张。

在不同类型的设备上,界面的尺寸和比例更为多样,再加上使用上的差异,导致设计上更为复杂。为此,可以考虑使用分栏布局、重复布局、挪移布局、缩进布局,进一步解决内容的显示问题。

例如:默认设备上上下排布的大图与列表,在长宽比例更大的设备上可挪移到左右展示。

交互归一

交互归一描述了在多种交互任务或场景下,应用在触屏上和其它常用的输入方式(例如鼠标、触摸板、键盘)上分别对应的正确的交互规则。设计师和开发者应保证在当前输入方式下应用能够以正确的、符合用户习惯的交互规则进行响应。通常情况下,系统已经做好了这些事情,开发者只需正确调用。如果您的操作比较特别,您需要考虑多端上的交互归一,以确保用户体验的一致。

视觉参数化

通过参数,方便的调整各端的视觉,使得各端具备该设备特有的风格。在OpenHarmony中,边距、圆角、阴影、字体大小等,都可以通过参数来进行调整。

多态控件

应用在多设备上运行,设备也可在不同交互方式下使用。控件作为应用的基础组成部分,需要支持不同的设备,且在视觉、交互、动效等表现形式上针对设备进行必要的调整,达到最佳体验。因此,同一控件在不同的设备上会呈现出不同的形态,称为多态控件。

OpenHarmony默认提供支持多设备的控件,开发者可以直接使用并对不同状态进行自定义。例如平板可以连接蓝牙键盘和鼠标来做文字编辑工作,此时控件需要同时满足键盘和鼠标交互,需要支持获焦态和悬停态。

针对性优化

在上述设计内容以外,在具体设备上,推荐针对性地进行特殊的操作和布局优化,使之符合当前设备的使用习惯。

例如:在以键鼠操作的界面上,为确保用户的使用习惯,需要提供额外的设计。

以触控为主 以键鼠操作为主
下拉刷新 界面上提供"刷新"图标或适配F5快捷键
滑动多选 鼠标 框选
下拉关闭 界面上提供"关闭"图标
长按浮起拖拽 鼠标直接拖拽

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ......

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题

2.性能优化方向

3.架构方向

4.鸿蒙开发系统底层方向

5.鸿蒙音视频开发方向

6.鸿蒙车载开发方向

7.鸿蒙南向开发方向

相关推荐
Tony11544 小时前
华为路由器静态路由配置(eNSP模拟实验)
网络·华为·智能路由器
Xinstall渠道统计6 小时前
Xinstall智能安装页面:一键唤起App,提升用户体验
人工智能·信息可视化·流量运营·ux
JoyceMill6 小时前
Android动画:提升用户体验的关键技术
android·ux
大美B端工场-B端系统美颜师6 小时前
用户体验:B端反馈体系设计,反馈不好,体验直接打3折。
ux·b端系统
chenhua10086116 小时前
鸿蒙应用更新跳转到应用市场
华为·harmonyos
cooldream20098 小时前
用户体验驱动开发:打造卓越数字产品的关键
驱动开发·ux
申耀的科技观察8 小时前
【观察】三合实业X华为:十载风雨同舟路,奋楫逐浪向未来
华为
等风来随风飘9 小时前
华为机试HJ11数字颠倒
算法·华为
花先锋队长21 小时前
如何用手机拍出高级感黑白色调照片?华为Pura70系列XMAGE演绎黑白艺术
华为·智能手机
一米八五羊毛菌1 天前
【笔试记录】华为 | 20230823 | cpp
c++·算法·华为·笔试