APP推广合作
联系“鸟哥笔记小乔”
详解app登录注册细节设计
2021-04-01 16:17:40

一、APP登录注册

1.1 移动设备属于个人私密性较高的设备,用户在进行操作时,可对输入密码进行有效的保护;

1.2 移动设备随身携带,随时随地在变换位置,网络状况不稳定因素很多;

1.3 移动设备显示区域均较小,登录注册页面通常都会有3个页面(M站通常在一个页面),需要用户填写的内容要精简;

1.4 移动设备输入更多是手指触屏操作,人机交互有其独特性,例如虚拟键盘的设计,特效的设计等。

二、关于APP登录注册设计前的思考

在开始设计产品之前,一定要先想清楚:

为谁设计登录注册?

是否一定要登录注册?

是否需要独立的账户体系?

哪些操作需要用户登录?

三、登录注册的设计步骤

假设前面的问题都搞清楚了。那么我们来设计登录注册。

第一步:梳理脑图,梳理现有的登录模式和信息结构;(一般会用xmind,操作简单易用,最主要是免费......)

第二步:梳理业务流程,把每一步操作都流程化,做好各种情况的处理方案(梳理流程非常非常非常重要);

第三步:画出草图/线框图,对页面元素和布局进行初步设计;

第四步:交互设计,对每一项页面元素、页面跳转、操作反馈、异常处理、按钮和页面的各种状态等做出设计;

第五步:自检测试,对线框图和交互设计进行自检,最好是用Axure等交互软件进行交互设计操作,建立自己的自检清单;

第六步:输出PRD、线框图和交互设计稿。

四、设计的细节问题

由于每个页面都要设计很耗费时间和精力,所以我只做简单地总结。

以注册为例,注册通用流程:是填写手机号码——获取验证码——填写密码。

1.账号

1.1 账号有无格式的要求,如果只是手机号码,前端是否需要验证手机号码的有效性?

1.2 手机号码为纯数字,是否弹出纯数字键盘方便用户快速填写及避免用户来回切换?

1.3 手机号码的数字如何呈现?哪种格式?

2.验证码

2.1 验证码的格式,是四/六位数字验证码,还是英文+数字验证码,英文是否区分大小写?

2.2 按钮默认显示状态、用户输入信息后按钮颜色变化效果,该如何设计比较好?

2.3 倒计时如何设置?button还是label ?用哪个好?为什么好(好在哪里)?如何设计?

2.4 验证码的倒计时一般默认采用60秒的居多,但是一般验证码的有效期为5分钟。之所以设置60秒是因为在绝大多数情况下,60秒内验证码是能够发出的,如获取不到,让用户所等待的时间又不至于太长,降低用户焦虑,提升体验。

3.密码

3.1 最少和最多字符设置,提示文字为“位”还是“字符”?如“请输入6-16位字母或数字”

3.2 密码是否要限制特殊字符?如“空格”、“/”等,为什么要限制?有没有安全方面的考虑?

3.3 密码设置好后,注册按钮如何变化?点击“注册”后,在网络较慢的情况下,页面和按钮如何响应,是否要加锁屏浮层+缓冲提示语?

4.错误提示

4.1 错误时的报错提示文字是什么,提示格式是弹窗、Toast、还是在当前页面文字显示?

4.2 Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失。

4.3 弹框会阻断用户操作,需要手动点击确认以后才会消失。

4.4 在当前页面文字显示的话,提示文字摆放的位置,页面格式根据提示文字的变化,需要有怎样的视觉效果

5.异常提示

5.1 点击【获取验证码】,检测手机号已被注册,如无置灰设置,输入框为空,手机号码无效的情况,故需提示:

5.1.1 手机号已被注册,是否提示用户登录?

5.1.2 手机号不能为空,多次为空状态点击是否给出频繁操作提示?

5.1.3 手机号码不正确,“请输入正确的手机号码”是不是比“手机号码错误”好些?

5.2 点击【注册】时,可能会有输入框为空,验证码无效等情况,如无置灰设置,故需提示:

5.2.1 短信验证码不能为空

5.2.2 验证码已被使用,然后给出什么操作呢?

5.2.3 验证码已过期,过期了给出弹窗吗?在弹窗直接获取验证码?

5.2.4 验证码错误,弱提示?

5.2.5 验证码已达到最大尝试次数,最大是多少次?

6.短信验证码

6.1 短信验证码一般通过第三方通道发送,在技术侧做规避,还需要在产品规则上做一定限制;

6.2 验证码的格式需要简单明了,如“880207,XX验证码。【XXX】。

6.3 验证码的字数限制,一般为6位纯数字。

7.邀请码

7.1 注册是否为邀请注册?如是邀请注册,邀请码格式如何设计?

7.2 邀请码错误提示,填写了邀请的用户和没填的用户,在注册成功后有何区别?有邀请码的用户是否有奖励?

8.注册成功后的提示、状态变更及页面跳转

8.1 注册成功后同时切换为登录状态,登录状态账号密码保存是否设置期限?

8.2 给予注册成功的提示并跳转到相应页面,目标页面状态如何是否有缓存,是否需要缓存?

8.3 之前是在需要token的页面跳转到注册页面的话,注册成功后需自动跳转回之前的页面

8.4 注册之前有第三方登录,用户注册后还需要用户绑定第三方账号吗?

五、其他注意事项

1. 输入框

1.1 手机号码输入框,手机号码显示一般是344格式,这样便于用户检查号码是否正确,如:188 8888 8888;

对输入手机号的判断,首数字必须以1 开头,非1字符及提示错误,第二位数字必须在3到9之间(包括3到9),不在范围即提示错误等等

1.2 验证码输入框,长度一般比较短;

1.3 密码输入框,默认一般为密文显示,为了更好的交互可以设置明文显示按钮,最好只设置一次密码,为什么这样?

2.按钮

1.1 按钮设计,提交按钮和文字按钮的位置和主次布局设计;

1.2 按钮状态的设计,不同的状态操作都要考虑,默认置灰和高亮的条件,按钮置灰的意义何在?

1.3 按钮提交反馈,点击操作要给出响应或反馈。

3.验证码

3.1 验证码的格式,字母、数字、字符等,一般为数字4位或者6位;

3.2 验证码的有效时间,根据不同的产品设计不同的有效时间,在有效时间内的验证码操作需要给出明确的反馈;

3.3 验证码的获取次数上限,技术限制和产品设s计限制同步,避免被无限制获取;

3.4 验证码获取时间,一般为第三方发送,但时间最好限定在5秒内让用户获取到

3.5 验证码是怎么触发得到的?为什么有些设计为点击那妞页面跳转时获取,有些页面跳转后再次点击才能获取?为什么有不同?

3.6 触发后倒计时状态有何变化?重新获取验证码后,原验证码如何处理?

3.7 短时间内多次获取验证码是否还要给用户发送验证码?还是提示验证码已发送请输入?

4.返回按钮

4.1 在注册、找回密码、第三方登录等操作流程中,返回时需要特别注意点击返回后的操作提示;比如注册手机的修改,验证码提交后设置密码等。

4.2 点击返回时,干扰了正常流程的操作一般需要强提示,提示弹窗注意文案和按钮文字设计

4.3 点击返回后,当前页面和目标页面状态是否变化?例如手机号码是置空还是显示已输入的手机号码?

4.4 浏览应用过程中进入登录页面,登录页面是否需要有返回按钮?

六、总结

登录注册的设计涉及到很多方面,是最常见也是最容易被设计者忽视的地方。每一个元素的设计都要独立思考,不能照搬全抄,也不能异想天开,需要提前理解和思考,多想几个为什么,多问自己几个为什么?而在实际设计的过程中,需要重点考虑实际的应用场景。

‍-END-

运营那些事儿
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
运营那些事儿
运营那些事儿
发表文章38806
确认要消耗 0羽毛购买
详解app登录注册细节设计吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接