#交互设计二三事——从一个注册登录界面开始说起

本文的写作目标是提供一些关于交互设计学习和产出的切入点，引申出一些方法和经验，为初级设计师以及有兴趣提高产品质量的人提供启发，减少掉坑的机率。之所以选择注册登录这个功能作为开篇和切入点，是因为这个功能非常常见并且看似足够简单。同时，本系列文虽然一概而论有个关于交互设计的标题，但是很多产出可能和具体团队分工而定，并不一定都是交互设计师提供这些产出。

#业务需求

每个不同的产品都有不同的业务特点和规划，如果大体的规划和预期能尽早的清晰表述，那么设计师可以减少很多顾虑与猜测。所有的细节的完备程度，以及是否要预留足够拓展空间等等具体设计上的取舍，都取决于业务上的需要。我个人能理解产品发展过程中总是有变化和拓展，但是如果半年内对一个较为简单清晰的功能反复折腾，可能会耗费研发团队的心力。

不同的产品有着不同的特色，交互设计师所要处理的难题并不相同。假设这个登录注册功能是面向大众消费者，那么设计师可能更需要考虑的是如何尽可能减少一开始就要填写的资料，优化每一步中的小体验（比如basecamp密码二次填写出错后，旁边的小人会生气）。如果面向企业设计这个功能，可能就要考虑企业用户们追求安全性以及充分定制性的场景。在设计这个功能的时候，如果是一个较新的系统，那么交互设计错误提示等等都可以重新设计与优化。如果面向较大的系统和已有的产品，那么请务必搞清楚背后有没有一些已有的依赖关系和复杂限制，以及原有系统暂有的一套设计规范和逻辑（比如密码错误提示依赖与一个现成的可配置系统）。

同时，不同的产品面向的受众也不尽相同，这种不同既会反映在基本的功能需求上，也会反映在设计师有没有必要针对特殊人群（老人、小孩）进行特殊优化上。当然，受众的特性也和产品所在的平台与渠道有关，关于每个平台（web/app/甚至未来ar中，都有不同）

#具体功能

注册登录在面对多数面向个人消费者的产品时，都要考虑到平衡运营需求以及单一的注册登录需求。其一是这个功能直接就在产品介绍的相关页面，其二这个功能在一个独立的产品登录页面中。是否用户登录的时候新功能介绍，是否在用户注册需要在最后一部也强调产品对他的意义，这些都是有必要被澄清的。

具体到详细的功能而言，关于注册和登录都有许多种可能性。比如是否支持第三方，是否需要填写详细的资料，是否有年龄性别限制，是否要提供相关的帮助和指引，是否必须要马上注册而是注册后提供高级功能。内容的校验，出错的提示（用户出错以及网络问题，自身系统问题等等），必要的输入辅助（一些选项的提供以及及时保存页面内容等等），这些全部都是功能的重要部分。建议最初评估需求之时，就以及考虑到这些细节以及对细节处理的细致程度不一带来的实际上的工作量因为研发和设计的工作量不少就在处理这些边界状况之上。

针对具体的细节而言，表单的设计和取舍就是对交互设计师的一种考验。其一是要对现行多数主流产品的功能熟悉，其次是表单的设计（表单的分类，排版布局，说明，如何相应变化，以及输入过程中的各个状态，校验和提交的节点）无一不考验着设计师对于细节的把握和理解。这些细节不仅仅影响到体验上是否顺畅，也与整体产品的目标有所重合。比如用输入框抖动提示密码出错可能是一种不同的交互行为，但是如果在技术上以及产品风格上都不太喜欢这种方式那么就无法选取。

#框架布局

假设基本的功能和细节也已确定，那么不同的排版布局方式也会影响整个产品的走向。比如不同颜色，不同排版带来的使用者注意力分布区分和理解流程差异。只有时刻思考自己每个觉得和小设计带来的后果，才能保证无论营造多少细节都不至于过于偏离目标。从这点想想做交互设计有点类似一个rpg游戏，达成目标有多种方式，同时在每条路径上都有很多选择，玩家能做的的就是尽可能做出好的选择并且承担后果。

一份较为完善的线框图，背后的产出实际上应该包含设计师预先试错以及通过经验排除错误优化方案的结果。同时也应该包含着设计师对于用户使用流程，视线和注意力流动方向和方式，用户场景和习惯上的考虑。同时，这份设计也理所当然应该是有着良好信息架构，充分理解运营和技术需求的方案。我甚至认为这些考虑的过程应该有所记录一并作为产出的一部分，这样在和产品运营沟通的时候能避免某些弯路。

#细节把握

如果我作为评审者考察他人的交互设计产出，那么如果设计师在有！必！要！的时候考虑到以下这些细节那么我会对他另眼相看。比如表单设计有没有深入考虑到不同平台特性（web/app上的输入响应，移动端的web的横屏）还有他们的自带组件呢，还有很多很细很麻烦的浏览器默认行为要不要override。以及一些虽然习以为常但是设计师很容易忽略的功能，比如自动补全，自动保存，以及登录和注册的可能后续步骤（指引，提示，警告，异常状况下的重新登录和信息补充）。当然，如果能特意对工程师（或者自己写的时候）就考虑到浏览器的可用性（accessibilityi）能体贴特殊人群和不同环境下如何利用软件硬件减少输入，那么就更好了。

关于细节的关注，一个日益重要的层面就是运用最新的技术以及动效，营造出更为动人的情感体验。之所以要专门抽出这个环节，是因为这方面的把握要求设计师对于技术稍有敏感性甚至是部分交互逻辑甚至是代码产出的能力，也要求设计师对于动画方面的一些原理和应用有所知晓（因为实在是不能也不应该指望程序员同学给你慢慢去调整折腾动画参数以及面板的一些逻辑）

#结论

根据以上的内容，我们可以推断出一些关于参与产品交互设计的人所需要的一些素养和能力。比如对业务的基本理解，以及对于行业甚至是商业运作的大致知识。同时，基本的页面设计能力也需要（设计能力强弱直接影响到观察力还要抄袭和抄袭后的取舍能力）。对于商业上的理解能够帮助设计师看数据以及理解输入，更能帮助设计师理解竞品以及有意识的辨析设计后的原因，更好的与产品和运营交流（为什么我们不能抄袭他们，你们数据反映的其实是a背后的a‘，我们要关注a'）。

关于基本功能的完善，特别是多种细致状态的处理，除了靠读书（比如about face/designing interface/ ）等，还应该及时关心已有产品和其他优秀产品的动态（rss、定期读blog（我很喜欢little big detail），围观dribble或者时不时看看推送总结产品设计细节的网站（ui-patterns））。

我建议维护一份交互设计自查表，把功能的细节逻辑，错误处理，常见的组件的状态变化和一些处理问题的新的可能性都写到上面去并且定期维护更新，保证上面的内容不太过时同时也通过经验积累简化优化逻辑。

另外交互设计师也有必要多了解前端开发与ui设计，这未必要求他们能处理复杂的网络状态设计前端渲染框架，更不是要求他们画出极为美丽动人的插画。而是要求他们至少在有所重合的方向，掌握基本的知识（至少对我而言是基本，ps我觉得设计师就没有必要在在意兼容性问题和一些web上的陈旧or猥琐优化手段）。至于设计方面的进修，ui方面的基本练习和尽可能尝试折腾逻辑上基于代码而不是时间的动效工具很有必要。如果对于代码有更多经验，而且也会持续关注最新的一些动态和代码库/demo，设计师（至少面对web）的时候甚至可以尝试使用现成的库以及某些动效的代码自己直接修改折腾。