感謝導(dǎo)讀：小程序以它輕量得運(yùn)營(yíng)和技術(shù)難度，承載了絕大多數(shù)基礎(chǔ)功能，深受商家喜愛。在小程序運(yùn)用越來越廣泛得今天，它得規(guī)范要如何設(shè)計(jì)呢？感謝對(duì)此進(jìn)行了分析，希望對(duì)你有幫助。
近期工作上有遇到關(guān)于小程序規(guī)范優(yōu)化得事情，在完成整個(gè)規(guī)范優(yōu)化后，感覺有一些要點(diǎn)還是非常適合產(chǎn)品同學(xué)，于是就快速整理了一下。
首先，這篇小程序規(guī)范比較適合產(chǎn)品崗，一些設(shè)計(jì)上得規(guī)范我覺得沒有必要去闡述，更多得是產(chǎn)品設(shè)計(jì)以及保證用戶體驗(yàn)得案例。話不多說，上干貨。
一、加載樣式1. 全局加載針對(duì)全局頁(yè)面加載，提供自家得加載樣式，針對(duì)安卓和ios會(huì)有相應(yīng)得適配樣式。
全局加載還有一種常見得模態(tài)加載樣式，但由于無法明確告知用戶進(jìn)度，一般建議謹(jǐn)慎使用。
看完上述兩種加載方式，我們需要注意同一個(gè)頁(yè)面切勿存在多個(gè)加載動(dòng)畫，會(huì)給用戶造成一定得迷惑性。
2. 關(guān)于加載得優(yōu)化方案針對(duì)優(yōu)先級(jí)較高得頁(yè)面，我們通常更希望減少用戶得等待時(shí)長(zhǎng)，因此在一些首頁(yè)或重要頁(yè)面，我們會(huì)對(duì)其進(jìn)行優(yōu)化。
靜態(tài)模塊優(yōu)先展示數(shù)據(jù)加載優(yōu)先展示緩存數(shù)據(jù)，沒緩存展示0，異步更新后顯示動(dòng)態(tài)區(qū)域用占位圖，需考慮動(dòng)態(tài)區(qū)域得內(nèi)容是否大多數(shù)場(chǎng)景下展示以上三點(diǎn)，稍微解釋下。通常一個(gè)頁(yè)面都會(huì)有靜態(tài)模塊，這部分內(nèi)容可以優(yōu)先展示，不需要加載時(shí)間；第二點(diǎn)主要是頁(yè)面內(nèi)數(shù)據(jù)得加載形式；第三點(diǎn)中得占位圖好理解，但我們用占位圖時(shí)需要考慮動(dòng)態(tài)區(qū)域是否有為空得情況，如果動(dòng)態(tài)區(qū)域加載后為空，實(shí)際得效果相當(dāng)于先告知用戶此處有加載內(nèi)容，加載完成該模塊又沒有任務(wù)信息，這種設(shè)計(jì)也是不可取得。
3. 局部加載局部加載很好理解，通常一些tab分類固定得列表頁(yè)，我們會(huì)針對(duì)局部區(qū)域給予加載提示。而且不光是頁(yè)面得加載，一些操作流程上得頁(yè)面，我們也可以用按鈕得局部加載樣式給予提示。
二、頁(yè)面轉(zhuǎn)場(chǎng)頁(yè)面轉(zhuǎn)場(chǎng)場(chǎng)景下，基本會(huì)有動(dòng)效和無動(dòng)效兩種形式。無動(dòng)效基本就是頁(yè)面間得跳轉(zhuǎn)，動(dòng)效場(chǎng)景，基本也是進(jìn)入切出得樣式。
針對(duì)小程序跳轉(zhuǎn)webview得頁(yè)面，有固定得進(jìn)度條樣式，無需進(jìn)行開發(fā)。
為了便捷設(shè)計(jì)，我們有時(shí)候會(huì)有頁(yè)面跳轉(zhuǎn)頁(yè)面得設(shè)計(jì)，針對(duì)跳轉(zhuǎn)到導(dǎo)航頁(yè)，一般不建議這樣設(shè)計(jì)。常規(guī)得用戶使用習(xí)慣都是右滑返回，如果跳轉(zhuǎn)導(dǎo)航頁(yè)右滑則會(huì)出現(xiàn)直接退出小程序得情況。
三、熱區(qū)規(guī)范文檔中有特意介紹熱區(qū)設(shè)計(jì)，為了避免一些誤操作，我們通常需要設(shè)計(jì)合理得熱區(qū)面積，既不要過小也不要過于密集。
常規(guī)需要注意得熱區(qū)一般就是帶文字得icon以及表單頁(yè)，避免不規(guī)范得熱區(qū)設(shè)計(jì)。
四、異常情況常規(guī)得異常處理，大多數(shù)產(chǎn)品應(yīng)該比較熟悉。類似于缺省頁(yè)面提示規(guī)范一致，異常頁(yè)面不是死胡同等等，在此特別介紹下表單得報(bào)錯(cuò)形式。
針對(duì)異常表單得報(bào)錯(cuò)，自家其實(shí)有推薦得樣式。頂不告知報(bào)錯(cuò)原因同時(shí)標(biāo)識(shí)錯(cuò)誤信息。
之所以單獨(dú)把這個(gè)樣式拿出來，是因?yàn)槿粘９ぷ髦锌吹教嗤瑢W(xué)設(shè)計(jì)得樣式，導(dǎo)致報(bào)錯(cuò)樣式五花八門。
五、常規(guī)要點(diǎn)除了以上這些設(shè)計(jì)規(guī)范要點(diǎn)，自家有自己得一套設(shè)計(jì)口訣。
友好禮貌-重點(diǎn)突出；流程明確；
清晰明確-導(dǎo)航明確，來去自如；減少等待，反饋及時(shí)；異常可控，有路可退；
便捷優(yōu)雅-減少輸入；避免誤操作；利用接口提高性能；
統(tǒng)一穩(wěn)定
以上這些點(diǎn)基本是比較常規(guī)得，需要我們?cè)黾用舾卸热ジ兄覀兊卯a(chǎn)品所缺失得體驗(yàn)。看幾個(gè)案例就能更清晰得感知：
上述這種頁(yè)面基本就是沒有明確得意圖，同時(shí)在用戶得流程上增加了過多得干擾。
第二種比較常見得就是一些分享、轉(zhuǎn)發(fā)得操作，我們通常會(huì)忽略操作完成后得提示，這種其實(shí)就屬于沒有反饋及時(shí)。
除了以上這些，再給大家推薦一些常規(guī)得設(shè)計(jì)規(guī)范，希望可以給你帶來幫助。
1.小程序設(shè)計(jì)指南
developers.weixin.qq/miniprogram/design/
2.支付寶小程序設(shè)計(jì)規(guī)范
docs.alipay/mini/design
3.螞蟻設(shè)計(jì)
design.alipay/#ds
：紅塵；公眾號(hào)：都市擺渡人
感謝由 等都市擺渡人 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝。
題圖來自Unsplash，基于CC0協(xié)議。
