22.细解鸿蒙之元服务UX上架标准-图标文字大小适中

200 阅读7分钟

细解鸿蒙之元服务UX上架标准-图标文字大小适中

是否必须遵守:必须

标准项描述:

在折叠屏设备的设计与应用过程中,折叠屏图标文字大小符合要求是一个重要方面。这意味着在折叠屏处于不同折叠状态和展开状态下,图标文字大小需要满足一系列特定的标准和条件,以确保用户能够清晰、准确地识别和操作。以下详细解释:

折叠屏不同状态下的要求

折叠状态

  • 空间有限:折叠屏折叠后空间变小,图标文字大小需要适应这种有限的空间。一方面,文字大小不能过大,否则会占据过多空间,导致显示内容拥挤,甚至无法完整显示。例如,在折叠屏手机的折叠状态下,屏幕上的图标文字可能需要缩小,以适应较小的屏幕尺寸。另一方面,文字大小也不能过小,否则可能会难以辨认,影响用户对图标功能的理解。

  • 视觉效果:折叠状态下的图标文字大小要与整体视觉效果相协调。由于折叠屏的视觉空间有限,图标文字大小需要与周围环境和其他元素相匹配。例如,在折叠屏的折叠部分,图标文字可能需要与折叠的线条、角度等元素形成统一的视觉风格,以增强整体的美观度。

  • 操作便利性:图标文字大小要方便用户操作。在折叠状态下,用户可能需要通过触摸屏幕来点击图标,因此文字大小应足够大,以便用户能够准确点击。同时,文字大小也不能过大,否则可能会导致误操作。例如,在折叠屏手机的折叠状态下,图标文字的大小应能够让用户在操作时轻松触碰到图标。
    展开状态

  • 空间充足:展开状态下屏幕空间较大,图标文字大小可以相对较大。这有利于用户更清晰地识别图标和文字内容。例如,在折叠屏平板电脑展开后,屏幕上的图标文字可以更大,以展示更多的信息。

  • 视觉一致性:图标文字大小要与折叠屏展开后的整体视觉效果保持一致。在展开状态下,图标文字的大小应与其他界面元素相协调,形成统一的视觉风格。例如,在折叠屏展开后的界面中,图标文字的大小应与周围的文字、图片等元素保持一定的比例关系,以营造出舒适、美观的视觉效果。

  • 功能需求:展开状态下的图标文字大小要满足不同功能的需求。例如,在折叠屏展开后,某些图标可能需要显示更多的文字信息,以提供更详细的功能说明。此时,文字大小应能够适应这种需求,确保用户能够准确理解图标功能。

符合要求的具体表现

可读性:图标文字大小应确保用户能够清晰地阅读。无论是在折叠状态还是展开状态下,文字都应该能够被用户轻松识别。例如,在折叠屏手机的折叠状态下,文字大小应足够大,以便用户在较远距离或光线较暗的情况下也能看清文字内容。
可识别性:图标文字大小要能够准确传达图标所代表的信息。在折叠屏不同状态下,图标文字大小应与图标本身的含义相匹配。例如,在折叠屏折叠部分的图标文字大小应能够突出其功能特点,使用户能够快速理解图标所代表的内容。
美观性:图标文字大小要与折叠屏的整体美观度相符合。在折叠屏不同状态下,文字大小应与屏幕的布局、颜色、风格等元素相协调。例如,在折叠屏展开后,图标文字大小应与整体界面风格相统一,使整个屏幕看起来更加美观、和谐。
兼容性:图标文字大小要与不同设备和操作系统兼容。不同折叠屏设备可能具有不同的屏幕尺寸、分辨率和操作系统,图标文字大小需要适应这些差异。例如,在不同折叠屏设备上,图标文字大小应能够在各自的操作系统环境下正常显示,并且与其他应用程序的界面风格相匹配。

意义

提升用户体验:折叠屏图标文字大小符合要求能够提高用户在折叠屏设备上的操作便利性和视觉感受。用户能够更轻松地识别图标和文字内容,从而更好地使用折叠屏设备。
增强功能展示:图标文字大小的合理设置有助于展示折叠屏设备的各种功能。在折叠屏不同状态下,图标文字大小能够准确传达功能信息,使用户能够更好地理解和使用折叠屏设备。
优化界面设计:符合要求的图标文字大小有助于优化折叠屏设备的界面设计。通过合理调整图标文字大小,能够使折叠屏设备的界面更加美观、简洁,提高用户对设备的满意度。
促进市场发展:折叠屏设备的发展需要满足用户对图标文字大小的要求。符合要求的图标文字大小能够提高折叠屏设备的市场竞争力,促进折叠屏设备的普及和推广。 --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

ArkUI为开发者提供种像素单位,框架采用vp为基准数据单位。API 12release之前,应用默认会跟随系统字体变化而变化。

名称

描述

px

屏幕物理像素单位。

vp

屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。说明:vp与px的比例与屏幕像素密度有关。

fp

字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。

lpx

视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。

开发者设置的字体大小,默认为vp,当在设置中修改文字大小时,对应的数值会发生变化,字体像素(font pixel) 大小默认情况下与 vp 相同,即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体,字体的实际显示大小就会在 vp 的基础上乘以用户设置的缩放系数,即 1 fp = 1 vp * 缩放系数。

【解决方案】

API 12release之前,应用默认会跟随系统字体变化而变化。API 12 release之后,应用默认不会跟随系统字体变化而变化。

(1)部分控件设置文字固定大小:使用px为单位即可。

(2)全局设置文字固定大小:

在开发视图的AppScop/resources/base/profile下面定义配置文件configuration.json,其中文件名"configuration"可自定义,需要和configuration标签指定的信息对应。配置文档查看。

点击放大

代码示例如下:

app.json5文件:

{
  "app": {
    "configuration": "$profile:configuration"  
  }
}
configuration文件:

{
  "configuration": {
    "fontSizeScale": "followSystem",
    "fontSizeMaxScale": "3.2"
  }
}

PS:实际项目中如有出入,请告知博主,博主会第一时间修改得哇~