春雨先知！腾讯移动端H5页面设计实战分享

频道：游戏专题日期：2025-02-25 08:03:03 浏览：46

“ Tencent UED体验设计之旅”一书汇集了在用户体验领域的Tencent UED团队的十年探索经验，展示了许多令人兴奋的案例的设计技能和过程。以下是本书的摘录。

为什么设计H5页

移动设备的受欢迎程度为媒体和娱乐带来了革命。根据中国互联网信息中心（CNNIC）2014年7月的一份报告，在中国网民中，手机使用率达到83.4％，超过了传统PC的总体使用率80.9％。其中，移动网络新闻的使用率为74.2％，仅次于即时通信和搜索，远远超过了其他移动网络应用程序。在移动信息的趋势下，观察主要门户网站在主要活动报告中的最新表现，我们会发现移动优先级，产品社交和互动趣味是三个重要趋势。其中，基于HTML5技术（以下称为H5页面）的移动网页完美地集成了上述三个属性，成为目前最受欢迎的内容报告表开yunapp体育官网入口下载手机版，并且还触发了社交平台上的大规模共享行为。

就像CD替换磁带作为播放音乐的更有效方法一样，数字文件将替换CD开yun体育app入口登录，依此类推，智能手机将替换PC的一些重要功能。尽管仍然存在争议，但不可否认的是，移动互联网的时代已经到来。随着用户从PC到移动终端的迁移，从大屏幕到小屏幕，从鼠标和键盘再到多点触摸，移动终端逐渐成为媒体报道。边境位置。

当涉及到移动终端时，想到的第一件事是安装在手机上的移动应用程序，例如微信，腾讯新闻客户端，QQ浏览器等。我们称这些应用程序为本机应用程序，因为它们需要在用户上安装软件设备及其代码和界面是为其运行的平台开发和设计的。这些本机应用程序可以最大化用户设备的性能，例如使用存储空间启用离线读取，使用图形加速器来实现接口动画，并使用摄像头上传图像等等。但是，与网络主题相比，移动设备的开发周期相比应用程序很长，开发人员需要将其产品提交给应用商店，以便用户下载和使用。以Apple的iOS应用程序开发为例，如果开发人员想在App Store中发布应用程序，则需要通过大约8天的手动审查。因此，将PC端的Web主题逐一逐步地介绍到移动应用程序中是不现实的。

除了本机应用程序外，移动终端 - 移动网页上还有一个产品表格。它起源于移动互联网诞生的早期WAP页面，并且具有与PC网页相同的优势：短开发周期，方便的发布和更新。此外，用户只需要使用移动浏览器或移动浏览器中嵌入的应用程序访问它，这比本机应用程序更方便。但是在2014年之前，由于用户渠道和设备性能，移动网页的形式通常非常简单，而且用户交互很少。 2014年，HTML5技术的普及，智能手机的续订以及新闻客户，微信和其他渠道中用户的增长完全改变了这一点。

在移动方面，为了在网页上实现互动和动画，HTML5技术（例如CSS3媒体查询，CSS3动画，画布等）。当今的大多数移动浏览器都支持HTML5的核心技术，例如对触摸事件和手势的响应，播放声音和视频，渲染CSS转换以及获得设备加速传感器数据。这些技术已经得出，例如交互式迷你游戏，互动动画页面，视觉新闻等，提供了许多不同形式的营销载体，媒体报告等，同时为产品带来了更多的想象空间计划和视觉设计。

当通过HTML5实施交互式效果时，设备资源通常比本机应用程序更多，因此设备性能已成为H5页面效果的主要瓶颈。现在，这种瓶颈正在消除：2014年7月的一项调查显示，中国手机用户的替换周期已从2011年的29个月缩短到18个月。在过去两年中，大多数智能手机运行了更新的操作系统和浏览器，并且其性能基本上可以满足显示H5页面的要求。

好的产品需要适当的渠道供用户发现和传播。如果将H5主题与“箭头”进行了比较，那么新闻客户，微信和微博等通信渠道是拍摄这些箭头的“弓”。使用新闻客户端，Web浏览器嵌入了微信和微博（见图1），H5页面可以与用户以及新闻文章，朋友和微博一起访问用户，然后通过用户共享形成通信。此外，H5 Interactive页面具有其精美的设计风格，新鲜的互动体验和强大的社交属性的用户具有强大的共享驱动力，并且在移动社交环境中易于形成病毒传播。微信红色的信封和Didi红色信封是H5案例，它们在微信时刻广泛传播。

图1 H5腾讯新闻客户的主题

总而言之，与本地应用相比，H5页的沟通和灵活性使其更符合媒体产品对及时性和差异化的要求，成为2014年移动媒体产品最重要的形式之一。

H5信息主题主要基于H5技术，该技术合理地结合了图片，文本，动画，视频和音频等媒体形式，突破了传统新闻主题的内容和形式的界限，使新闻和信息更加直观和生动。人性化的互动设计更好地将内容与人类计算机互动相结合，从而增强了用户的参与意识。同时，这种多媒体形式创新带来的乐趣和新鲜感也增加了用户共享主题的意愿，并促进了新闻和信息主题的次要传播。

