体验不仅是界面——百度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扫描访问)

    使用Axure制作完成移动端原型以后,如果需要在手机上进行演示,该如何进行操作呢?普通的方法就是将原型文件上传到托管平台上面,然后生成一个URL链接发送到手机上用浏览器打开。如果能将URL链接生成一个二维码,直接用微信或QQ等应用直接扫描就能打开原型,这样访问体验能有很大的提升。所以今天这篇分享就是教大家如何将Axure制作的移动端原型生成二维码。下面这个就是我用原型链接生成的二维码图片,直接用微信或QQ扫描这个二维码就能体验到效果。链...

    2018-03-24
  • 对交互有疑问的同学可以进行在线提问了

    目前PC端体验做的还可以,手机端暂时不支持,请登录电脑端网站进行提问! 提问页面入口    阿西答疑主题帖

    2016-04-12
  • 通过减少认知超载,提升用户体验(上)

    “怎样才能改善用户体验设计?这是关于用户体验研究恒久不变的话题。今天给大家推送的是关于运用认知心理学中的相关理论来提升用户体验的研究。希望对大家有帮助。 文章太长,会分成两次推送,欢迎期待~“通常,飞速行驶的货车不可能轻松地停下来。因为它需要花费很多努力,运用更多的动能去改变运动状态。与其强迫人们从他们的主任务上转移注意力,不如直接带他们去他们想去的地方。”
    ——Luke Wroblewski,谷歌产品总监

    2017-05-07
  • 项目文件管理,只需7个文件夹

    作为一名视觉设计师,将文件整理的井然有序是我们必须要具备的能力,如果你现在还没有一个完整的文件管理体系,可以先看看我的!

    2017-04-30
  • 【交互面试】阿里巴巴交互设计实习生笔试题汇总

    阿里巴巴交互设计实习生笔试题 1 在线测试,测试时间 180 分钟 【自我介绍-20 分】简要的自我介绍(学校、学历、专业、个性、独特亮点等),并上传你的简历和作品。(将附件上传到无密码的网盘中,建议使用酷盘,并…

    2015-07-30
  • 从Web到移动应用的设计思维转换

    标签:移动应用、移动互联网、UI、产品设计、Web应用、视觉设计 【编者按】本文作者@刘津legene 随着移动互联网的快速发展,很多Web产品经理、设计师转而投身至移动应用领域。看起来非常相关的工作,却可能给他们带…

    2014-11-26
  • 6种实验性的网页导航模式,激发你独特的设计灵感

    不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。

    2017-05-04
  • 微信黑科技”红包照片“今日仅限一天体验速去!!

    就在刚才,微信偷偷发布了黑科技,说不清是照片红包还是红包照片,反正平日里的发朋友圈的照相机图标已经变成了香槟金,点击后会出现发照片红包的选项,发布之后朋友需要支付红包才可以打开。   快去试试?

    2016-01-26
  • 交互设计案例-闲鱼产品分析

    闲鱼·产品分析 Completion Date    Completer    闲鱼Versions       Phone Type March 11,2015     niu hang      V_2.1.3_Android     MEIZU MX4 Pro 1.战略层 用户需求:闲置物品的买卖(包括且不限制于二手物…

    2015-05-07
  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17