体验不仅是界面——百度UE大讲堂笔记整理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下次再见

ps：本文图片中，清晰图片为自做/产品手机截图，模糊为百度课程中视频截图/根据截图修改。

转载请联系作者：黄小哈

hycesion@163.com