移动设计中应用场景的转换

  本文由@一淘UX 团队所撰。作者首先叙述了一个简单的场景——“美女在家玩自拍”,一句简单的话,但对设计师来说却有深在的内涵。这句话浓缩了设计最讲究的三大策略点:谁、在哪里、干什么,也就是用户、环境和任务。

  无论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网络底下,不敢于打开这样的页面。

时间: 2024-12-28 13:32:36

移动设计中应用场景的转换的相关文章

flash中实现场景转换中的马赛克效果

转换 PowrePoint里面很常用的效果,我说不出名字,姑且叫"马赛克渐变"效果吧. 就是图片方格化退去,显出另一幅图画.另一幅图画过了一会儿又方格化退去,显示下一张.如此循环.大家可以看看我的源文件先.里面用了三幅图.这个效果很实用,.您可以用在LOGO上或企业的产品宣传上,简单美观. 好了,闲话不说,介绍一下思路先. 我们的思路是:场景里一共有四个MC.最下面一层用做相框,不会用到,我们设深度为0;中间两层是真正要显示的图画,分别设深度为1,2,我们用"上层"

如何发现交互设计中的思维盲区?

  作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的.其中有欠缺经验的原因,也有自身知识局限的问题.进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为小伙伴们带来了不必要的工作量. 然而现实中,交互设计的改动是难免的(因此一般一个项目会不断迭代交互文档),尤其是在时间安排紧促.产品需求不清晰的情况下.怎样在交互设计阶段尽可能思考周全,减少视觉设计与开发的返工呢?抱着提升自我.拯救伙伴的态度,我结合自己在移动端app的项目经验进行了一些总结.这并

APP设计中便捷的单手操作

  探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何来感应我们的操作的. 用户是如何使用手机的 Steven Hoober在<How Do Users Really Hold Mobile Devices?>[1]一文中指出,通过两个月的时间对1333名手机用户在公众场所(街道.机场.汽车站.咖啡馆.火车上.汽车上等)使用习惯的观察得出以下结论: ①780名用户是通过滑动.点击.打字等来操作屏幕,其他用户则仅仅是用手机来收听.观看.打电话. ②49%的用户

App设计中4类便捷的单手操作

探讨APP的手势操作前,我想先介绍两篇文章来了解用户是如何使用手机的,以及触控屏是如何感应我们的操作的. 用户是如何使用手机的 Steven Hoober在<How Do Users Really Hold Mobile Devices?>[1]一文中指出,通过两个月的时间对1333名手机用户在公众场所(街道.机场.汽车站.咖啡馆.火车上.汽车上等)使用习惯的观察得出以下结论: ①780名用户是通过滑动.点击.打字等来操作屏幕,其他用户则仅仅是用手机来收听.观看.打电话. ②49%的用户通过单

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使

设计中的沟通 用铅笔来绘制“粗糙”的草图

在Web UI 模型出现之前,经过了很长一段的时间,设计师们都会选择使用缩略图(Thumbnail Sketching)来展现自己的创意,表达自己的思路.这种技巧就像是设计师专门用于沟通的一种艺术,而这种艺术现在却渐渐淡出大家的视线. 而通过本文,就让大家重新审视品味一下这种艺术. 对于设计师而言,对线框图的期望其实是一种能够在繁重设计工作中整理自己思路的方式.而绘制缩略图更多的是就是为自己累计更多的创意,从中找到自己思维中的闪光点. 草图是绘制线框图的地基 线框图(Wireframing)是我

交互设计在产品设计中的工作流程小议

当产品的用户体验要求越来越高时,交互设计师的职责也越来越明晰了.交互设计师除了自身的基本功外,还需要有一个规范的流程,才能够使工作完整有序. 图1 交互设计在产品设计中的流程图 一.版本计划 版本计划是指在产品或项目立项时,对产品的一个总的规划,通常包括产品的需求与目标,比如能够实现哪些功能,性能上如何.这一过程,交互很少直接参与,或者列席一下发版立项,对计划情况有所知晓.交互可以纵观一下历史版本,对比行业内外的相关产品,以及满怀未来产品的一种期待:实用.方便.美观-- 二.需求分析 在版本计划

交互设计中的设计方案记分对比法

  今天@言覃某人 给同学们介绍一个特别高效实用的方法,当遇到场景较多或团队有争议的设计点都可以用这个方法,帮交互设计师们理清思路,达成共识并做出最可能正确的设计决定. 交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场景和因素,于是只能根据自己能够想到的个别场景与因素来对设计作出判断,最终团队之间形成意见分歧,每个人都不能宏观地掌握所有的场景和因

YUI3设计中的激进和妥协

相信每个前端工程师都有自己喜爱的javascript框架,说情感也好,道信仰也罢,javascript框架带给人的不仅仅是便捷的开发,更有一种纯粹的逻辑美感,不管是jquery曼妙的简洁,还是yui魔术般的沙箱,都使我们产生无穷的想象.然而,js框架又必然无法做到面面俱到的完美无瑕,比如jquery在OO方面做出的让步,以及yui在性能上做的牺牲,无不给人传达一种缺憾美.一种理想的现实主义.今天,我们来看看yui3在框架设计中的这些牺牲和让步,以便让我们更加深刻的理解yui3的全貌,并将其优势发