小程序規(guī)范怎么設(shè)計(jì)?干貨整理看這里
編輯導(dǎo)讀:小程序以它輕量的運(yùn)營和技術(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ì)全局頁面加載,微信提供官方的加載樣式,針對(duì)安卓和ios會(huì)有相應(yīng)的適配樣式。
全局加載還有一種常見的模態(tài)加載樣式,但由于無法明確告知用戶進(jìn)度,一般建議謹(jǐn)慎使用。
看完上述兩種加載方式,我們需要注意同一個(gè)頁面切勿存在多個(gè)加載動(dòng)畫,會(huì)給用戶造成一定的迷惑性。
2. 關(guān)于加載的優(yōu)化方案
針對(duì)優(yōu)先級(jí)較高的頁面,我們通常更希望減少用戶的等待時(shí)長,因此在一些首頁或重要頁面,我們會(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ù)場景下展示
以上三點(diǎn),稍微解釋下。通常一個(gè)頁面都會(huì)有靜態(tài)模塊,這部分內(nèi)容可以優(yōu)先展示,不需要加載時(shí)間;第二點(diǎn)主要是頁面內(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分類固定的列表頁,我們會(huì)針對(duì)局部區(qū)域給予加載提示。而且不光是頁面的加載,一些操作流程上的頁面,我們也可以用按鈕的局部加載樣式給予提示。
二、頁面轉(zhuǎn)場
頁面轉(zhuǎn)場場景下,基本會(huì)有動(dòng)效和無動(dòng)效兩種形式。無動(dòng)效基本就是頁面間的跳轉(zhuǎn),動(dòng)效場景,基本也是進(jìn)入切出的樣式。
針對(duì)小程序跳轉(zhuǎn)webview的頁面,微信有固定的進(jìn)度條樣式,無需進(jìn)行開發(fā)。
為了便捷設(shè)計(jì),我們有時(shí)候會(huì)有頁面跳轉(zhuǎn)頁面的設(shè)計(jì),針對(duì)跳轉(zhuǎn)到導(dǎo)航頁,一般不建議這樣設(shè)計(jì)。常規(guī)的用戶使用習(xí)慣都是右滑返回,如果跳轉(zhuǎn)導(dǎo)航頁右滑則會(huì)出現(xiàn)直接退出小程序的情況。
三、熱區(qū)點(diǎn)擊
微信規(guī)范文檔中有特意介紹熱區(qū)設(shè)計(jì),為了避免一些點(diǎn)擊誤操作,我們通常需要設(shè)計(jì)合理的熱區(qū)面積,既不要過小也不要過于密集。
常規(guī)需要注意的熱區(qū)一般就是帶文字的icon以及表單頁,避免不規(guī)范的熱區(qū)設(shè)計(jì)。
四、異常情況
常規(guī)的異常處理,大多數(shù)產(chǎn)品應(yīng)該比較熟悉。類似于缺省頁面提示規(guī)范一致,異常頁面不是死胡同等等,在此特別介紹下表單的報(bào)錯(cuò)形式。
針對(duì)異常表單的報(bào)錯(cuò),微信官方其實(shí)有推薦的樣式。頂不告知報(bào)錯(cuò)原因同時(shí)標(biāo)識(shí)錯(cuò)誤信息。
之所以單獨(dú)把這個(gè)樣式拿出來,是因?yàn)槿粘9ぷ髦锌吹教嗤瑢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è)案例就能更清晰的感知:
上述這種頁面基本就是沒有明確的意圖,同時(shí)在用戶的流程上增加了過多的干擾。
第二種比較常見的就是一些分享、轉(zhuǎn)發(fā)的操作,我們通常會(huì)忽略操作完成后的提示,這種其實(shí)就屬于沒有反饋及時(shí)。
除了以上這些,再給大家推薦一些常規(guī)的設(shè)計(jì)規(guī)范,希望可以給你帶來幫助。
1.微信小程序設(shè)計(jì)指南
https://developers.weixin.qq.com/miniprogram/design/
2.支付寶小程序設(shè)計(jì)規(guī)范
https://docs.alipay.com/mini/design
3.螞蟻設(shè)計(jì)
https://design.alipay.com/#ds
作者:紅塵;公眾號(hào):都市擺渡人
本文由 @都市擺渡人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評(píng)論,等你發(fā)揮!