HarmonyOS 鸿蒙Next中UI设计的时候应该按多少px设计UI图呢

HarmonyOS 鸿蒙Next中UI设计的时候应该按多少px设计UI图呢 UI设计的时候 应该按多少px设计UI图呢，我们目前按照1112*1248 px设计出来的UI图，图上文字大小是16，跑到设备上，会明显比UI图文字更大

3 回复

鸿蒙的UI设计稿一般以vp为基准数据单位。vp屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。例如，在实际宽度为1440物理像素的屏幕上，1vp约等于3px。

至于px如何转化为vp、fp,参考文档如下： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5

鸿蒙有封装好的vp与px的转换api：px2vp/vp2px： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-arkui-uicontext-V13#vp2px12

折叠屏UX设计开发参考指南： https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-foldable-guilde-V5#section18249030173411

折叠屏的vp*vp 由于没有双折叠的测试机没法计算、 但是正常情况下vp具体计算公式为：vp= px/（DPI/160）

px就是屏幕真实物理像素值，densityPixels是屏幕密度，是和标准DPI的比例，常见取值有0.75，1.0，1.5，2.0，3.0等，在HarmonyOS中，标准DPI为160，以华为mate 40 pro为例，查询得到的densityPixels=3.5，densityDPI=560。densityDPI就是我们通常所说的系统屏幕密度，densityPixels就是屏幕密度和标准dpi(160)的比率。

由于没有折叠屏 如果想要查看真机的dpi，可以调用屏幕属性中的display接口查询。

import { display } from '@kit.ArkUI';

let displayClass: display.Display | null = null;

try {
  displayClass = display.getDefaultDisplaySync();
} catch (exception) {
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}

vp计算： https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-129-V5

折叠屏的UI设计 或会涉及到栅格 相关参考如下

折叠栅格指南： https://developer.huawei.com/consumer/cn/doc/design-guides-V1/foldable-0000001198373795-V1

栅格布局指南： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-layout-development-grid-layout-V13

请参考：手机（默认竖屏）：360*780vp

折叠机（默认展开竖屏）：692*780vp

平板（默认横屏）：1280*800vp

为了在具体设备上设计更精确的效果，亦可使用与该设备相同的分辨率尺寸。

目前内测阶段（1月）的机型信息，屏幕尺寸、dp值确认 为以下：

手机：mate60（2688×1216px），mate60 pro（2720 × 1260px），dpi=560

折叠机：mate X5（2496×2224px），dpi=520

平板：2560x1600px, dpi=320

更多关于HarmonyOS 鸿蒙Next中UI设计的时候应该按多少px设计UI图呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中进行UI设计时，建议按照设备独立像素（dp）进行设计，而不是直接使用物理像素（px）。鸿蒙系统采用HSP（HarmonyOS Screen Pixel）作为屏幕适配单位，1HSP在160dpi的屏幕上等于1px。设计时应根据设备的屏幕密度进行换算，确保在不同分辨率设备上显示效果一致。通常，UI设计工具中可以直接设置单位为HSP，便于直接适配鸿蒙系统。

在HarmonyOS 鸿蒙Next中进行UI设计时，建议遵循以下原则：

  1. 设计基准：以1080x1920px为标准尺寸进行设计，这是目前主流的手机屏幕分辨率。

  2. 适配方案：使用dp（Density-independent Pixels）作为单位，确保在不同屏幕密度下UI元素的比例和清晰度一致。

  3. 图标和字体：图标和字体尺寸应使用sp（Scale-independent Pixels），以便根据用户设置的字体大小自动调整。

  4. 多设备适配：考虑到HarmonyOS的多设备特性，设计时应考虑不同设备的屏幕尺寸和分辨率，使用自适应布局和弹性网格系统。

  5. 工具支持：使用支持HarmonyOS的设计工具，如ArkUI，可以帮助更高效地进行UI设计和适配。

遵循这些原则，可以确保在不同设备上提供一致且良好的用户体验。

回到顶部