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

一、前言

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

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

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

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

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

2.1 微信登錄【wx.login】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

四、結(jié)語

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

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

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

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

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

#專欄作家#

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

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

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