体验不仅是界面——百度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

相关推荐

  • 想快速玩转Axure,同时提升产品和交互能力,试试这个秘密武器

    腾讯课堂&起点学院联合打造的给产品经理的Axure课程如果你想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?1、没人监督指导,自学还没到一个周,就想放弃2、按教程操作,却出不了效果,又不知错在哪里3、难的知识内容看着费劲,不会技巧,效率低浪费时间那么这个课程很适合你,2280位同学已经通过这个课程摆脱了Axure困扰。这个课程能带给你什么如果你是产品新人,还没有很好的产品作品,axure实战班里做的原型作品,学到的axu...

    2018-04-30
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 阿里设计师实战案例解读内容化设计

      前言 如果说好的产品是运营出来的,那么内容作为用户体验中的重要部分不容忽视。然而我们在设计中经常缺乏内容体验的意识。借着第十三届用户体验大会User Friendly 2016的分享,手淘的设计师和业内的同学们一起做…

    交互专题 2017-08-07
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • 读书会第二期:《用户体验要素》(上)

    《用户体验要素》的作者Jesse James Garrett是美国用户体验咨询公司Adaptive Path的创始人之一,2005年他发表了《Ajax:A New Approach to Web Applications》这篇文章,标志着Ajax的诞生,因此他在又被称为“Ajax之父”。《用户体验要素》的中文版第1版比英文版整整晚了6年,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传...

    2018-04-12
  • 雪糕游戏(南京上海)聘:运营/商务/主策/主美/原画/程序等

    (点击上方“GameLook”↑↑↑↑↑↑,订阅微信)公司简介:南京雪糕网络科技有限公司(简称雪糕游戏)是一家集研发、运营、发行为一体的新锐游戏公司。自2015年成立至今,自主研发了《全民神仙》、《行侠仗义五千年》、《童话大乱斗》、《西游记口袋版》等产品;IOS联运了涵盖三国、武侠、魔幻、神话等题材产品,游戏多次在App Store上榜,凭借精准的IOS流量整合能力、优秀的产品运营能力,雪糕游戏IOS联运产品月收入稳定在千万级水平,也为...

    2018-04-08
  • iOS8 Human Interface Guidelines 精选阅读(中英对照)

    用了两个星期时间断断续续读完iOS的guidelines英文原版,原文是写得有点啰嗦,所以精选了以下觉得比较重要的点,并加以自己的解释;当然如果你有时间,还是推荐阅读英文原文。首先是因为翻译的版本基本是不全的、旧的,就像ISUX的翻译的对比原文就会发现中间省略了好多。本文的作用并不像多数的翻译那样,让你粗略地了解里面的内容,而是精选出一些点使你体会到苹果的设计思想。 我读guidelines的目的不仅仅是要看他们是怎样规定的,而是要看他们为什么这样规定,在了解了制定规则背后的原因之后不仅便于记忆规则本身,还能了解苹果的设计思路,当吸收了设计思路之后,就不再是墨守成规,而是更自信和灵活地运用规则,甚至创造属于自己的规则。就像tweetie发明下拉刷新手势之后苹果反而把这种手势加进了自己的guidelines。 读英文原版还有一个显然易见的好处就是熟悉专业英语表达,guildlines的措辞显得优美而精确,值得去读读。

    2017-06-02
  • [高级交互设计教程]如何创建一个信息构架?

    本文译自Donna Spencer所著《A Practical Guide to Information Architecture》,第18章。 本书主要对信息构架及其设计进行了一些入门的理论和实践介绍,其中包含了一些作者自己的方法,和业界采用较多的方法。无论…

    交互设计 2015-01-26
  • 在交互稿中,应重视「键盘类型」的标注

    在交互稿的标注中,我们经常会忽略键盘的说明,这是不对的。键盘在用户的交互过程中起到了非常重要的作用,尤其在多个输入框的场景下。

    2017-05-13
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11