菜单优设网 - UISDC

会员

开通优设VIP星球

尊享12项VIP特权持续新增

主题直播

每年36场重磅嘉宾主题直播

独家优惠

星球会员可享书籍软硬件最低优惠

优设私房课

大咖出品易学易懂高品质小课

法务咨询

免费咨询版权/劳动相关法律问题

开通VIP

领取更多设计师实用特权

投稿

H5页面话题

教程 4.4w

腾讯实战案例！设计师如何从零开始做一款H5？

随着消费升级的步伐，商家总结出在带动消费能力上小孩>女人>宠物>男人的规律，爸爸们作为商家最不重视的一个角色，该如何在父亲节以爸爸为主角制作一款 H5 呢？一、项目背景手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。未来，在新用户增速放缓环境下，发挥亲密充功能沉淀的用户充值关系，将成为我们新的探索方向。

2018-08-11

程远

教程 2.7w

腾讯出品！你离高效制作动画只差这一篇文章的距离

看完本文，前端能快速开发一些 H5动画，设计师也能高效地制作出合自己心意的动画来让别人高保真还原，希望能给大家带来一点帮助。前言说起动画H5，作为一个前端，可谓是「又爱又恨」。爱的是加上动画动效后 H5会变得生动有趣，吸引力 Max；恨的是做动画时都是一边在脑海中 yy效果，一边用 css、js代码模拟出来，既低效又不直观，正所谓「产品一句话，设计一根线，重构一身汗」。

2018-07-09

程远

教程 1.7w

新人想要入场视频类H5 设计？你需要了解这些

网络成本的降低促使承担推广作用的 H5 越来越多的使用视频呈现的形式，但迈过初期朋友圈视频给用户带来巨大新鲜感的时代之后，想要继续通过视频类 H5 争夺用户注意力，变得越来越难。饶是如此，在过去半年中亦是涌现了《番茄炒蛋》《Julia系列》等视频的现象级刷屏，继而带来巨大的推广红利。该文将通过三个方面向你介绍新人如何入场做一个推广类 H5 视频：第一基本流程，视频类与其他普通 H5 的不同在哪里？

2018-04-02

程远

UI 2.0w

腾讯设计师：极速适配 iPhone X 的技巧揭秘！

有什么方法可以极速适配iPhone X ？今天这篇好文腾讯设计师以QQ空间H5的项目为例，给大家分享最快的适配方法！一. iPhone X适配方案2017年9月苹果发布了iPhone X机型，对于它的「刘海儿」和底部Home Indicator，QQ空间H5也在第一时间做了兼容适配。

2018-01-14

程远

教程 3.7w

H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案！

编者按：腾讯的设计师用王者荣耀的H5 页面案例，帮你学会给iPhone X 做适配。腾讯ISUX ：目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：一. 通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。

2017-11-08

程远

UI 4.5w

用这个方法，轻松提高H5动画的开发效率！

Janilychen：以往做一些H5的运营项目，都是动画设计师使用Animate cc（原来的Flash）先设计好动画原型，然后交给我们UI开发来实现。做过动画开发的童鞋都知道动画开发都是比较耗费时间精力的，而且还要高质量的还原动画设计师设计好的动画，来回沟通成本也非常高。那有没有一种高效的方法来改善这种流程，提高开发效率的同时还能完成高品质的动画呢？

2017-01-23

程远

网页 2.3w

刷爆网络的「薛之谦憋大招H5」，设计师是这么做出来的！

编者按：那个刷爆互联网的H5 从诞生后已经有上百篇分析，但今天这篇不同，是背后这群创作者针对H5的设计构思以及动画设计进行的细致分享，全部干货，一起来收膝盖。剥壳使&鱿鱼哥：不知大家有否见过这样一个H5：这则名为《薛之谦2个月没写段子，结果憋了个大招》H5在微信上发布3小时左右，PV已经突破120W……正如title所说，这是薛之谦憋的一记大招，也是品牌团队、公关传播和创意设计团队联合抱团憋的一记大招…

2017-01-13

程远

网页 1.5w

火遍QQ空间的「拾光」H5，是如何从零开始打造的？

2016年末，各路APP也纷纷展开一轮轮的数据厮杀，从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间，在这个既难忘又不舍的2016年，用户的故事将会被如何演绎，在寒冬带给用户怎样的温暖回忆呢？今年最值得观看的HTML 5案例：《人气超高的HTML5特效排行榜TOP 10（附经典案例）》《2016年惊艳朋友圈的十大H5，你被几个刷过屏？

2017-01-04

程远

教程 3.9w

2016年惊艳朋友圈的十大H5，你被几个刷过屏？

