产品设计经验分享：6个输入框 ,47个设计点.pdf

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