时间安排Rubik的立方体3D旋转界面设计

在2014年在巴西举行的世界杯期间，我们推出了带有Tencent Sports的世界杯计划H5页面。在项目开始时，我们希望这种小型产品可以在内容定位 +视觉设计 +交互式设计的三个维度上高度统一，并且与内容定位 +视觉设计的三个维度密不可分，以及世界杯时间表和活动中心，内容，互动和愿景是密不可分的；也就是说，设计和互动反映了内容，并且内容确认了相反方向的视觉和互动，通过多个屏幕，时间轴性能和与H5的其他互动特征紧密结合了传统的运动时间表，以创建每个人都喜欢的接口显示方法看。后来，一旦推出了小产品，时间表立方体（见图2）爆炸了朋友的圈子，并被复制和窃了数十次。另一方面，它还确认了团队定位的准确性。形式和内容的高度统一是该项目成功的绝佳魔法武器。

图2时间表的视觉案例Rubik的立方体

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

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

由于团队负责媒体界面设计，因此我们从本质上强调了内容和设计形式是高度集成的。我们希望设计形式可以强烈传达我们想要表达的内容和态度。项目名称为“计划立方体”。体育赛事与Rubik的立方体一样复杂，可以改变，结果尚不清楚。因此，就交互式设计而言，我希望使用HTML5的CSS 3D智能旋转方案来完成多个页面的开关方法，以实现“ Robik's Cube”的拟合。 ”项目概念。每个人都知道H5可以具有3D旋转和其他形式，因此页面的交互方法将充分利用此功能。当用户触摸屏幕并刮擦手指时，页面将整体出现，并且页面以整体3D翻转的形式切换，相互作用形式是新颖且令人震惊的。并适合内容。这种互动形式被促进并应用于随后的几个项目。

动态卡提取交互设计方案如图4所示。

图4从附表Rubik的立方体动态页面卡提取的交互式虚拟步骤：从大屏幕到小屏幕

如图4所示，考虑到不同用户的不同需求，我们希望从封面开始，我们可以快速找到相应的页面。交互式表单补充了由动态卡提取的交互式设计方案，三排要单击或幻灯片的垂直平行按钮可以触发要拉出的卡，然后快速将其放在相应的页面上以满足相应的页面以满足个性化的需求相关用户。

如图5所示，封面上的主要图片的概念来自桌面微观景观，起源于真实环境。设计师执行艺术处理，并与世界杯的内容相吻合。总体设计使用线框露不利的立方体将体育场作为起点包裹起点，并使用大力神杯将体育场用线框Rubik的立方体包裹起来。底座和魔方的底座设计集成在一起，并且将半透明的浅切割表面和不同的厚和窄的电线框架组合在一起以表达艺术玻璃纹理，从而模拟了整体空间和三维的感觉。

图5场景设计恢复内容：抽象场景模拟真实环境

内容区域强调显示和忽略设计：突出显示内容的主体，如图6和7所示。

图6组比赛时间表入口页图7完成时间表页面

加强易于识别的字母或数字元素的设计，提供分类指导功能，放大字母以对文本信息进行分类和定位，并增加布局的节奏。从小详细信息中对信息进行分类，以方便阅读。整个时间表以时间表的方式全面显示。

在手机上扫描QR码以体验“计划立方体”：

2014年，许多H5迷你游戏曾经淹没过屏幕，引起了激烈的讨论。许多H5迷你游戏都有一个共同的环境，也就是说，它们是在移动终端上最受欢迎的微信时刻共享的，并与朋友竞争。使用社交界的比较心理学是这类游戏成功的关键。根据社交圈的朋友关系和信息共享链，重点是探索用户共享和比较的模块，这促使玩家一次又一次地炫耀自己的朋友，以取得更好的结果。同时开元ky888棋牌官方版，当用户在高峰期使用他们的时刻来推广它们时，形成热门话题和主题会更容易。最有效的方法是利用玩家的懒惰心态。

与传统游戏相比，H5互动游戏不仅具有快速传播的优势，而且具有快速设计和快速开发的特征。在在线媒体行业中，面对媒体信息的迅速爆发，H5 Interactive迷你游戏可以迅速适应媒体活动的时期并在一定程度上携带信息。通过探索用户的比较心理学，我们可以实现广泛传播的目的并通过信息，它是鼓励网民参与热情和氛围的强大工具。

【H5教程和经验收集】

腾讯学生选择的H5的热病例：

“看完系列赛之后，”他说。谈论今年最受欢迎的HTML 5案例

前端工程师实用的实用性！

“都是干货！移动HTML 5前端性能优化指南》

JD.com的H5页面设计经验！

“ 5 Mei Niang的传奇！分享H5移动页面设计的经验（带有案例分析）》

[YouShua.com的原始文章提交的电子邮件地址：2650232288@qq.com]

======================================

“ youshi.com uisdc.com”是中国最受欢迎的网络设计师学习平台，专注于共享网页设计，无线设计和PS教程。

【特别推荐】

设计师需要阅读的100本书：历史上最全面的设计师书籍导航：。