編輯導(dǎo)語(yǔ)：如今微信小程序已經(jīng)用的非常頻繁了，很多平臺(tái)也都開(kāi)展了小程序板塊，小程序在一定程度上給用戶帶來(lái)了很多便利；對(duì)于小程序的設(shè)計(jì)，也一定要注意規(guī)范問(wèn)題，以免用戶體驗(yàn)不好；本文作者分享了關(guān)于小程序產(chǎn)品的設(shè)計(jì)規(guī)范，我們一起來(lái)了解一下。

無(wú)論從小程序上線時(shí)間上還是用戶規(guī)模上，小程序都不算是一個(gè)新的物種，但依然要秉著用戶最少的學(xué)習(xí)成本來(lái)達(dá)成產(chǎn)品目標(biāo)；近期體驗(yàn)過(guò)程中發(fā)現(xiàn)部分產(chǎn)品并沒(méi)有發(fā)揮小程序應(yīng)有的特性和能力，也有部分產(chǎn)品把小程序當(dāng)App一樣進(jìn)行產(chǎn)品設(shè)計(jì)；給用戶帶來(lái)不友好的體驗(yàn)，提煉了幾個(gè)出現(xiàn)頻率較高的事項(xiàng)和大家分享。

一、關(guān)于“添加到我的小程序”

（數(shù)據(jù)來(lái)自阿拉丁統(tǒng)計(jì)平臺(tái)）

在2020年小程序入口流量排行榜中排在Top1的就是微信消息下拉入口，流量占比達(dá)到21.54%，該場(chǎng)景值非常依賴用戶長(zhǎng)期打開(kāi)形成倒序排在最近使用小程序列表前列，或者用戶曾經(jīng)做過(guò)“添加到我的小程序”的操作；目前大多數(shù)用戶具備“添加到我的小程序”意識(shí)，但多數(shù)需要在恰當(dāng)?shù)膱?chǎng)景下給予不一樣的引導(dǎo)方式。

1. 引導(dǎo)方式分為“氣泡引導(dǎo)”和“蒙層引導(dǎo)”

氣泡引導(dǎo)是一種較為輕量級(jí)引導(dǎo)，展現(xiàn)形式指向小程序膠囊的菜單入口，氣泡引導(dǎo)優(yōu)勢(shì)在于不會(huì)打斷用戶行為，它應(yīng)在一定時(shí)間（建議5s）內(nèi)自動(dòng)消失，或提供關(guān)閉按鈕由用戶手動(dòng)關(guān)閉。

蒙層引導(dǎo)偏強(qiáng)制性引導(dǎo)，優(yōu)勢(shì)在于拆解添加步驟，流程較為清晰。缺點(diǎn)也在于蒙層引導(dǎo)能使用戶注意力聚焦在引導(dǎo)上，此時(shí)原頁(yè)面功能均無(wú)法使用；考慮到它會(huì)打斷用戶的任務(wù)路徑和沉浸式體驗(yàn)，引導(dǎo)次數(shù)不宜過(guò)多，且在恰當(dāng)?shù)臅r(shí)機(jī)再進(jìn)行引導(dǎo)。

2. 注意事項(xiàng)

不宜出現(xiàn)疊加引導(dǎo)，即同時(shí)出現(xiàn)2種引導(dǎo)，顯得冗余且會(huì)干擾，根據(jù)用戶屬性和偏好選擇恰當(dāng)?shù)囊龑?dǎo)方式或者在不同場(chǎng)景下出現(xiàn)不同引導(dǎo)。

勿利用激勵(lì)進(jìn)行誘導(dǎo)引導(dǎo)，從用戶價(jià)值導(dǎo)向來(lái)看，通過(guò)誘導(dǎo)產(chǎn)生的添加在后續(xù)產(chǎn)生的用戶價(jià)值是微乎其微的，因?yàn)槭菦_著獎(jiǎng)勵(lì)/獎(jiǎng)品來(lái)，而不是小程序本身提供的服務(wù)；除非是面向KPI來(lái)做產(chǎn)品和運(yùn)營(yíng)。同時(shí)也違反了小程序運(yùn)營(yíng)規(guī)范，遇到基本一個(gè)舉報(bào)一個(gè)準(zhǔn)。

不宜多次重復(fù)引導(dǎo)，對(duì)于已經(jīng)添加后的用戶引導(dǎo)氣泡/蒙層再次進(jìn)來(lái)無(wú)需提示，目前無(wú)法監(jiān)聽(tīng)用戶是否做過(guò)“添加到我的小程序”；但可以從打開(kāi)小程序的場(chǎng)景值中去判斷，即從微信下拉或發(fā)現(xiàn)-小程序-我的小程序中打開(kāi)可判斷引導(dǎo)添加不予提示，減少無(wú)關(guān)頁(yè)面元素避免對(duì)用戶產(chǎn)生干擾。

二、關(guān)于授權(quán)

用戶授權(quán)的成功與否，一定會(huì)影響后續(xù)用戶行為和產(chǎn)品提供服務(wù)質(zhì)量，好的授權(quán)方式應(yīng)該是很自然且充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上進(jìn)行授權(quán)引導(dǎo)，從授權(quán)類別上小程序總體可分為“賬號(hào)登錄授權(quán)”和“其它服務(wù)授權(quán)”

1. 登錄授權(quán)

大多數(shù)業(yè)務(wù)都需要登錄后才能感受到小程序?qū)嶋H價(jià)值，整體核心業(yè)務(wù)流程漏斗上，讓用戶登錄成功是第一個(gè)漏斗，現(xiàn)在小程序提供的登錄能力很強(qiáng)大，所以流程很簡(jiǎn)單，但觸發(fā)和交互方式不容輕視。

登錄授權(quán)觸發(fā)機(jī)制均為用戶自主觸發(fā)，觸發(fā)方式大體分為“全功能”觸發(fā)和“局部功能模塊”觸發(fā)。

全功能觸發(fā)即小程序頁(yè)面中的所有內(nèi)容均需要登錄才能瀏覽/操作，局部功能模塊觸發(fā)即小程序頁(yè)面中的部分內(nèi)容模塊，需要登錄才能瀏覽/操作。

針對(duì)“全局功能”觸發(fā)建議以傳遞小程序價(jià)值為主進(jìn)行引導(dǎo)授權(quán)，比如登錄后可使用訂閱服務(wù)，發(fā)布信息服務(wù)等小程序特性或功能點(diǎn)羅列。

針對(duì)“局部功能模塊”觸發(fā)建議以傳遞該模塊功能價(jià)值進(jìn)行引導(dǎo)授權(quán)，如登錄后可評(píng)論，登錄后可查看我的收藏；與“全局功能”觸發(fā)授權(quán)不一樣的是， “局部功能模塊”觸發(fā)的授權(quán)，可以由不同頁(yè)面模塊來(lái)傳遞不一樣的價(jià)值來(lái)引導(dǎo)授權(quán)登錄。

2. 授權(quán)形式

授權(quán)形式大體分為兩種，一種是“頁(yè)面內(nèi)”觸發(fā)授權(quán)，另一種是跳轉(zhuǎn)至授權(quán)中間頁(yè)授權(quán)。

“頁(yè)面內(nèi)”觸發(fā)授權(quán)按鈕，只需要一步就觸發(fā)授權(quán)請(qǐng)求，比較合適于“局部功能模塊”觸發(fā)的授權(quán)形式。

跳轉(zhuǎn)至授權(quán)中間頁(yè)統(tǒng)一多場(chǎng)景的登錄體驗(yàn)，更大設(shè)計(jì)空間，比較合適于“全局功能”觸發(fā)的授權(quán)形式。

3. 其它能力授權(quán)

其它能力授權(quán)包含常見(jiàn)的地理位置、相機(jī)、相冊(cè)等能力， 這類授權(quán)機(jī)制推薦用戶自主觸發(fā)授權(quán)；雖然可以做成自動(dòng)觸發(fā)授權(quán)，大多數(shù)用戶對(duì)這些授權(quán)都非常敏感，只有在真正需要使用授權(quán)接口時(shí)，才向用戶發(fā)起授權(quán)申請(qǐng)，并在授權(quán)申請(qǐng)中說(shuō)明清楚要使用該功能的理由。

授權(quán)通過(guò)率可能才有保障。一旦用戶明確同意或拒絕過(guò)授權(quán)，其授權(quán)關(guān)系會(huì)記錄在后臺(tái)，直到用戶主動(dòng)刪除小程序。

用戶可以手動(dòng)在小程序設(shè)置界面（右上角- 關(guān)于- 設(shè)置）中控制對(duì)該小程序的授權(quán)狀態(tài)，這路徑其實(shí)有點(diǎn)長(zhǎng)；如果判斷拒絕授權(quán)時(shí)，可以調(diào)用 wx.openSetting 一步跳轉(zhuǎn)打開(kāi)權(quán)限設(shè)置界面，引導(dǎo)用戶開(kāi)啟授權(quán)。

4. 注意事項(xiàng)

