HTML5 - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

HTML5 话题

腾讯最新设计神器，可以一键智能生成H5！

教程

腾讯最新设计神器，可以一键智能生成H5！

Xcube 是基于 QQ空间营收类活动所搭建的 H5 活动页面智能生成系统，是针对框架相对固定，高频率的运营 H5 活动所设计。系统通过预设活动组件的组合来完成页面生成，系统内会有各种类型活动的相关组件，系统内会预设很多常用活动模板，这些模板以及组件和素材会有各种不同维度的标签（圣诞节，春节，热闹等），可以在系统直接输入关键词，即可有一套符合需求的页面生成，然后在此基础上编辑活动页面文案，素材包括配置，到最终的发布都能一次性解决，甚至包括最终各个场景位置的 banner 素材图都能通过预设的尺寸自动...

2018/07/27

工作复盘：从四大角色带你了解H5制作流程

教程

工作复盘：从四大角色带你了解H5制作流程

近几年，H5 快速普及，应用于节日和一些品牌活动营销场景。为什么大家会选择使用 H5 作为营销传播方式呢？在线互动，提高品牌曝光率，为在线平台或专题活动导流。

2018/07/18

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

教程

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

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

2018/04/02

H5玩法知多少？腾讯超多实战案例让你大开眼界！

教程

H5玩法知多少？腾讯超多实战案例让你大开眼界！

html5的发布让移动端web增添了很多新的能力，这些能力给我们带来了很多新的玩法，不知你知道了多少呢？下面我将结合案例罗列一些自H5发布以来出现的新玩法，给大家温故而知新。本文也适合大家在策划H5活动的时候作为参考，说不定在这儿就找到灵感了。

2017/08/18

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

UI

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

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

2017/01/23

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

网页

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

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

2017/01/13

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

网页

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

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

2017/01/04

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

教程

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

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

2016/12/30

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

教程

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

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

2016/10/25

设计师揭秘！超火的故宫HTML 5背后的设计故事

教程

设计师揭秘！超火的故宫HTML 5背后的设计故事

猴哥：未来什么样的内容才可以脱颖而出？如何结合更多方式打破用户的固定思维，超出用户预期？今天腾讯游戏的设计师现身说法，以最近超火的故宫H5作为实战案例，和同学们分享背后的设计思考。

2016/07/20

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

酷站推荐

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

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

2016/04/26

腾讯实战案例！聊聊刷一刷红包预热HTML 5背后的设计过程

教程

腾讯实战案例！聊聊刷一刷红包预热HTML 5背后的设计过程

编者按：一个UV高达9700万的HTML 5页面是怎么设计出来的？这篇实战案例让你全方位感受腾讯设计师的流弊！作为元旦和除夕2亿现金红包预热HTML 5的设计师，今天里奥同学把设计过程中的思考和经验都总结分享出来，来学习！

2016/03/21

案例实战！揭秘腾讯火影游戏Html 5背后的设计故事

教程

案例实战！揭秘腾讯火影游戏Html 5背后的设计故事

转眼负责火影手游的创意设计工作一年多了，在这段时间里从《鸣人雏田婚礼》到《重返木叶村》沙盘项目，我们为火影手游尝试了很多风格的H 5和互动站，春节期间我们又尝试了一次剪纸风格的H5，来看这次实战回顾！项目背景：在春节来临之际，我们获悉《火影忍者剧场版-博人传》2.18将在中国上映，这部电影主要讲的是鸣人和他儿子博人间的父子故事。作为火影手游市场设计团队，我们觉得我们可以为《博人传》，为火影手游项目，为火影迷做点什么，给火影迷来点惊喜！

2016/03/01

建站福利！提供超多HTML5+CSS3响应式网页模版免费下载的酷站

酷站推荐

建站福利！提供超多HTML5+CSS3响应式网页模版免费下载的酷站

