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

应用UX设计原则

设计原则

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

差异性

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

一致性

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

灵活性

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

兼容性

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

开发前请熟悉鸿蒙开发指导文档gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

设计要点

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

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

自适应应用架构

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

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

一多-1-1

应用导航结构设计要求

应用中的导航用于引导用户在应用的各个页面进行浏览。好的导航让用户知道身处何处,去往何方,以及来自哪里。

导航的原则

导航需要遵循以下原则:

  • 一致:导航操作的结果应该与用户的期望保持一致。相同或类似的场景使用用户熟悉的界面布局和控件,在多设备上确保一致的应用架构和导航行为,让用户无论在什么页面,都知道如何导航。例如二级界面使用左上角的返回按钮来返回界面的上一个层级。
  • 清晰:导航应该提供清晰的路径。用户使用的时候,逻辑关系简单且容易理解,能够知道当前处在界面的什么位置,操作后将会跳转到什么位置,不会迷失方向。例如使用底部页签,让用户在平级页面之间进行切换。

导航要避免以下设计:

  • 层级过深:导航层级建议在三层以内。对于太深的层次,会带来操作效率的问题。如果确实需要深层级设计,建议使用面包屑设计或增加一键回到首页的功能。
  • 导航复杂:在侧边导航中,使用底部页签,会让操作变得复杂,建议仅使用侧边导航。

导航的分类

常用的应用导航有:平级导航、层级导航和混合导航。

平级导航

平级导航结构中,页面均处在同一层级。

使用场景:用于展示同等地位或同等层级的界面。

zh-cn_image_0000001517612912

例如:以Tab方式组成的页面。图中照片、相册、发现为一级界面,从视频相册进入二级内容界面。

一多-2-2

多设备设计:可转化导航类控件到符合设备体验的位置上。默认设备上使用Tab导航,PAD和PC使用侧边Tab导航,智慧屏使用顶部Tab导航。

一多-2-3

层级导航

层级导航结构由父页面和子页面组成。父页面可以有一个或多个子页面。每个子页面都有一个父页面。

层级导航适用于多层级的复杂结构。层级结构深的内容,用户访问的路径变长,效率降低,可以通过适当的层级穿透设计(例如:控制中心中的蓝牙开关,解决了进“设置-蓝牙”界面设置操作路径过长的问题)解决此问题。

使用场景:页面存在上下级关系的应用。

zh-cn_image_0000001568093237

例如:通过从内容进入后经返回键返回之前的页面。

一多-2-5

多设备设计:可以考虑将上下层级的界面在同一界面展示。默认设备和智慧屏上使用上下层级关系。平板和PC使用上分栏的方式展示内容。

一多-2-6

混合导航

在实际应用设计中,仅使用平级或层级导航可能无法应对更复杂的业务结构。此时需区分不同页面的导航关系,对同等地位或同等层级的页面使用平级导航结构,对具有复杂关系的页面使用层级导航结构。

使用场景:应用由几个同等级的模块组成,每个模块又有上下层级关系页面。

zh-cn_image_0000001568212949

多设备设计:可以根据平级导航、层级导航自身的设计规则综合运用,一般平级导航优先级比层级高。

混合导航

响应式界面布局

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

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

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

1_zh-cn_image_0000001568412917.png

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

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

概述-界面布局-歌单详情高保真

概述

布局不是静态固定的,当显示环境发生变化时,如横竖屏切换、调节字体大小、应用分屏,要及时调整内容的布局方式以适应变化。本章提供了布局基础的概念和介绍。

栅格系统

栅格系统是一个多设备下通用的辅助定位系统,适用于应用窗口的整体布局,也支持界面局部内容使用。栅格系统由 Margin,Gutter,Column 三个属性构成。Margin是相对屏幕、窗口等父容器左右边缘的距离,决定了内容可展示的整体宽度;Gutter是每个Column的间距,决定内容间的紧密程度; Column是内容的占位元素,其数量决定了内容的布局复杂度。Margin大小、Gutter大小、Column数量综合决定Column的具体宽度。

通过栅格系统进行布局,可以更好达到多设备下布局的一致性。

zh-cn_image_0000001517293418

Margin、Gutter的大小、Column的数量均可自定义,界面内容跟据Column的边缘定位。通过采用不同数值调整内容信息量和紧密程度,一般推荐使用4或8的倍数。例如Margin 32vp、Gutter 16vp、Column数量为4,或Margin 40vp、Gutter 24vp、Column数量为8。

栅格系统例

交互归一

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

交互基础

在全场景的数字体验中,越来越多类型的智能终端设备分布在用户的日常生活中,可交互的用户界面广泛存在于默认设备、平板、PC、智能穿戴设备、智慧屏、车机、虚拟现实(VR)和增强现实(AR)等设备上。应用可能在多种设备上运行或在单一设备上被用户通过多种输入方式操控,也可能在多种距离上被用户操控。这需要其用户界面能够识别和支持不同的交互场景,以便用户以习惯的、舒适的方法与其进行交互。

zh-cn_image_0000001517293316

输入方式

