編輯導(dǎo)讀：微信的小程序自上線以來，日活用戶超4億，相關(guān)從業(yè)者達(dá)536萬，取得了驚人的好成績(jī)。但是，現(xiàn)實(shí)中有很多商家的小程序應(yīng)用在注冊(cè)登錄的產(chǎn)品設(shè)計(jì)非常不合理，不流暢，從而給用戶留下的第一印象不佳，導(dǎo)致用戶流失，影響產(chǎn)品口碑。微信小程序登錄應(yīng)該如何設(shè)計(jì)呢？

一、前言

微信小程序是騰訊在2017年推出的一種不需要下載安裝，即可在微信中使用的應(yīng)用。根據(jù)艾瑞咨詢的報(bào)告顯示，微信月活躍設(shè)備數(shù)高達(dá)12億以上。與傳統(tǒng)的App相比，小程序最大的特點(diǎn)就是便捷，各大商家的產(chǎn)品在用戶增長(zhǎng)進(jìn)入瓶頸期后，通過微信小程序?yàn)橛脩籼峁┫鄳?yīng)的服務(wù)，成了獲得用戶、維持客戶的另一個(gè)主要方式，從而使各商家產(chǎn)品業(yè)績(jī)獲得新的增長(zhǎng)。

商家將自己的應(yīng)用小程序化，用戶的注冊(cè)和登錄，是觸達(dá)客戶非常重要的一個(gè)途徑，也是進(jìn)行后續(xù)產(chǎn)品服務(wù)的基礎(chǔ)。但是，現(xiàn)實(shí)中有很多商家的小程序應(yīng)用在注冊(cè)登錄的產(chǎn)品設(shè)計(jì)非常不合理，不流暢，從而給用戶留下的第一印象不佳，導(dǎo)致用戶流失，影響產(chǎn)品口碑。

微信小程序登錄產(chǎn)品功能設(shè)計(jì)細(xì)節(jié)有哪些？小程序登錄如何實(shí)現(xiàn)？什么時(shí)候需要登錄，什么時(shí)候不需要登錄？小程序登錄如何設(shè)計(jì)，才能給用戶帶來最佳產(chǎn)品體驗(yàn)？圍繞這些問題，本文今天為大家進(jìn)行詳細(xì)解答。

二、小程序登錄涉及的主要產(chǎn)品接口

產(chǎn)品經(jīng)理在設(shè)計(jì)微信小程序登錄產(chǎn)品之前，必須要對(duì)微信小程序的登錄流程和相關(guān)產(chǎn)品組件有一定的了解。不理解小程序的原理和組件參數(shù)，很難從根本上設(shè)計(jì)出精美的登錄產(chǎn)品。產(chǎn)品經(jīng)理要對(duì)微信小程序的登錄，知其然也要知其所以然。本章節(jié)會(huì)介紹微信小程序登錄所涉及的相關(guān)產(chǎn)品接口。

2.1 微信登錄【wx.login】

微信登錄接口【wx.login】用于獲取登錄憑證。小程序調(diào)用微信登錄接口，若調(diào)用成功，微信會(huì)返回用戶登錄憑證給產(chǎn)品服務(wù)端，這個(gè)憑證有效期只有5分鐘，產(chǎn)品服務(wù)端要通過獲得微信返回的登錄憑證，去調(diào)用 【auth.code2Session】獲得用戶的OpenID和 會(huì)話密鑰session_key。

2.2 微信登錄憑證校驗(yàn)【auth.code2Session】

微信登錄憑證校驗(yàn)【auth.code2Session】的作用是用微信登錄【wx.login】獲取登錄憑證，換取用戶的openid和 會(huì)話密鑰。openid是用戶唯一標(biāo)識(shí)，用來在產(chǎn)品中標(biāo)記用戶身份，并同用戶注冊(cè)信息進(jìn)行關(guān)聯(lián)，關(guān)聯(lián)后，下次用戶在通過小程序登錄，則直接可以使用微信的登錄認(rèn)證功能，方便用戶便捷登錄。

