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