微信小程序登录产物设计详解

编辑导读：微信的小步伐自上线以来，日活用户超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设计师的视角，结合这几年的工作履历，在我看来，我们在举行产品设计时，原则上重要需要考虑以下产品设计原则：

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

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

3.2 小步伐登录流程设计

我们以一个普通用户为例，当扫描小步伐码或是从他人分享的小步伐中打开小步伐时，应该先呈现小步伐的根本功能，而不是一上来就要求用户提供个人信息。用户对小步伐提供的功能有肯定相识了，有些必须要用户登录才可以操作的产品功能，这个时候再提示用户获得登录，获得用户授权也不迟。
我在想，很多小步伐产品一上来就要让用户提供授权获得个人信息，大概是企业对小步伐的获客数有KPI（Key Performance Indicator，关键绩效指标）考核。但这有什么用呢？即便是首次使用获得了用户信息，以后用户再也不登录，也对产品的增长毫无帮助。以是，企业在为产品设定KPI时，要换个考核方式，不是考核获得的用户数，而是要考核活跃用户同总用户的百分比。
对于到了用户登录环节，可以参照以下小步伐登录流程图。过程如下：

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

                               
登录/注册后可看大图

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

3.3 小步伐登录产品界面设计

实在在用户登录小步伐的整个过程，唯一需要用户确认的就是用户信息的授权。这里面实在已经获得了用户注册的一些必要信息。假如不是非常必要，实在小步伐根本都不需要再设计登录和注册页面。对于需要用户增补的一些敏感信息，如手机号、身份证号，假如产品应用非常必要，可以在后期特定场景中再要求用户提供。这就要在具体产品功能和具体产品场景中，具体设计了。
界面设计不是难点，难的是在产品设计中产品怎样做好应有的“克制”。一个用户上来就是简朴看一个新闻，你的产品非要用户提供身份证号，这种产品设计显着不是很合理。这种产品界面就不应该出现。

四、结语

我们在设计小步伐登录产品，除了实现根本功能外，还要考虑一些非常场景，这就要求在登录产品设计时，产品司理要为登录非常定义各种处理方式。同时给用户的非常提示，要直观明确，例如由于网络因素导致的信息调用与返回非常，在小步伐的登录设计中也需要考虑。例如用户拒绝信息授权，产品该怎样处理。处理非常的同时，怎样能对用户友爱，以便于获得用户的信托。
别的，还需要对小步伐用到的各种登录相关接口非常非常熟悉，把握好细节才能避免踩很多坑。因为微信小步伐背景也会由于各种原型，导致接口非常，也会失败。例如接口信息返回的超时，接口本身的超时，系统繁忙，信息无效，以及小步伐接口本身的调用频率限定。产品司理在设计小步伐登录时，都需要考虑到。
我一直以为，那种短期内为了创造用户增长而无限度地透支用户信托的产品，肯定不是一个好产品。作为企业，作为领导，作为产品司理，都应该从用户角度出发去制定产品计谋，去设计产品功能，而不是采用杀鸡取卵，竭泽而渔的方法，去盲目追求所谓获客数、活跃度、增长率。
虽然说“自古深情留不住，唯有套路得人心”，但是换个角度，用户之以是能被你“套路”，是因为信托，你只能套路用户一次，当用户不再信托你时，之后你的产品做的再好，要在用户和市场中创建口碑也是非常难的。
回顾这些年市面上的各种App，不论你的概念多么新颖，花了多少营销费用去推广，但最终都没有逃过产品的大浪淘沙。以是，通过微信小步伐登录产品设计，更多的是为使用产品的用户传递一种态度。那就是统统从用户满意出发，以用户为中心。

#专栏作家#

王佳亮，微信公众号：佳佳原创，大家都是产品司理专栏作家。中国计算机学会（CCF）会员，专注于互联网产品设计理念分享。
本文原创发布于大家都是产品司理，未经允许，禁止转载。
题图来自Unsplash，基于CC0协议。

转发了

转发了

转发了

转发了

转发了

转发了

转发了

转发了

转发了