旗下产业: A产业/ A实习/ A计划
全国统一咨询热线:010-5367 2995
首页 > 热门文章 > UI设计 > UI设计注册--登录全链路教程
UI设计注册--登录全链路教程
时间:2020-12-07来源:www.aaa-cg.com.cn点击量:作者:Gella
时间:2020-12-07点击量:作者:Gella
  根据我们这两天的UI干货次序,今天应该说到注册和登录了! 无论是网页设计师还是UI设计师,登陆和注册页面是设计中必然经历过的工作内容。登陆界面的设计说难不难,说容易也不是那么轻松就可以做好的,要在安全和可用性之间找到登陆界面的平衡点,还是需要相当的经验来支撑的。

  注册/登录功能可看似简单,实际上非常考量设计师的能力,尤其是许多与实际场景交织的细节,是UI设计师常犯错误的地方。

  本文将结合一些真实案例和个人项目的工作经验,对注册/登录功能做一些探讨,希望对你有所启发。

  UI设计注册--登录全链路教程
 
  注册/登录是为建立账户而设定的功能。

  产品在给用户提供信息或服务时,会对每一个用户进行身份的识别,并分配到独立账户中,形成类似身份证的ID,从而给予用户不同的权限和权益。

  而注册/登录功能就是帮助产品识别用户身份,获取基本信息的过程。如果没有注册/登录功能,就没有账户ID,用户的数据就缺失有效的载体。

  可以说,它是多数产品和用户产生连接的第一步。

  UI设计注册--登录全链路教程
 
  注册/登录功能还关系着活跃度和留存率,处理不好很可能会造成用户的流失,给产品和业务带来直接的影响。所以说,设计好一个注册/登录功能是非常有必要的事情。

  UI设计注册--登录全链路教程
 
  注册/登录虽然是基础功能,但需要考量的因素和细节非常多,可以说是产品功能里非常复杂的模块之一。

  那么,我们如何去思考和设计一个完整的注册登录功能呢?我讲从涉及到相关内容归类成五个要素,并进行梳理和讲解。

  UI设计注册--登录全链路教程
 
  定位准确

  所有抛开产品去谈注册/登录的行为都是耍流氓。

  设计师要先从产品、业务和用户的角度去分析和规划注册/登录功能。不能简单的认为主流的就是对的,也不是选择越多越好,更不能以视觉呈现来评定注册/登录的好与坏。

  目前的注册/登录方式有十几种,设计师要分析哪种方式更符合实际需要,这是我们在设计前要考虑清楚的事情。

  UI设计注册--登录全链路教程
 
  举几个栗子。

  比如金融类产品,多数优先级是不使用第三方登录,并且要求设置密码;

  比如是面向国外的产品,就一定要有邮箱注册,这是国外用户的习惯;

  比如保密性较高的产品,需要以身份证或人脸/指纹识别作为登录验证的方式···

  功能完整

  在注册/登录的使用场景中,即使用户按照设定的路径去操作,依然会发生很多不确定的情况。这就要求设计师面对复杂多样的情况,有个清晰全面的认知。

  我建议在设计前梳理出结构框架和业务流程,将所涉及到的功能点、设计元素、交互逻辑和异常状态等进行汇总,制定出一份详实的设计方案,确保不要遗漏和疏忽。

  UI设计注册--登录全链路教程
  结构框架
 
  UI设计注册--登录全链路教程
 
  业务流程图

  操作顺畅

  在注册/登录操作中,设计师要考虑用户的操作成本,尽量减少繁琐的步骤,缩减操作流程(三步内最佳)。这个过程需要完成交互原型的设计。

  通过体验原型的操作步骤和交互逻辑,弱化或剔除对影响效率的部分,如二次确认密码/完善资料等。或者让用户自行选择(跳过),切记不能让用户引发抵触或反感的情绪。

  比如Soda苏打,这种尝试去挑战用户耐心的注册流程,是一种糟糕的体验,而很多产品也常犯这类的错误。如果非要给用户做标签进行内容匹配,其实将步骤删减,。

 UI设计注册--登录全链路教程
  UI设计注册--登录全链路教程
 
  表述精准

  注册/登录页要遵循不要让用户思考的原则,在信息和问题的表述上要清晰明确,不要让用户去猜测你说的是什么意思,或者思考自己哪里出错了,尤其在报错反馈上。

  好的表述,应该是要在用户操作前,知道它的使用方式;操作中,清楚自己的行为正确与否;操作后,收到直接准确的提示或反馈。

  比如在登录时不提示用户密码的位数或组合样式(数字/字母),用户很可能就会输错。

  UI设计注册--登录全链路教程
 
  设计合理

  目前的注册/登录设计趋势是重体验轻视觉。一是简约风的流行,二是担心过度设计干扰用户。但并不是说视觉可以随意,至少要满足基本的美感和规范。

  下面归类了六种主流的注册/登录页风格。这里不做讲解,设计师可根据产品要求酌情选择。

 UI设计注册--登录全链路教程
 
  在保证视觉输出没问题的基础上,设计师需要把更多精力放在体验的合理性上。

  比如不同机型适配问题、输入框一键清除、手机号码334格式、按钮的置灰和高亮、大小写提示、明文/暗文···等等诸多设计细节,都需要设计师结合产品和用户进行选择和实现。

  UI设计注册--登录全链路教程
 
  综上五点所述,可以看出设计注册/登录功能是非常考验设计师的功力。同时,设计师也可以通过对注册/登录功能的深刻理解,以体验和设计的视角,提供给PM更优的想法和方案,这也是体现设计师价值的地方。

  UI设计注册--登录全链路教程
 
  多数设计师在完成注册/登录功能的设计后,往往只提供设计稿,或者注释简单的说明,这其实还是不够完整的。

  一个完整的设计稿输出,我们需要围绕以下几个内容块进行:

  UI设计注册--登录全链路教程
 
  页面布局:内容区及操作栏的功能释义,操作路径和显示样式等。

  手势操作:操作功能或者界面用到的手势和元素动效。

  反馈效果:输入或触发后的显示状态,如弹层逻辑、错误反馈、异常状态等。页面跳转:也就是页面间的转场逻辑和动效说明;元素定
