HarmonyOS中建議的通用間隔參數(shù)

作者：statLWW 2021-06-03 09:36:38

文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com

https://harmonyos.51cto.com

我比較喜歡做一些總結(jié)性的工作，總覺(jué)得這樣做會(huì)更容易收獲知識(shí)，融會(huì)貫通，再來(lái)總結(jié)下HarmonyOS中建議的通用間隔參數(shù)。

目前官方只給出了穿戴設(shè)備(手表)和智慧屏上的建議通用間隔參數(shù)設(shè)置，強(qiáng)烈建議也發(fā)布一下在手機(jī)上的通用間隔參數(shù)。此時(shí)，充當(dāng)下官方文檔相關(guān)內(nèi)容的整理和搬運(yùn)工。

1. 穿戴設(shè)備上的通用間隔參數(shù)，涉及的主要元素有文本的邊距，控件之間的上下左右間距，文本的間距，段落的間距等。

- (1)屏幕邊緣間隔

屏幕上下左右邊距

邊距3：26vp(智能穿戴)/54px(輕量級(jí)智能穿戴)

邊距4：26vp(智能穿戴)/54px(輕量級(jí)智能穿戴)

邊距5：20vp(智能穿戴)/38px(輕量級(jí)智能穿戴)

邊距7：40vp(智能穿戴)/60px(輕量級(jí)智能穿戴)

屏幕底邊距

邊距6：36vp(智能穿戴)/60px(輕量級(jí)智能穿戴)

屏幕左右邊距

邊距3：26vp(智能穿戴)/54px(輕量級(jí)智能穿戴)

邊距4：26vp(智能穿戴)/54px(輕量級(jí)智能穿戴)

邊距6：36vp(智能穿戴)/60px(輕量級(jí)智能穿戴)

邊距7：40vp(智能穿戴)/60px(輕量級(jí)智能穿戴)

彈出框邊距

邊距7：40vp(智能穿戴)/90px(輕量級(jí)智能穿戴)

邊距8：40vp(智能穿戴)/90px(輕量級(jí)智能穿戴)

邊距9：20vp(智能穿戴)/60px(輕量級(jí)智能穿戴)

- (2)控件間隔

間距1：8vp(智能穿戴)

(輕量級(jí)智能表穿戴設(shè)備不支持)

間距5：26vp(智能穿戴)/30px(輕量級(jí)智能穿戴)

間距3：6vp(智能穿戴)/30px(輕量級(jí)智能穿戴)

間距4：12vp(智能穿戴)/20px(輕量級(jí)智能穿戴)

- (3)文本間隔

行距1：16vp (智能穿戴)/30px(輕量級(jí)智能穿戴)

行距3：6vp(智能穿戴)/8px(輕量級(jí)智能穿戴)

行距2：12vp(智能穿戴)/20px(輕量級(jí)智能穿戴)

字距1：2vp(智能穿戴)/4px(輕量級(jí)智能穿戴)

字距2：2vp(智能穿戴)/4px(輕量級(jí)智能穿戴)

2. 智慧屏上的通用間隔參數(shù)。智慧屏可視面積比較大，更要注意在整體視覺(jué)效果上的統(tǒng)一。

文本間距展示范例：

上下間距展示范例：

左右間距展示范例：

安全布局邊距

通過(guò)格柵系統(tǒng)定義的網(wǎng)格相關(guān)邊距

智慧屏提供的基礎(chǔ)柵格為：margin = 48vp，gutter = 24vp，column = 12。

使用宮格有利于開(kāi)發(fā)者組織界面，特別是對(duì)于內(nèi)容型界面，可以高效的展示更多內(nèi)容以供用戶選擇。

- 2宮格布局

- 3宮格布局

- 4宮格布局

- 6宮格布局

- 8宮格布局

- Logo圖標(biāo)尺寸設(shè)計(jì)

圖標(biāo)設(shè)計(jì)需要具有醒目的單個(gè)中心點(diǎn)，且它能立刻吸引用戶注意和清楚地標(biāo)識(shí)品牌風(fēng)格。避免應(yīng)用圖標(biāo)的背景雜亂無(wú)章，只需要給圖標(biāo)一個(gè)簡(jiǎn)單的背景，以便突出圖標(biāo)的核心視覺(jué)。切記，不要設(shè)計(jì)過(guò)于飽滿的圖案填充在整個(gè)應(yīng)用圖標(biāo)的區(qū)域中，保證整體的留白、呼吸感與比例均衡。顏色與圖形是映入用戶眼簾的第一元素。在顏色的使用上盡量避免大面積灰度的顏色。系統(tǒng)將使用一個(gè)自動(dòng)將圖標(biāo)角變圓的蒙版，因此，在上傳應(yīng)用圖標(biāo)時(shí)，切記務(wù)必不要將圖標(biāo)進(jìn)行圓角處理。

logo尺寸均為 496*280px，保存為 png 格式。以相機(jī)圖標(biāo)為例。

完整圖標(biāo)：