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

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

微信小程序实例讲解(微信小程序登录产品设计详解)(1)

一、前言

微信小程序是腾讯在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)

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

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

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

微信小程序实例讲解(微信小程序登录产品设计详解)(3)

三、小程序登录产品设计

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保存在微信小程序客户端。登录完成。

微信小程序实例讲解(微信小程序登录产品设计详解)(4)

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

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

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

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

四、结语

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

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

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

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

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

#专栏作家#

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

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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页