以小见大:如何设计注册登录页?

作者: 邹志楠 | 来源:发表于2016-11-22 22:39 被阅读5126次

朋友说某个APP不错,下载后正准备好好体验一番,却被糟糕的注册登录页面弄的精疲力竭,无奈最终只能放弃。注册登录流程能让用户扭头就走,也能让产品获得新用户的芳心。

一个合格的注册登录页面,应该是具有清晰的操作流程良好的交互细节美观的视觉设计

清晰的操作流程

APP的注册登录有四种情况:

不需要注册登录

常见于系统自带的工具类APP,像经常使用的闹钟、日历、计算器等等;一些简单的第三方APP:乐流,榫卯等。

这些APP的特点都是功能相对单一,比较“轻”,不需要记录用户信息或行为历史。

第三方账号登录

用户不需要输入注册登录信息,直接选择第三方账号就能完成登录。国内常见的第三方账号有微博、微信、QQ、豆瓣、人人等,国外常见的第三方账号有Facebook,Twitter,Google等。

现在国内除了超级APP之外的APP基本都支持第三方账号登录,这样能简化用户注册登录的流程,提高APP的用户转化率。


邮箱注册

最开始的时候注册登录是基于PC的,也就是基于网页,PC时代的互联网产品多使用邮箱作为唯一ID。所以邮箱注册成为主流,而且注册过程中需要验证邮箱也很方便,用户直接在PC端就可以完成所有操作。

现在很多APP依然保持着邮箱注册的方式。


手机注册

随着移动互联网的到来,人们触网的主要设备已经从PC逐渐转移到智能手机。

加上手机号码的实名制、全球通业务的普及,使得手机号码也具有了唯一标示性。而且在移动互联网时代,用手机号码作为登录ID,并用短信验证码的形式来验证ID,这些操作流程都基于手机端。所以手机号码逐渐取代邮箱成为APP注册登录的主流方式。

注重交互细节

APP的优秀与否,由很多因素决定,而良好的交互细节是每一个优秀APP的共同品质。只有从用户场景出发,并从用户的视角来思考产品,才能设计出打动人心的APP。


用显示/隐藏icon代替输入两遍密码

为了确保密码输入正确,很多APP需要用户输入两遍密码来确定密码输入无误,但这无疑增加了用户的工作量。替代方案是在密码输入框右侧增加一个“显示/隐藏icon”,让用户在输入完一遍密码后可以选择点开“显示/隐藏icon”来确保密码输入无误,减少用户的工作量。

弹出相对应的输入键盘

点开邮箱输入框,弹出带有@的英文输入键盘。

点开手机号输入框,弹出九宫格数字输入键盘。

点开密码输入框,弹出英文输入键盘。

这是很小的细节,虽然用户可能不知道哪里不对,但是他能体会到好不好用。一个APP注意了这点,那用户就会觉得这个APP好用。而另一个APP没有做到这点,无论点击哪个输入框弹出的都是九宫格中文输入键盘,用户就会觉得这个APP不太好用。

作为设计师,要知道用户觉得不好用的原因是什么,这样才能对症下药,改善用户体验。

对手机号码进行3 4 4的分布。

这个规则不仅适用于手机号码,包括银行账号、转账金额等等。

这是因为人的短期记忆是有限的,即一次只能记住有限的东西,如果强制记住很长的东西,短期记忆就很容易出错。

所以将数字以4或者3为单位分组,有利于用户阅读、编辑、校对手机号码。

登录时增加一键清空icon。

在登录的时候偶尔会出现输入错误,如果没有这个清除的icon,用户只能按键盘中的清除按钮,需要一直按住直到输入框为空。

一个是只需要点一次就能清空,一个需要长按一段时间或者连续按多次才能清空,孰优孰劣可想而知。


清晰的错误反馈。

当用户输入错误信息时,最好利用临时框的形式提示用户。而不是不做反应让用户自己去猜到底是怎么回事。

临时框也有两种形式,一种是左边的对话框形式,这需要用户点击确认才能进行下一步操作。一种是右边toast的形式,弹出一两秒后自动消失。个人更倾向于第二种形式,因为第一种形式相当于强制中断了用户的操作,用户需要点击确认才能回到原来的操作流程。而toast则起到了提示的效果,并且没有打扰到用户。


美观的视觉设计

紧密:通过元素的远近将相似元素分为一组。

对齐:通过对齐,规范元素的排版 。

