一 : 腾讯移动端H5页面设计实战分享

编者按：十年精华输出，从用户研究、创意剖析、绘制方法、项目管理等实体案例出发，《腾讯网UED体验设计之旅》将带你经历一场体验设计之旅。本文节选自该书，重点介绍了基于HTML5技术的移动Web页面的设计原则与设计过程 >>>

《腾讯网UED体验设计之旅》一书集合了腾讯网UED团队在用户体验领域的十年探索经验，展示了大量精彩案例的设计技巧和过程。下面为该书的节选内容。

为什么要设计H5页面

移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。

就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。

一提起移动端，大家首先想到的就是手机上安装的移动应用，比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用（Native App），因为它们是需要安装在用户设备上的软件，它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能，例如使用存储空间实现离线阅读，利用图形加速实现界面动效，以及利用摄像头来上传图片，等等。但跟Web专题相比，移动应用的开发周期长，开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例，开发者在应用商店要发布应用，需要通过约耗时8天的人工审核。因此，把PC端的Web专题做成一个个移动应用是不现实的。

除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。

在移动端，要在网页上实现交互和动效需要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等）。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。

通过HTML5实现交互效果时，通常比原生应用要更消耗设备资源，因此设备性能就成为H5页面效果的一大瓶颈。现在，这个瓶颈正在消除：2014年7月的一项调查表明，中国手机用户换机周期已由2011年的29个月缩短到18个月。而近两年上市的智能手机，大都运行着较新的操作系统和浏览器，性能上也能基本达到展示H5页面的要求。

好的产品需要恰当的渠道来让用户发现和传播，如果把一个个H5专题比作“箭矢”，那新闻客户端、微信和微博等传播渠道就是射出这些箭矢的“弓”。利用新闻客户端、微信和微博内嵌的网页浏览器（见图1），H5页面可以与新闻文章、朋友圈状态和好友微博一起触达用户，再通过用户的分享形成传播。此外， H5交互页面凭借着精美的设计风格、新鲜的交互体验以及强烈的社交属性，对于用户来说有着极强的分享驱动力，很容易在移动社交环境中形成病毒式传播。微信红包和滴滴红包就是通过微信朋友圈广泛传播的H5案例。

图1 腾讯新闻客户端内的H5专题

综上所述，与原生应用相比，H5页面的传播性和灵活性使它更加符合媒体产品对时效性和差异化的要求，成为2014年移动媒体产品最重要的形态之一。

