走近移动设计:应用场景篇

标签: 移动端 移动设计 PS 教程 & 设计文章 用户体验 | 发表时间:2013-01-23 23:59 | 作者:kingtent
出处:http://www.uisdc.com

“美女在家玩自拍”,一句简单的话,但对设计师来说却有深在的内涵。这句话浓缩了设计最讲究的三大策略点:谁、在哪里、干什么,也就是用户、环境和任务。无论web、软件还是移动产品设计,都逃不开这三个策略点的考虑。

走近移动设计,你会发现这三个设计策略点的不同之处,其中区别最大的便是环境。移动的环境包括两方面:应用场景和硬件设备。到底环境有什么样的区别,会影响到最终的设计呢?本篇章主要详说其应用场景的不同,通过与web产品的对比,发现在设计上的启示点。

从 下方两张图表的走势对比,开始我们走近移动设计之旅的应用场景篇。一个好的Web产品,他的点击数和点击UV是随着时间的发展,走势是慢慢上扬,如下图所 示。而移动产品却有一个很有意思的现象,每个月初点击数和点击UV走势突然上扬,峰值在月中左右,然后到月底就跌到底谷。如下方两个图的对比,猜猜这是为 什么?

这个现象的答案是:流量包月。是不是遇到过这样的场景,月底的时候,收到移动发来的流量提醒信息,自己主动关闭了2G,默默等待新的一个月的开始。。。

流量

Web场景:网络稳定,使用网线或则wifi,速度快。

移动场景:网络不稳定,主要有wifi,3G,2G;随着场景的变化,各个网络之间频繁切换;2G网络用户多,速度慢,很在意流量。

设计启示: 流量思考,流量心理,反馈时间,响应机制… (通过最基础的内容对比,设计师可以思考更多的启示)

流 量是中国手机用户最关心问题之一,因为它是需要花钱的,特别是2G用户,对流量的看重程度极其高。移动的2G套餐:5元 30M,10元 80M,20元 200M,30元300M,50元 500M,100元 2G。其中5元和10元,20元是大部分普通用户的选择,超过包月限额1M=10.24元。官方宣称2G的网络速度在30K/S。2G网络仍为移动互联网 的主流接入方式,但占比持续下降。Andriod和ios移动产品倾向于选择高速网络接入,超过73%的用户选择3G或wifi。

设计启示:流量思考——估算产品占用流量

流量在移动应用场景中如此重要,那么我们在进行产品设计的时候,就需要进行流量思考,估算我们的产品会占用用户多少流量。可以说电子商务产品80%的流量来自于图片。针对图片和用户访问路径,我们就可以容易的估算出产品到底消耗了用户多少流量。

以普通电子商务搜索结果页为例(以下数据为假设,设计师请根据自己的产品估算流量):

搜 索结果页90×90大小的图片,平均6k左右,1页20个宝贝,那就是120k,假设产品访问深度为10左右,差不多一个关键字是1M多,平均每个uv关 键字2-3个,平均下来一个搜索结果页占用流量2.5M左右。再算算从搜索结果页进入详情页,每个宝贝详情在500K,假设平均每个搜索uv打开3-4个 详情页,差不多1.5M。关搜索和详情每uv每次使用一般就占用了4M。按这样的逻辑,研究用户的使用路径页面,然后全部算起来,就可以了解到移动产品到 低占用了用户多少流量。所以电子商务的移动产品,再算上用户查看首页,购物车,收藏夹。。。活动页面,一次算下来估计也有6M。这相当与什么?一个5元 30M包月的用户在纯2G的网络下只能访问5次,10元80M的用户可以访问15次。所以估算好用户的总流量使用情况,可以让我们的产品考虑的更成熟些, 无论从技术还是从页面的表现形式方面。比如大小图模式,懒加载,预览模式,用户触动才加载。

设计启示:流量思考——对产品的影响

我们在进行聚划算H5产品设计的时候,针对搜索结果页的宝贝展示,最终采用了右边的方式。这里不仅仅是看的宝贝数量的多少和图的质量问题,最重要好包括流量的影响力。