简约:注册登录页面的背景尽量简约,从而让主体信息更加突出。

对比:将重要的内容放大,增加色块背景;将相对次要的内容缩小,降低明度等从而使       得信息层级清晰。

均衡:注册登录页面几乎都是沿着中心线左右对称的,信息是左右均衡摆放的。否者会导致页面不平衡。

平时收藏的一些好看的注册登录页面:

相关文章

  • 以小见大:如何设计注册登录页?

    朋友说某个APP不错,下载后正准备好好体验一番,却被糟糕的注册登录页面弄的精疲力竭,无奈最终只能放弃。注册登录流程...

  • 【视觉设计】以小见大:如何设计注册登录页?

    以小见大:如何设计注册登录页? 本文由 @邹志楠 原创发布于人人都是产品经理 朋友说某个APP不错,下载后正准备好...

  • 登录注册修改密码

    1.为什么要设计登录注册修改密码模块 2.登录注册修改密码模块分类 3.如何设计登录注册修改密码模块 4.登录注册...

  • 设计精美的移动端Axure【登录页-注册页-弹出页-引导页】&【

    设计精美的移动端Axure【登录页-注册页-弹出页-引导页】&【个人中心页-浏览页-聊天页-列表页】 作品类型:移...

  • 简单需求分析

    用户模块 1注册页 注册时验证用户名是否被注册 完成用户信息注册 2登录页 显示登录页 实现用户的登录功能 3 用...

  • 登录注册小心得

    最近看到很多关于如何设计登录和注册的文章,其实去年自己也针对登录注册的设计做了一点小小的总结,翻出来晒一晒。 登录...

  • APP的注册和登录功能设计

    本文探讨如何为APP设计一个兼具可用性、易用性和安全性的注册和登录功能。 一、为什么需要注册和登录? 是否需要注册...

  • hbymV2

    登录注册 1、模态出登录页2、注册页 按照iOS来 “注册账号”改为“用户注册” 去掉图片 编辑个人信息 1、...

  • Axure实例——主流登录/注册原型

    1.设置动态面板: 首页 注册/登录页 密码登录页 成功页 试用页 2.首页(动态面板状态:shouye): 登陆...

  • 1、注册登录页

    register.html 目标 html部分 css html部分 目前效果: css 美化 1、整体 2、he...

网友评论

  • 云朵_云朵:很精彩
  • 1eaf8d616a84:写的很详细,对设计小白很有帮助,干货
  • Fly拖鞋:挺好的, 但是就密码和帐号这个错误,曾经询问过开发人员,如果安全性比较重要的 ,是要求不给出帐号或者密码的明确错误,只提示两者中错误让用户检查!以防止恶意撞库!
    7b6954747851:@Fly拖鞋 答主说的是,在提示信息的展示形式时,后一种小范围浮层提示比前一种全屏浮层提示要好,并没提及具体提示信息内容。 需要注意的是,答主所认为好的方式也会有隐患,错误信息展示不够明显,且不中断用户操作,就表明用户在密码错误的情况下可一直操作,并一直调用账户密码验证接口。
  • 一只大东瓜:为什么我感觉相当于什么都没讲:joy:
  • 983f3fa652fc:楼主,要是有2种角色的注册或登录怎么弄比较好
    7b6954747851:@VinJane 应该是在注册完成后选择角色,不管角色身份在选择后有没有切换的场景。
  • 8ed9cf6dfbac:然而自身并不喜欢手机号注册可偏生有的app居然只能第三方登录然后自动绑定或者一定得手机号注册……对于这种我才不想理你!直接退出卸载。管你是什么。
    41e8050c6759:@星辰尘 +1
    8e47b82fb2be:@星辰尘 不喜欢手机号注册+1
  • 72b0fa5aa2d2:好好好
  • 静哥哥的蓉儿:不要让一个APP死于注册阶段😂
    邹志楠:@静哥哥的蓉儿 总结的好
  • Ringzz:使用第三方登录的方式,在哪些地方引导用户完善手机号更合适
    33f8b9a057c5:或许是用户完成了一次完整的使用流程之后?又或者在距离完成操作仅有一步之遥的时候(友善度应该是极差的吧?
  • WangPengGuy:图片排列的很机智👍
  • Ms邓的橙子:一天一点涨姿势:coffee:
    邹志楠:@飞芸 :+1:

本文标题:以小见大:如何设计注册登录页?

本文链接:https://www.haomeiwen.com/subject/gewspttx.html