這里有個(gè)細(xì)節(jié)，調(diào)用登錄憑證校驗(yàn)【auth.code2Session】，會(huì)返回openid、session_key和unionid三個(gè)值。特別注意的是unionid可以用來區(qū)分用戶的唯一性，這個(gè)唯一是在整個(gè)微信體系內(nèi)的唯一，包括網(wǎng)站、公眾號(hào)、App，同一個(gè)用戶，unionid是唯一的。如果你的產(chǎn)品涉及騰訊多個(gè)應(yīng)用的登錄，為了便于將用戶都關(guān)聯(lián)起來，可以用戶unionid進(jìn)行統(tǒng)一的用戶識(shí)別。

2.3 獲得用戶信息接口【wx.getUserProfile】

獲得用戶信息接口，歸屬在授權(quán)相關(guān)功能下。授權(quán)相關(guān)接口大家已經(jīng)不陌生，在目前微信小程序應(yīng)用中很常見，用戶進(jìn)入某個(gè)產(chǎn)品的小程序時(shí)，會(huì)詢問獲得用戶相關(guān)信息，由用戶決定同意還是拒絕。授權(quán)相關(guān)接口有很多，例如用戶信息、地理位置、后臺(tái)定位、微信運(yùn)動(dòng)、錄音、攝像頭等。和產(chǎn)品登錄場(chǎng)景相關(guān)的，我們主要使用用戶信息這個(gè)授權(quán)就可以。

和最早獲得用戶信息使用的接口不同，最新用戶信息使用的是【wx.getUserInfo】，最新的版本中，微信小程序獲得用戶信息最好使用【wx.getUserProfile】。獲得用戶信息授權(quán)后，產(chǎn)品可以將用戶的信息生成自己產(chǎn)品的用戶體系的用戶資料。需要注意的是，這個(gè)接口調(diào)用后，就會(huì)發(fā)起用戶授權(quán)的彈窗，為了不打擾客戶，這個(gè)接口要謹(jǐn)慎使用，在用戶第一次授權(quán)后，可以將用戶頭像的圖片地址儲(chǔ)存下來，以后再用，就不需要頻繁彈窗了。有個(gè)小細(xì)節(jié)，當(dāng)用戶頭像有變動(dòng)，原頭像的鏈接就不能使用了，這時(shí)需要再次調(diào)用獲得用戶最新的信息。

三、小程序登錄產(chǎn)品設(shè)計(jì)

3.1 產(chǎn)品設(shè)計(jì)原則

產(chǎn)品設(shè)計(jì)要遵循哪些原則？

