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

网络推广 2021-07-09 22:03www.dzhlxh.cn网络推广竞价

“乍一看到某个问题,你会觉得很简单,其实你并没有理解其复杂性。当你把问题搞清楚之后,又会发现真的很复杂,于是你就拿出一套复杂的方案来。实际上,你的工作只做了一半,大多数人也都会到此为止……。但是真正伟大的人还会继续向前,直至找到问题的关键和深层次原因,然后再拿出一个优雅的、堪称完美的有效方案。” - 史蒂夫·乔布斯

这篇文字只是描述对于简单的三个界面,我做每个设计决策的历程。

设计任务是对以下注册过程的优化,目标是降低注册门槛,让过程高效,平台为iOS。

设计分两步走,分别是信息架构设计和细节设计,细节再从默认状态、填写状态、反馈状态三个角度进行设计。

以下是过程描述:

一、信息架构

也就是整理信息、规划步骤,把需要用户录入的信息全部列举出来,然后设定到一个或多个步骤里,形成整个注册过程。

首先列出需要的信息有:[1]

通过验证的手机(也就是手机号、验证码)密码昵称性别生日

原来的密码要填两遍,手机输入太痛苦,果断去掉一遍。

星座本就是由生日推算,放在注册环节徒增操作成本,果断去掉。

技术及运营需求,全部为必要信息(也就是必填)。

接下来就是组织这些信息,可能的组织方式有:[2]

最后选择了这个:

具体是这样:

为什么呢?

从用户操作流程考虑,我想让入门这一下足够简单[3],所以用户看到的第一步只有一个要求,输入手机号,关于这个目标,后续细节分析还有进一步的交代。第二步开始渐难,第三步相对最难,从简到繁。

那为什么不每一步只完成一个任务,每一步都简单呢?这样会使得整个流程变得很长[4]。后面适当的复杂我觉得是可以接受的,这里动了一个邪恶的小心思,关于沉没成本的原理[5],大致就是对“哥既然已经填了两步了,就再填一步吧,反正只剩一步了”这种心理的利用。

细心的人也许会问,为什么中间一步是密码和验证码,且最后一步没有返回按钮呢?其实这是一个技术上的约束造成[6]。首先,对于我们系统来说,手机号一旦验证(验证码一旦正确提交),手机号就不能再被使用,而完成注册还得搭上密码,所以验证码和密码得同一个动作提交给系统,不能分成两步,验证码如果单独作为一步先提交,也就是手机单独被验证,中间若发生非常规退出,密码还没填,下次再想注册就会被提示手机已被占用了。其次,在第二步填完验证码和密码后,其实已经注册成功啦,也就是说,用户在第三步就把应用强制退出,下次回来也能够凭手机号和密码登录啦,当然登录完第三步的基本资料填写还是会等着他,跟他说未完待续。这也就是为什么第三步基本资料没有返回修改密码验证码的入口,看上去怪怪的,但游戏规则就这样,如果你有好办法,记得告诉我。

于是,从用户操作流程和系统约束双线考虑,得到了这么一个信息架构。因为界面内容不多,无需框架,直接进入细节设计。

二、细节设计,注册第1步(手机号)

每一个界面都分别对默认、输入和反馈三个状态进行设计。第一个界面元素少,相对好处理。

默认状态设计如下:

导航栏左侧按钮用X,代表对注册任务的取消[+7],代表这个界面跟上一个界面没有层级关系,当然个人认为这不是很重要,就算是放一个返回按钮,用户也完全能够理解的。输入框采用左边固定标签,输入域在右边的设计,

因为空间足够,不需要整合输入域和标签,在输入时去除标签,这样感觉更稳一些[+8]。标签用浅色(后面会跟视觉设计师探讨),输入正文用深色,以表示主次[+9],我也想过标签默认用深色,等输入内容时,再相应变浅,但总觉得有些花哨,就放弃了。

提交按钮用大按钮的形式放在输入框下方,标签是“获取验证码”,没有用“下一步”是想给用户一个更清晰的预期[+10],按钮没有放在导航栏右侧,因为字太多,放不下了嘛,而且一个大按钮也显得比较清晰[+11]。

原本输入框里的提示文字“请输入手机号码”这句废话被我废了,同时也重写了用户许可协议的入口引导,也是怎么简单怎么写[+12]。

输入状态设计如下:

填写就要呼出键盘,键盘要默认呼出吗?从操作效率考虑,自动呼出比较好,省一步点击嘛,不过我做了一个相反的决定,决定不让键盘默认弹出,为的是整个界面第一眼看上去,足够简单。作为第一步,这时我觉得感官上的简单比操作上的简单更重要[+13]。因为是手机号码是数字,所以当然要调用数字键盘[+14]。填写的是电话号码,用自动分段的显示方式,如:138 0000 0000,方便用户阅读确认[+15]。

反馈状态设计如下:

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板