交互总结：6个输入框,47个设计点讲述.doc

交互总结：6个输入框 ，47个设计点 6个输入框 ，47个设计点 “乍一看到某个问题，你会觉得很简单，其实你并没有理解其复杂性。当你把问题搞清楚之后，又会发现真的很复杂，于是你就拿出一套复杂的方案来。实际上，你的工作只做了一半，大多数人也都会到此为止……。但是真正伟大的人还会继续向前，直至找到问题的关键和深层次原因，然后再拿出一个优雅的、堪称完美的有效方案。” - 史蒂夫·乔布斯 这篇文字只是描述对于简单的三个界面，我做每个设计决策的历程。 设计任务是对以下注册过程的优化，目标是降低注册门槛，让过程高效，平台为iOS。 设计分两步走，分别是信息架构设计和细节设计，细节再从默认状态、填写状态、反馈状态三个角度进行设计。 以下是过程描述： 一、信息架构。 也就是整理信息、规划步骤，把需要用户录入的信息全部列举出来，然后设定到一个或多个步骤里，形成整个注册过程。 首先列出需要的信息有：[1] 1 通过验证的手机(也就是手机号、验证码) 2 密码 3 昵称 4 性别 5 生日 原来的密码要填两遍，手机输入太痛苦，果断去掉一遍。 星座本就是由生日推算，放在注册环节徒增操作成本，果断去掉。 技术及运营需求，全部为必要信息(也就是必填)。 接下来就是组织这些信息，可能的组织方式有：[2] 最后选择了这个： 具体是这样： 为什么呢? 从用户操作流程考虑，我想让入门这一下足够简单[3]，所以用户看到的第一步只有一个要求，输入手机号，关于这个目标，后续细节分析还有进一步的交代。第二步开始渐难，第三步相对最难，从简到繁。 那为什么不每一步只完成一个任务，每一步都简单呢?这样会使得整个流程变得很长[4]。后面适当的复杂我觉得是可以接受的，这里动了一个邪恶的小心思，关于沉没成本的原理[5]，大致就是对“哥既然已经填了两步了，就再填一步吧，反正只剩一步了”这种心理的利用。 细心的人也许会问，为什么中间一步是密码和验证码，且最后一步没有返回按钮呢?其实这是一个技术上的约束造成[6]。首先，对于我们系统来说，手机号一旦验证(验证码一旦正确提交)，手机号就不能再被使用，而完成注册还得搭上密码，所以验证码和密码得同一个动作提交给系统，不能分成两步，验证码如果单独作为一步先提交，也就是手机单独被验证，中间若发生非常规退出，密码还没填，下次再想注册就会被提示手机已被占用了。其次，在第二步填完验证码和密码后，其实已经注册成功啦，也就是说，用户在第三步就把应用强制退出，下次回来也能够凭手机号和密码登录啦，当然登录完第三步的基本资料填写还是会等着他，跟他说未完待续。这也就是为什么第三步基本资料没有返回修改密码验证码的入口，看上去怪怪的，但游戏规则就这样，如果你有好办法，记得告诉我。 于是，从用户操作流程和系统约束双线考虑，得到了这么一个信息架构。因为界面内容不多，无需框架，直接进入细节设计。 二、细节设计，注册第1步(手机号) 每一个界面都分别对默认、输入和反馈三个状态进行设计。第一个界面元素少，相对好处理。 默认状态设计如下： 导航栏左侧按钮用X，代表对注册任务的取消[+7]，代表这个界面跟上一个界面没有层级关系，当然个人认为这不是很重要，就算是放一个返回按钮，用户也完全能够理解的。输入框采用左边固定标签，输入域在右边的设计， 因为空间足够，不需要整合输入域和标签，在输入时去除标签，这样感觉更稳一些[+8]。标签用浅色(后面会跟视觉设计师探讨)，输入正文用深色，以表示主次[+9]，我也想过标签默认用深色，等输入内容时，再相应变浅，但总觉得有些花哨，就放弃了。 提交按钮用大按钮的形式放在输入框下方，标签是“获取验证码”，没有用“下一步”是想给用户一个更清晰的预期[+10]，按钮没有放在导航栏右侧，因为字太多，放不下了嘛，而且一个大按钮也显得比较清晰[+11]。 原本输入框里的提示文字“请输入手机号码”这句废话被我废了，同时也重写了用户许可协议的入口引导，也是怎么简单怎么写[+12]。 输入状态设计如下： 填写就要呼出键盘，键盘要默认呼出吗?从操作效率考虑，自动呼出比较好，省一步点击嘛，不过我做了一个相反的决定，决定不让键盘默认弹出，为的是整个界面第一眼看上去，足够简单。作为第一步，这时我觉得感官上的简单比操作上的简单更重要[+13]。因为是手机号码是数字，所以当然要调用数字键盘[+14]。填写的是电话号码，用自动分段的显示方式，如：138 0000 0000，方便用户阅读确认[+15]。 反馈状态设计如下： 反馈的规则其实是从后面的界面往前做的，因为后面的输入项多，能概括出更适用的规则，所以规则就后面再说吧。至于这个界面反馈的内容，就是对于输入手机号的值进行判断，正确直接通过，不做提示(或者说界面的跳转本身就是最有效的反馈)，若出错，分“是否为