典型的输入方式包括但不限于触屏上手指/手写笔等直接交互、鼠标/触摸板/键盘/表冠/遥控器/车机摇杆/旋钮/手柄/隔空手势等间接交互、以及语音交互。

设计和开发应用时,设计师和开发者应考虑到应用具有使用多种输入方式的可能性,并实现相应的功能,保证在当前输入方式下应用能够以正确的、符合用户习惯的方式进行响应。

交互距离

典型的设备交互距离包括但不限于15cm(智能穿戴设备)、30cm(默认设备)、60cm(桌面设备)、260cm(大屏),具体距离会在用户使用过程中产生一定范围的变化。

设计和开发应用时,设计师和开发者应考虑到多种距离下使用的可能性,保证界面元素的大小、展示信息的密度符合用户的预期。

1_zh-cn_image_0000001568212889.png

视觉参数化

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

1_zh-cn_image_0000001568093301.png

视觉基础

虚拟像素单位:vp

虚拟像素(virtual pixel)是一台设备针对应用而言所具有的虚拟尺寸(区别于屏幕硬件本身的像素单位)。它提供了一种灵活的方式来适应不同屏幕密度的显示效果。

zh-cn_image_0000001517293332

相同的vp,在不同像素密度的屏幕上,对应不同px,一般称px/vp为像素密度比。像素密度比为当前设备屏幕的dpi/160。

在dpi为160的OpenHarmony设备上,像素密度比为1,则1vp等于1px。

以vp为尺寸标注单位,可使相同元素在不同密度的设备上具有一致的视觉体量,使用px则容易导致体量不一致的问题。

8vp网格系统

基于 8vp 为网格的基本单位可以对界面上元素的大小、位置、对齐方式进行更好的规划,构建更有层次感、秩序感,以及多设备上一致的布局效果。一些更小的控件(例如图标)大小也可以对齐 4vp 的网格大小。

8vp

字体像素单位:fp

字体像素(font pixel) 大小默认情况下与 vp 相同,即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体,字体的实际显示大小就会在 vp 的基础上乘以 scale 系数,即 1 fp = 1 vp * scale。

视觉属性:分层参数

分层参数是根据使用场景定义的视觉属性ID,通过在不同色彩主题、多种设备上配置不同的数值,实现多设备适配的效果。OpenHarmony的分层参数包含色彩、字体、圆角、间距、阴影、模糊、缩放,并提供了默认实现。设备、应用、服务均可在此基础上管理并自定义不同场景的视觉属性。

1_zh-cn_image_0000001517612872.png

例如,对于不同场景的主色调定义了对应的ID与默认实现

主色调色值ID
高亮色#007DFFohos_id_color_emphasize
高亮色反色#006CDEohos_id_color_emphasize_contrary
警告色#FA2A2Dohos_id_color_warning
警示色#FF7500ohos_id_color_alert
通讯色#E84826ohos_id_color_handup
通讯色#00CB87ohos_id_color_connected

多态控件

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

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

针对性优化

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

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

搜狗高速浏览器截图20240326151450.png

以触控为主以键鼠操作为主 HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿
下拉刷新界面上提供“刷新”图标或适配F5快捷键
滑动多选鼠标 框选
下拉关闭界面上提供“关闭”图标
长按浮起拖拽鼠标直接拖拽

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/628794.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

EE-SX670 槽型光电开关 5MM 限位检测感应器 使用案例

EE-SX670是一款槽型光电开关,也被称为U形传感器或限位检测感应器。它是光电传感器中的一种,通过检测物体是否插入其感应槽来触发开关。这种传感器通常用于自动化生产线上的位置检测、对象计数以及安全设备中的运动检测。 EE-SX670作为一款高性能的光电传…

智能文档处理:解析文档场景下多模态大模型的应用与研究前沿

解析文档场景下多模态大模型的应用与研究前沿 一、TextIn 文档解析技术1. 现有大模型文档解析问题2. 文档解析技术背景3. TextIn 文档解析技术架构4. 版面分析关键技术 Layout-engine 二、TextIn 文本向量化技术三、TextIn.com Text Intelligence 一、TextIn 文档解析技术 hell…

十二.吊打面试官系列-JVM优化-深入JVM内存模型

JVM内存模型 1.JVM的组成 整个JVM组成由 :运行时数据区 , 类加载子系统 , 执行引擎 , 本地方法库 几部分组成 上面是Java7的内存模型,Java8以后做了一些调整,把方法区变成了元空间,元空间不在…

Blender雕刻建模流程

1.构形 先构造一个大致相像的外形 可使用的方法包含 -多边形:表面细分,布尔 -曲线:曲线倒角 -融球(使用较少) -曲面(使用较少) 构形之后的准备 -应用缩放 -应用修改器 -曲线转网格 1.1…

【BOSS直聘爬取系统功能介绍】

完整代码关注公众号 : 爬取网站:BOSS直聘:https://www.zhipin.com/ 难点 1. boss直聘不论什么岗位都只会展示10页数据,就算在网页里加到了11,内容也会和10一样。 2.多次访问会有验证码需要登录,这部分需…

3SRB2516-ASEMI适配大功率充电桩3SRB2516

