以小见大:如何设计注册登录页?
一个合格的注册登录页面,应该是具有清晰的操作流程。
朋友说某个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则起到了提示的效果,并且没有打扰到用户。
美观的视觉设计
紧密:通过元素的远近将相似元素分为一组。
对齐:通过对齐,规范元素的排版 。
简约:注册登录页面的背景尽量简约,从而让主体信息更加突出。
对比:将重要的内容放大,增加色块背景;将相对次要的内容缩小,降低明度等从而使 得信息层级清晰。
均衡:注册登录页面几乎都是沿着中心线左右对称的,信息是左右均衡摆放的。否者会导致页面不平衡。
平时收藏的一些好看的注册登录页面:本文原作者 : 邹志南 转载于产品100 ,如需转载请联系原作者授权
转载地址:http://www.chanpin100.com/article/102997
转载于:https://www.cnblogs.com/gxbk629/p/6842468.html
以小见大:如何设计注册登录页?相关推荐
- UI设计灵感|挑战经典!不一样的注册登录页
登录注册页对于大部分产品来说都是比较基础的模块,它看似简单却与产品功能与用户使用场景密不可分,受到产品定位.用户操作.业务逻辑等不同因素的影响.登录注册页是链接用户跟产品中间的纽带,连接产品与用户.不 ...
- Thinkphp5乐兔CRM之Mockplus 原型设计的登录页
2019独角兽企业重金招聘Python工程师标准>>> 这次的CRM客户关系销售管理系统项目没有选择用Axure来做原型,而是用Mockplus来设计.登录页的界面很简单,只有手机号 ...
- Axure教程:一个通用的app注册/登录页
今天给大家分享一套APP注册/登录界面模板,其中包括本机登录页面,短信验证登录页面,密码登录页面,人脸登录页面,微博.微信.QQ.支付宝登录页面,注册页面,用户协议和隐私条款.该原型使用简单,交互完善 ...
- vue:结合elementUI设计网站登录页
这次主要是记录三个重点:1,组件间通信的方法(其一)2,脚手架搭建的vue工程的组件调用 3,elementUI 的轮播图与模态框的设计 先看效果图 简单的就做了这四个页面,总共四个组件实现这些效果( ...
- 美化版彩虹自助下单程序注册登录页源码
介绍: 直接替换文件即可,注意备份 网盘下载地址: http://kekewl.org/8xYuGYGsYJS0 图片:
- UI设计灵感|注册登录页面怎样设计才更合理?
任何一个需要用户提供信息的表单设计,我们都需要从产品和设计两个角度来进行思考. 一个功能的体验是否足够好不仅仅在于设计,很多时候甚至在产品设计的阶段就已经被下了定义. 先从产品角度考虑,是因为产品的需 ...
- 注册登录的设计:基于33款APP的注册登录分析
对33款APP进行7个维度的对比分析后,为自己解决了有关注册登录设计的疑惑:并不是所有的应用都有设计注册登录的必要性:注册设计包括了路径设计.流程.内容设计--你在设计时是否也出现过类似的疑惑呢?不妨 ...
- 设计灵感|APP注册登录页面的设计形式
注册登录页面是一个APP的门面,它的好坏与否直接影响着APP的用户数和用户体验. 作为一个设计师,其实经常时不时就会去下载一些APP,体验的时候经常被一些不尽人意的注 册登录页面弄的想怒摔手机,最终都 ...
- 【实战 Ids4】小技巧篇:自定义登录页操作
今天的内容很简单,1分钟就能看完,5分钟就能学会,但是却是在我们平时开发中必须要学会的一个小知识点,我就不让大家走弯路了,直接看操作. 在平时的IdentityServer4开发中呢,我们都是根据官方 ...
最新文章
- Pandas 基础 (2)—— DataFrame
- 开发自己的山寨Android注解框架
- scroll-view实现自定义下拉刷新
- 从一生的角度看程序员的学习和发展
- 学习java的中文网站_学习java的网站有哪些
- 使左对角线和右对角线上的元素为0
- Python:绘图保存时出现空白图像的解决和如何保存图片
- C++20 系列(一)- Hello C++20
- Spark 2.1.0集成CarbonData 1.1.0
- 为什么火车上的网速都超级慢,并且信号极差?
- [CF321E] Ciel and Gondolas
- linux系统 锐捷_Client for RuiJie(锐捷客户端 for linux) 升级版
- 【机器学习实战】1、机器学习主要任务
- Java 题目:有一个已经排好序的数组。现输入一个数,要求按原来的规律将它插入数组中。
- ts错误:由于函数不具有返回类型批注并且在它的一个返回表达式中得到直接或间接引用,因此它隐式具有返回类型 “any“。
- 微信公众平台消息接口开发(8)小黄鸡(小贱鸡)机器人
- 绿色软件联盟:杀毒软件已经进入空前弱智与混沌状态
- DAC0832数模转换芯片介绍及使用教程
- php amp 转义,HTML转义和反转义
- 广义相对论和量子力学在哪些地方发生了严重的冲突(转)