恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何做依附产品的登录/注册页面
0.0°
2020-04-14 原创文章 经验/观点 举报 2522 14 8 2

本篇文章《如何做依附产品的登录/注册页面》是对登录注册的分析,如果各位小伙伴觉得不错可以点一波关注~近期会推出续集《设计师如何做依附产品的登录/注册》


登录方式

产品设计角度


a)账号密码登录

自定义的的账号和密码来登录,在互联网早期经常使用的一种注册方式,由于互联网政策等原因,现多和其他登录方式共同使用

Image title




b)邮箱登录

早期在移动端不普及的时候用户常用邮箱+密码作为登录方式,现使用人数较少,多和其他登录方式共同使用

Image title





c)手机号+验证码登录

手机号+密码登录;手机号绑定身份,这也是现在最为广泛的登录方式


Image title






d)第三方登录

调用第三方接口数据进行无感登录,减少操作成本和数据冗余;调用的接口多和公司业务有关联。常见的第三方平台有:微信、qq、微博等

Image title



e)特殊方式「指纹登录/扫脸登录/手势登录/扫码登录等」

这些方式存在在一些特殊设备或特殊场景中,一般作为登录后的二次验证,适用于保密性较强或数据敏感型企业的验证


Image title




从登录方式来说:

一般互联网产品会采用手机号/验证码+账号密码+第三方登录三者结合的方式来作为用户验证的入口;

这样做让注册账号和登录的体验变得更加简单高效,减少思考成本,读取手机号后能更加容易地建立用户关系手机号验证码登录的最大缺点就在于短信不能实时收发,在一些信号弱的地方手机可能收不到短信。

这时候就需要在首次登陆后以手机号为帐号再外加设置一段密码来作为登录的另一种方式,而第三方登录方式则提供了一键登录和后续多次登录的便捷途径。

Image title







登录类型

交互设计角度


1.阻挡类登录(阿里邮箱、阿里妈妈、印象笔记)

不登录无法进入产品主流程;多用于后台系统、B端产品或私密性较强的产品;

这类APP这样做的目的是为了提高注册量或提高安全性,缺点是如果对一些C类(内容生产、工具类、平台类等依靠流量盈利)产品来使用的话用户不能在第一时间触及到产品,极大地拉低了用户对产品的第一印象,降低用户对产品的好感。

Image title





2.无阻挡登录(携程、爱回收、租租车、OFO、穷游等大部分C类app)

首次登录直接进入产品,到了需要登陆后才能操作的页面时弹出页面登录,弹出方式分为整页面弹出和弹窗弹出两大类;

大多数互联网产品采用的登录交互方式,用户能更快捷地触达到产品内容,一些搜索类应用最早使用,目的是为了提高用户的搜索效率。

近些年来这种方式作为业界主流广泛使用,省去首次登录强制弹出的登陆页面后,引导页和首页以及一些帮助引导相辅相成,能在用户第一次触及产品时极大地提高对产品的好感度。

Image title





通常来说:

阻挡类登录更适用于强绑定,强关联获利的产品(常见B端、服务端);

无感类登录更适用于依赖流量获利的产品(常见C端);

使用方法没有绝对,根据使用场景的不同和运营决策的不同,输出登录页面时会有不同的结果。

如果产品服务的用户群体较为稳定,产品是用户必需品,要想要更好地运营用户,获取用户数据,就做了阻挡类登录注册,因为这样可以更好地拿到用户数据来为用户进行消息分发和大数据营销。

Image title


 

页面呈现

视觉设计角度


1.背景填充类(qq,得到,yummly,开眼)

用视频或图片背景做底图来营造氛围或突出产品功能,由于照片和视频比较吸引眼球,可以很好的减少用户在输入账号密码时产生的焦虑感,从而达到提升注册率的目的;但因为照片的背景较为复杂,有可能会造成文字识别困难,视频背景的流量消耗较大,用于H5页面可能会因为网络问题造成背景无法显示的问题。

Image title



2.品牌露出类(bilibili、百度、苏宁、淘宝)

通过放置logo等品牌元素加深用户对品牌的印象,和背景填充类的设计思路相反,在不干扰用户输入的同时尽可能地利用留白位置来强化输入和自身品牌。抓眼球能力相较于图片类型登录稍弱。

Image title




3.罗列功能类(红板报、皮皮虾、小红书)

一般使用大字体和大留白,尽可能少的呈现和登录无关的信息,减少视觉干扰、专注输入,是极致用户体验的一种表现,只展示对用户最有用的信息。缺点在于同质化比较严重对品牌的认知度较低。

Image title



4.简化步骤类(enjoy、福禄充值)

多使用弹窗形式,可和其他登录混用,当用户需要登陆操作时用最方便快捷的形式完成登录,这样可以减少页面跳转,减少用户跳出感,目的是用最直观的方式让用户完成登陆注册行为。

缺点是由于弹窗显示的功能不能太多,一般只能允许一到两种登录方式,适合登录方式较少的应用使用。不过这种方式广泛地应用于落地页的登录承接。

Image title





一些设计师认为登录/注册页面的呈现方式是根据自己的喜好来定的,这是一种不严谨的说法。

例如:

【开眼 eyepetizer】是做垂直类视频流的产品,用户群体比较小众,多是以一些精品视频来吸引用户,产品风格也是偏暗的,它的登录页面就采用了比较有视觉冲击力的图片和暗色调来填充。这样整体风格趋于统一,登录页面时尚有感染力,和产品的营销策略也一致。

而【爱奇艺】做的是平台类视频产品,用户群体覆盖全年龄段网民,信息的容纳性和对全年龄段互联网用户的包容性的是需要首先被考虑的,他的登录界面就包含了多种含第三方接口的登录方式和多场景的登录,这种具有包容性的第三方登录设计是爱奇艺业务拓展所需要的。

Image title


小结

更新:2020-04-14

收藏

14人已收藏

hxzsky

让这个世界变得更好,哪怕只是那么一点。

  • 5

    作品

  • 44

    粉丝

  • 39

    关注

  • IFENGMAO APP 产品重构
  • IFENGMAO3.0 经销商APP设计
  • IFENGMAO 3.0 火车票设计总结
  • 一些MD-UI的练习

    猜你喜欢

      2020-04-14 原创文章 经验/观点 举报 2522 14 8 2

      如何做依附产品的登录/注册页面

      0.0°

      你确定要举报如何做依附产品的登录/注册页面

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年12月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      14
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录