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

相关推荐

  • 为什么产品与交互你都要懂?

    今天老大给交互设计师和部分视觉设计师上了一堂产品经理的培训课,从实际的项目需求出发,十分受益匪浅,确实有些事情值得去考虑。 老大先抛出了一个问题(据说的某厂的一道面试题):一辆卡车载着货物过桥洞,货物…

    2016-02-29
  • 涨姿势 | 这份交互设计纲领,已被我内定!

    最近一个月的电影市场完全被《头号玩家》支配,身边清一色的“自来水”,那票房蹭蹭涨,眼瞅着都十好几亿了!所以斯芬克趁此良机跟大家说说交互这门自带特效的技术!往期内容一览:服装设计出国学?看这一篇就够了!(点击此处查看详情)学平面设计前,给你一份须知!(点击此处查看详情)怎样做准备,才能当上室内设计玩家?(点击此处查看详情)交互设计适合你吗?我们往往会觉得,交互设计不就是做个网站、搞个APP么,最多再玩玩特效啥的……其实咧,交互可不仅仅存在...

    2018-04-27
  • 【设计作品分享】一个让你丢掉负能量的产品——BICH

    作者:梁雅婵,授权载于我是UE网。

    2015-11-27
  • SKD独家 | 美国交互设计排名

    你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及院校专业设置等诸多因素的考虑,整理出交互设计的院校申请建议,希望对选择院校的同学有所帮助。注意:本排名仅供参...

    2018-03-28
  • 产品原型设计之交互体验的思考过程(二)

    接着上一篇《产品原型设计之交互体验的思考过程(一)》,这篇主要针对微记第二版的原型设计调整的思考过程作一下详细的说明。

    2017-05-23
  • 交互设计 | “综合类&艺术类”院校申请侧重点指南

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-21
  • 怎样做出引人入胜的用户体验

    发布者: mobileui 设计师 Irene Pereyra 总结了10大技巧帮助你实现令人惊叹的交互式用户体验。 近来,设计一款能够吸引并留住用户的web和App越来越成为一门学问。 由于很多人对于计算机数字领域不是很很了解,我会…

    2015-04-20
  • 【专访】全美交互设计No.1:卡内基梅隆的实验性字体设计课程

    卡内基梅隆设计学院美国最Top交互设计专业辛向阳老师毕业于此此学校的毕业生大多会输出到硅谷顶级的互联网公司:google\facebook等今期为大家推荐一位学生的学习心得周于阡Bettina Chou过去4年在卡内基梅隆大学,给了我许多机会学习各种各样的设计,不管是UX/UI, 传媒设计或课外作品,我都希望作品能给观众带来欢乐。我认为任何经验都能发出灵感,所以总是在吸收新东西。现在我正在:念村上春树写的 “Absolutely On ...

    2018-03-28
  • 用户至上——何为用户体验

    在这边学习笔记中,主要将讲用户体验是什么、UCD的设计原则、设计原则在项目中的应用和市场、商业、用户不同需求的区分这四个方面。第一:何为用户体验用户体验设计协会将用户体验定义为“用户与产品、服务和系统交互过程中感知到的全部要素。用户体验设计包含构成界面的全部要素,例如页面布局、视觉设计、文字、品牌、声音和交互等。可用性工程协调各个要素之间的关系,并为用户提供最佳的交互体验。”另一个虽然可能不是最佳答案,但是简单有效的回答——就是让技术变...

    2018-04-24
  • 通过减少认知超载提升用户体验(下)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章过长,分成上下两篇,上篇可查阅《通过减少认知超载,提升用户体验(上)》。

    2017-05-06