以產(chǎn)品經(jīng)理的視角，當(dāng)然不是UI設(shè)計(jì)師的視角，結(jié)合這幾年的工作經(jīng)驗(yàn)，在我看來，我們?cè)谶M(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，原則上主要需要考慮以下產(chǎn)品設(shè)計(jì)原則：

1. 明確的產(chǎn)品定位。我們的產(chǎn)品目標(biāo)人群有哪些，產(chǎn)品定位是什么。如果人群是兒童或是老人，我們的產(chǎn)品設(shè)計(jì)肯定要非常簡(jiǎn)約，而且考慮到老人，字號(hào)、字間距都要滿足老人用戶的使用習(xí)慣，所以在小程序產(chǎn)品登錄功能設(shè)計(jì)時(shí)，就要將這些因素考慮進(jìn)去。
2. 界面風(fēng)格的統(tǒng)一。產(chǎn)品的設(shè)計(jì)，界面風(fēng)格要一致。不能給用戶一種進(jìn)入到不同的功能頁面，就感覺像是換了一個(gè)產(chǎn)品。
3. 功能的直觀易用。文案、話術(shù)、圖標(biāo)，要給用戶非常明確的指示，同時(shí)在功能上，要符合大眾的使用習(xí)慣，減少用戶學(xué)習(xí)成本。例如，大家都習(xí)慣了頂部左側(cè)的箭頭代表“返回”，你的產(chǎn)品非要設(shè)計(jì)成是“關(guān)閉”，就有點(diǎn)尷尬。
4. 對(duì)用戶友好，不騷擾用戶且不強(qiáng)求。這點(diǎn)我在使用很多App時(shí)，深有感觸，輸入了個(gè)手機(jī)號(hào)，馬上營(yíng)銷電話就打過來，以及App上各種與功能無關(guān)的廣告防不勝防。對(duì)于這類App，我是深惡痛絕。另外，還有很多小程序的設(shè)計(jì)也是如此。有一些小程序，用戶還沒搞清楚是做什么的，上來就要獲得用戶信息。對(duì)于這類的小程序，我是寧可不用，也不愿意點(diǎn)“授權(quán)”把信息給他們。
5. 以及符合普適的價(jià)值觀。這條就不多說了，產(chǎn)品設(shè)計(jì)要符合人性，不做惡。好的產(chǎn)品設(shè)計(jì)，會(huì)激發(fā)人性的善，而壞的產(chǎn)品設(shè)計(jì)，會(huì)刺激人性的惡。雖說技術(shù)是中性的，但產(chǎn)品不是。產(chǎn)品總會(huì)存在著某種鼓勵(lì)，把人引向某處。

因此，在設(shè)計(jì)登錄產(chǎn)品時(shí)，就要在產(chǎn)品“門面”上下足功夫，符合產(chǎn)品設(shè)計(jì)原則。我們更多的要考慮，獲得用戶OpenID后，是不是有必要獲得用戶更多的信息？什么時(shí)候需要獲得用戶這些信息？

3.2 小程序登錄流程設(shè)計(jì)

我們以一個(gè)普通用戶為例，當(dāng)掃描小程序碼或是從他人分享的小程序中打開小程序時(shí)，應(yīng)該先呈現(xiàn)小程序的基本功能，而不是一上來就要求用戶提供個(gè)人信息。用戶對(duì)小程序提供的功能有一定了解了，有些必須要用戶登錄才可以操作的產(chǎn)品功能，這個(gè)時(shí)候再提示用戶獲得登錄，獲得用戶授權(quán)也不遲。

我在想，很多小程序產(chǎn)品一上來就要讓用戶提供授權(quán)獲得個(gè)人信息，可能是企業(yè)對(duì)小程序的獲客數(shù)有KPI（Key Performance Indicator，關(guān)鍵績(jī)效指標(biāo)）考核。但這有什么用呢？即便是首次使用獲得了用戶信息，以后用戶再也不登錄，也對(duì)產(chǎn)品的增長(zhǎng)毫無幫助。所以，企業(yè)在為產(chǎn)品設(shè)定KPI時(shí)，要換個(gè)考核方式，不是考核獲得的用戶數(shù)，而是要考核活躍用戶同總用戶的百分比。

對(duì)于到了用戶登錄環(huán)節(jié)，可以參照以下小程序登錄流程圖。過程如下：

1. 到了登錄環(huán)節(jié)，先查看用戶的Session是否過期。使用【wx.checkSession】接口，如果無效，則調(diào)用【wx.login】，獲得用戶的OpenID和Session。
2. 若用戶Session有效，則去調(diào)取先前存儲(chǔ)在本地的Token。用戶首次登錄，本地是不會(huì)儲(chǔ)存Token的。如果獲得了用戶Token，則說明已經(jīng)是老用戶，可以根據(jù)用戶的Token到產(chǎn)品的服務(wù)端獲得對(duì)應(yīng)用戶的信息。登錄完成。
3. 若本地沒有存儲(chǔ)Token，則調(diào)用【wx.login】，獲得用戶的OpenID和Session。這時(shí)，我們可以根據(jù)獲得的用戶OpenID到自己的服務(wù)器中進(jìn)行匹配，如果有，說明是老用戶，可以通過OpenID獲得用戶信息，并結(jié)合Session，生成Token，返回給微信小程序，并調(diào)用【wx.setStorageSyn】將Token保存在微信小程序客戶端。登錄完成。
4. 若獲得的用戶OpenID沒有與服務(wù)器中用戶數(shù)據(jù)匹配，則說明是新用戶，這時(shí)，再使用【wx.getUserProfile】來詢問用戶授權(quán)獲得用戶信息。新增用戶完成后，將Token保存在微信小程序客戶端。登錄完成。

這樣設(shè)計(jì)的好處是一個(gè)看似簡(jiǎn)單的登錄有很多細(xì)節(jié)，但給用戶的授權(quán)確認(rèn)，只有一次?？梢詷O大的減少產(chǎn)品對(duì)用戶造成的騷擾。用戶才剛使用產(chǎn)品，一上來就要用戶提供信息，就像是男女生相親，剛見面就要查戶口一樣，未免顯得太魯莽。

3.3 小程序登錄產(chǎn)品界面設(shè)計(jì)

其實(shí)在用戶登錄小程序的整個(gè)過程，唯一需要用戶確認(rèn)的就是用戶信息的授權(quán)。這里面其實(shí)已經(jīng)獲得了用戶注冊(cè)的一些必要信息。如果不是非常必要，其實(shí)小程序根本都不需要再設(shè)計(jì)登錄和注冊(cè)頁面。對(duì)于需要用戶補(bǔ)充的一些敏感信息，如手機(jī)號(hào)、身份證號(hào)，如果產(chǎn)品應(yīng)用非常必要，可以在后期特定場(chǎng)景中再要求用戶提供。這就要在具體產(chǎn)品功能和具體產(chǎn)品場(chǎng)景中，具體設(shè)計(jì)了。

界面設(shè)計(jì)不是難點(diǎn)，難的是在產(chǎn)品設(shè)計(jì)中產(chǎn)品如何做好應(yīng)有的“克制”。一個(gè)用戶上來就是簡(jiǎn)單看一個(gè)新聞，你的產(chǎn)品非要用戶提供身份證號(hào)，這種產(chǎn)品設(shè)計(jì)明顯不是很合理。這種產(chǎn)品界面就不應(yīng)該出現(xiàn)。

四、結(jié)語

我們?cè)谠O(shè)計(jì)小程序登錄產(chǎn)品，除了實(shí)現(xiàn)基本功能外，還要考慮一些異常場(chǎng)景，這就要求在登錄產(chǎn)品設(shè)計(jì)時(shí)，產(chǎn)品經(jīng)理要為登錄異常定義各種處理方式。同時(shí)給用戶的異常提示，要直觀明確，例如由于網(wǎng)絡(luò)因素導(dǎo)致的信息調(diào)用與返回異常，在小程序的登錄設(shè)計(jì)中也需要考慮。例如用戶拒絕信息授權(quán)，產(chǎn)品該如何處理。處理異常的同時(shí)，如何能對(duì)用戶友好，以便于獲得用戶的信任。

