一个简单登录页面就能看出你的设计功底,不信?|来试试

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

清晰的操作流程

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

不需要注册登录

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

第三方账号登录

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

邮箱注册

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

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

手机注册

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

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

注重交互细节

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

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

弹出相对应的输入键盘

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

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

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

这是很小的细节,虽然用户可能不知道哪里不对,但是他能体会到好不好用。一个APP注意了这点,那用户就会觉得这个APP好用。

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

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

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

登录时增加一键清空icon

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

清晰的错误反馈

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

美观的视觉设计

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

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

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

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

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

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

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2017-02-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT 指南者专栏

全栈编程实战项目(一)

上次给大家推荐了一些全栈编程的学习资源,看了下后台,还是有很多人愿意去挑选资料去看去学习的。

3174
来自专栏IMWeb前端团队

[vue全家桶]每个人都能做的网易云音乐

本文作者:IMWeb 小前端 原文出处:IMWeb社区 未经同意,禁止转载 仿网易云音乐(webapp) 项目地址 (project address)...

3126
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–外部采购服务(209)-2业务处理

2、流程概览表 流程步骤业务角色事务代码预期结果创建采购订单采购员ME21n将创建外部服务的采购订单。维护服务条目表服务人员ML81N服务条目表已创建。审批服务...

3363
来自专栏知晓程序

小程序插件审核又没通过?这才是提审的正确姿势

1383
来自专栏游戏杂谈

IAP的几个问题

这种情况应该得到重视,对于用户而言实际上是钱已经消费掉了,但是元宝或者物品没有获得,这会让人很焦虑的。的确,作为一名开发人员,遇到这种情况,第一反映确实是苹果出...

1551
来自专栏九彩拼盘的叨叨叨

如何做一个高效的前端

不知大家有没类似这样的经历:一天忙到晚,一会被PM叫去确认需求,一会被设计拉去确认UI是否能实现,一会又被测试叫去确认bug,然后貌似做了很多事,但好像工作进度...

1462
来自专栏pangguoming

比较全的OA系统功能模块列表

如何判断一款协同OA软件,是否智能,是否注重细节,是否足够成熟呢?产品的设计优势、功能特性,需要我们总结,也需要让更多的用户了解。功能到底强在哪里?下文中将给出...

1.5K9
来自专栏腾讯社交用户体验设计

智图客户端 – 你的图片你做主 本地图片快速压缩工具

1603
来自专栏做全栈攻城狮

一直写代码,程序员你知道SEO吗?小白都要学的关键词排名技术

对于进行关键词排名,没有固定的模式,仅仅是基于传统经验之上慢慢摸索出来的一条道路,通过网站的一些设置让搜索引擎觉得网站更友好,提升搜索引擎蜘蛛停留时间,增加收录...

1213
来自专栏知晓程序

晓快讯 | 开发者一定要看!小程序可以设置「最低运行版本」了

知晓程序在 6 月 27 日下午发现,微信公众平台的小程序后台地新增了「公共库最低版本设置」的选项。

1143

扫码关注云+社区

领取腾讯云代金券