“乍一看，看到一个问题，会觉得很简单。其实你不懂它的复杂。当你搞清楚问题的时候，你会发现它真的很复杂，于是你想出了一套复杂的方案。其实你的工作只做了一半，大部分人都会止步于此。但真正伟大的人会继续前进，直到找到问题的关键和深层次原因，然后拿出优雅完美的有效方案。”史蒂夫·乔布斯
任务是优化下面的注册过程。目标是降低注册门槛，提高流程效率。平台是iOS。
设计分为信息架构设计和细节设计两个步骤，从默认状态、填充状态和反馈状态三个角度进行细节设计。
以下是流程描述:
一.信息架构
即整理信息和规划步骤，列出用户需要输入的所有信息，然后分一步或多步设置，形成整个注册流程。
首先列出需要的资料如下:[1]
已验证的手机
密码
爱称
性别
生日
原密码要填两次，手机输入太痛苦，果断再删一次。
这个星座是从生日开始算的，放在注册环节增加运营成本，所以果断下架。
以及技术和操作要求，这些都是必要的信息。
下一步是组织这些信息。可能的组织方式有:[2]
最后，我选择了这个:
具体来说，情况是这样的:
为什么？
考虑到用户操作流程，我想让介绍足够简单[3]，所以用户看到的第一步只有一个要求，输入手机号。关于这个目标，后续详细分析还有进一步说明。第二步越来越难，第三步最难，由简单到复杂。
那为什么不每一步只完成一个任务，每一步都很简单呢？这样会让整个过程非常漫长[4]。我觉得后期的复杂是可以接受的。这里动了一个邪恶的小心思。沉没成本[5]的原理，大致就是利用了“我已经填了两步，那就再填一步吧，反正就剩一步了”的心理。
细心的人可能会问，为什么中间一步是密码和验证码，最后一步没有后退按钮？其实这是一个技术约束造成的[6]。首先，对于我们的系统来说，手机号一旦验证通过，就不能再使用手机号，需要输入密码才能完成注册。所以验证码和密码要在同一个动作里提交给系统，分不了两步。如果先单步提交验证码，也就是单独验证手机。中间如果没有填写密码，下次想注册时会提示手机已被占用。其次，第二步填好验证码和密码后，注册其实已经成功了。也就是说，用户在第三步强制应用退出，下次再来，就可以用自己的手机号和密码登录了。当然，第三步登录基本信息后，还是会等他，告诉他继续。这就是为什么第三步基本信息不返回密码验证码的输入。看起来很奇怪，但游戏规则是这样的。如果你有好主意，记得告诉我。
所以，考虑到用户操作过程和系统约束，我们得到这样一个信息架构。因为界面内容不多，不需要框架，可以直接进入详细设计。
二、详细设计，注册步骤1
每个界面都设计有三种状态:默认、输入和反馈。第一个界面的元素很少，相对容易处理。
默认状态设计如下:
导航栏左侧的按钮用了一个X，代表取消注册任务[+7]。意味着这个接口与上一个接口没有层次关系。当然，我个人觉得这个不是很重要。即使放了后退按钮，用户也能完全理解。采用输入框左侧固定标签，右侧输入字段的设计进入。
因为空就够了，不需要整合输入字段和标签，输入[+8]时去掉标签感觉更稳定。标签使用浅色，输入文本使用深色来表示主要和次要[+9]。我也想过默认用深色做标签，然后在输入内容的时候用浅色，但是总觉得有点花哨，就放弃了。
提交按钮以大按钮的形式放在输入框的底部，标签为“获取验证码”。下一步按钮不是用来给用户更明确的预期[+10]的。按钮没有放在导航栏右侧是因为字数太多放不下，一个大按钮也显得更清晰[+11]。
原输入框提示文字“请输入您的手机号码”的废话被我废了。同时也重写了用户许可协议的入门指南，简单怎么写[+12]。
输入状态设计如下:
填的时候把键盘叫出来。是否希望键盘默认呼出？考虑到运行效率，不如自动呼出，省去了点击一步。但是我做了一个相反的决定，决定默认不让键盘弹出，这样整个界面第一眼看上去足够简洁。作为第一步，这个时候我觉得感官的简单比操作的简单更重要[+13]。因为手机号是数字，当然要调用数字小键盘[+14]。填写电话号码，自动分段显示，如138 0000 0000，方便用户阅读确认[+15]。
反馈状态设计如下:
反馈规则其实是从后面的界面做的，因为后面的输入项很多，可以总结出更多适用的规则，所以后面再说规则。至于这个界面反馈的内容，就是判断输入手机号的值，正确就直接通过，不需要提示。如果有错误，有三个对应的提示[+16]:“是否空”，“格式是否正确”，“是否已被占用”。文笔略显幽默，也起到了放松心情的作用[+17]。
三。详细设计，注册的第2步
默认状态设计如下:
还是很简单的。首先告诉用户短信验证码已经发送到手机号xxx，故意多写两个字“短信”，把事情说清楚。这个有点纠结，基于目前用户对app [+18]的使用体验，去掉这两个字似乎是可以的。
密码下方有一行说明文字“8-20位，无空，纯数字的话9位以上”，这是密码的输入规则。它使用大系统的通行密码规则，大系统的规则如下:
我做过两件事，精简和口语化，尤其是“不能是9位数以下的纯数”。这句话典型的是从程序员的角度说的，不好说，所以改成了“如果是纯数，需要9位数以上”。如果你只是想用一个纯数字作为你的密码，看，它需要9位数以上[+19]。这个也会用到后面的误差反馈[+20]。
输入框的标签和大按钮延续了之前的风格。按钮用“注册”代替“下一个”，试图营造一种注册了的感觉，实际上已经注册了[+21]。
输入状态设计如下:
还是默认不叫出键盘，眼不见为净。
当然，验证码还是用数字小键盘[+22]。
密码使用英文默认键盘[+23]，键盘多了一项设置。右下角的按钮用“GO”表示并执行“Submit”。我问过RD的学生，虽然是英文键盘，但中文还是可以显示为“Go”，但考虑到是英文键盘，“GO”可能会让人觉得是中文键盘或者go [+24]。
因为密码只输入一次，而且输入手机相对困难，所以为了确认你的密码输入，你就简单的默认显示为明文[+25]。我记得亚马逊kindle和小米盒子在设置密码的时候也是默认显示的，输入起来比较麻烦。如果真的要公开注册，输入框右侧有一个“隐藏”按钮切换[+26]。
反馈状态设计如下:
这里可以说说反馈的规则。
一、错误标签目测处理[+27]。
第二，在验证和做出可能的反馈之前，按提交按钮[+28]。
输入字段只有两三个，定位没有大问题。我不希望在输入过程和切换输入字段的过程中出现所有的对错干扰。
第三，彻底解决一个输入再去下一个[+29]。
你什么意思？大多数的做法是，提交的时候，先针对某一类问题进行全局检查，比如是否空等。，然后再次检查下一种问题，如格式。结果，用户可能因为一种问题填写表单一次，又因为另一种问题再次填写表单，整个过程在多个输入项之间来回切换。而我又不想让切换导致用户的焦点来来回回，所以做了这样的决定。验证第一个输入字段，比如这里的“验证码”，验证验证码不是空并且正确，然后提示输入下一个“密码”，即:
四。详细设计，注册的第3步
默认状态设计如下:
这三个控件是输入框、单选按钮和时间选择器。
作为一个更灵活的输入域，我们想给用户最大的自由，就是随便输入[+30]”。想了半天，实在想不通为什么要限制字数什么的。以后用户自然会根据昵称显示的效果来决定改什么名字。为什么一定要在“随便”前面加双引号？因为你不能因为不是真的随便输入就把一篇文章粘贴成昵称。服务器要安装昵称，加载昵称出来需要带宽。其实这里有100个汉字/200个字的无声限制。当输入溢出时，输入框将无法输入。但这一切，对于大多数用户来说，都是透明的[+31]。对了，原来版本的提示文字，“输入昵称为……”，直接报废了。你能读这篇课文吗？
这是对性别的单一选择。一般来说，它只提供两种选择。为了使注册过程更加有趣和易于识别，使用了图标而不是文本选项。其实我复制到这里忘了是哪个应用[+32]。
这是一个生日召唤时间选择控件。好像没什么好考虑的。我看过确实没有滚动那么麻烦，但是看起来很复杂，所以放弃了[+33]。
最后三个按钮都是必需的。原版本设计高效，默认选择性别和生日。用户只需填写一个昵称并提交即可，但之后“必填”就没有意义了，因为会得到一堆毫无意义的性别和生日。所以默认情况下不选择所有[+34]。
按钮是“完成”，因为这是最后一步[+35]。
输入状态设计如下:
昵称是中文键盘。右下角的按钮是中文的“完成”。单击是关闭键盘[+36]。
点击性别选择，这里有个操作规则，以后性别不能改。于是在选择之后，右侧出现了“此后不能更改”这样的动态提示。为什么默认不显示？默认显示界面比较复杂，可能没人看[+37]。点击后，以动态方式出现。从无到有，有动作，就能把用户的目光吸引到过去[+38]。
反馈状态设计如下:
昵称没有限制，性别和生日的控件自然受到限制，所以没有错误提示，只有空值提示，仍然采用标签标红，自上而下逐个求解的提示规则。提示设计为[+39]:
因为是最后一步，有个提交过程需要慢一点，所以需要提示[+40]。提示的组件使用了我们系统的标准元素，所以我就不解释了。我想说的是话，不是“注册”，而是用户的昵称。让新用户感受一点关怀[+41]。然后因为刚才昵称输入是无限的，而我们的标准控件是有限的，所以可能会过度溢出。对于昵称太长的用户，我们不得不省略[+42]。根据我们对现有用户昵称的观察，这里被省略的概率并不高。
四。其他补充
报名流程还没完，只剩下最后一步，就是提交后到达哪里[+43]。注册界面中最初设置的触发时间是“应用首次启动时呼出”或者“应用未登录时呼出”，所以结论是在哪里呼出，注册后就回到哪里继续使用场景。
另外我还漏了一点，所有窗口的转场动画[+44]。简单的处理就是各种水平滑动，遵循临时窗口上下滑动，层次间左右滑动的规律。即第一步，界面从屏幕底部滑出覆盖原有界面，第二、三步，从右侧滑入推开原有界面。最终提交后，界面从屏幕底部滑出。
另外，[+45]也是考虑到输入时键盘遮挡的问题。设计的时候，内容都刻意布局在屏幕的上半部分，基本上不会出现键盘遮挡的情况。如果真的屏蔽了，屏蔽时允许界面上下滑动，滑动时键盘不隐藏。这一招只对第二步填写密码或按注册键有效。第三步最后两个输入项是单选，做完的时候控件已经消失了，无法屏蔽。
此外，还有两个用于注册的外部接口，但它们也是作为流程的一部分而设计的。首先是第一步的协议细节，一个临时窗口。只需点击从下方滑入[+46]。另一种是短信验证码的内容，简单设计为“[app name]验证码2222，十分钟有效”。十分钟的“十”是中文里专门用的，避免和前面验证码的阿拉伯数字[+47]混淆。
以上是整个流程的所有设计要点。设计的时候，当然想了更多的方案，我自己发散，自己收敛。最后拿出原型，和PM再过一遍，修改，定稿。
最终效果如何，我们还得继续观察，这不是问题的唯一答案。我想说的是，把细节一遍一遍打磨到自然，只是设计的乐趣。
