前不久做了一個微信小程序的項(xiàng)目，總結(jié)了一些小程序的設(shè)計規(guī)范，如果對小程序不夠了解就開始設(shè)計，設(shè)計完程序小哥肯定就要暴走了~，為了挽留程序小哥，我吐血整理了這篇設(shè)計規(guī)范，還給大家準(zhǔn)備了新版小程序控件（一定要看到底哦~）。

本篇綱要：

1. 小程序尺寸
2. 官方小程序菜單
3. 標(biāo)題導(dǎo)航欄設(shè)計（Title bar）
4. 標(biāo)簽分頁導(dǎo)航設(shè)計（Tab bar）
5. 內(nèi)容設(shè)計
6. 加載樣式
7. 全局操作反饋

一、小程序尺寸

小程序開發(fā)尺寸是rpx（responsive pixel），可以實(shí)現(xiàn)一稿適配所有屏幕尺寸，小程序編譯后，rpx會做一次px換算。換算是以375個物理像素為基準(zhǔn)，也就是在一個寬度為375物理像素的屏幕下，1rpx = 1px。這里了解就行，設(shè)計稿尺寸375px或750px都沒問題。

二、官方小程序菜單

a. 全局性的，不可自定義，位置固定

官方小程序菜單位于所有界面（包括小程序內(nèi)嵌的網(wǎng)頁和插件），且位置固定，開發(fā)者不可對其內(nèi)容進(jìn)行自定義，只能選擇深淺兩種配色方案，設(shè)計時要預(yù)留出該位置區(qū)域，若要在小程序菜單附近放置可交互元素，要注意與小程序菜單不沖突，可識別，易操作。

b. 常見的三種狀態(tài)

小程序菜單常見的三種狀態(tài)：全局菜單、調(diào)用錄音、獲取地理位置。

三、標(biāo)題導(dǎo)航欄設(shè)計（Title bar）

標(biāo)題導(dǎo)航樣式設(shè)計時要與微信小程序菜單樣式保持一定差異性，便于區(qū)分。另外標(biāo)題導(dǎo)航的背景可以自定義背景顏色或圖片（這里注意給開發(fā)小哥時需要把圖切出來），還可以設(shè)置不透明度，是不是很帥。

二級頁面要設(shè)計有返回鍵，要讓用戶知道自己在哪，怎么回去。如果頁面層級太多有個一鍵返回首頁按鈕在體驗(yàn)上會友好很多，如知乎二級頁面。

四、標(biāo)簽分頁導(dǎo)航設(shè)計（Tab bar）

標(biāo)簽分頁導(dǎo)航分為：頂部標(biāo)簽導(dǎo)航和底部標(biāo)簽導(dǎo)航，官方建議標(biāo)簽數(shù)量為2-5個。不過對頂部導(dǎo)航來說關(guān)系不大可以根據(jù)具體項(xiàng)目需要來設(shè)計，底部導(dǎo)航最好還是按照規(guī)范來。

a. 頂部標(biāo)簽導(dǎo)航

頂部標(biāo)簽導(dǎo)航可以自定義顏色和樣式，可以點(diǎn)擊也支持沿X軸滑動，也就是說點(diǎn)擊不是頂部標(biāo)簽欄唯一的交互方式。

b. 底部標(biāo)簽導(dǎo)航

底部標(biāo)簽導(dǎo)航提供了四種不同圖形的設(shè)計規(guī)范，滿足了圓形、方形、高矩形和寬矩形四種形狀類型。根據(jù)規(guī)范設(shè)計可以更方便進(jìn)行視覺修正，保持圖標(biāo)的統(tǒng)一性。數(shù)量上3-4個最常見?；蛘咧苯尤サ舻撞繕?biāo)簽導(dǎo)航，如微信讀書、36氪。

五、內(nèi)容設(shè)計

內(nèi)容部分和app設(shè)計差不多，app設(shè)計規(guī)范在這里也適用。

要點(diǎn)：

a. 小程序彈窗優(yōu)先級并不是最高的

官方小程序菜單的層級優(yōu)先級是最高的。即使在app中優(yōu)先級最高的彈窗到這里層級也得在小程序菜單之下，即便沉浸式體驗(yàn)也不例外。而且標(biāo)題欄和底部標(biāo)簽欄優(yōu)先級也是在彈窗之上的。

b. 視頻位置

小程序內(nèi)視頻是固定位置浮動的，滑動頁面視頻不會沿Y軸移動，如優(yōu)酷視頻。不過也有技術(shù)比較厲害的突破了這一限制支持視頻Y軸滑動，如騰訊視頻、愛奇藝。測試了六款主流視頻app，全都是固定位置。所以，實(shí)在不好搞就不要難為程序小哥了。

六、加載樣式

要點(diǎn)：

1. 若載入時間較長,應(yīng)提供取消操作,并使用進(jìn)度條顯示載入的進(jìn)度。
2. 載入過程中,應(yīng)保持動畫效果 ; 無動畫效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯覺。
3. 不要在同一個頁面同時使用超過1個加載動畫。
4. 模態(tài)的加載樣式將覆蓋整個頁面的，由于無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感，應(yīng)謹(jǐn)慎使用。
5. “頁面內(nèi)加載反饋”可以自定義，其余加載樣式微信提供統(tǒng)一標(biāo)準(zhǔn)，無需自行開發(fā)。

七、全局操作結(jié)果反饋

要點(diǎn)：

1. 圖標(biāo)型彈出提示適用于輕量級的成功提示，1.5秒后自動消失，并不打斷流程，對用戶影響較小，適用于不需要強(qiáng)調(diào)的操作提醒，例如成功提示。
2. 文字型彈出提示適用于需要輕量化地用文字解釋當(dāng)前狀態(tài)或提醒不嚴(yán)重的錯誤。1.5秒后自動消失，不打斷流程，對用戶影響較小。
3. 對于需要用戶明確知曉的操作結(jié)果狀態(tài)可通過模態(tài)對話框來提示，并可附帶下一步操作指引。
4. 對于操作結(jié)果已經(jīng)是當(dāng)前流程的終結(jié)的情況，可使用操作結(jié)果頁來反饋。

全文總結(jié)

a. 不可修改部分：

1. 官方小程序菜單（含有三種狀態(tài)）
2. 小程序加載樣式（除“頁面內(nèi)加載反饋"）

b. 可修改部分概要

1. 標(biāo)題導(dǎo)航欄（Title bar）可以自定義背景，二級頁面要有返回鍵
2. 標(biāo)簽分頁導(dǎo)航（Tab bar）：頂部標(biāo)簽導(dǎo)航交互方式不唯一，底部標(biāo)簽導(dǎo)航個數(shù)控制在2-5個，或可完全去除。
3. 官方小程序菜單層級優(yōu)先級最高，標(biāo)題欄和標(biāo)簽欄優(yōu)先級高于彈窗。
4. 視頻位置固定，可更改，但技術(shù)要求較高。
5. 頁面內(nèi)加載反饋可自定義。

熟悉了這些設(shè)計規(guī)范，相信你對小程序設(shè)計已經(jīng)胸有成竹了。