HarmonyOS中建議的通用間隔參數
我比較喜歡做一些總結性的工作,總覺得這樣做會更容易收獲知識,融會貫通,再來總結下HarmonyOS中建議的通用間隔參數。
目前官方只給出了穿戴設備(手表)和智慧屏上的建議通用間隔參數設置,強烈建議也發布一下在手機上的通用間隔參數。此時,充當下官方文檔相關內容的整理和搬運工。
1. 穿戴設備上的通用間隔參數,涉及的主要元素有文本的邊距,控件之間的上下左右間距,文本的間距, 段落的間距等。
- (1)屏幕邊緣間隔
屏幕上下左右邊距
邊距3:26vp(智能穿戴)/54px(輕量級智能穿戴)
邊距4:26vp(智能穿戴)/54px(輕量級智能穿戴)
邊距5:20vp(智能穿戴)/38px(輕量級智能穿戴)
邊距7:40vp(智能穿戴)/60px(輕量級智能穿戴)
屏幕底邊距
邊距6:36vp(智能穿戴)/60px(輕量級智能穿戴)
屏幕左右邊距
邊距3:26vp(智能穿戴)/54px(輕量級智能穿戴)
邊距4:26vp(智能穿戴)/54px(輕量級智能穿戴)
邊距6:36vp(智能穿戴)/60px(輕量級智能穿戴)
邊距7:40vp(智能穿戴)/60px(輕量級智能穿戴)
彈出框邊距
邊距7:40vp(智能穿戴)/90px(輕量級智能穿戴)
邊距8:40vp(智能穿戴)/90px(輕量級智能穿戴)
邊距9:20vp(智能穿戴)/60px(輕量級智能穿戴)
- (2)控件間隔
間距1:8vp(智能穿戴)
(輕量級智能表穿戴設備不支持)
間距5:26vp(智能穿戴)/30px(輕量級智能穿戴)
間距3:6vp(智能穿戴)/30px(輕量級智能穿戴)
間距3:6vp(智能穿戴)/30px(輕量級智能穿戴)
間距4:12vp(智能穿戴)/20px(輕量級智能穿戴)
間距4:12vp(智能穿戴)/20px(輕量級智能穿戴)
- (3)文本間隔
行距1:16vp (智能穿戴)/30px(輕量級智能穿戴)
行距3:6vp(智能穿戴)/8px(輕量級智能穿戴)
行距2:12vp(智能穿戴)/20px(輕量級智能穿戴)
字距1:2vp(智能穿戴)/4px(輕量級智能穿戴)
字距2:2vp(智能穿戴)/4px(輕量級智能穿戴)
2. 智慧屏上的通用間隔參數。智慧屏可視面積比較大,更要注意在整體視覺效果上的統一。
文本間距展示范例:
上下間距展示范例:
左右間距展示范例:
安全布局邊距
通過格柵系統定義的網格相關邊距
智慧屏提供的基礎柵格為:margin = 48vp,gutter = 24vp,column = 12。
使用宮格有利于開發者組織界面,特別是對于內容型界面,可以高效的展示更多內容以供用戶選擇。
- 2宮格布局
- 3宮格布局
- 4宮格布局
- 6宮格布局
- 8宮格布局
- Logo圖標尺寸設計
圖標設計需要具有醒目的單個中心點,且它能立刻吸引用戶注意和清楚地標識品牌風格。避免應用圖標的背景雜亂無章,只需要給圖標一個簡單的背景,以便突出圖標的核心視覺。切記,不要設計過于飽滿的圖案填充在整個應用圖標的區域中,保證整體的留白、呼吸感與比例均衡。顏色與圖形是映入用戶眼簾的第一元素。在顏色的使用上盡量避免大面積灰度的顏色。系統將使用一個自動將圖標角變圓的蒙版,因此,在上傳應用圖標時,切記務必不要將圖標進行圓角處理。
logo尺寸均為 496*280px,保存為 png 格式。以相機圖標為例。
完整圖標:
圖標前景:
圖標背景:
摘自官方文檔:
https://developer.harmonyos.com/cn/docs/design/des-guides/interval-parameter-0000001052899771
https://developer.harmonyos.com/cn/docs/design/des-guides/visual-spacing-0000001052807852