体验不仅是界面——百度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教程:实现类网易云音乐APP播放效果

    整体效果截图首页:视频播放:我的音乐:朋友:音乐识别:音乐播放:实现本原型实际效果可以在预览地址查看,本文将重点讲述播放器界面的实现过程。1.原型共有11个独立页面:依次为:首页,排行榜,FM,视频,我的,朋友,账号,音乐识别,音乐播放,每日推荐,歌单页面。2.音乐识别界面效果实现分析:1.音乐识别效果由首页左上角麦克风图标点击后触发,进入识别页面时开始识别同时效果自动开始。由于音乐识别和首页分别在两个不同页面,所以可以考虑通过全局变量...

    2018-03-24
  • 2018用户体验设计趋势,你知道吗?

    设计师总再盼望未来 - 在整个工作流中我们重复相同的事情。最后,困扰设计师往往是围绕着一个简单的问题:我们如何才能提高用户的体验?为了解决这个题,Figma采访了18位设计师,让他们来来预测2018用户体验设计趋势。1.可用性第一,个性化第二“我真的希望2018年设计师们将可用性设计铭记在心。我们不要在基本元素上使用超浅灰色,我们做得每一个像素动画不应该只是因为它看起来不错,我们不应该让用户难以理解内容,因为我们是设计师。”2.设计师要...

    2018-01-31
  • 百度地图新版的界面升级传递出了哪些信号?

    春节将至,手机上的应用商店也开启了集中更新的模式。前几天打开百度地图时,“为你而变”的闪屏广告预示了百度地图的更新信息,当时以为只是简单地版本升级,然而昨天更新之后发现,这次升级可不那么简单,百度地图在界面设计上的改变甚是明显。

    2017-05-28
  • 聊聊2017年即将流行的UX设计趋势

    2016马上就要过完啦,我们来回顾下今年用户体验都发生了哪些大事,并通过回顾过去来展望2017年的用户体验将会有哪些趋势。“可用性”这个词本身变得不那么重要了。它不那么需要我们了。“聊天机器人”是我们行业中最热门的术语之一,如果你还没有,我们很有信心你将很快建立一个。但对话式界面的未来是什么样子?但后退一步:是不是每一个界面都是用户和机器之间的对话?未来的交互不是由按钮组成的。公司不只需要一个界面,而且设计师也不只通过设计工具来完成他们的工作。苹果手表和Alexa可以让用户不碰手机的情况下使用Uber。虽然这可能听起来很简单,但它为人们对技术的期望设定了基调:完全连接和无处不在的体验。作为设计师,我们如何将所有的拼图连接在一起?我可以向Alexa请求Uber乘车,在我的Apple Watch上接收预估时间,与Messenger上的朋友分享费用,并在我的手机app上评分吗?技术应该尽可能不被注意到。——Amber Case,Calm Tech从《黑客帝国》,到《她》和《黑镜》,人类总是幻想生活在虚拟现实的世界。随着数字世界变得更加真实,我们需要采取的行动来实现这些体验。设计VR不应该意味着将2D实践转移到3D,而是应当寻找一种新的范例。 ——Jonathan Ravaz我们一直在听的问题:设计师应该写代码么?设计师画原型吗?设计师应该写文案吗?至少有几十篇文章试图回答这些问题,所以我们现在可能更接近一个确定的答案:这些都可以。今天,UX设计师可能会身兼数职。当我们开始为我们的自动化生活进行设计时,我们首先需要自动化我们的工作。我们将与机器人一起设计。多样性和伦理是今年用户体验中最重要的两个主题。许多设计师之所以从事UX,是为了更好的改变人们的生活。我们可以找到这么做的关键点么?设计并不是一件附属品。我们的工作影响着人们的生活。设计可能失败,但设计师不能。如果你的公司只是为了赚钱,也许你应该找一个更好的公司。这不是你的错,但这是你的责任。—— Alan Cooper,Ranch Stories talk

    2017-05-14
  • 产品经理如何有效学习产品课程?

    很多想要成为或者刚刚成为互联网产品经理的人会自己学习一些大牛分享的课程,阅读一些推荐书籍,但是学完之后经常会有好像很有收获但是却又不知道收获了什么的感觉,产品经理如何有效学习产品课程呢?以下是我自己在进行产品学习时的一些经验。1、多体验产品一个好的产品经理首先自己一定是一个好的用户,只有多体验产品,多思考产品背后的设计理念和价值,自己才能设计出优秀的产品。我们公司有个资深产品经理,他设计的产品日活已经上亿,公司当时还奖励公司员工每日一盒...

    微信热点 2018-03-06
  • 别逗了,真正的“用户体验”并不如你们所想

    什么是用户体验?如何评价用户体验的好坏? 在知乎上,俞军说:“我理解的用户体验,是让用户付出最小成本满足需求”。这其实仅仅是在讲“易用性”(usability)。另有位叫做Allen Zhang的大牛说:“个人对用户体验的目标…

    2015-10-10
  • 【译】毁掉移动应用设计的6个想当然

    过去几年来,用户交互进化如此迅速,设计师们都快跟不上了——导致在创建移动应用时,从其他媒介(甚至陈旧的应用设计)中照搬交互设计技巧。 其实重要的是要记住:交互模式和设计要随着媒介的改变而变化。 这种思想…

    2016-02-01
  • 交互设计流程是怎样的?

    其实这个问题也是我的学生最爱问的问题,不论国籍。先说下我的背景吧。我是国内软件工程本科+美国UW HCDE master,现在在硅谷做用户体验设计并且教用户体验课程。之所以强调自己的背景,是因为我看到的大家给出的见…

    2016-10-25
  • Axure优雅装逼指南:开启原型高颜值形态

    作者寄语 / 一直想写的Axure小技巧分享,终于动手写了。望能对亲有所帮助,文笔粗糙请谅解。内容目录:啥是高保真原型?简单说明原型Axure可以画出什么水准的高保真?给示例,开启装逼模式特殊的技巧:核心内功:目标清晰/理解设计规范画图习惯:像素对齐/用浅色/上素材啥时候上高保真?:适用场景 and 不适用场景啥是高保真原型?啥是原型,从事互联网研发体系的同学,肯定非常熟悉,特别是产品岗同学。如果不是,那如下简单讲原型和高保真原型的:原...

    2018-04-28
  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11