恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动端UI界面设计之-注册登录
0.0°
2018-06-14 原创文章 经验/观点 举报 4153 5 5 0

今天,小编将和大家一起来聊聊移动端UI界面设计之-登录注册那些事。希望能对设计的朋友有所帮助。

注册登录是移动端UI界面设计中最基础的板块之一,界面看似简单,但是想设计一个让人眼前一亮的注册登录界面并非易事。今天,小编将和大家一起来聊聊移动端UI界面设计之-登录注册那些事。希望能对设计的朋友有所帮助。


Image title


本文架构:


常见注册方式


常见登录方式


精美注册登录设计界面模板


设计工具推荐


总结


一、常见注册方式


1. 邮箱注册


使用邮箱注册PC端产品是我们日常最常见的注册方式之一,随着移动互联网的飞速发展,人们在利用日常的碎片化时间,越来越依赖于移动端产品。大多数移动端产品仍然给用户提供此注册方式。


在国外,邮箱仍是人们之间进行相互沟通的主要方式之一。因此,国外一些主流APP中,都会保留这种注册方式。比如:YouTube、Facebook、Twitter等。 

 Image title                

ALT:邮箱注册


2. 用户名注册


用户名注册也是之前PC端注册的常见方式,可直接省去手机、邮箱验证的复杂流程,简单便捷。但是不足之处也非常明显,如果用户长期未登陆,可能会遗忘账号。这种造成的后果只有两种:


①用户必须重新注册,严重影响用户体验。


②用户放弃使用,致使开发商用户流失,损失利益。


3.手机号注册


Image title


ALT:手机号注册


手机注册相比邮箱和用户名注册,优势非常明显。随着智能手机的飞速发展,手机用户群体数量庞大。使用手机号注册也逐渐成为了移动端APP注册的主要方式。其主要优点如下:


账号易记,避免不必要的用户流失 移动验证更安全、方便 手机号需实名认证,真实性更高 大大提高用户粘度 通讯录关系链导入,可为开发商迅速获取新用户

当然,使用手机号注册也存在一定弊端,诸如:


手机号与用户一一对应,个人隐私易泄露; 用户更换账号验证较麻烦,尤其是手机丢失的时候; 垃圾短信增加,严重影响用户体验;


4.通过第三方账号注册


常见的第三方账号注册的主要是利用像QQ、微信、支付宝、新浪微博等平台进行授权登录。


Image title


ALT:授权登录


优点:


点击“授权”即可登录,快捷,方便 省去注册流程,节约时间,避免因注册环节复杂而流失部分用户 可直接获取用户头像、昵称等信息,无需再次编辑 有效提高用户粘度,留住用户(用户进入产品,能快速找到QQ、微信上熟悉的人)


缺点:


无法统计真实用户数据,易造成一人多账号 开发商只能获取用户有限信息,后期不能通过手机短信、邮件等有效传递方式对用户进行更精准的营销。


二、常见登录方式


1. 使用注册账号(邮箱、用户名、手机号)+密码登录


这些都是我们日常使用产品时常见的登录方式,现如今的移动端APP,使用“手机号+密码”最常用的方式,可大大降低用户的流失率。此外,在用户忘记密码时,可方便用户快速找回。


Image title


ALT:注册账号(邮箱、用户名、手机号)+密码登录


2. 手机接收动态密码快捷登录


手机接收动态密码快捷登录应用,相信大家都不陌生。这种方式,用户无需记住密码,可给用户减少很多负担。生活中需记住的各种密码已经够多啦!


ALT:手机接收动态密码快捷登录


3. 直接使用第三方登录


第三方登录可大大方便用户快速进入产品界面。这种方式常见的有游戏型、内容型等应用。


Image title


ALT:第三方登录


三、精美注册登录设计界面模板


说了这么多,都是理论。下面,给大家分享一些精美的登录注册UI设计界面,让你一饱眼福。同是,也希望给大家在设计时带来一些灵感。


Image title


ALT:注册登录设计界面模板


来源:behance


Image title


ALT:注册登录设计界面模板


来源:behance


Image title


ALT:注册登录设计界面模板


来源:behance


Image title


ALT:注册登录设计界面模板


来源:dribbble


Image title


ALT:注册登录设计界面模板


来源:dribbble


四、设计工具推荐


看了这么多优秀的UI界面设计,是否有一种冲动,想设计出专属于自己的登录注册界面呢?那是当然,学习过理论,我们必须付诸实践。下面,小编将带领大家一起来实际操作一下。提到设计,设计工具必不可少,在这里,给大家推荐国产工具-Mockplus。相信它一定能给你带来不一样的体验。


效果图1(邮箱/手机号注册登录):


Image title


ALT:邮箱/手机号注册登录


演示地址:https://run.mockplus.cn/nUKkbnyY1o6NDnWr/index.html


这是我们常见的邮箱/手机号注册方式,在Mockplus实现这种界面非常简单,直接使用输入框(设置占位文本)+按钮组件即可轻松解决。


效果图2(第三方注册登录):


Image title


ALT:第三方注册登录


演示地址:https://run.mockplus.cn/bilTWBxv05nNRMIW/index.html


在知乎APP中,包含了上述三种登录方式。可满足大部分用户的注册登录需求。


总结


想设计出精美的登录注册界面,还需要我们掌握其它的知识。如:UI界面设计规范、设计原则界面配色等。当然,想设计出独具一格的UI界面,最重要的还是得多想、多实践。使用像Mockplus这样的工具,快速实现自己的构想和概念,并不断改进和迭代。

更新:2018-06-14

收藏

5人已收藏

摹客设计云

设计1+2,摹客就够了!

  • 576

    作品

  • 859

    粉丝

  • 6

    关注

  • 【摹客RP会员日】狂欢来袭!终身版团购低至5折!
  • 摹客RP买一年送一年!这波钜惠只剩最后5天!
  • 摹客RP,个人空间全新上线,享沉浸式设计体验!
  • 产品经理需要了解的前后端技术知识

    猜你喜欢

      2018-06-14 原创文章 经验/观点 举报 4153 5 5 0

      移动端UI界面设计之-注册登录

      0.0°

      你确定要举报移动端UI界面设计之-注册登录

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录