还有一个特别为用户考虑流量的产品是微博客户端。你刷的不是微博,你刷的是流量。无论新浪还是腾讯微博客户端,对图片都做了分阶段处理,小图预览,点击查看大图,再点击查看原图。点击步骤多了,但相对于省流量,相信用户更愿意接受这样的方式。

设计启示:流量心理——图太多,费流量

事 实是图太多是真的费流量,流量最大的消耗点就是图片,视频。可以感受一下,我们日常生活中,用户可以在2G网络底下看小说,但绝对会很小心谨慎开一些需要 浏览多图的页面。所以,别让产品的一个页面堆积太多的图片,特别是产品的首页,会影响用户流量的恐慌心理。让用户以后在2G网络底下,不敢于打开这样的页 面。

设计启示:流量心理——加载太慢,费流量

别 让产品给用户的感觉打开半天还什么都没有,只有转动的菊花。这点会让用户以为需要加载很多内容,从而担忧起流量。我们可以算出一个页面总的K数大小,然后 根据2G网络30K/S来算,就可以大概了解用户打开这样一个页面需要等待几秒了。这里可以关心一下用户等待时间的一个心理。

具体说明如下图:

所以别让你的产品让用户等太久,都走光了。这里就可以考虑适合的响应机制。比如优先加载框架,给用户的感觉是立即有相应了,且已有部分内容出来了。

或者可以在当前页做反馈,成功后跳转到下一页,如果失败直接在当前页反馈,避免跳转。这点适合下一页内容量较少的情况。再比如收藏成功按钮,点击收藏按钮, 是先跟服务器交流,还是先给用户积极的反馈收藏成功,再跟服务器交流,这些都让用户的感受不同。好的加载方式,也是能快速感受到速度的提升和转场的顺畅和 连续性。

设计启示:流量——产品的卖点

节省流量现在被很多产品拿来宣传,特别是手机浏览器和一些需要信息展示的应用。如UC浏览器就号称首创业界先进技术,使流量数据压缩率高达90%,用户上网速度更快,流量更省。你是不是因为这点心动了?所以在同质化的产品中,流量就是一个可以突出的卖点。

电量

Web场景:稳定的电源

移动场景:忧心的剩余电量

设计启示: 省电功能,高效程序…

一 日一充,是不是已经成为你的习惯。当看到剩余电量不足20%的时候,你是不是开始忧心忡忡,想尽办法找电源。是不是特别担心电量没了,别人联系不上你,让 你不得不放弃继续游戏或浏览应用。从触屏机开始,电量已经成为用户的一块通病。这时候,如果你的产品在这块上有特别之处,将成为继流量之后一个极大的卖 点。如各个安全产品,都涉及到省电这个点,如下图

同样,在考虑电量的时候,快速的调节屏幕亮度,或则有省电模式的快捷方式,都能触及到用户关切的点。如果你有一款省电应用,敢称让用户的手机电量多维持半天,估计这个应用瞬间就火了。

别让用户感受到你的产品使用起来有顿挫感,很卡,或则更厉害的是手机明显发热。这些都会让用户感受到这是个费电的应用,所以高效的程序,稳定的性能是十分重要的。

环境光

Web场景:明亮的灯光下,清晰高亮的显示屏前

移动场景:刺眼的太阳光底下,昏暗的夜幕下,睡前的一片漆黑

设计启示: 高对比度,快速调节亮度,声音提示…

是 不是每天睡前,当你使用手机预览各种信息的时候,都习惯性的会调节下亮度,减少亮屏幕给眼睛带来的疲劳,或则是减少对枕边人的干扰。是不是每天醒来后,在 明亮的环境下,屏幕暗的让你找不到开机滑块,贴近面盘,才好不容易找到亮度调节的地方。是不是每每电量不足时,唯一想到的办法就是降低屏幕亮度。。。即使 像iphone这样的,有光线感应器的自动调节亮度也没能很好的解决以上的问题。随时变化的环境光,如果有好的场景转换手法,将给用户带来极大的好体验。 但如果不注意,同样会给我们的产品带来负面影响。

设计启示:高对比度