另外，還需要對(duì)小程序用到的各種登錄相關(guān)接口異常非常熟悉，把握好細(xì)節(jié)才能避免踩很多坑。因?yàn)槲⑿判〕绦蚝笈_(tái)也會(huì)由于各種原型，導(dǎo)致接口異常，也會(huì)失敗。例如接口信息返回的超時(shí)，接口本身的超時(shí)，系統(tǒng)繁忙，信息無效，以及小程序接口本身的調(diào)用頻率限制。產(chǎn)品經(jīng)理在設(shè)計(jì)小程序登錄時(shí)，都需要考慮到。

我一直認(rèn)為，那種短期內(nèi)為了創(chuàng)造用戶增長(zhǎng)而無限度地透支用戶信任的產(chǎn)品，一定不是一個(gè)好產(chǎn)品。作為企業(yè)，作為領(lǐng)導(dǎo)，作為產(chǎn)品經(jīng)理，都應(yīng)該從用戶角度出發(fā)去制定產(chǎn)品策略，去設(shè)計(jì)產(chǎn)品功能，而不是采用殺雞取卵，竭澤而漁的方法，去盲目追求所謂獲客數(shù)、活躍度、增長(zhǎng)率。

雖然說“自古深情留不住，唯有套路得人心”，但是換個(gè)角度，用戶之所以能被你“套路”，是因?yàn)樾湃?，你只能套路用戶一次，?dāng)用戶不再信任你時(shí)，之后你的產(chǎn)品做的再好，要在用戶和市場(chǎng)中建立口碑也是非常難的。

回顧這些年市面上的各種App，不論你的概念多么新穎，花了多少營(yíng)銷費(fèi)用去推廣，但最終都沒有逃過產(chǎn)品的大浪淘沙。所以，通過微信小程序登錄產(chǎn)品設(shè)計(jì)，更多的是為使用產(chǎn)品的用戶傳遞一種態(tài)度。那就是一切從用戶滿意出發(fā)，以用戶為中心。

#專欄作家#

王佳亮，微信公眾號(hào)：佳佳原創(chuàng)，人人都是產(chǎn)品經(jīng)理專欄作家。中國(guó)計(jì)算機(jī)學(xué)會(huì)（CCF）會(huì)員，專注于互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)理念分享。

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

題圖來自Unsplash，基于CC0協(xié)議。