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

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

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

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

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

 

2

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

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

 

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

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

3

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

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

 

4

 

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

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

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

 

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

 

6

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

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

 

 

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

7

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

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

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

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

下次再见

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

f

转载请联系作者:黄小哈

hycesion@163.com

 

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/13212/

(0)
iouedioued
上一篇 2016-03-02 09:50
下一篇 2016-03-03

相关推荐

  • 【干货知识】最全面的交互设计原则和理论汇总(上)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】文章包括:格式塔心理学原则、尼尔森可用性原则、尼尔森F视觉模型、Heuristic Evaluation十原则、费茨定律、席克定律、7+2法则、2秒原理、2/8法则、3次点击法则、界面黄金8法则、jakob nielson原则、KANO模型、0123简单法则、MVP法则、婴儿鸭综合症、包豪斯理念、泰思勒定律、防错原则、奥卡姆剃刀原理、maya法则、信噪比法则、序列效应、功能可见性原则、成...

    2018-04-16
  • 聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 2018年交互设计的6大趋势

    ♝点击上方“交互设计学堂”关注我们,送电子书设计是围绕人解决问题,因此对2018年交互趋势的预测,我们将目光聚焦在细腻的情感体验打磨、达成目标的交互介质、解决问题的效率、发生交互行为的场景这几个方面,探究出了以下6大趋势:全感官体验All-sense experience趋势简述人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉...

    2018-02-07
  • 用户场景化思维,在交互设计中的体现

    当不清楚我们要得到什么的时候,那就先从交互设计三要素开始。

    2017-05-16
  • 无限滚动翻页的优点和缺点

    一张图告诉你无限滚动翻页的优点和缺点 什么是无限滚动翻页?你一定不会陌生。实在不清楚,刷一下微博就知道了。想不想知道你的网站适不适合使用无限滚动翻页,看看这篇文章应该会很有帮助! 无限滚动翻页是现在讨…

    2015-01-21
  • 平面设计中,有哪些简单好用的排版技巧和方法?

    当两张图片中应用的构成元素都相同,画布尺寸也相同的情况下,排版的好坏就决定你整张图片的质量了,这就好比两个厨师,同样的食材做同一道菜,味道却可能截然不同。

    2017-05-19
  • 译文 | iOS 10 人机界面设计指南 (完结)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?本文是系列文章的完结篇,enjoy~Note
    模板图片(template image)会丢弃图片本身的色彩,而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。

    2017-05-02
  • 【优秀作业展示】交互设计基础(一)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优业。优秀学生作业第一期周亦辂产品设计1511高铁取订票界面设计色彩选取字体:冬青黑体字号:18、21、24、28、30、32、36风格:利用从...

    2018-04-04