大家觉的下图这样的设计方式有什么问题吗?问题是这样的设计容易让用户较难发现其他几个入口,特别是在昏暗的环境下,和手机低亮度底下,可见度是非常差的。

设 计师们是配置了最好的显示器,在宽敞明亮的灯光下工作的,所以这样的设计是好看的。但实际的应用场景是,用户在各种各样的环境底下使用,可能特别昏暗也可 能特别刺眼,所以设计师可以考虑在设计完毕后,放在手机上调节各种亮度或则在太阳底下看看实际的效果。所以提高前后元素的对比度,可以适应各种场景。

设计启示:快速调节亮度

现在很多浏览器和阅读器,如ZAKER,QQ/UC浏览器等,都直接配置夜间模式,和屏幕亮度调节。让我们在弱对比度中,感受到产品对我们的体贴的一面。这些也都是考虑到移动产品场景的复杂性和变化。

声音提示,也是对环境的一种拟补。在昏暗的环境下,一个丁的声音,让你立刻直到短消息来。还有在操作的过程中,一些反馈不能及时看到,声音就能将这部分的视觉死角给拟补过来。

场所/时段/注意力—碎片化时间

Web场景:场所较固定,每次使用时间段长,注意力集中

移动场景:随时随地,碎片化时间使用,注意力分散

设计启示: 注重核心点表达,显示操作结果,高效信息传达…

是 否有这样一种体验:当早上出门忘记带手机,就感觉这一天过的特不踏实,对大部分人来说都有这样的感受。当移动设备能装入口袋的那天起,就已经融入了我们的 身体。所以任何时间,任何地点,承载着强大功能的手机,都可能被我们拿起,然后因为各种原因又快速收起。移动产品的特性,就决定了它碎片化时间的使用。我 们看看碎片化时间主要产生在哪些产所:步行中,坐公交,挤地铁,逛商场,工作中,睡前睡醒,旅游出差,无聊寂寞,联系他人,拍照,玩游戏。。。

手 机总能出现在我们产生的碎片时间里,这个过程是没法做到聚精会神的,从头到尾好好干完一件事的。周边各种环境永远在影响着你,思路常常被打断,操作常常会 停止,任务中断后,还需要继续,于是设计就要考虑聚焦核心点,考虑中断后的连续性。所以在产品的信息布局上就需要将这样的场景考虑进去,让这样的布局减轻 用户的记忆负担。

我们在设计搜索结果页的时候,原来的界面是这样的。

层 级过多,排序全部展示出来,分类筛选全部隐藏。排序和分类筛选的展现方式,一个过多展示,一个只有入口,没有操作后的结果显示。在碎片化的时间里,当用户 使用了分类筛选后,过段时间再回到这个页面,估计基本就忘记刚刚的选择了。我们不可能让用户再这里还承担上记忆负担,所以根据这一点,和产品的意愿,我们 后面改版成如下方式,提升了用户访问深度。

手机的碎片化时间,也决定了内容的跳跃性和片段化的阅读。这些都将让我们的文案要考虑的更精简,表意更明确,让用户在最短的时间内能了解到信息所要表示的意思。所以产品的反馈提示文案,特别是短暂出现的浮层提示,尽量在最快的时间内,提示用户需要的信息点。

屏幕

Web场景:pc拥有更大的屏幕,所以设计更复杂,也更开放

移动场景:手机的小屏幕,设备隐私性更强,简单,私密

设计启示: 聚焦核心点,内容优先…

关注用户的主要任务流程,明白用户最需要什么,不要让太多的流程分支来干扰用户任务。移动产品不应该是简单的挪动pc上的设计,将什么功能和操作都暴露出来,所以我们需要适时出现需要的功能。这就需要更聚焦的设计,聚焦设计可以从删除、组织、隐藏和转移几种方式入手。

智能手机屏幕空间主要尺寸:

智能手机用户在使用过程中对屏幕尺寸的感觉:

大部分的使用用户还是感受到屏幕有点小。设计的时候就需要考虑到最大化内容,充分利用屏幕。现在就有很多应用,将导航栏与工具栏在默认的时候显示,向下浏览的过程中收起,往回浏览的时候显示出来。如google搜索:

天猫的搜索结果页的导航栏和筛选在页面滑动的过程中,隐藏起来,让宝贝最大化显示,用户的空间感更大,也是考虑到过程中让用户沉浸在内容中,不打搅到用户。

任务窗体

Web场景:多任务进行,可同时进行多项任务,边听歌边任务

移动场景:单任务窗体

设计启示: 信息扁平化,减少切换,缩短路径…

设计启示:信息扁平化

想 想我们平时在pc上,多惬意,可以边淘宝边听歌,还顺便看看电影。在移动设备上基本是不可能的,因为它的单任务窗体。所以平时在Web设计中,我们注重信 息广度和深度的平衡,但手机产品的单任务窗体,将决定信息架构的扁平化,扁平化的好处是用户只需要较少的路径,打开更少的窗体,就能找到自己想要的信息。 手机页面基本上都没有网页的面包屑,每个进入的窗体,都需要一级一级返回。

所 以在考虑整个任务流程的时候,就应该用更少的路径,满足了用户操作,达到产品的连续性和效率的提升。最新版的evernote,就利用了架构扁平化的原 则,如下图,在导航栏的上方放了多卡片的入口。这样的设计让用户只需1-2步就到达全部笔记、分类笔记、标签、地点等内容。用户可以很直观、方便地在各个 内容间切换:单击或拖拽卡片顶部,版块内容就会放大展现,且能预览到相应的模块。这些设计都极大的提高了此应用的使用效率。

淘宝H5中淘+的设计,也是一种信息架构的扁平化,让最重要的几个入口,在所有的页面上都显示出来。让用户能快捷进入相应的页面,而无需再专门跑回首页再找相应的入口。

设计启示:减少切换,缩短路径

避 免单任务窗体带来的劣势,可以从信息架构扁平化入手,也可以从减少切换,缩短路径的方式来实现。我们在电子商务移动领域,创新性的在搜索结果页中引入了详 情内容,这样的方式让用户的交易成本降低了,产品体验和交易效率得到了极大的提升。设计上线后,搜索结果页进入详情页的点击数少了近10%,但最终的引导 成交额和成交转化率保持平稳。这样的设计思路是可以在移动产品中多多尝试的,将带来意想不到的效果。

摆放方式

Web场景:放在桌子上,稳定

移动场景:拿在手上,随意摆动,找支撑点

设计启示: 最大化内容,切换场景…

竖屏是我们手机中的常态,一般产品都选择使用竖屏,横屏内容一般需要适配。所以,如果只是简单的横屏,还不如限制不要横屏。一般在什么情况下使用横屏?游戏,可以感受到最大化场景,也方便双手操作。看图,视频,阅读这些都考虑到最大化元素。拍照,双手的便捷性。

横竖屏也是一个开关,能切换到相应的界面,只要有更好的用户场景需求,往往能给产品带来特色。比如下厨房菜谱的应用,在横屏预览时,切换为不同的预览模式,而不是简单的屏幕拉伸。当你在边炒菜边看菜谱的时候,就可以立即感受到这样的方式,是最符合你当时的需求的。

横屏后,立刻感受到更大的字体,更大空间的左右滑动区域,是不是特别切合你炒菜的场景。

 环境的应用场景篇暂且描述到这里,更多环境相关内容,请查看 走近移动设计——硬件设备篇 

一淘UX原文:http://ux.etao.com/posts/590

优设哥向您推荐:

移动UI设计须知

移动端动画设计的12个原则

10个必备的移动UI设计资源站

推荐:浅析移动平台网站开发的三种方法

2012年度最佳移动网页字体设计
无觅

相关 [移动 设计 应用] 推荐:

移动应用表单设计秘籍

- - 落花流水——elya妞╰_╯
一直想写一篇文章,关于移动应用表单设计的,可惜最近项目很忙,忙到没有时间打理博客. 最近体验产品的时候,经常看到错误的的表单设计,要么信息混乱,要么步骤繁复、要么语言程序化,要么视觉焦点跳跃,要么校验顺序混乱,要么反馈不及时,如此种种的问题,让我很想认真的总结一下,思考一下,为移动应用的表单设计,提供一些个人力所能及的建议,希望更多地设计师能认真思考移动应用表单的特殊性,能最大限度的提升表单设计的体验,提升效率,提高满意度.