编辑:ll 3SRB2516-ASEMI适配大功率充电桩3SRB2516 型号:3SRB2516 品牌:ASEMI 封装:SGBJ-5 正向电流(Id):25A 反向耐压(VRRM):1600V 正向浪涌电流&…

【3dmax笔记】028:倒角的使用方法

一、倒角描述 在3dmax中创建倒角效果可以通过多种方法实现,以下是几种常见的方法: 使用倒角修改器。首先创建一个图形(如矩形和圆),然后对齐它们,将它们转化为可编辑样条线,并附加在一起,选择要倒角的边缘,然后使用倒角修改器来调整高度、轮廓等参数。使用倒角剖面修…

听劝!普通人千万别随意入门网络安全

一、什么是网络安全 网络安全是一种综合性的概念,涵盖了保护计算机系统、网络基础设施和数据免受未经授权的访问、攻击、损害或盗窃的一系列措施和技术。经常听到的 “红队”、“渗透测试” 等就是研究攻击技术,而“蓝队”、“安全运营”、“安全运维”…

校园防欺凌平台

校园霸凌事件很难被发现,发现者又可能迫于威胁而不敢告发,被霸凌者又因各种原因而选择忍耐,所以,如果能够在发生校园霸凌的时候,做出及时的预警,也许能够拯救挽回无数个家庭。本平台结合防欺凌设备&#xf…

【js刷题:数据结构链表之设计链表】

设计链表 一、题目二、题解 一、题目 二、题解 // 定义节点类,每个节点都有一个值和一个指向下一个节点的引用 class LinkNode{constructor(val,next){ // 构造函数,接收节点值和下一个节点的引用this.valval // 节点的值this.nextnext // 指…

查看Linux服务器的硬盘占用情况

查看Linux服务器的硬盘占用情况 一、查看各分区的使用情况和磁盘挂载1、查看磁盘分区使用和磁盘挂载2、结果解释(1)列名解释(2)各系统解释 二、查看一个目录及其所有子目录中文件的总占用大小1、查看指定目录的总大小2、列出目录下…

山东齐鲁文化名人颜廷利:汉语自媒体里面的真正文字智慧

在这个数字技术日新月异的时代,大数据和人工智能等技术的兴起已经深刻地改变了信息的传播方式。特别是随着自媒体的兴起,传统的物质形态的报刊杂志已迅速转变为无形的知识与智慧的流动,这种转变不仅改变了信息的传递手段,更释放出…

GIT基础02 多机器协作等命令

前言 首先我们知道git给我们提供了分支管理的功能 我们一般使用master分支作为线上环境,master分支一般是一个稳定的分支 我们通常是会创建一个其他分支进行开发,这样不会影响线上的机器运行 如果没有git提供这样的分支功能,就无法做到这一套了 指令学习 假设软件出现问题咋办…

SWAT模型高阶应用暨SWAT模型无资料地区建模、不确定分析及气候、土地利用变化对水资源与面源污染影响分析

原文链接:SWAT模型高阶应用暨SWAT模型无资料地区建模、不确定分析及气候、土地利用变化对水资源与面源污染影响分析https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247604401&idx4&snd2d39846dce07bee765c820de1cf92f3&chksmfa821956cdf5904…

长期的图片活码怎么做?在线制作图片活码的方法

现在通过扫描二维码来查看内容的方式,在日常生活中越来越常见,其中扫码看图就是很常用的一种方式。在很多的公共场所或者宣传单页上,扫码后即可查看相关的图片信息,从而获取我们需要的内容,那么在电脑上将图片生成二维…

Pencils Protocol Season 2 收官在即,Season 3 携系列重磅权益来袭

此前Scroll生态LaunchPad &聚合收益平台Pencils Protocol(原Penpad),推出了首个资产即其生态代币PDD的Launch,Season 2活动主要是用户通过质押ETH代币、组件战队等方式,来获得Point奖励,并以该Point为依…

高低温试验箱工厂分享:设备如何保养更节约成本

高低温试验箱在现代产业中起到重要的作用,能够帮助企业进行产品质量和性能的测试,而且这种设备也是一种常见的用于模拟各种极端温度环境的设备。所以这种在特殊环境下使用的设备,维护和保养是关键,正确的保养和维护可以延长设备的…

Spring初学入门(跟学笔记)

一、Spring概述 Spring是一款主流的Java EE轻量级开源框架。 Spring的核心模块:IoC(控制反转,指把创建对象过程交给Spring管理 )、AOP(面向切面编程,在不修改源代码的基础上增强代码功能) 二、…

LeetCode刷题笔记第1800题:最大升序子数组和

LeetCode刷题笔记第1800题:最大升序子数组和 题目: 想法: 遍历数组的同时记录当前最大升序子数组和,最终返回最大升序子数组和 class Solution:def maxAscendingSum(self, nums: List[int]) -> int:result 0i 0n len(num…

istio资源字段参考文档

virtual service: Istio / Virtual ServiceConfiguration affecting label/content routing, sni routing, etc.https://istio.io/latest/docs/reference/config/networking/virtual-service/