关于app注册登录页面的思路整理

原创文章 分类: 经验/观点 版权:
4191 22 31 0
2016-12-17
17.3


最近几天在研究注册和登录界面,收集整理了很多国内外的注册页面和登录页面,也下载了很多喜欢的app,截图保存了部分注册登录界面;


再看了很多前辈的关于这方面的经验之谈,也尝试去整理出一套自己的观后感;

可惜段数有限,还没有那些能力,这里暂时先整理下自己的思路,把一些自己的思考写下,方便日后自己的工作设计。Image title


首先是闪屏页面



它是一个app必备的页面,在开机读取数据的时候展示品牌或者广告,具有不可操作性(有些有跳过的按钮);


主要是一些产品图标、企业标识、广告slogan等。

这个比较简单,主要是像做banner一样需要做的吸引人,掌握好色彩和板式,具有一些时效性,比如时下的热点、节气假期的推广或者一些活动的推广等等。Image title


然后就是引导页面了



引导页面也叫指引页面或者欢迎页面,它不是app必备的页面,但是最好有,他是一个app的引路人,可以减轻用户的一些对产品认知上的问题;


引导页面主要是具有时效和话题性的页面,也有一些趣味性在里面,主要是介绍新版本的功能为主;


在功能分类上主要有插画类、功能介绍类和图片文字类;


在制作手法上有品牌插画类、故事场景类、功能介绍类、广告平面类个创意动态类;

下面虾米音乐的案例就是视频类的,很流畅,视觉冲击力也比较强,同样的还有qq音乐的也是。Image title


第三部分就是注册页面了



现在主流的有手机号码注册、邮箱注册和第三方授权登录三种方式,个人觉得手机号码注册最好,这个方式也是目前主流产品的手法;


当然第三方登录更快捷,只是第三方登录的用户本质上不是你的用户,需要在后期靠产品内容去引导转化;


邮箱是方便后期的广告的推送,只是在手机端接受邮件打开再回来app就显得很麻烦了,当然这些方法主要还是根据每个产品的定位去操作。


在设计注册页面的时候要注意一点就是信息架构和任务流程,架构上主要是一个用户信息和验证码的设计,在任务流程上主要是逻辑关系和页面流的设计。




之前看过一篇文章是讲提高注册页面的体验方面的,这边整理下搬过来;



1.短任务多页面的注册流程,可以减少用户填写表单的焦虑,帮助用户理解操作提高效率,增加注册转化率;


2.移动端最好使用手机号注册,手机顶部推动的短信符合7±2的6位数验证码,方便用户查看和填写;


3.手机号码分段显示,11位数的号码分成344的展示方式可以帮助用户阅读和记忆,方便用户检查是否输入正确;


4.保证用户在填完密码的时候才完成注册,意思就是先让用户完成密码步骤在填写验证码或者在验证码填写完毕后直接跳入密码窗口填写,避免用户在填写验证码之后页面关闭导致注册流程完成了却没有设置密码的情况出现;


5.先验证一个输入域在填写下一个,这个也是对应第一个原则,在第一个输入完毕之后光标自动切入第二个输入域,避免来回切换输入框的麻烦;


6.默认键盘的选择,在输入手机号和验证码的时候弹出的默认键盘为数字键盘,而在输入密码的是英文键盘;而键盘是否自动弹出则根据产品属性来选择,不自动弹出在页面整洁度上闲的干净,自动弹出的话再操作效率上体验更好;


7.密码是否可视化,一般在具有支付功能的app上最好不要密码可视化,在无支付功能或者弱支付功能的App上,比如音乐播放器,视频类的,可以选择密码可视化,或者直接给个开启关闭可视化的按钮给用户选择,但是我们是设计师,我们需要引导用户刦操作,还是看具体的产品来操作;


8.针对输入错误的修改,有很多人在输入的时候输错了一个数字需要修改的时候只能全部删除重新来过,这时就有人提出应该可以针对某一字节来修改,会更方便,只是我觉得在88像素的框里面要精确选择某一个字节是很难的,还是全部删除重新输入更方便;


9.找回密码的按钮很重要,不一定要在显眼的位置上面,但是在用户需要的时候一定要找得到;


10.位用户提供详细的错误反馈,这个也是和密码可视一个道理,涉及到支付功能的app最好不要提示的很详细,可以有效保护用户的安全,而不涉及支付的app可以把提示做的更贴心一点;


11.需要提供记住密码和用户名的功能,避免用户在退出登录之后还要重新输入账号密码,可以有效减少用户受到的干扰,更方便的加入操作流程;


12.最重要的就是简化注册流程,手机号---验证码---密码,一步到位,不要过多地干扰用户。


(原作在这里,他总结的更好 http://www.ui.cn/detail/71046.html)Image title


最后就是登录界面了



页面上提供账号密码两个输入框、登录按钮、第三方授权入口以及忘记密码和注册的入口;


特别是按钮的状态需要特别留意,在PC端需要有normal、hover、down(pressed)、disabled状态,在mobile端则需要normal、onclick、disabled;


可以在按钮上的做一些微交互,当然是简洁的那种,简单的事物复杂化,复杂的事物简单化。

Image title


最后的最后需要注意的就是设计背后的逻辑关系的处理



了解设计场景和设计目的

也许我们投入了很多资源来引流,当用户到达这个页面的时候,我们设计要做的就是尽量想办法留住他们;


换位思考

学会站在不同的产品的立场分析别人的设计思路,思考的不仅仅是视觉表现层面的东西;


视觉简单,逻辑通畅

目前大部分的注册流程为分解的形式及一站式,结合产品实际场景选择适合自己产品的,尽可能的简化信息、缩短流程,提升注册达成率;


对于交互对象的多层次视觉呈现

比如文案提醒、示错、验证提醒,按钮的响应反馈,都是提升用户体验的小细节;


基础规则

很重要在对象对齐及排列方式,学会依靠一些定律,法则,可以是我们在迷茫不定的时候,看清方向。


(原作在这里 http://www.ui.cn/detail/96771.html)



下面是一些自己做练习的页面,还是新手,各位多多指教,不足之处还请指出,我会改善。Image titleImage titleImage titleImage titleImage title

林霏霏

求一份上海地区的UI设计师工作机会

13粉丝/22关注

影盟小站—电影资源分发轮滑小助手app设计

林霏霏

林霏霏

求一份上海地区的UI设计师工作机会

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN