手Q一级入口简版省流量方法的具体应用

 

一、报告总概述

   项目背景

目前不管是微信购物还是手Q购物,网页加载速度都存在优化空间。浏览购物页面慢速的直接恶劣后果是导致用户浏览卡顿体验不好,退出购物场景。

   目的

提升用户在2g/3g网络环境下的网页加载速度和浏览体验,提高商品成交率。

  方案

运营、产品、技术三个角度都有空间来提升网页加载速度:

运营:限制上传图片的分辨率大小和KB大小、尽量要求白底图片等手段;
产品:三个栏目的切换采用直出版,减少切换栏目时的网页刷新等手段;
技术:优化APP本身的网页加载性能、尽量利用WebView的缓存等手段;
交互:规划手Q一级入口2g/3g专用版(简版)。

二、背景及需求分析

 

    用研分析

根据手Q购物平台用户调研报告-140922(如下图)结果显示:相比微信购物平台用户,手Q用户以年轻、文化程度偏低和低收入人群居多,以在校学生和普通工人为主。且wifi环境考虑相对较少,推测与该人群生活环境wifi覆盖范围较少,但使用手机网购诉求更高所致。

用户分析2

图(1)

但同时报告结论(如图(1))显示手Q用户有35.5%左右表示不在乎网络状态,42.6%的用户多数会选择在wifi情况下使用。

换而言之,我们假设大部分用户因为某些原因(例如:本身流量限制或者在2G/3G网络下加载速度过慢) 而选择了在wifi情况下购物,但却不排除他们仍然会在2g/3g网络环境下浏览商品,为了提升这部分用户在2g/3g网络环境下的浏览体验,所以我们规划手Q一级入口2g/3g简版。

但是,问题来了,这部分2g/3g用户是否是我们的主要购买人群呢?(也就是说,简版是否会有效的提高交易量?数据跟进)如果不是,规划手Q一级入口2g/3g专用版(简版)是否有必要?如有必要,怎么做?简版又是否影响其他用户的体验呢?

三、竞品分析

 

    概述

在世界加快脚步迈向4g网络的同时,不可否认2g/3g用户在目前仍然占据了绝大多数资源,各种手机App开发者和经销商为这部分用户在2g/3g网络下打造通畅浏览体验更是绞尽脑汁。

我们来看看网易新闻客户端,网易新闻是网易倾力打造的精品应用,已然成为国内第一新闻客户端,因体验最流畅、新闻最快速、评论最犀利而备受推崇。

它推出的特色功能:离线阅读,只要在WIFI环境打开客户端就会自动下载新闻,不占3G流量,蓝色箭头标识已离线文章,即使手机没信号也能看新闻。

另外网易新闻还运用了智能加载图片,动态判断屏幕分辨率加载不同尺寸图片,提升加载效率。一些“囊中羞涩”的用户还能设置仅wifi网络下载图片(如图)节省流量。

网易新闻客户端

如果说网易新闻客户端它毕竟属于新闻浏览类的应用与电商类有着天壤之别,那下面我们就看看电商类app的例子。

    天猫app(&淘宝app)

天猫客户端运用了分步加载的方式,优先加载框架和默认图片,让用户能尽快看到界面的布局和内容。

目前大部分app的正常路径都会使用这样的设计方式,给用户带来了极为流畅的感觉。

在设置页面中我们可以看到关于图片显示的几个功能(如下左图):智能模式,高质量(适合wifi环境),普通(适合3g/2g环境)和清楚图片缓存。

用户可根据自身情况选择设置图片,普通针对3g/2g环境,图片质量低于wifi环境,同时加载速度也相对较快。也可选择智能模式,系统将自动识别网络环境自动进行切换。淘宝app(如下右图)与天猫原理类似,这里就不再做分析了。

天猫淘宝App

    京东app

京东客户端可设置节流模式——手动下载图片(如下图所示)

JDApp

同样,在节流模式下的京东app首页,自动加载一屏以内的内容,一屏以下则不加载(如下图所示)

分屏加载

综上所述,我们可以了解到在电商app应用中,影响浏览体验的最重要因素:一是图片,二是加载方式。

四、交互及技术分析

 

    图片

先来说说图片,从以上分析的案例来看,设置节流在3g/2g环境中基本如出一辙的采用开启无图或者低质量图片模式。

事实上,图片本身对加载速度的影响也是可控的,矢量图/扁平化图片K值小加载速度较快,质感特效特别强的位图K值大加载也相对较慢。

另外,较有背景的图片,白色背景图片或透明背景图片K值小加载速度也相对较快。

图片数量的影响,从2014.09.18发布的数据来看,优化后的手Q耍大牌栏目,去掉品牌logo小图,可以减少大量的图片加载(之前每个品牌活动由“品牌logo图+品牌宣传图”两张图组成),所以减少不必要的图片数量可以有效的提高页面加载速度。

    加载方式

下面来介绍一下加载方式,界面内元素的加载形式多种多样,要根据内容需要而定,常见的加载方式如下。

    分步加载/懒加载/预加载

分步加载:优先加载占用网络资源少的内容,例如框架、文字和默认图案,再加载占用网络资源多的内容,这样可以让用户更快速地看到界面框架内容。(如下图所示)。

分步加载

    懒加载:主要出现在长界面中,如无尽列表,用户可以不断地向下查看内容,达到某个点之后自动加载内容,或者触发拉动后自动加载更多内容。(如下图所示)
懒加载

    预加载:是一种提前加载的方式,例如在闪屏的时候提前加载首页内容。还有对于一些表单,都可以提前加载表单的步骤。

    智能加载

考虑到网络情况,现在的智能加载一方面需要考虑加载速度,另外一方面也要考虑流量问题。智能加载在设计上有以下两种方式。

    1. 隐藏信息:在不同的网络情况下生成不一样的界面。在网络好的情况下,可以提供更多长的界面;在网络差的情况下,考虑到流量和加载速度,可以只显示部分内容,将更多的内容隐藏,通过用户的操作再显示。
    2. 多套资源:主动判断网络情况,资源会根据网络情况做差异处理。例如,对于图片资源,可以根据网络情况的好坏提供高质量或者一般质量的图片。(如前面提到的天猫app和当当app)

多套资源

   缓存加载

缓存加载是针对无网络的情况下,让用户仍然能看到缓存在本地的有用信息,不会出现空白界面。它解决了设计体验和感官上的很多问题,主要体现在以下一些方面:

    1. 一般在主要界面上的处理都会使用缓存加载,避免在无网络时让用户面对一个空白界面。例如:首页内容一般都会使用缓存加载,已给用户最好的观感。
    2. 缓存加载可以有效减少用户的访问流量,同时加快访问速度。特别是一些框架的频繁加载需要使用缓存方式。

但是,不能无限制地使用缓存加载,那样会让用户感觉app占用了大量的系统空间。特别是一些产生大量图片和视频的app,所以,大部分app应用都有缓存清理入口和上限的控制机制。

总而言之,以上分析的图片和加载方式的确在技术层面很大程度上的解决了在2g/3g环境下浏览体验不畅的问题。

五、优化方案

 

一、加载方式优化

采用分步加载、懒加载、预加载、智能加载和缓存加载。

二、图片优化

活动Banner尽量多采用扁平/矢量图片,主要商品图片多采用白色和透明背景,耍大牌去掉叠加的小Logo图,减少图片加载数量。

三、简版交互优化方案

  1. 当用户进入手Q购物,自动检测用户是否Wifi网络
    判断WiFi
  2. 简版呈现缩略图模式(如下左图)和无图模式(如下右图)。

缩略图模式

 

顾名思义,缩略图模式是指用户在2g/3g环境下选择进入简版,图片质量缩减为原图的四分之一,左上图为图片大小不变质量像素变低,点击查看高清大图按钮可查看原图;左下图为图片大小质量均缩小为原图的四分之一,点击放大按钮可查看原图;右下图为无图模式,点击下载图片按钮下载查看图片。

 风险:整版的缩略图有同事反应说像Bug,影响用户体验。事实上,又想马儿肥,又想马儿不吃草,目前确实还没有使得2全的办法,如用户不适应简版可点击浮动在屏幕上方的快捷按钮切换成普通版查看。

六、总结

以上几点是从技术层面提出的优化方案,也是短时间内最快捷成本较低的优化方案,但上述方式还需要埋点获取用户点击下载/点击放大和切换回普通版的点击数,测试简版是否能够帮助增加到达率(数据跟进)。

诚然,想要从根本上解决这些问题,最好的方式是能从结构出发改变现在tab的形式,因为目前手Q首页超划算,耍大牌和逛大街3个tab页的活动数量繁多,精减目前3个tab页的内容,整理出一个portal精简版。

 若这样做需要考虑到成本增加的问题,以及用户在不同版中体验的一致性问题。

因为portal精简版与tab普通版可能需要2批不同的产品运营团队,这样无疑增加了成本。而用户在进行portal精简版和tab普通版之间切换时,可能会出现信息布局在2个版本中体验不一致,甚至增加需要重新学习的成本。

喜欢(381) 评论(2) 分享
  1. 我觉得假如资源允许的话可以另外对省流量的页面进行设计,这样体验会更好

  2. 我觉得假如资源允许的话可以另外对省流量的页面进行设计,这样体验会更好

Leave a Reply

© 2014 JDC. All Rights Reserved.