請(qǐng)勿在用戶預(yù)期外彈出授權(quán)，比如切換底部tabr彈出登錄授權(quán)，對(duì)用戶感到，即使該tab部分內(nèi)容模塊需要登錄才能瀏覽/操作，也可讓用戶進(jìn)入到該tab頁(yè)面中，進(jìn)行引導(dǎo)授權(quán)，充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上進(jìn)行授權(quán)引導(dǎo)。

不宜過(guò)于強(qiáng)制的引導(dǎo)，比如授權(quán)引導(dǎo)固定懸浮在底部，授權(quán)彈窗無(wú)法關(guān)閉，頻繁彈出授權(quán)等，會(huì)破壞用戶的原生體驗(yàn)，只解決了“用戶該怎么授權(quán)”并沒(méi)有解決“用戶為什么要授權(quán)”的問(wèn)題。

三、關(guān)于使用體驗(yàn)

如微信小程序設(shè)計(jì)規(guī)范所說(shuō)，一旦用戶進(jìn)入我們的小程序頁(yè)面，我們就有責(zé)任和義務(wù)清晰明確地告知用戶身在何處、又可以往何處去；確保用戶在頁(yè)面中游刃有余地穿梭而不迷路，這樣才能為用戶提供安全且愉悅的使用體驗(yàn)。

1. 標(biāo)準(zhǔn)導(dǎo)航欄

標(biāo)準(zhǔn)導(dǎo)航欄標(biāo)題具有可讀性高以及和頁(yè)面內(nèi)容高匹配度，導(dǎo)航需要告訴用戶，當(dāng)前在哪，可以去哪，標(biāo)題長(zhǎng)度保證主流機(jī)型能夠展示全；如果標(biāo)題展示不全容易產(chǎn)生信息丟失，理解有障礙；比如微信小程序示例二級(jí)面顯示的是具體組件名稱，而不是“組件詳情”。

2. 自定義導(dǎo)航欄

當(dāng)使用自定義導(dǎo)航時(shí)，因注意頁(yè)面內(nèi)容是否與小程序膠囊有重疊，小程序膠囊每個(gè)頁(yè)面的位置都是固定的，不可隱藏也不可調(diào)整位置。

3. 統(tǒng)一穩(wěn)定性

不管從小程序上線時(shí)間上還是用戶規(guī)模上，小程序都不算是一個(gè)新的物種，但依然要秉著用戶最少的學(xué)習(xí)成本來(lái)達(dá)成目標(biāo)，對(duì)話框作為最常見(jiàn)的交互組件之一；發(fā)現(xiàn)很多小程序只會(huì)使用dialog（對(duì)話框）或自定義一個(gè)dialog（對(duì)話框），稍微熟悉小程序組件的同學(xué)可能都知道還有一個(gè)叫half-screen-dialog（半屏彈窗）。

在half-screen-dialog出來(lái)前，包含微信在內(nèi)，相關(guān)授權(quán)一直都是用dialog組件來(lái)進(jìn)行授權(quán)，在half-screen-dialog出來(lái)后，不管是手機(jī)號(hào)碼授權(quán)還是地理位置授權(quán)都是用half-screen-dialog組件，這意味著half-screen-dialog比dialog更適用于授權(quán)方面。

其實(shí)不僅僅在授權(quán)方面，在整個(gè)交互反饋傳遞信息上，dialog確實(shí)很有局限性，一旦內(nèi)容多顯得密度很高，沒(méi)有層次感，而half-screen-dialog很好的解決了這方面問(wèn)題；但dialog也有自己的優(yōu)勢(shì)，就是提示文本比較少的時(shí)候合適使用，比如“是否要?jiǎng)h除該圖片”，言簡(jiǎn)意賅的提示用dialog是最佳選擇，此時(shí)用half-screen-dialog就顯得非常冗余。

總之在組件方面，最理想的情況下是標(biāo)準(zhǔn)化，一能令用戶使用感知更加統(tǒng)一，二能達(dá)到降本增效的結(jié)果，使用微信提供的組件對(duì)頁(yè)面性能的提高有極大作用，無(wú)形之中提升了用戶體驗(yàn)。

整體小程序迭代周期還是以周為單位進(jìn)行更新，本文有較強(qiáng)實(shí)時(shí)性，更多最新知識(shí)需要大家及時(shí)洞察和探索。

#專欄作家#

動(dòng)物園園長(zhǎng)，微信公眾號(hào)：首席吹牛官，人人都是產(chǎn)品經(jīng)理專欄作家?；ヂ?lián)網(wǎng)圈十八線作詞人，國(guó)家一級(jí)退堂鼓表演藝術(shù)家。顏良而文丑，歡迎交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議