作者： 厚江
京东注册优化是来京东后第一个相对完整的设计项目。毕业后初涉交互设计工作，导师对我的第一个要求就是在设计过程中，重视对细节的设计。本文即从京东注册优化项目的一些方面谈谈对细节设计的体会。
一、在表单的设计过程中，需要着重聊一聊关于校验的问题
1.1 区分前端校验和后端校验
一般来说某些可以在用户输入过程中直接报错的提示，例如格式错误等，都属于前端校验。某些需要与后端数据库交互的提示，例如用户名是否重名等，属于后端校验。前端校验的错误一般比较简单，而后端校验的错误更加复杂，因为他需要用户主动触发事件来与后端数据库发生交互。因此弄明白这两者的好处是，所有前端校验的错误可以使用即时校验（一边输入一遍校验），用户可以直接修改输入错误。看：
当然，如果开发愿意，也可以花费些精力，在及时输入同时对后端进行数据交互，例如：
1.2 区分校验空状态提示与错误提示的事件
起初我认为空状态提示就是错误提示，其实不然。我们知道，一般校验错误提示的事件都是输入框失去焦点，但是当输入框失去焦点时，若输入框为空并不意味着这时就要出现空状态提示。如：
空状态提示应该是在点击提交按钮后才进行校验，而错误提示则可以通过前端校验还是后端检验的划分，来决定它的触发动作。其次还有一个问题，一旦表单过多，难道所有表单都要出现空状态提示吗？就像这样：
因此我们还要考虑到空状态的提示规则，是逐一提示亦或是有更好的办法，就像这样：
当然，要弄清楚表单中的校验问题，头疼的不仅是交互设计师，还有前端的伙伴。记得当初在测试时，为了完善表单的报错交互，前端着实废了不少脑筋。有的时候项目很着急，前端没有时间一点点调试，我们可以退而求其次，让前后端的检验都使用输入框失去焦点的方式，并对空状态进行逐一提示。细节设计往往需要耗费大量精力，那是否只要设计是准确并统一的，也未尝不可呢？（对于后端而言不出bug就感谢上天了，用户体验什么的再考虑吧~）
在本次前后端配合中，产品侧和我一起整理了一份《PC侧注册流程输入框的提示类型》，里面包含了所有输入框在哪些事件中应该出现哪些提示，并标注出所有的提示层级。这样做往往也可以帮助设计师把控所有文案的统一。
小结：梳理规范性的通用文档同步给各端，可以帮助设计细节的落地。
二、输入框的提示文案，其实分为两种场景
2.1 输入框未获取焦点和已获取焦点
通过一个最简单的例子来理解这两者的区别，看：
每一个输入框都是由标题和框来组合的，你让用户输入其实是解决两个问题，一个是为什么要输入，一个是怎么输入。但有时对一些显而易见的输入框，例如验证码，也可以将点击图片换一换，融入提示当中：
其次我们在对密码做安全层级提示的时候，也引导用户提升至更高的安全等级：
小结：拆分用户的使用步骤，及时引导用户的下一步操作
三、有时过度细节也不是什么好事
起初的交互稿中，有对输入框做清除的功能，以及密码输入框的明码展示功能，但在实现中都去掉了。输入框清除更多用于手机，手指在屏幕上点击一次就清除，比长按删除键来得更方便；但反观电脑，在输入过程中，用户的双手需要离开键盘，然后握住鼠标点击一次才清除，这样反而有些得不偿失了。而去掉明码展示，则是考虑到因为电脑屏幕大，明码显示后更容易被偷看，所以就去了。当时和产品达成的一致意见是，使用电脑注册永远要比手使用机注册更加安全。
小结：设计要讲究实用性，过度的细节设计只是在画蛇添足
结语
在最后的效果验收中，通过收集到的用户反馈发现，细节设计的确提升了用户满意度。认知问题的比例有所下降，从而暴露出更多系统和逻辑层面的问题。
随后，我们通过点击量的分布数据，再次细调了注册页的信息层级、优化了海外号码注册的交互体验，并在登录方面，强化了手机扫码的登录方式。
头一次做表单设计肯定是很耗精力的，但不妨将整理过的一些表单规范积累下来，一旦下次设计中有可用的就直接拷贝过来，再在每次运用的时候简化用法，慢慢形成固定的设计规范，降低未来的设计成本。其次，类似这种公用的表单校验方式更应该提炼出来，在每次交互输出的时候单独做成一页同步给前端和产品，让多方逐渐达成一种设计意识，这样才能更好地贯彻细节设计的落地。
文章来源：京东设计中心JDC
推荐阅读
我总结的一套表单设计指南
【可报名】6周锻造1名优秀的产品设计师
这个简单粗暴的设计为何是“好设计”？
我们深挖的那些设计小惊喜
国内知名UED团队的设计流程是怎样的？
关注UXRen微信公众号(cnUXRen)
版权声明：除转载文章外，本站所有文章版权归UXRen社区所有，转载请注明出处：UXRen社区，并保留本站原文链接地址。本站部分文章来自互联网及公开渠道，如有侵权请及时联系我们。邮箱：contact@13tech.com.cn
原创文章，作者：震天下，如若转载，请注明出处：https://www.iamue.com/21078/
