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

本文由@一淘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网络底下，不敢于打开这样的页面。

设计启示：流量心理——加载太慢，费流量

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

这里可以关心一下用户等待时间的一个心理。

具体说明如下图：

所以别让你的产品让用户等太久，都走光了。这里就可以考虑适合的响应机制。

比如优先加载框架，给用户的感觉是立即有相应了，且已有部分内容出来了。

或则可以在当前页做反馈，成功后跳转到下一页，如果失败直接在当前页反馈，避免跳转。这点适合下一页内容量较少的情况。

再比如收藏成功按钮，点击收藏按钮，是先跟服务器交流，还是先给用户积极的反馈收藏成功，再跟服务器交流，这些都让用户的感受不同。好的加载方式，也是能快速感受到速度的提升和转场的顺畅和连续性。

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

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

所以在同质化的产品中，流量就是一个可以突出的卖点。

标签： 网站设计 网页设计 移动产品设计 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。