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

那君只为梦想而生谱写点滴 那君只为梦想而生谱写点滴     2022-08-31     257

关键词:

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

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

模拟atm系统——用户注册登录和操用户作页设计查询账号退出账号功能(代码片段)

开发工具:idea一、项目步骤:1.系统准备、首页设计2.用户开户功能3.用户登录功能4.用户操作页设计、查询账号、退出账号功能5.用户存款功能6.用户取款功能7.用户转账功能8.用户修改密码、注销账号功能二、各部分内容和代码1... 查看详情

聊一聊登录页设计那些事儿

...之地。 无论网页或是移动APP的设计,很重要的一点是如何能在小而美和功能复杂性之间找到平衡点。在执行设计的第一步,便是思考如何利用原型工具诸如Mockplus或Axure在初始阶段 查看详情

如何设计一个单点登录系统?

在上一篇文章如何设计一个单点登录系统(2)?中主要讲解了可跨域SSO系统服务端,客户端在登录,登出过程中分别应该承担的职责,本文将重点聊一下具体技术实现,源码地址:https://github.com/zhoudapeng/zsso首先聊服务端的实现... 查看详情

jsp注册登录页教程

 转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html 一、准备工作已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章《SSH框架搭建详细图文教程》。 二、登陆功能1.打开MyEclipse切换到MyEclipseDataBas... 查看详情

注册完成后,如何通过js点击跳转链接关闭跳转页,回到登录页?

参考技术A<?php  echo "<script>window.location.href="首页的地址,可以是xxx.php,相对路径,也可以是绝对路径"    </script>"  //另一种直接返回  echo “ <script>his... 查看详情

如何设计一个单点登录系统?(代码片段)

单点登录系统的由来随着互联网技术的发展,目前各大公司都在疯狂扩张业务,比如像阿里巴巴,旗下就有淘宝,天猫,支付宝等业务线,按照目前的互联网产品,基本上每个产品都会涉及到账户体系,不管是社交也好,电商也... 查看详情

设计注册成功,登录失败

】设计注册成功,登录失败【英文标题】:Devisesign-upsuccessful,loginunsuccessful【发布时间】:2016-12-0116:38:14【问题描述】:正如标题所说,我使用设计中的用户名和密码字段正确注册。但是,当我尝试登录时,会显示\'InvalidEmail,Logi... 查看详情

博客项目总结

文章目录一、登录二、如何维持登录三、博客列表页1.博客列表页的显示2.博客列表页的构造四、发表博客,五、查看博客(详细内容)六、删除博客七、注销八、注册九、模板设计实现模板文件项目中考点一、Tomcat是什么?... 查看详情

230.动态单页登录+注册(代码片段)

效果(源码网盘地址在最后)源码index.html<htmllang="en"><head><!--Requiredmetatags--><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no"/ 查看详情

do-now—团队scrum冲刺博客——第二天(代码片段)

各个成员今日完成的任务侯泽洋:完成奖励页面设计,完成奖励从云端拉取到本地:完成奖励从云端拉取到本地周亚杰:完成个人中心页面设计,登录界面美化:注册登录界面美化王志伟:完成倒计时功能,并对页面进行优化:... 查看详情

css材料设计注册登录表(代码片段)

查看详情

case2注册登录界面

最终效果(此文仅呈现登录页的效果):登录页错误页步骤:1拖入一个文本框,一个矩形(文字),一个动态面板2.在动态面板设置几个状态:defaultlostFocusOklostFocusErroronFocusdefault:拖进一个矩形场景:常态lostFocusOk:拖入一个矩... 查看详情

登录、注册及cookie

...录  3.1输入管理员用户名及密码,跳转到管理页注册模块1.用户输入用户名及密码,调用接口1.1注册成功直接跳转到登录页cookie.js为公共方法,用于cookie的存储、获取及删除home.vue为用户登录成功之后的主页login.vue为登录... 查看详情

第五组交互设计文档hungerkiller

 【第五组】交互设计文档HungerKiller整体流程主页面  登录注册小弹窗 点击主页用户头像区可以进入登录注册页面,未注册用户选择注册按钮,链接到注册页面。登录用户名和密码不为空,记住密码和自动登录可选... 查看详情

hybrid设计--如何落地一个hybrid项目

前后分离 -> 统一前端框架->同一个账号体系 -> 登录注册的公共页-> 有了这些公共业务后推行->Hybrid技术 底层容器开发出来后->调试工具 (ios、安卓)->文档 Hybrid文档写清楚 第一... 查看详情

Rails:登录或注册后设计重定向到存储位置?

】Rails:登录或注册后设计重定向到存储位置?【英文标题】:Rails:Deviseredirecttoastoredlocationaftersigninorsignup?【发布时间】:2011-07-1210:25:51【问题描述】:我正在编写的Rails应用程序中使用Devise,我想让用户在登录或注册后回到他... 查看详情

用django设计一个简单的注册和登录界面

参考技术A你好,我有这些文档.本回答被提问者采纳 查看详情

decoration7:注册登录设计

首先顶一个小目标:从前台写入用户数据后,登录的时候输入用户名和密码,能够查询数据库成功,同时记录session数据1、Login界面,为了只关注主线任务,我直接套用一个bootstrap模板adminLTE(https://adminlte.io)2、Regist分为ok和notok两... 查看详情