微信小程序实例讲解（微信小程序登录产品设计详解）

编辑导读：微信的小程序自上线以来，日活用户超4亿，相关从业者达536万，取得了惊人的好成绩。但是，现实中有很多商家的小程序应用在注册登录的产品设计非常不合理，不流畅，从而给用户留下的第一印象不佳，导致用户流失，影响产品口碑。微信小程序登录应该如何设计呢？

微信小程序是腾讯在2017年推出的一种不需要下载安装，即可在微信中使用的应用。根据艾瑞咨询的报告显示，微信月活跃设备数高达12亿以上。与传统的App相比，小程序最大的特点就是便捷，各大商家的产品在用户增长进入瓶颈期后，通过微信小程序为用户提供相应的服务，成了获得用户、维持客户的另一个主要方式，从而使各商家产品业绩获得新的增长。

商家将自己的应用小程序化，用户的注册和登录，是触达客户非常重要的一个途径，也是进行后续产品服务的基础。但是，现实中有很多商家的小程序应用在注册登录的产品设计非常不合理，不流畅，从而给用户留下的第一印象不佳，导致用户流失，影响产品口碑。

微信小程序登录产品功能设计细节有哪些？小程序登录如何实现？什么时候需要登录，什么时候不需要登录？小程序登录如何设计，才能给用户带来最佳产品体验？围绕这些问题，本文今天为大家进行详细解答。

产品经理在设计微信小程序登录产品之前，必须要对微信小程序的登录流程和相关产品组件有一定的了解。不理解小程序的原理和组件参数，很难从根本上设计出精美的登录产品。产品经理要对微信小程序的登录，知其然也要知其所以然。本章节会介绍微信小程序登录所涉及的相关产品接口。

2.1 微信登录【wx.login】

微信登录接口【wx.login】用于获取登录凭证。小程序调用微信登录接口，若调用成功，微信会返回用户登录凭证给产品服务端，这个凭证有效期只有5分钟，产品服务端要通过获得微信返回的登录凭证，去调用 【auth.code2Session】获得用户的openid和 会话密钥session_key。

2.2 微信登录凭证校验【auth.code2Session】

微信登录凭证校验【auth.code2Session】的作用是用微信登录【wx.login】获取登录凭证，换取用户的openid和 会话密钥。openid是用户唯一标识，用来在产品中标记用户身份，并同用户注册信息进行关联，关联后，下次用户在通过小程序登录，则直接可以使用微信的登录认证功能，方便用户便捷登录。

这里有个细节，调用登录凭证校验【auth.code2Session】，会返回openid、session_key和unionid三个值。特别注意的是unionid可以用来区分用户的唯一性，这个唯一是在整个微信体系内的唯一，包括网站、公众号、App，同一个用户，unionid是唯一的。如果你的产品涉及腾讯多个应用的登录，为了便于将用户都关联起来，可以用户unionid进行统一的用户识别。

2.3 获得用户信息接口【wx.getUserProfile】

获得用户信息接口，归属在授权相关功能下。授权相关接口大家已经不陌生，在目前微信小程序应用中很常见，用户进入某个产品的小程序时，会询问获得用户相关信息，由用户决定同意还是拒绝。授权相关接口有很多，例如用户信息、地理位置、后台定位、微信运动、录音、摄像头等。和产品登录场景相关的，我们主要使用用户信息这个授权就可以。

和最早获得用户信息使用的接口不同，最新用户信息使用的是【wx.getUserInfo】，最新的版本中，微信小程序获得用户信息最好使用【wx.getUserProfile】。获得用户信息授权后，产品可以将用户的信息生成自己产品的用户体系的用户资料。需要注意的是，这个接口调用后，就会发起用户授权的弹窗，为了不打扰客户，这个接口要谨慎使用，在用户第一次授权后，可以将用户头像的图片地址储存下来，以后再用，就不需要频繁弹窗了。有个小细节，当用户头像有变动，原头像的链接就不能使用了，这时需要再次调用获得用户最新的信息。

3.1 产品设计原则

产品设计要遵循哪些原则？

以产品经理的视角，当然不是UI设计师的视角，结合这几年的工作经验，在我看来，我们在进行产品设计时，原则上主要需要考虑以下产品设计原则：

1. 明确的产品定位。我们的产品目标人群有哪些，产品定位是什么。如果人群是儿童或是老人，我们的产品设计肯定要非常简约，而且考虑到老人，字号、字间距都要满足老人用户的使用习惯，所以在小程序产品登录功能设计时，就要将这些因素考虑进去。
2. 界面风格的统一。产品的设计，界面风格要一致。不能给用户一种进入到不同的功能页面，就感觉像是换了一个产品。
3. 功能的直观易用。文案、话术、图标，要给用户非常明确的指示，同时在功能上，要符合大众的使用习惯，减少用户学习成本。例如，大家都习惯了顶部左侧的箭头代表“返回”，你的产品非要设计成是“关闭”，就有点尴尬。
4. 对用户友好，不骚扰用户且不强求。这点我在使用很多App时，深有感触，输入了个手机号，马上营销电话就打过来，以及App上各种与功能无关的广告防不胜防。对于这类App，我是深恶痛绝。另外，还有很多小程序的设计也是如此。有一些小程序，用户还没搞清楚是做什么的，上来就要获得用户信息。对于这类的小程序，我是宁可不用，也不愿意点“授权”把信息给他们。
5. 以及符合普适的价值观。这条就不多说了，产品设计要符合人性，不做恶。好的产品设计，会激发人性的善，而坏的产品设计，会刺激人性的恶。虽说技术是中性的，但产品不是。产品总会存在着某种鼓励，把人引向某处。