无酱：在这个日新月异的时代，想要立于不败之地，摆脱被淘汰的命运，只有迎头赶上，不断创新。在过去两年的时间内，H5经历了从全民兴起 – 爆发 – 沉淀到再爆发式增长的过程，以层出不穷的新面孔一次又一次展现了惊人的生命力。2016年即将呼啸而过，让我们抓住今年的尾巴来细数一下这一年那些扭转衰势给我们带来惊艳感受的十大H5，哪些曾经刷过你的屏呢？

2016-12-30

程远

教程 2.2w

让H5不止于自嗨！打造一款百万级传播HTML 5的技巧（附案例）

H5划页动画，相信大家已再熟悉不过。随着越来越多H5生成工具不断出现和各自功能提升优化，H5制作成本已越来越低，周期越来越短。就推广效果来说，虽然在付费转化率方面的成效一般，但在提升品牌曝光率和事件影响力方面，可以说是广告互联网视觉革命的先行军。

2016-10-25

程远

酷站推荐 2.1w

超实用！12个鲜为人知的HTML 5设计小技巧

编者按：慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文，简单小巧但实操性很强，作为设计师，也要尽量避开这些坑。1、交互上，慎用向右滑动的操作方式。如：刮刮乐涂抹效果，左右滑动翻页等。

2016-04-26

程远

教程 1.9w

偏执细节控！超赞的UC星座占卜H5是如何设计出来的？

编者按：用软件快速生成的H5和设计师精心打磨过的有什么区别？看今天这篇就知道了。仅仅是一个星座专题，背后的设计思考非常多，从视觉、代码实现、交互到知识背景，无一不体现设计师对细节的「偏执」，来给作者Caiqiang点个赞。

2016-01-04

程远

教程 3.3w

腾讯干货！由浅入深科普最常用的八种Html 5动效制作手法

田田：一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。

2015-12-08

程远

教程 2.2w

给跪了！揭秘爱消除+小王子粘土风格动画Html 5制作全过程

大家好，我是腾讯TGideas的动画师二娃，有幸参与这次联合《小王子》电影推出爱消除小王子游戏版本的世界观推广H5，同时我们还做了另一版，作为游戏内嵌世界观，分别在国庆长假后，在微信、手Q、以及公关传播等平台推广，数据反馈也很棒，下面给大家分享这个痛并充满爱的过程。一、前期创意1. 目的：天天爱消除与《小王子》电影合作，推出小王子游戏版本，需要一个预热推广H5。2. 创意主要参与人员：游戏营销、创意支持、视觉设计、多媒体设计等负责人。

2015-11-15

程远

教程 1.1w

最流行FPS！《全民突击》HTML5设计全程回顾及经验总结

小宝：腾讯游戏HTML 5实战案例！在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面，我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟，附设计流程图哟。

2015-10-23

程远

教程 2.8w

腾讯技术干货！如何做一个让人闻风丧胆的Html5页面

编者按：今天腾讯的何六六同学把最近做的一个超赞的H5总结笔记分享出来，将设计动效、具体实现方法、踩到的一些坑都完整梳理了一遍，全文高能干货，强烈建议学习哟！前言最近火热的有声娱乐平台 APP，企鹅 FM（编者注：此处绝非广告），在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢。

2015-09-28

程远

教程 1.7w

从未有过的体验！5个国际经典大牌的顶尖Html 5案例放送

编者按：在国内Html 5势头正猛的时候，国外同行也不甘示弱。今天精选的这5个Html 5案例，甲方都是不差钱的企业，宝马、阿迪达斯、宝洁等，作品质量无出其右，有没有差距，体验就知道。所有案例均可扫描文中二维码访问。

2015-09-02

程远

教程 2.8w

亲历者说！火爆的“吴亦凡入伍”Html5背后有哪些设计故事？

Lavali：早上一睁眼，朋友圈被吴亦凡入伍的H5刷屏，创意受到了广泛的关注，很多人开始找到我了解创作背景，有恭喜的，有质疑的，也有各种分析的。既然火到这个程度，我就借着热度还没有过去，说说团队创作这个H5创意的完整过程。创意永远是命题作文，项目初期团队了解到：吴亦凡签约全民突击将会是一个立体完整的Campaign，品牌团队希望TGideas在H5这个模块，通过出彩的创意引爆话题没有任何素材，吴亦凡只能在拍戏间歇给出1个小时的时间来录制一些内容因为这段时间吴亦凡在拍古装戏，他的头发没了…...

2015-08-28

程远

教程 2.3w

超赞！大众点评最有情怀的8个Html 5案例精选

编者按：今天@大明白儿继续为同学们分享Html 5的精选案例，风格多样，励志感动搞笑传奇无一不包，从文案到视觉都非常打动人心，值得每个人来好好体验下。本文为作者授权优设发布，未经作者本人授权请勿转载，谢谢：）作者微信公众号：H5广告资讯站，欢迎关注唷。这篇点评完成于7月初，当时一方面我的《广告也爱看！

2015-08-24

程远

教程 9.4w

超赞！人气超高的HTML5特效排行榜TOP 10（附经典案例）

现在市面上有一大批HTML5页面模板制作工具，虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是，很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界，想感受真正精妙的高级特效，这10个专业人士的作品不得不看咯。那HTML5里有哪些高级动效了？

2015-07-21

程远

教程 1.3w

腾讯案例三剑客！探究HTML5页面的不同表现手法

雅菲：最近半年一直在负责雷霆战机和天天酷跑的项目，以偏品牌建设和创意营销为主，在风格上尝试了手绘的表现形式，这次和大家分享下其中的设计经验。雷霆战机TVC HTML5 页面文艺、走心的手绘风格项目背景雷霆战机周年庆，项目组为雷霆进行了拍摄了一部品牌短片，围绕整个影片策划了一个HTML5页面对其进行传播。视频主要内容讲述几个小朋友从小心怀对星空的梦想，通过不断研究学习长大后当上了航天工作者完成了自己一直的梦想，来阐述如今繁华社会里仍有千千万万不断追随自己的内心的人。

2015-07-16

程远

教程 1.2w

腾讯技术总结！超实用的HTML 5接口全方位测试总结文（二）

编者按：下篇是腾讯鬼爪手同学的总结，语言幽默风趣，简明利落，上篇看完看下篇，干货连着看才爽。噢对了还是那句话，以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。目录：一、让音乐随心而动 – 音频处理 Web audio API二、捕捉用户摄像头 – 媒体流 Media Capture三、你是逗逼？

2015-07-04

程远

教程 1.9w

腾讯技术总结！超实用的HTML 5接口全方位测试总结文（一）

编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；四年前...

2015-07-04

程远

教程 2.1w

腾讯游戏实战！DNF浴火新生H5项目总结

编者按：H5正在风口浪尖，很多同学都想通过这个一枪打响，具体的玩法不简单，来看腾讯肥牛同学总结的整个过程，从前期策划到执行，色彩字体动画加载通通不能落下，有实例有反思有总结分析，非常到位的一篇H5实战文。一、项目简介围绕DNF5月21日浴火新生版本的发布，我们提出了一系列营销设计方案，而这次的H5移动专题属于其中一环。此次专题旨在DNF7周年之计，以玩家游戏数据为内容表现DNF7年陪伴玩家成长的概念，并配合黑钻奖励与版本信息，拉回流稳活跃。

2015-07-03

程远

教程 1.8w

腾讯精品文！六大奇招带你优化HTML5移动页面

承接上文《六大奇招带你玩转HTML5移动页面动效》，上次说的是让页面动起来的一些小技巧，而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏 >> >（1）动画雪碧图涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。特别地，如果单张雪碧图...

2015-04-30

程远

教程 1.8w

腾讯精品文！六大奇招带你玩转HTML5移动页面动效

四月份最有技术含量的干货！今天腾讯前端TQ同学来来谈谈一些动画设计的小技巧，能帮你在短时间没动画灵感时瞬间让页面增色，同时也会谈及移动端H5页面的优化细节与关键点 >>>作为一名前端，在拿到设计稿时你有两种选择：1.快速输出静态页面2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？

2015-04-29

程远

教程 3.7w

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

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

2015-04-24

程远

神器推荐 7.8w

不用编码！互动大师教你轻松制作酷炫的H5页面案例

前段时间某品牌手机的广告里，用逼真的打字效果”一步一步看清韩寒”。其实设计师，不用写编码，也可以做出一样的效果。详细步骤：第一步：登录网站登录VXPLO互动大师官网（www.vxplo.cn）。

2015-04-01

Roc 优设

教程 4.8w

看完转系列！聊聊年度最热门的那些Html 5案例

编者按：本文的亮点是结合了今年最热的H5案例，且附上微信号供扫描体验，@腾讯ISUX 将微信案例分门别类，通过它们深入浅出谈谈设计思路与方法 >>>从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行...

2015-03-22

程远

教程 4.1w

不得不看的流行趋势！品牌H5营销完全实战指南

那些百万PV的H5都是怎么做的？精心打造的H5要如何推广？H5技术将如何发展？

2015-03-19

程远

1/2

1
2
下一页
前往页

大家都在看

经验分享

文章 4884

网页设计

文章 930

ps技巧

文章 636

优秀网页设计

文章 582

UI

文章 141

产品设计

文章 398

设计师专访

文章 144

ui设计

文章 766

设计理论

文章 128

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

行业新闻

行业大事小事全知道

设计话题

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：uisdc123

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注