移动用户体验设计中的原型应用

- 超 - UED TEAM,用户体验设计,web前端开发
一把好的椅子,是否需要我们通过阅读使用手册才能知道如何使用它吗. 一把好的椅子,是在我们看到它时,我们很自然的就知道它能够干什么,我们该如何使用它. 也就是说:“椅子”这个概念已经深入人心,是个被高度认可的原型(Archetype). 现有的移动领域里,我们也在探索如何将“原型”的概念揉入到我们的设计中去.

儿童移动应用的界面设计基础知识

- - 曉生語錄
注:实习生wenli对本文皆有贡献 . 最近处于项目需要,开始研究儿童产品的界面设计. 在此之前,对儿童如何使用移动产品和如何设计知之甚少. 优质的移动应用,为儿童带来乐趣的同时可以帮助儿童认知事物. 越来越多的儿童使用移动设备,接触虚拟社区的时间甚至早于真实世界,如何设计儿童产品是一个非常值得深入研究的课题.

移动应用设计中应避免的10种错误

- - 博客 - 伯乐在线
导读:本文是来自移动应用开发公司. Sourcebits系列文章 Mobile App Trends Series(译者:此网站要梯子)中的一篇,文章内容适合初涉此领域的读者,现翻译如下. 在了解了 跨平台移动应用设计的利弊和 移动应用开发常见错误 (译者:此两篇翻译中)之后,你想到了一个不错的应用创意,你甚至连应用的名字都想好了,接下来该干什么.

移动应用界面设计模式 - 搜索、排序、筛选

- - 所有文章 - UCD大社区
去年年底,我们曾经学习过一篇“ 具有引导性的移动应用界面设计模式”,其英文原文来自O'Reilly动物园的一本新书,"Mobile Design Pattern Gallery",就是封面上是个大公鸡的那本儿. 今次这篇则是来自于本书的第四章——搜索、排序和筛选. 貌似国内引进版也由XX出版社在做着了,真心不关我事,自己走起.

移动应用的三种空状态界面设计

- - 互联网的那点事
本文作者 Craig Dennis,一名设计师,译者 @C7210. “空状态”是指移动应用界面在没有内容或数据时呈现出的状态. 长久以来,空状态界面一直是被忽视的,因为设计师们通常会将全部精力集中在怎样更好的呈现内容和数据上,只有开发人员才会比较频繁的与这类相对“意外”的状态打交道. 也正是因为这样的原因,空状态界面留给用户的印象大体上就是晦涩难懂的文案以及缺乏视觉设计风格.

从Enyo看移动Web应用框架设计

- - 技术改变世界 创新驱动中国 - 《程序员》官网
Enyo是一个来自Palm的Aries项目的JavaScript开发框架,它所关注的方向是一般的程序框架所关注的封装性、复用性和可维护性. Enyo是随着webOS发布的开发框架. Enyo 1.0发布于HP TouchPad的webOS之上,它是依赖于WebKit的开发框架. 因为一些历史原因,Enyo 1.0的授权仅限于webOS中使用,并没有使用开源协议.

2012年移动应用十大设计趋势

- - 百度MUX
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,用户对移动应用的品质需求也呈现上升趋势,界面设计又被提升到一个新的高度. 移动应用不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从视觉感受、风格趋势、操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的体验.

2012年移动应用交互设计趋势

- - 曉生語錄
2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度. 不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验. 本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势.

从Web到移动应用——谈设计师的思维转换

- - legene的交互设计博客
随着移动互联网的快速发展,很多web产品经理、设计师转而投身至移动应用领域. 看起来非常相关的工作,却可能给他们带来了不小的困扰. 很多刚刚接触移动应用的产品经理、设计师依然习惯用Web的思维去做APP,从而导致一系列问题. 张小龙在谈微信时曾经说过: 绝不考虑Web形态,一切考虑都基于APP. 那么,移动应用和Web相比,区别到底在哪里呢.