因此，在设计登录产品时，就要在产品“门面”上下足功夫，符合产品设计原则。我们更多的要考虑，获得用户OpenID后，是不是有必要获得用户更多的信息？什么时候需要获得用户这些信息？

3.2 小程序登录流程设计

我们以一个普通用户为例，当扫描小程序码或是从他人分享的小程序中打开小程序时，应该先呈现小程序的基本功能，而不是一上来就要求用户提供个人信息。用户对小程序提供的功能有一定了解了，有些必须要用户登录才可以操作的产品功能，这个时候再提示用户获得登录，获得用户授权也不迟。

我在想，很多小程序产品一上来就要让用户提供授权获得个人信息，可能是企业对小程序的获客数有KPI（Key Performance Indicator，关键绩效指标）考核。但这有什么用呢？即便是首次使用获得了用户信息，以后用户再也不登录，也对产品的增长毫无帮助。所以，企业在为产品设定KPI时，要换个考核方式，不是考核获得的用户数，而是要考核活跃用户同总用户的百分比。

对于到了用户登录环节，可以参照以下小程序登录流程图。过程如下：

1. 到了登录环节，先查看用户的Session是否过期。使用【wx.checkSession】接口，如果无效，则调用【wx.login】，获得用户的OpenID和Session。
2. 若用户Session有效，则去调取先前存储在本地的Token。用户首次登录，本地是不会储存Token的。如果获得了用户Token，则说明已经是老用户，可以根据用户的Token到产品的服务端获得对应用户的信息。登录完成。
3. 若本地没有存储Token，则调用【wx.login】，获得用户的OpenID和Session。这时，我们可以根据获得的用户OpenID到自己的服务器中进行匹配，如果有，说明是老用户，可以通过OpenID获得用户信息，并结合Session，生成Token，返回给微信小程序，并调用【wx.setStorageSyn】将Token保存在微信小程序客户端。登录完成。
4. 若获得的用户OpenID没有与服务器中用户数据匹配，则说明是新用户，这时，再使用【wx.getUserProfile】来询问用户授权获得用户信息。新增用户完成后，将Token保存在微信小程序客户端。登录完成。

这样设计的好处是一个看似简单的登录有很多细节，但给用户的授权确认，只有一次。可以极大的减少产品对用户造成的骚扰。用户才刚使用产品，一上来就要用户提供信息，就像是男女生相亲，刚见面就要查户口一样，未免显得太鲁莽。

3.3 小程序登录产品界面设计

其实在用户登录小程序的整个过程，唯一需要用户确认的就是用户信息的授权。这里面其实已经获得了用户注册的一些必要信息。如果不是非常必要，其实小程序根本都不需要再设计登录和注册页面。对于需要用户补充的一些敏感信息，如手机号、身份证号，如果产品应用非常必要，可以在后期特定场景中再要求用户提供。这就要在具体产品功能和具体产品场景中，具体设计了。

界面设计不是难点，难的是在产品设计中产品如何做好应有的“克制”。一个用户上来就是简单看一个新闻，你的产品非要用户提供身份证号，这种产品设计明显不是很合理。这种产品界面就不应该出现。

我们在设计小程序登录产品，除了实现基本功能外，还要考虑一些异常场景，这就要求在登录产品设计时，产品经理要为登录异常定义各种处理方式。同时给用户的异常提示，要直观明确，例如由于网络因素导致的信息调用与返回异常，在小程序的登录设计中也需要考虑。例如用户拒绝信息授权，产品该如何处理。处理异常的同时，如何能对用户友好，以便于获得用户的信任。

另外，还需要对小程序用到的各种登录相关接口异常非常熟悉，把握好细节才能避免踩很多坑。因为微信小程序后台也会由于各种原型，导致接口异常，也会失败。例如接口信息返回的超时，接口本身的超时，系统繁忙，信息无效，以及小程序接口本身的调用频率限制。产品经理在设计小程序登录时，都需要考虑到。

我一直认为，那种短期内为了创造用户增长而无限度地透支用户信任的产品，一定不是一个好产品。作为企业，作为领导，作为产品经理，都应该从用户角度出发去制定产品策略，去设计产品功能，而不是采用杀鸡取卵，竭泽而渔的方法，去盲目追求所谓获客数、活跃度、增长率。

虽然说“自古深情留不住，唯有套路得人心”，但是换个角度，用户之所以能被你“套路”，是因为信任，你只能套路用户一次，当用户不再信任你时，之后你的产品做的再好，要在用户和市场中建立口碑也是非常难的。

回顾这些年市面上的各种App，不论你的概念多么新颖，花了多少营销费用去推广，但最终都没有逃过产品的大浪淘沙。所以，通过微信小程序登录产品设计，更多的是为使用产品的用户传递一种态度。那就是一切从用户满意出发，以用户为中心。

#专栏作家#

王佳亮，佳佳原创，人人都是产品经理专栏作家。中国计算机学会（CCF）会员，专注于互联网产品设计理念分享。

本文原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。