UI设计注册--登录全链路教程
时间：2020-12-07来源：www.aaa-cg.com.cn点击量：次作者：Gella
时间：2020-12-07点击量：次作者：Gella
根据我们这两天的UI干货次序，今天应该说到注册和登录了! 无论是网页设计师还是UI设计师，登陆和注册页面是设计中必然经历过的工作内容。登陆界面的设计说难不难，说容易也不是那么轻松就可以做好的，要在安全和可用性之间找到登陆界面的平衡点，还是需要相当的经验来支撑的。
注册/登录功能可看似简单，实际上非常考量设计师的能力，尤其是许多与实际场景交织的细节，是UI设计师常犯错误的地方。
本文将结合一些真实案例和个人项目的工作经验，对注册/登录功能做一些探讨，希望对你有所启发。
注册/登录是为建立账户而设定的功能。
产品在给用户提供信息或服务时，会对每一个用户进行身份的识别，并分配到独立账户中，形成类似身份证的ID，从而给予用户不同的权限和权益。
而注册/登录功能就是帮助产品识别用户身份，获取基本信息的过程。如果没有注册/登录功能，就没有账户ID，用户的数据就缺失有效的载体。
可以说，它是多数产品和用户产生连接的第一步。
注册/登录功能还关系着活跃度和留存率，处理不好很可能会造成用户的流失，给产品和业务带来直接的影响。所以说，设计好一个注册/登录功能是非常有必要的事情。
注册/登录虽然是基础功能，但需要考量的因素和细节非常多，可以说是产品功能里非常复杂的模块之一。
那么，我们如何去思考和设计一个完整的注册登录功能呢?我讲从涉及到相关内容归类成五个要素，并进行梳理和讲解。
定位准确
所有抛开产品去谈注册/登录的行为都是耍流氓。
设计师要先从产品、业务和用户的角度去分析和规划注册/登录功能。不能简单的认为主流的就是对的，也不是选择越多越好，更不能以视觉呈现来评定注册/登录的好与坏。
目前的注册/登录方式有十几种，设计师要分析哪种方式更符合实际需要，这是我们在设计前要考虑清楚的事情。
举几个栗子。
比如金融类产品，多数优先级是不使用第三方登录，并且要求设置密码;
比如是面向国外的产品，就一定要有邮箱注册，这是国外用户的习惯;
比如保密性较高的产品，需要以身份证或人脸/指纹识别作为登录验证的方式···
功能完整
在注册/登录的使用场景中，即使用户按照设定的路径去操作，依然会发生很多不确定的情况。这就要求设计师面对复杂多样的情况，有个清晰全面的认知。
我建议在设计前梳理出结构框架和业务流程，将所涉及到的功能点、设计元素、交互逻辑和异常状态等进行汇总，制定出一份详实的设计方案，确保不要遗漏和疏忽。
结构框架
业务流程图
操作顺畅
在注册/登录操作中，设计师要考虑用户的操作成本，尽量减少繁琐的步骤，缩减操作流程(三步内最佳)。这个过程需要完成交互原型的设计。
通过体验原型的操作步骤和交互逻辑，弱化或剔除对影响效率的部分，如二次确认密码/完善资料等。或者让用户自行选择(跳过)，切记不能让用户引发抵触或反感的情绪。
比如Soda苏打，这种尝试去挑战用户耐心的注册流程，是一种糟糕的体验，而很多产品也常犯这类的错误。如果非要给用户做标签进行内容匹配，其实将步骤删减，。
表述精准
注册/登录页要遵循不要让用户思考的原则，在信息和问题的表述上要清晰明确，不要让用户去猜测你说的是什么意思，或者思考自己哪里出错了，尤其在报错反馈上。
好的表述，应该是要在用户操作前，知道它的使用方式;操作中，清楚自己的行为正确与否;操作后，收到直接准确的提示或反馈。
比如在登录时不提示用户密码的位数或组合样式(数字/字母)，用户很可能就会输错。
设计合理
目前的注册/登录设计趋势是重体验轻视觉。一是简约风的流行，二是担心过度设计干扰用户。但并不是说视觉可以随意，至少要满足基本的美感和规范。
下面归类了六种主流的注册/登录页风格。这里不做讲解，设计师可根据产品要求酌情选择。
在保证视觉输出没问题的基础上，设计师需要把更多精力放在体验的合理性上。
比如不同机型适配问题、输入框一键清除、手机号码334格式、按钮的置灰和高亮、大小写提示、明文/暗文···等等诸多设计细节，都需要设计师结合产品和用户进行选择和实现。
综上五点所述，可以看出设计注册/登录功能是非常考验设计师的功力。同时，设计师也可以通过对注册/登录功能的深刻理解，以体验和设计的视角，提供给PM更优的想法和方案，这也是体现设计师价值的地方。
多数设计师在完成注册/登录功能的设计后，往往只提供设计稿，或者注释简单的说明，这其实还是不够完整的。
一个完整的设计稿输出，我们需要围绕以下几个内容块进行：
页面布局：内容区及操作栏的功能释义，操作路径和显示样式等。
手势操作：操作功能或者界面用到的手势和元素动效。
反馈效果：输入或触发后的显示状态，如弹层逻辑、错误反馈、异常状态等。页面跳转：也就是页面间的转场逻辑和动效说明;元素定
义：关键内容的规则说明，如字段规则、弹层样式等;
注册/登录设计输出内容要围绕以上要求进行设计说明。
下面我做一个框架：
功能流程
结构框架图和业务流程图，前面已经提过，略。
高保真原型视觉设计稿—提供所有命名清晰的设计页面，进行标注。建议使用蓝湖。
高保真原型演示—生成可操作的原型预览，建议使用摹客等在线交互平台。
全局说明页面交互说明—将触发条件，交互效果、使用场景等内容进行说明。
弹层/键盘说明—对模态/非模态弹层、键盘交互的触发条件，交互效果、使用场景等内容进行说明。
字段规则说明—对页面内功能命名、字段要求、文案表述等进行说明。
举例:
局部页面说明
将页面元素、操作逻辑，交互动效，异常状态、Toast提示等所有元素进行说明。
根据以上撰写的流程和说明，提供一份注册/登录功能设计输出文档，对产品和开发来说，是非常有必要的工作，不仅能够节省沟通成本和时间，也降低了在开发过程中出错率。
热门推荐
UI设计
产品经理
大数据分析
原画设计
平面设计
新媒体运营 
