HarmonyOS中建议的通用间隔参数
头像 宋你一朵小红花 2021-05-31 23:00:02    发布
3121 浏览 14 点赞 24 收藏

我比较喜欢做一些总结性的工作,总觉得这样做会更容易收获知识,融会贯通,再来总结下HarmonyOS中建议的通用间隔参数。
目前官方只给出了穿戴设备(手表)和智慧屏上的建议通用间隔参数设置,强烈建议也发布一下在手机上的通用间隔参数。此时,充当下官方文档相关内容的整理和搬运工。
  1. 穿戴设备上的通用间隔参数,涉及的主要元素有文本的边距,控件之间的上下左右间距,文本的间距, 段落的间距等。
  - (1)屏幕边缘间隔

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


屏幕上下左右边距
边距3:26vp(智能穿戴)/54px(轻量级智能穿戴)
边距4:26vp(智能穿戴)/54px(轻量级智能穿戴)
边距5:20vp(智能穿戴)/38px(轻量级智能穿戴)
边距7:40vp(智能穿戴)/60px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


屏幕底边距
边距6:36vp(智能穿戴)/60px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


屏幕左右边距
边距3:26vp(智能穿戴)/54px(轻量级智能穿戴)
边距4:26vp(智能穿戴)/54px(轻量级智能穿戴)
边距6:36vp(智能穿戴)/60px(轻量级智能穿戴)
边距7:40vp(智能穿戴)/60px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


弹出框边距
边距7:40vp(智能穿戴)/90px(轻量级智能穿戴)
边距8:40vp(智能穿戴)/90px(轻量级智能穿戴)
边距9:20vp(智能穿戴)/60px(轻量级智能穿戴)

  - (2)控件间隔

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


间距1:8vp(智能穿戴)
(轻量级智能表穿戴设备不支持)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


间距5:26vp(智能穿戴)/30px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


间距3:6vp(智能穿戴)/30px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


间距3:6vp(智能穿戴)/30px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


间距4:12vp(智能穿戴)/20px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


间距4:12vp(智能穿戴)/20px(轻量级智能穿戴)

  - (3)文本间隔

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


行距1:16vp (智能穿戴)/30px(轻量级智能穿戴)
行距3:6vp(智能穿戴)/8px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


行距2:12vp(智能穿戴)/20px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


字距1:2vp(智能穿戴)/4px(轻量级智能穿戴)

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区


字距2:2vp(智能穿戴)/4px(轻量级智能穿戴)

  2. 智慧屏上的通用间隔参数。智慧屏可视面积比较大,更要注意在整体视觉效果上的统一。

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
文本间距展示范例:

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
上下间距展示范例:

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
左右间距展示范例:

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
安全布局边距

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
通过格栅系统定义的网格相关边距
智慧屏提供的基础栅格为:margin = 48vp,gutter = 24vp,column = 12。

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  使用宫格有利于开发者组织界面,特别是对于内容型界面,可以高效的展示更多内容以供用户选择。
  - 2宫格布局

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  - 3宫格布局

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  - 4宫格布局

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  - 6宫格布局

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  - 8宫格布局

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  - Logo图标尺寸设计

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
  图标设计需要具有醒目的单个中心点,且它能立刻吸引用户注意和清楚地标识品牌风格。避免应用图标的背景杂乱无章,只需要给图标一个简单的背景,以便突出图标的核心视觉。切记,不要设计过于饱满的图案填充在整个应用图标的区域中,保证整体的留白、呼吸感与比例均衡。颜色与图形是映入用户眼帘的第一元素。在颜色的使用上尽量避免大面积灰度的颜色。系统将使用一个自动将图标角变圆的蒙版,因此,在上传应用图标时,切记务必不要将图标进行圆角处理。
  logo尺寸均为 496*280px,保存为 png 格式。以相机图标为例。
完整图标:

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
图标前景:

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区
图标背景:

HarmonyOS中建议的通用间隔参数-鸿蒙开发者社区






摘自官方文档:
https://developer.harmonyos.com/cn/docs/design/des-guides/interval-parameter-0000001052899771
https://developer.harmonyos.com/cn/docs/design/des-guides/visual-spacing-0000001052807852

©本站发布的所有内容,包括但不限于文字、图片、音频、视频、图表、标志、标识、广告、商标、商号、域名、软件、程序等,除特别标明外,均来源于网络或用户投稿,版权归原作者或原出处所有。我们致力于保护原作者版权,若涉及版权问题,请及时联系我们进行处理。
分类
其它
地址:北京市朝阳区北三环东路三元桥曙光西里甲1号第三置业A座1508室 商务内容合作QQ:2291221 电话:13391790444或(010)62178877
版权所有:电脑商情信息服务集团 北京赢邦策略咨询有限责任公司
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,我司致力于保护作者版权,如有侵权,请与我司联系删除
京ICP备:2022009079号-2
京公网安备:11010502051901号
ICP证:京B2-20230255