转自公众号：产品公园

一、从注册页面看移动端交互设计

不知道你有没有过这样的经历，碰到一个好奇的软件，或者为了下载某个资源需要注册，当看到繁琐的注册页面时，或者是一看到页面就觉得令人心累的注册过程，你就立马放弃了使用这款软件的想法。注册页面是我们使用应用都必须经过的步骤，而一个注册页面设计的是否合理，好用，也直接决定了你是否会继续使用这个应用。接下来我们通过3款不同的注册页面来看看在交互设计的原则。

这两个页面的区别主要在于pc端和移动端所采用的不同设计原则，以及不同的设计出发点。

左图是较早版本的注册页面，也就是将pc端的注册界面直接挪到了移动端，可以发现，在没有适配的情况下，移动端里的该页面，既难以看清所有信息，也不便用手指进行交互操作。但是在pc端，这个页面是没有问题的，Web端一般依赖鼠标进行点击，App则通常直接用手指操作。鼠标光标在准确性上大于指尖，同时鼠标有悬浮及右键操作。

而右图则是一个普通的移动端注册页面，取消了重复输入密码的流程，因为在移动端，用户的输入成本是相对较高的，于是采用了一次输入密码，密码明码和暗码的切换的方式，同时因为屏蔽尺寸，以及手持方式的不同，移动端比pc端更加私密，显示密码的设计也相对更加安全。

如图这款注册页面，则充分体现了在移动端的交互设计原则，流程更加简单，虽然把注册流程分成了两个页面，但是注册过程的流畅度却提高了，而且在某款应用的改版后的统计中，采用这种页面设计的注册用户有显著提升。首先在第一个页面，用户看到只需填写一个手机号即可，则减轻了用户害怕麻烦的忧虑，用户当然不喜欢需要填写多个信息才能完成注册。用户会理解在第一个页面，就已经完成了注册，如此简单就完成了注册。但是需要用户填写的信息怎么办呢？于是，设计了第二个页面，完善信息。具体注册内容和之前所提到的页面是没有较大差别的，但是分步，简化的的设计，使得用户在注册过程中得到很好的用户体验。

总结来看，在移动端的交互设计中，所需要考虑到的原则有根据可视区的不同开展设计——大小合适，明确清晰的视觉重点——你想让用户干什么，简化的流程——让用户用得爽。

二、视觉焦点让设计更合理

通常来说，我们阅读的顺序是从上到下，从左至右，而在移动端，因为可视区域（屏幕大小，屏幕与人眼的距离都影响着视觉中心）的不同，我们的阅读习惯则不太一样。

在眼动图中，我可以看出在移动端，我们通常所关注的焦点在中心的内容上，之后再内容中如果找不到所需要的信息，则回头页面上方的筛选、排序中去进行下一步的操作。

在交互热力图中，会发现页面有很多的热力点，红色为较为活跃的位置，而在屏幕左下方则活力点变少。下面，通过一个页面对比来看看如何利用视觉焦点做设计。

这两个页面都是对于以计时功能为主设计的页面，左边的页面视觉大数字与底色的对比让视觉焦点很明确——现在跑了多少公里。右图则是一个循环计时的工具，设计的内容很巧妙，通过对每个步骤的时间设定，设计一个循环，便可以开始一个循环的倒计时，对于健身来说是很好的设计。但是这个页面的视觉焦点并不突出。两排等大的数字，让页面均质化，并不能一眼看出现在正在倒计时的是什么。于是我将这个页面结合一些健身场景所需要的功能进行再设计。

视觉焦点是不是突出了呢？目前正在进行的倒计时用大数字来显示，而进度条则缩小，并和下一个步骤统一排列。同时在页面上方，增加动作指南，给用户更好的体验。

因此根据视觉焦点所做的设计会有这样的好处：增强设计的可读性、提高页面阅读效率，使设计整体感强。

第三、可视性&流程

移动端页面的尺寸决定了用户所看到的内容是有限的。如何通过合理的设计使得用户得到更好的体验呢？

如图不太清晰，但是我们想说明一个问题，一个好的设计会使得同样的信息得到更好的展示。在左图中，将一款应用整体采用，列表式的布局将页面分类，用户需要每次点击进去，看是不是想要的内容，再退回，再选择前进。这不是一个很好的设计，当然现在采用这种布局的也并不是很多了。而右图将同样的信息首先进行分类，形成下方可以切换的主导航，同事每一页面中的信息可视化处理，用户可以清晰的看到这个分类里面是什么，选择或是切换到下一个类目。

礼物说的这个界面则是将可视化&流程简化原则进行了很好的体现。如何让用户看到如此多的礼物分类呢？通过上下两个导航切换，可以让用户在最少的步骤内看到更多的可视化信息。用小编的一句话说，好的东西就要用好的方式直白的展示给用户，何必藏起来呢！

第四、2/8原则，long tail

为用户展示他所需要的内容；根据场景判断，切割排除干扰信息。何为2/8原则？小编搜索了一下，“长尾”实际上是统计学中Power Laws和帕累托（Pareto）分布特征的一个口语化表达. 举例来说,我们常用的汉字实际上不多,但因出现频次高,所以这些为数不多的汉字占据了上图广大的红区；绝大部分的汉字难得一用,它们就属于那长长的黄尾. 在设计案例中改如何体现呢？

这是百度注册账号的一个案例，在设计情境中，用户群体包括中国用户和国外用户，当使用手机验证码进行注册的过程中，由于国别的不同，所以中国的是+86，而美国的是+1，当然还有别的国家。那么如何让不同国家的用户都能通过手机验证码进行注册。

第一个版本，增加了国别选项。这是比较容易做到的，但是百度的用户里中国用户占比达到95%，这样的一个设计使得绝大部分的用户认为鸡肋。于是根据2/8原则，在用户使用的过程中，输入手机号后，根据手机号码进行判断是否属于中国用户，若不是，则自动跳出一个国别选项，这样，既使得国外用户能够得到手机验证码注册的服务，也不影响绝大部分的中国用户使用。

在操作界面越来越小的情况下，不可能把所有的信息一次性展示给用户，所谓2/8原则，则是按需的展示信息，通过2/8原则进行信息切割，展示他这个场景下所需要的信息。

总结一下，本文从4个点结合案例说明了交互设计中一些所需注意的原则，注册页面看移动端交互设计、视觉焦点让设计更合理、可视性&流程、2/8原则。希望我们可以通过对于产品细节的关注，共同完善设计，让设计使得用户用得爽，不再骂娘~~~

您也可以加微信号1025792036备注“设计”进入微信群讨论。

想系统的学习了解如何在项目中循序渐进的思考体验设计和体验创新。个人参与可以学习到如何成为合格的用户体验设计师，团队参与可以推动团队在用户体验思维角度的主动思考，以帮助建立跨团队的用户体验协作的意识和初步能力。我们提倡把用户体验作为思维方式在企业中跨角色推广。若要获得产品和服务体验的全面提升和突破创新，需要团队成员对用户体验的思维方式的共同理解、认同和深入人心的贯彻执行。你不但可以听到理念方法讲授、案例分享，还有现场的小组实践项目练习帮你吸收、应用。

点击“工作坊详情”或扫描下图中的二维码进入报名页。