H5资讯专题主要基于H5技术，将图、文、动画、视频、音频等媒体形式进行合理组合，突破了传统新闻专题的内容、形式界限，让新闻资讯变得更加直观、生动。人性化的交互设计更好地将内容与人机互动结合，[www.61k.com］强化了用户的参与感。同时，这种多媒体形式创新带来的趣味性和新鲜感，也使用户分享专题的意愿得到提高，促进了新闻资讯专题的二次传播。

赛程魔方3D旋转界面设计

在2014巴西世界杯期间，我们与腾讯体育推出了一款世界杯赛程H5页面。在项目之初，我们就希望这一款小产品在内容定位+视觉设计+交互设计三个维度上可以高度统一，三位一体，围绕世界杯赛程赛事赛时这一中心，内容、交互、视觉密不可分；即设计与交互体现内容，内容反方向印证视觉与交互，将常规的体育赛程表通过多屏展现，时间轴表现等与H5交互特性紧密结合起来，创造出一种大家喜闻乐见的界面展示方式。随后小产品一经推出，赛程魔方（见图2）即引爆朋友圈，前后被复制抄袭几十次，从另一方面也印证团队定位的准确，形式与内容高度统一是项目成功的一大法宝。

图2 赛程魔方的视觉案例

交互形式与项目名称和内容高度统一：3D智能旋转交互方案（见图3）。

图3 3D旋转的交互模拟步骤

因团队负责媒体界面设计，所以从本源上我们十分强调内容与设计形式的高度结合，我们希望设计形式就可以强烈传达出我们要表现的内容与态度。项目名称为“赛程魔方”，体育赛事如同魔方一样复杂多变，结果未知，所以在交互设计上，希望能够利用HTML5的CSS 3D智能旋转方案完成多个页面的切换方式，以达到贴合“魔方”的项目概念。大家知道H5可以有3D旋转等形式，所以页面的交互方式将充分利用这一特性，当用户触控屏幕，手指上划，页面整体呼之欲出，以整体3D翻转的形式完成页面切换，交互形式新颖震撼并贴合内容。这一交互形式在随后多个项目中得到推广应用。

动态卡片抽出交互设计方案如图4所示。

图4 赛程魔方动态页卡抽出的交互虚拟步骤：从大屏到小屏

如图4所示，考虑到不同用户的不同需求，我们希望从封面起，即可以快速定位至相应页面，交互形式上补充了动态卡片抽出的交互设计方案，三排纵向并列式按钮以单击或滑动均可触发卡片抽出，继而快速定位至相应页面，满足相关用户的个性化需求。

如图5所示，封面主图构思思路来自桌面微景观，源于现实环境，设计师进行艺术加工，并与世界杯内容相互贴合，整体以线框式魔方包裹球场为出发点，将大力神杯底座与魔方设计融为一体，以半透明浅切面和不同粗窄线框相互结合，以表现艺术化的玻璃质感，从而模拟出整体空间感与立体感。

图5 场景化设计还原内容：抽象场景模拟现实环境

内容区重展示轻设计：突出内容主体，如图6、图7所示。

图6 小组赛赛程入口页　 ? ?　　 ? ? ? ? ? ? 　图7 完全赛程页

对字母或数字序号类易识别元素强化设计，赋予归类指引的功能，放大字母可以将文字信息分类与定位，并增加版式节奏感。从小细节上将信息进行归类，方便阅读。整个赛程以时间轴的方式完全展现。

2014年多款H5小游戏一度刷屏，引发热议。众多H5小游戏都有一个共同的设定，即分享到移动端最具人气的微信朋友圈中，和小伙伴们比比高下。利用社交圈的攀比心理，是该类游戏成功的一大关键。基于社交圈的好友关系及信息分享链，重点挖掘了用户分享和攀比的模块，促使玩家为获得更好的成绩忍不住一次次在朋友圈炫耀。同时，在用户使用朋友圈的高峰时段去推动，更容易形成热点和话题。最有效地手段是利用玩家的慵懒心理。

相对于传统游戏，H5互动游戏除同时具备迅速传播的优势之外，还具有快速设计、快速开发的特点。在网络媒体行业，面对媒体资讯的高速爆发，H5互动小游戏可以做到快速贴合媒体事件的时间周期，并在一定程度上承载资讯，通过揣摩用户攀比心理，达到广泛传播的目的，成为通过资讯拉动网友参与热情与气氛的一道利器。

来源：微交互

网址：http://www.weiued.com/Article/?Id=763391337#

二 : 移动端页面优化该怎么做？ 从四个方面帮你做好移动页面性能优化

为什么要最移动页面进行优化？

纵观目前移动网络的现状：

移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计：

71%的用户期望移动页面跟PC页面一样快，74%的用户能容忍的响应时间为5秒，所以我们必须保证移动端页面有足够的速度。

移动页面的速度跟三个因素有关，分别是：移动网络带宽速度，设备性能（CPU，GPU，浏览器），页面本身。

目前主流的移动网络制式为3G：

今年，我们还看到了4g网络制式在快速发展，这再一次提升了移动页面的加载速度；

而移动设备本身，截止到目前，以iPhon6/三星Note4等设备为首，智能设备已经变得比以往屏幕更大，CPU、GPU、内存更靠谱。

而与其同时，浏览器产商也为提升页面的速度做出了不可磨灭的努力。

网络制式供应商，手机制造商，浏览器产商如此给力，我们呢？我们能做什么。

我们能做得是对移动端页面本身优化，这也是我们专业价值的体现，所以我们必须做移动端页面性能优化。

该怎么做移动端页面优化呢？

在说这个前，要提一下PC常用的优化手段：

1. 代码优化（css、html、js优化）
2. 减少HTTP请求（雪碧图，文件合并…）
3. 减少DOM节点
4. 无阻塞（内联CSS，JS置后…）
5. 缓存
6. ……

首先我们得关注一下一个页面从开始到呈现完毕需要经历什么阶段，主要有四个阶段：

每个阶段的主要工作如上图所示，而我们的优化目标是：

下面我们来针对上面的几个阶段细说一下都有哪些优化手段。

首先，来看看加载中有哪些优化手段：

1. 预加载

预加载方式有两种：

A. 显性加载

类似这种用户能明显感知的，我把它称为显性加载，互动页面都建议加上这种加载方式，它一方面能增加页面的趣味性，另一方面能让后续页面体验更流畅。

B. 隐性加载

这种在加载第一张图片的时候已经预先加载了第二张图片，从而使得页面体验更流畅的方式，我把它称为隐性加载，这种方式的好处是节省流量之余又能使得体验增强。

2. 按需加载

按需加载是不可或缺的优化手段，主要有以下两种方式：

对于这种方式，在首屏加载的时候把首屏的内容加载尽量，而位于首屏之外的元素都只在出现在首屏时才加载，很大程度地节省了流量，提升了首次加载时间。

这种叫响应式加载方式，意思是利用JS 或者CSS 判断分辨率，从而选择不同尺寸的图片进行引入，这种的好处显而易见，同样可以加快加载速度和节省流量。

3. 压缩图片

对于压缩图片，首先要提的是jpg文件：

对于移动端的JPG 文件，有这样的结论：

1. 使用大尺寸大有损压缩比的jpg
2. 使用jpegtran进行无损压缩

而对于png有以下结论：

1. 多彩图片使用png24
2. 低彩图片使用png8
3. 推荐使用pngquant
4. 尽量避免重定向

为什么要尽量避免重定向呢？因为如图：

这是一个同一网速下的测试结果，重定向之所以会比较慢，是因为它重复了域名查找，tcp链接，发送请求。

5. 使用其他方式代替图片

有两种方式，第一种是：依靠CSS 3绘制图片：

第二种：使用iconfont代替图片

但iconfont不一定比图片好，这里做了个实验：

对于大图片，iconfont并不比雪碧图好，建议单侧小尺寸图标才使用iconfont.

然后，针对脚本执行中有哪些优化手段，这里只提两点：

1. 尽量避免DataURI

DataUri在移动端并不如它在pc端吃香，因为：

经测试，DataURI要比简单的外链资源慢6倍，生成的代码文件相对图片文件体积没有减少反而增大，而且浏览器在对这种base64解码过程中需要消耗内存和cpu，这个在移动端坏处特别明显。

2. 点击事件优化

在移动端请适当使用touchstart，touchend，touch等事件代替延迟比较大的Click 事件。Click之所以慢是因为mousedown导致的：

然后，针对渲染阶段中有哪些优化手段，这里也只提两点：

1. 动画优化

a）尽量使用css3动画

优点：

1. 不占用js主线程
2. 可利用硬件加速
3. 浏览器可对动画做优化

缺点：

不支持中间状态监听

b）适当使用canvas动画

优点：

可规避渲染树的计算渲染更快

缺点：

开发成本高，维护较麻烦。

通过对CSS 3动画和Canvas 动画对比：

得到结论：5个元素以内使用css3动画，5个以上使用canvas动画。

c）合理使用RAF（requestAnimationFrame）

优点：

1. 能解决脚本问题引起的丢帧，卡顿问题
2. 支持中间状态监听

缺点：

兼容问题

通过RAF动画与settimeout动画对比：

得到结论：不需要兼容android 4.3浏览器的情况下，请使用RAF制作脚本动画

2. 高频事件优化

类似touchmove，scroll这类的事件可导致多次渲染，对于这种事件可以通过以下手段进行优化：

1.使用requestAnimationFrame监听帧变化，使得在正确的时间进行渲染

2.增加响应变化的时间间隔，减少重绘次数。

最后，针对合成/绘制只提一个优化手段：

GPU加速

触发GPU加速的方式有：

1. CSS3 transitions
2. CSS3 3D transforms
3. WebGL 3D 绘制
4. Video
5. ……

使用GPU加速前有对比实验：

GPU加速实际上是大幅减少了合成/绘制时间，从而大大地提高了页面速度，但GPU加速有自己的缺点：

过多的GPU层会带来性能开销，主要原因是使用GPU加速其实是利用了GPU层的缓存，让渲染资源可以重复使用，所以一旦层多了，缓存增大，就会引起别的性能问题。

总结

本文针对页面呈现的四个阶段提出了比较典型的优化手段，到最后，再提醒读者一下：其实优化是双刃剑。

按需加载提升速度，但可能导致大量重绘；

Touch响应快，但很多场景不适合；

GPU加速效率高，但内存开销大等等

Loading会让整体体验流畅，但容易造成用户流失

图片压缩让带宽成本降低，但可能会导致视觉效果变差

类似这样的矛盾点还有很多，请结合业务按照实际情况进行优化。

以上就是对从四个方面帮你做好移动页面性能优化全部内容的介绍，更多内容请继续关注61阅读！

三 : 如何设计淘宝手机无线端页面

一、无线端各种尺寸和要求

可以传一个小于200K的mp3音频文件。

图片最多可以传30张，单张图片宽度在480px-620px内，单张图片高度小于等于960px。

可以添加文本模块，每个模块不超过500字符。(文本模块没有任何样式可编辑，连首空格2字都不能。行间距不能调整，字体大小、颜色、加粗等不能调整，被逼无奈我只能全部做成图片了。这点希望官方后续能考虑放宽。)

所有的东西加起来不能超过1.5M。

二、无线端页面设计要点

在无线端的详情页是没有店招的，设计一个店招，这样会增强视觉，提升品牌形象。如图：

一张无线端的海报图

可以是主推产品，或者形象展示，这样看起来会大气很多。图片不可以做链接，且所有的图片和文字在无线端都不可以做链接。

内容精简，挑重点说。

不要把你所有PC端的内容都缩小照搬到无线端，原因是pc端图片缩小后文字会很小，在手机上看不清楚，原因之二，pc端就那么小一点地方，挑重点内容来做就行了，有wifi还好，没wifi的话别浪费买家的流量了。

不要使用太多色彩

颜色信息太丰富的图片，图片体积必然会增大。千万要记住这是无线端，能小则小。尽量使用单色背景，或者浅色图片，推荐使用“极简”设计理念。这样的图在无线端上看其来会很清晰和舒服。

字体大小的问题，也是最重要的问题。

经过我反复的测试得出这个经验：我选用的是620px宽的尺寸，正文文字使用(雅黑 26px 模式为锐利)的时候，在手机上浏览感觉最舒服。不要以为26px在pc上看起来很大，其实在手机上显示是很小的。有图为例

标题是(雅黑 32px Bold 锐利)正文是(雅黑 26px 锐利 行间距自动)，看起来很大是吧?那我们来看看这个文本在手机上是多大，由于Iphone截图会把图片放大，没办法做到手机上的效果。

图片优化的问题，也非常的重要。

每张图片都必须要优化，否则很大，PS里划好切片以后Ctrl+Alt+Shift键 打开优化界面，逐一选中每个切片去优化，尝试不同的格式，有时候在JPG格式下50%的质量，仍然比GIF格式大，这要取决于你的图片颜色信息。如果颜色比较单一，首选GIF，如果是一些复杂的图片，则选JPG。另外有一点，有时候GIF和JPG都很大的情况下选择PNG8，会小很多。反正这三个格式淘宝都支持。

尽量在保证图片质量的情况下，去减小图片大小，有时候pc上看起来图片质量压缩过度了，但在手机上看效果还不错，这个需要自己去慢慢体会。

顺便说下，我们的现在是29张图片607k+mp3 197k 还不算是太大，符合淘宝的1.5M以内。

不要把图片或者文字使用切片拦腰斩断

每个图片，或者没段文字应该切成1个图，而不是把一张完整的图片切成几块，这样会有非常严重的后果。

在淘宝客户端里面看不出来，一旦使用手机浏览器去看宝贝详情的时候，图片之间是有空隙的，如果你的图片被拦腰斩断了，那就会出现一个“断裂带”，希望以后淘宝修复这个问题。

关于添加mp3的问题

mp3文件只允许200k内，但这200k内你能说一些什么呢?想过没?那我告诉你吧，正常的语速，不带背景音乐，能说80个字左右，还得看你压缩的好不好，跟压缩也有关系。

如果你想带点音乐，那么只能说50个字左右。我的mp3是花钱找专业录音的公司做的，他们反复调试了2天，才保证文件不超过200k，保证音质不那么差，保证文字尽量多，几个条件都很苛刻。

至于mp3的内容你想说点什么，就看你想要表现什么了，可以表现品牌文化，可以是促销，可以是产品介绍，可以是一段音乐，可以是...自己去想吧。给大家看看加了mp3以后，详情页的展示效果吧。

有木有点小激动，传说中可以听的宝贝就是这样来的，你想不想听听?

补充：手机浏览器上看详情页，不会出现MP3，只有在淘宝客户端浏览时候才能看见。

关于文本模块的问题

这是个很纠结的问题，我试过了，使用文本模块的话就会减小整个页面的体积，但我为什么没用文本模块呢，有几个原因：

1)、文本模块不支持字体大小编辑，不支持首行空格。

2)、文本模块不支持文字颜色编辑。

3)、文本模块使用后，和我设计的效果图不搭配，看其来巨难看。

我就放弃使用文本模块了。但是有个缺点，当手机在没有wifi的情况下就是E模式下，浏览宝贝比较慢，在怎么优化图片，也就那样了，需要点一下出来几张这样。

来一张首屏吧!

本文标题：移动端页面设计-腾讯移动端H5页面设计实战分享
本文地址： http://www.61k.com/1078247.html