HarmonyOS鸿蒙Next中桌面小卡片小组件ui设计应该设计多大尺寸的？
HarmonyOS鸿蒙Next中桌面小卡片小组件ui设计应该设计多大尺寸的？
比如22的卡片，ui设计图应该是多少像素多少像素的
2*4的卡片，设计图又要给多大的
ui那边需要具体的尺寸，我怎么给呢
开发者您好，您可参考官网文档尺寸与基础参数来设计卡片尺寸。
尺寸与基础参数中提供的卡片尺寸是设计的标准画板（方便设计师使用一个尺寸画图），实际真机卡片尺寸各不相同。由于不同真机（直板机/阔折叠/折叠屏等）设备尺寸的不确定性会导致卡片的尺寸发生变化，设计师在交付卡片布局的过程中，推荐采用使用百分比进行标注。
更多关于HarmonyOS鸿蒙Next中桌面小卡片小组件ui设计应该设计多大尺寸的？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
鸿蒙Next桌面卡片尺寸遵循固定规范：1x2卡片尺寸为155px155px，2x2为335px155px，2x4为335px*357px。所有尺寸均基于vp虚拟像素单位，需按屏幕密度适配。设计时需使用官方设计资源，确保布局与系统标准对齐。
在HarmonyOS Next中，桌面卡片（服务卡片）的尺寸单位是vp（虚拟像素），设计时应以此为单位进行标注。开发时，系统会根据屏幕密度自动适配为物理像素（px）。
核心原则是：1个网格单元格代表 1vp * 1vp。卡片尺寸由占用的网格数量决定。
给你的UI设计师的具体尺寸规范（设计图以vp为单位交付即可）：
-
基础网格单元：
- 桌面卡片遵循 2x4 的网格系统。这意味着一个标准桌面图标（或1x1卡片）的推荐点击区域是 2x4 个网格。
- 但卡片本身的内容区域尺寸是基于 1x1 的网格单元计算的。
-
卡片尺寸（内容区域）计算公式：
- 卡片宽度（vp）= 列数（N） * 单个网格宽度（1vp）
- 卡片高度（vp）= 行数（M） * 单个网格高度（1vp）
- 注意：这里的“列数”和“行数”指的是卡片声明时
dimension的columns和rows。例如2*2卡片，columns=2,rows=2。
-
具体答案（设计图尺寸）：
- 2*2卡片：设计稿尺寸应为 2vp * 2vp。
- 2*4卡片：设计稿尺寸应为 2vp * 4vp。
- 其他尺寸依此类推：
N*M卡片的UI设计图尺寸就是 Nvp * Mvp。
-
给UI设计师的关键说明：
- 在设计工具（如Figma、Sketch）中，直接按此vp值建立画板或设计区域。例如，设计2x4卡片，就创建一个宽2vp、高4vp的画板。
- 无需也无法预先换算为物理像素（px），因为1vp在不同密度的屏幕上对应的px值不同（例如，在160dpi屏幕上，1vp=1px；在320dpi屏幕上，1vp=2px）。换算由开发者在编码时通过系统API自动完成。
- 设计师需要确保在这个 Nvp * Mvp 的内容区域内完成所有视觉元素的设计。系统会为卡片添加默认的边框和投影，设计时无需考虑。
- 可以提供 @1x（即1倍图，以vp为尺寸单位）的设计稿和切图资源，标注好尺寸（vp）。或者提供按官方规范（通常基于360dpi或480dpi等基准屏幕）缩放后的多倍图资源包。
总结：
直接告知UI设计师，HarmonyOS Next的桌面卡片采用网格系统，设计尺寸与卡片占用的网格数数值相等，单位用vp。2*2卡片的设计图是2x2vp，2*4卡片的设计图是2x4vp。他们只需在1倍图（@1x）环境下，使用vp作为单位进行设计即可。