今天介绍的HTML5 UP! 提供大量的HTML5 模版，而且这些模版都支持响应式网页设计，有了它我们就不用从无到有、从头到尾来打造一个网站，而是直接就现有的样版去做修改或调整，让建网站难度降低许多，也减少花费的时间和开支。来收！因为自适应网页设计在开发上较为繁琐，一般很少免费提供下载的网站，但 HTML5 UP! 收录一系列共 28 种网页设计，通通都是 HTML5+CSS3 并有响应式设计功能，网站采用的授权方式为 Creative Commons 姓名标示 3.0，也就是说你可以自由分享、修改...

2016/02/23

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

教程

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

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

2016/01/04

QQ空间实战！聊聊打造HTML 5动感影集的爱恨情仇（动画性能篇）

教程

QQ空间实战！聊聊打造HTML 5动感影集的爱恨情仇（动画性能篇）

TQ：动感影集是QQ空间新功能，可以将静态的图片轻松转变为动态的视频集，且载体是HTML5（简称H5）页面，意味着可以随时分享到空间或朋友圈给好友欣赏。移动端区别于PC年代的相册视频，由于设备性能限制，每一个动画细节都需要认真优化，今天就来说说动感影集开发过程中的动画性能检测与优化的问题。一、先利其器 —— Chrome Timeline&Rendering性能分析前，我们先看看工具。

2015/12/10

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

教程

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

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

2015/12/08

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

教程

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

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

2015/11/15

Html5时代，平面设计师该从哪些方面进行自我提升？（附案例）

职场

Html5时代，平面设计师该从哪些方面进行自我提升？（附案例）

编者按：Html 5这么吃香，平面设计师该做点什么？今天Epub360的推荐讲师Never从设计内容、表现技巧和观念三个方面，聊聊平面设计师该如何在这次浪潮中成功站稳脚跟，文中附上大量实战案例，不谈空话干货满满。想成为Html 5风口上的一只猪？

2015/10/26

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

教程

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

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

2015/10/23

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

教程

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

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

2015/09/28

html5网站设计

潮流标配！20个九月最新的HTML5/CSS3优秀网站

酷站推荐

潮流标配！20个九月最新的HTML5/CSS3优秀网站

编者按：今天来一组酷炫的HTML5 – CSS3 优秀网站，无论是网站主题（反战、捍卫人权、肯德基老爷爷的美好晚年等）还是动效视觉，都非常值得体验。周末休息下，来点轻松的吧The Generations Relay2014年是华沙起义70周年，华沙博物馆邀请了在那场战斗有代表性的12个组织参加这个“薪火相传”的活动，组织里的年轻人庄严宣誓，他们将承担起建造一个自由、爱、诚实、谦虚、友善、保护弱者、有责任感的世界这个任务。Nike – Geç Kendini耐克2015年夏季的女装的互动体验网站，支持...

2015/09/19

教程

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

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

2015/09/02

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

教程

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

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

2015/08/28

html5网站设计

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

教程

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

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

2015/08/24

广告也爱看！细数腾讯出品的10个最佳Html 5广告

教程

广告也爱看！细数腾讯出品的10个最佳Html 5广告

@大明白儿：在Html5广告大行其道的今天，作为互联网行业巨头之一的腾讯，在这段时间里，产出了大量创意与视觉都极其优秀的作品，领域横跨游戏、节日活动甚至新闻报道。今天我们挑选了10个堪称教材级的案例，特舒服的互动体验和新颖的表现形式，绝对不枉你进来一趟。本文为作者授权优设发布，未经作者本人授权请勿转载，谢谢：）作者微信公众号：H5广告资讯站，欢迎关注唷。

2015/07/22

html5手机网站

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

教程

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

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

2015/07/21

html5手机网站

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

教程

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

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

2015/07/16

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

教程

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

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

2015/07/04

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

教程

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

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

2015/07/04

1/3

1
2
3
下一页
前往页

大家都在看

设计史

文章 152

ps技巧

文章 643

优秀网页设计

文章 586

设计圈干货

文章 188

设计流程

文章 155

设计细节

文章 135

PS教程

文章 789

职场规划

文章 429

UI设计

文章 962

热门频道

设计专题

热门设计知识精挑细选

细节猎人

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

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

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

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

微信号：扫码添加

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

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

每天官微五分钟

一年萌新变大神

扫码关注

1000W

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

优优教程网

优设大课堂

设计师导航

优设训练营