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

一个合格的注册登录页面,应该是具有清晰的操作流程。

朋友说某个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

时间: 2024-10-18 14:54:06

以小见大:如何设计注册登录页?的相关文章

JSP注册登录页教程

转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html  一.准备工作 已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章<SSH框架搭建详细图文教程>. 二.登陆功能 1.打开MyEclipse切换到MyEclipse DataBase Explorer视图,右键user表选择"Hibernate Reverse Engineering",通过Spring框架的逆向工程功能把user表逆向生成Java

注册和登录表单切换的大气登录页模板

全屏的背景图片,简洁的设计,注册和登录表单可切换,很不错的登录页模板.演示  下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><he

通过ajax前端后台交互/登录页和注册页前端后台交互详解/前端后台交互基础应用/几个后台函数的基础应用/php文件函数基础应用/php字符传函数基础应用/php数组函数基础应用

  前  言  PHP     学习了好久的PHP,今天做一个可以后台交互的登录页和注册页,没做什么判断,简单的了解一下. 具体的内容分析如下: ① PHP中的数据传输-->>由注册页传输给注册页后台-->>注册页后台经过转码保存实例化的文件 ② 在登录页输入账户密码,点击登录时,获得触发函数:获得由后台传输过来的true或者false---转换页面或者弹出输入错误.    登录页后台获取保存账户密码的实例化文件,通过转码,if判断之后传输给前台登录页TURE或者FALSE. 总共

express+vue+mongodb+session 实现注册登录

上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能,那么今天是在那个基础之上做了扩展,首先实现的功能有如下: 1. 支持注册,登录功能,用户可以注册完成后,进行登录,登录完成后会进入到列表增删改查页面.2. 支持session会话,也就是说设置了多长时间登录过期,如果用户没有登录,直接进查询列表页面,会重定向到登录页面去,如果用户登录了后,把浏览器关掉,直接输入列表查询页面,会直接进入列表页面的.3. 列表数据加入了分页功能.4. 对数据库

node.js基于express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本,因为express因为版本的不同使用的方式也不同,我这算是目前最新的了吧 还没有装express的可以移步到这里 看看express框架的获取安装 1.简单地项目初始化 进入你的nodejs安装路径下边,如图,然后执行命令  express -e test  (这里把项目名设置为test

SSH系列:(19)系统首页、子系统首页、登录页、项目主页

在这里,有三个名词需要区分:项目首页.系统首页.子系统首页.登录页. 项目首页是指在web.xml文件中配置的页面.   <welcome-file-list>     <welcome-file>index.jsp</welcome-file>   </welcome-file-list> 当一个系统比较大时,可能包含多个子系统.系统有自己的主页,称为系统首页:而子系统也有自己的主页,称为子系统首页. 登录页,则是用户进行登录的页面. 1.系统首页 (1)

Jquery+PHP实现简单的前后台数据交互实现注册登录,添加留言功能

页面样式应用了BootStrap框架. 首先看登录页(登录页用于账号登录,也可以跳转到注册账号页): <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户登录--杰瑞教育图书管理系统</title> <link rel="stylesheet" type="text/css" href="

【SSO单点系列】(3):登录页验证码的添加

这一篇主要是讲解怎么在登录页上添加验证码功能,默认的登录页是只有用户名与密码功能.其他我觉得加验证码没什么用,因为现在我部门做的系统主要是放在内网里,外网是不能访问的.登录页的验证码主要是为了防止进账号进行暴力破解,不过我觉得客户估计也不会没事去搞这玩意.以上只是我自己的个人见解,可能有失偏颇,就当作是对客户的愤怒的一种发泄吧,大家看看就好,最近真是被客户搞得头都大了.不过,如果你的系统放在外网上,那验证码是必须要加上的 .  好了,牢骚发的差不多了,下面进入正题吧! 最终效果图 简单做了个页面

如何提高移动端注册登录体验

有多少用户愿意注册登录,决定了一款产品的活跃度.我们来谈一谈如何提高移动端的登录体验. 一.登录类型 用户通常有三种不同的方式来登录一个APP: 第三方授权登录的方式,优势是,省去用户注册这一流程,让用户可以在第三方授权下迅速登录.劣势是用户不是你的用户,是第三方的用户,流量可能只是暂时的,而且转化起来比较难.但我个人还是倾向于第三方授权登录的方式,因为第三方大多数都拥有海量的活跃用户,而且我们还可以在后期进行有针对性的转化—给用户一系列个性化设置.绑定手机号的操作流程. 最反感用第三方授权登录