义:关键内容的规则说明,如字段规则、弹层样式等;

  注册/登录设计输出内容要围绕以上要求进行设计说明。

  下面我做一个框架:

  UI设计注册--登录全链路教程
 
  功能流程

  结构框架图和业务流程图,前面已经提过,略。

  高保真原型视觉设计稿—提供所有命名清晰的设计页面,进行标注。建议使用蓝湖。

  高保真原型演示—生成可操作的原型预览,建议使用摹客等在线交互平台。

  全局说明页面交互说明—将触发条件,交互效果、使用场景等内容进行说明。

  弹层/键盘说明—对模态/非模态弹层、键盘交互的触发条件,交互效果、使用场景等内容进行说明。

  UI设计注册--登录全链路教程
 
  字段规则说明—对页面内功能命名、字段要求、文案表述等进行说明。

  举例:

  UI设计注册--登录全链路教程
 
  局部页面说明

  将页面元素、操作逻辑,交互动效,异常状态、Toast提示等所有元素进行说明。

 UI设计注册--登录全链路教程
 
  根据以上撰写的流程和说明,提供一份注册/登录功能设计输出文档,对产品和开发来说,是非常有必要的工作,不仅能够节省沟通成本和时间,也降低了在开发过程中出错率。

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可先就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可推荐就业!

©2007-2021/北京漫动者教育科技有限公司版权所有
备案号:京ICP备12034770号

老师想和你聊一聊

©2007-2021/ www.aaa-cg.com.cn 北京漫动者教育科技有限公司 备案号:京ICP备12034770号 监督电话:010-62568622 邮箱:bjaaa@aaaedu.cc