【UIUX】为使用者设计一个体贴的注册登入页

本文内容来源于【点击链接】，转载后进行部分修改和繁简字转换

---

为了能够让使用者顺利使用我们提供的服务，有时候必需先请使用者注册一个新帐号，或者是登入现有帐号。然而这个看似简单的环节，却有可能产生以下问题：

注册流程会耗费使用者一定的时间
设计不良、过于複杂的表单会让使用者难以理解
使用者不敢／不愿意填入某些隐私资讯（信用卡号、地址等）

针对上述问题，我们可以这样做：

让使用者能够透过社群帐号登入 → 略过填写表单、加快注册流程
保持表单长度简短，或者拆解成不同步骤 → 提升使用者填写表单的意愿
思考栏位的必要性 → 信用卡资讯是否可以留待注册成功后再填写

共通原则：尽可能的让注册登入流程简易快速。

设计一个体贴的注册登入页

注册登入页的本质即是「表单」，而表单是产品和使用者沟通的方式之一。为了让使用者可以顺利填写表单完成注册登入，每个细节都不能放过。

延伸阅读：表单不单纯—深究button&input&form

多种注册登入方式选择

Medium

Medium 可以透过社群帐号或者传统的电子信箱注册登入。多数使用者为求快速便利会使用现有的社群平台帐号注册登入，略过填写表单的步骤。但也有人会顾及隐私，选择用电子信箱另外创建新的帐号。提供多种管道让使用者选择他们想要的注册登入方式。

繁琐的注册流程就拆解它

MailChimp

MailChimp 在手机上的注册流程共有 11 个栏位需要填写，MailChimp 将它们依相同性质划分为 6 个步骤，每个步骤不超过 3 个输入框。这裡也有几个细节可以注意：

上方的进度条 → 让使用者知道离注册成功还有多久
主标题和副标题 → 向使用者说明为何他们需要填写以下资讯
缤纷的色彩应用 → 让使用者不感到疲倦厌烦

完成注册对使用者的好处

使用者在意的是，当他注册成功，他会得到什麽样的服务？与其直接在画面放上「注册」和「登入」的按钮，不如先用吸睛的图片和动人的文案来说服使用者开始注册并享受产品提供的服务。

Spotify

Spotify 的注册登入页用影片作为背景，并用四段文案说明 Spotify 的产品特点以及使用者可以获得的服务内容，以此激励使用者建立帐户。

MailChimp 

MailChimp 则是在注册登入页以前，用三个独立版面介绍他们的服务。

使用者条款／隐私权政策

Medium/Spotify/Dropbox

记得在注册页「注册」按钮下方放上使用者条款和隐私权政策的相关内容，并用超连结样式表示（虽然不会有人看？）Dropbox 比较特别，按下「建立帐户」按钮后跳出 Action Sheet，点击「我同意」才能顺利完成注册。

无法顺利登入时，提供协助

MailChimp

在「登入」按钮旁边放上「无法顺利登入？」或「忘记密码？」连结，提供相关协助，确保使用者可以解决目前的问题。

密码的处理

由于密码本身的複杂性，在设计上更要注意。

显示和隐藏密码

Instagram

显示／隐藏密码可以让使用者确认现在正在输入的资讯是否正确。

特别需求

密码设置若有特殊需求，如：同时存在大小写、最少需有几个字元、英数字混合，一定要加注说明。

Spotify

点击到密码输入框 (input field) 时，下方出现条件「至少要有 8 个字元」，若不符条件，输入框会变成错误状态 (error state)，并出现错误讯息。

错误讯息的文案要包含：为什麽错误？（例：这个密码太短了）以及该如何修正？（例：至少要有 8 个字元）

密码强度

Dropbox

Dropbox 把密码依安全程度分为四个阶级（弱／普通／不错／很好），这个功能在设计上其实非必要，但可以让使用者感到安心，毕竟 Dropbox 是线上资料存储服务，密码需要更高的安全性。