菜单
优设网uisdc.com
优设网 - 学设计上优设
首页
设计文章
热门频道
网址导航
培训课程
教程与灵感
设计素材
关于我们
联系我们
文章投稿
意见反馈
广告商务
会员
开通优设VIP星球
尊享13项VIP特权
持续新增
主题打卡挑战
21天带练！告别无效练习
接私单赚外块
VIP优先接，累计金额超百万
优设私房课免费学
价值178元热销课程
你的私人律师
每月可免费咨询30次
开通VIP
领取更多设计师实用特权
投稿
搜索
您还未登录
登录后即可体验更多功能
立即登录
文章收藏
资源下载
提问答疑
我要投稿
H5页面 话题
首页
设计文章
H5页面
产品需求
收录22篇文章
怎样写文案
收录25篇文章
热门下载
收录22篇文章
UI组件
收录22篇文章
笔刷
收录23篇文章
1 / 2
到第
Go
页
教程
腾讯实战案例！设计师如何从零开始做一款H5？
随着消费升级的步伐，商家总结出在带动消费能力上小孩>女人>宠物>男人的规律，爸爸们作为商家最不重视的一个角色，该如何在父亲节以爸爸为主角制作一款 H5 呢？一、项目背景手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。未来，在新用户增速放缓环境下，发挥亲密充功能沉淀的用户充值关系，将成为我们新的探索方向。
2018/08/11
H5
教程
腾讯出品！你离高效制作动画只差这一篇文章的距离
看完本文，前端能快速开发一些 H5动画，设计师也能高效地制作出合自己心意的动画来让别人高保真还原，希望能给大家带来一点帮助。前言说起动画H5，作为一个前端，可谓是「又爱又恨」。爱的是加上动画动效后 H5会变得生动有趣，吸引力 Max；恨的是做动画时都是一边在脑海中 yy效果，一边用 css、js代码模拟出来，既低效又不直观，正所谓「产品一句话，设计一根线，重构一身汗」。
2018/07/09
Animate
教程
新人想要入场视频类H5 设计？你需要了解这些
网络成本的降低促使承担推广作用的 H5 越来越多的使用视频呈现的形式，但迈过初期朋友圈视频给用户带来巨大新鲜感的时代之后，想要继续通过视频类 H5 争夺用户注意力，变得越来越难。饶是如此，在过去半年中亦是涌现了《番茄炒蛋》《Julia系列》等视频的现象级刷屏，继而带来巨大的推广红利。该文将通过三个方面向你介绍新人如何入场做一个推广类 H5 视频：第一基本流程，视频类与其他普通 H5 的不同在哪里？
2018/04/02
H5
UI
腾讯设计师：极速适配 iPhone X 的技巧揭秘！
有什么方法可以极速适配iPhone X ？今天这篇好文腾讯设计师以QQ空间H5的项目为例，给大家分享最快的适配方法！一. iPhone X适配方案2017年9月苹果发布了iPhone X机型，对于它的「刘海儿」和底部Home Indicator，QQ空间H5也在第一时间做了兼容适配。
2018/01/14
H5页面
教程
H5页面如何适配iPhone X ？腾讯设计师给出了通用解决方案！
编者按：腾讯的设计师用王者荣耀的H5 页面案例，帮你学会给iPhone X 做适配。腾讯ISUX ：目前的 H5 页面可以分为通栏页面和非通栏页面两种，每种页面都可能有底部操作栏，具体如下：一. 通栏页面顶部通栏某些业务的一级页面多数使用了顶部通栏 banner 的效果，由于 iPhone X 在状态栏增加了24px的高度，对于现在通栏 banner 规范的内容区域会有遮挡情况。解决方案：对于通栏页面在页面顶部增加一层高度44px的黑色适配层，整个页面往下挪44px。
2017/11/08
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
H5
网页
火遍QQ空间的「拾光」H5，是如何从零开始打造的？
2016年末，各路APP也纷纷展开一轮轮的数据厮杀，从不同的视角阐述过去一年的精彩故事。而坐拥庞大用户数据的QQ空间，在这个既难忘又不舍的2016年，用户的故事将会被如何演绎，在寒冬带给用户怎样的温暖回忆呢？今年最值得观看的HTML 5案例：《人气超高的HTML5特效排行榜TOP 10（附经典案例）》《2016年惊艳朋友圈的十大H5，你被几个刷过屏？
2017/01/04
H5
教程
2016年惊艳朋友圈的十大H5，你被几个刷过屏？
无酱：在这个日新月异的时代，想要立于不败之地，摆脱被淘汰的命运，只有迎头赶上，不断创新。在过去两年的时间内，H5经历了从全民兴起 – 爆发 – 沉淀到再爆发式增长的过程，以层出不穷的新面孔一次又一次展现了惊人的生命力。2016年即将呼啸而过，让我们抓住今年的尾巴来细数一下这一年那些扭转衰势给我们带来惊艳感受的十大H5，哪些曾经刷过你的屏呢？
2016/12/30
H5
教程
让H5不止于自嗨！打造一款百万级传播HTML 5的技巧（附案例）
H5划页动画，相信大家已再熟悉不过。随着越来越多H5生成工具不断出现和各自功能提升优化，H5制作成本已越来越低，周期越来越短。就推广效果来说，虽然在付费转化率方面的成效一般，但在提升品牌曝光率和事件影响力方面，可以说是广告互联网视觉革命的先行军。
2016/10/25
H5
酷站推荐
超实用！12个鲜为人知的HTML 5设计小技巧
编者按：慎用向右滑动操作、慎用横屏展示效果、按钮原理页面底部、使用SVG格式做矢量图…… 以上提到的技巧全都出自今天这篇好文，简单小巧但实操性很强，作为设计师，也要尽量避开这些坑。1、交互上，慎用向右滑动的操作方式。如：刮刮乐涂抹效果，左右滑动翻页等。
2016/04/26
H5
教程
偏执细节控！超赞的UC星座占卜H5是如何设计出来的？
编者按：用软件快速生成的H5和设计师精心打磨过的有什么区别？看今天这篇就知道了。仅仅是一个星座专题，背后的设计思考非常多，从视觉、代码实现、交互到知识背景，无一不体现设计师对细节的「偏执」，来给作者Caiqiang点个赞。
2016/01/04
H5
教程
腾讯干货！由浅入深科普最常用的八种Html 5动效制作手法
田田：一套操作界面，合适的动态交互反馈能给用户带来更好的操作体验；一个H5运营宣传页，炫酷的动画特效定能助力传播和品牌打造。近两年，小到loading动画，表单动效，大到各式各样H5运营页的炫酷展现，“动效设计”一词可谓是火遍大江南北，而动效设计早已成为一名合格设计师必需有所知晓的领域。本文将通过一些案例，和大家一同挖掘几种常见的H5动效制作手法。
2015/12/08
H5
教程
给跪了！揭秘爱消除+小王子粘土风格动画Html 5制作全过程
大家好，我是腾讯TGideas的动画师二娃，有幸参与这次联合《小王子》电影推出爱消除小王子游戏版本的世界观推广H5，同时我们还做了另一版，作为游戏内嵌世界观，分别在国庆长假后，在微信、手Q、以及公关传播等平台推广，数据反馈也很棒，下面给大家分享这个痛并充满爱的过程。一、前期创意1. 目的：天天爱消除与《小王子》电影合作，推出小王子游戏版本，需要一个预热推广H5。2. 创意主要参与人员：游戏营销、创意支持、视觉设计、多媒体设计等负责人。
2015/11/15
App设计
教程
最流行FPS！《全民突击》HTML5设计全程回顾及经验总结
小宝：腾讯游戏HTML 5实战案例！在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面，我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟，附设计流程图哟。
2015/10/23
H5
教程
腾讯技术干货！如何做一个让人闻风丧胆的Html5页面
编者按：今天腾讯的何六六同学把最近做的一个超赞的H5总结笔记分享出来，将设计动效、具体实现方法、踩到的一些坑都完整梳理了一遍，全文高能干货，强烈建议学习哟！前言最近火热的有声娱乐平台 APP，企鹅 FM（编者注：此处绝非广告），在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢。
2015/09/28
H5
教程
从未有过的体验！5个国际经典大牌的顶尖Html 5案例放送
编者按：在国内Html 5势头正猛的时候，国外同行也不甘示弱。今天精选的这5个Html 5案例，甲方都是不差钱的企业，宝马、阿迪达斯、宝洁等，作品质量无出其右，有没有差距，体验就知道。所有案例均可扫描文中二维码访问。
2015/09/02
H5
教程
亲历者说！火爆的“吴亦凡入伍”Html5背后有哪些设计故事？
Lavali：早上一睁眼，朋友圈被吴亦凡入伍的H5刷屏，创意受到了广泛的关注，很多人开始找到我了解创作背景，有恭喜的，有质疑的，也有各种分析的。既然火到这个程度，我就借着热度还没有过去，说说团队创作这个H5创意的完整过程。创意永远是命题作文，项目初期团队了解到：吴亦凡签约全民突击将会是一个立体完整的Campaign，品牌团队希望TGideas在H5这个模块，通过出彩的创意引爆话题没有任何素材，吴亦凡只能在拍戏间歇给出1个小时的时间来录制一些内容因为这段时间吴亦凡在拍古装戏，他的头发没了…...
2015/08/28
H5
教程
超赞！大众点评最有情怀的8个Html 5案例精选
编者按：今天@大明白儿 继续为同学们分享Html 5的精选案例，风格多样，励志感动搞笑传奇无一不包，从文案到视觉都非常打动人心，值得每个人来好好体验下。本文为作者授权优设发布，未经作者本人授权请勿转载，谢谢 ：）作者微信公众号：H5广告资讯站，欢迎关注唷。这篇点评完成于7月初，当时一方面我的《广告也爱看！
2015/08/24
H5
教程
超赞！人气超高的HTML5特效排行榜TOP 10（附经典案例）
现在市面上有一大批HTML5页面模板制作工具，虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是，很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界，想感受真正精妙的高级特效，这10个专业人士的作品不得不看咯。那HTML5里有哪些高级动效了？
2015/07/21
H5
教程
腾讯案例三剑客！探究HTML5页面的不同表现手法
雅菲：最近半年一直在负责雷霆战机和天天酷跑的项目，以偏品牌建设和创意营销为主，在风格上尝试了手绘的表现形式，这次和大家分享下其中的设计经验。雷霆战机TVC HTML5 页面文艺、走心的手绘风格项目背景雷霆战机周年庆，项目组为雷霆进行了拍摄了一部品牌短片，围绕整个影片策划了一个HTML5页面对其进行传播。视频主要内容讲述几个小朋友从小心怀对星空的梦想，通过不断研究学习长大后当上了航天工作者完成了自己一直的梦想，来阐述如今繁华社会里仍有千千万万不断追随自己的内心的人。
2015/07/16
H5
教程
腾讯技术总结！超实用的HTML 5接口全方位测试总结文（二）
编者按：下篇是腾讯鬼爪手同学的总结，语言幽默风趣，简明利落，上篇看完看下篇，干货连着看才爽。噢对了还是那句话，以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。目录：一、让音乐随心而动 – 音频处理 Web audio API二、捕捉用户摄像头 – 媒体流 Media Capture三、你是逗逼？
2015/07/04
API
教程
腾讯技术总结！超实用的HTML 5接口全方位测试总结文（一）
编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；四年前...
2015/07/04
API
教程
腾讯游戏实战！DNF浴火新生H5项目总结
编者按：H5正在风口浪尖，很多同学都想通过这个一枪打响，具体的玩法不简单，来看腾讯肥牛同学总结的整个过程，从前期策划到执行，色彩字体动画加载通通不能落下，有实例有反思有总结分析，非常到位的一篇H5实战文。一、项目简介围绕DNF5月21日浴火新生版本的发布，我们提出了一系列营销设计方案，而这次的H5移动专题属于其中一环。此次专题旨在DNF7周年之计，以玩家游戏数据为内容表现DNF7年陪伴玩家成长的概念，并配合黑钻奖励与版本信息，拉回流稳活跃。
2015/07/03
H5
教程
腾讯精品文！六大奇招带你优化HTML5移动页面
承接上文《六大奇招带你玩转HTML5移动页面动效》，上次说的是让页面动起来的一些小技巧，而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏 >> >（1） 动画雪碧图涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）！网上的工具有一些可以帮助你生成雪碧图的工具，例如CssGaga，GoPng等等，自动化构建工具Grunt和Gulp也提供了相应插件。特别地，如果单张雪碧图...
2015/04/30
H5
教程
腾讯精品文！六大奇招带你玩转HTML5移动页面动效
四月份最有技术含量的干货！今天腾讯前端TQ同学来来谈谈一些动画设计的小技巧，能帮你在短时间没动画灵感时瞬间让页面增色，同时也会谈及移动端H5页面的优化细节与关键点 >>>作为一名前端，在拿到设计稿时你有两种选择：1.快速输出静态页面2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？
2015/04/29
H5页面
教程
春雨先知！腾讯移动端H5页面设计实战分享
编者按：十年精华输出，从用户研究、创意剖析、绘制方法、项目管理等实体案例出发，《腾讯网UED体验设计之旅》将带你经历一场体验设计之旅。本文节选自该书，重点介绍了基于HTML5技术的移动Web页面的设计原则与设计过程 >>>《腾讯网UED体验设计之旅》一书集合了腾讯网UED团队在用户体验领域的十年探索经验，展示了大量精彩案例的设计技巧和过程。下面为该书的节选内容。
2015/04/24
H5
神器推荐
不用编码！互动大师教你轻松制作酷炫的H5页面案例
前段时间某品牌手机的广告里，用逼真的打字效果”一步一步看清韩寒”。其实设计师，不用写编码，也可以做出一样的效果。详细步骤：第一步：登录网站登录VXPLO互动大师官网（www.vxplo.cn）。
2015/04/01
H5页面
教程
看完转系列！聊聊年度最热门的那些Html 5案例
编者按：本文的亮点是结合了今年最热的H5案例，且附上微信号供扫描体验，@腾讯ISUX 将微信案例分门别类，通过它们深入浅出谈谈设计思路与方法 >>>从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行...
2015/03/22
H5页面
教程
不得不看的流行趋势！品牌H5营销完全实战指南
那些百万PV的H5都是怎么做的？精心打造的H5要如何推广？H5技术将如何发展？
2015/03/19
H5页面
1/2
1
2
下一页
前往
Go
页
大家都在看
干货
文章 154
立即查看
产品设计
文章 505
立即查看
设计师职场
文章 779
立即查看
设计趋势
文章 219
立即查看
logo设计
文章 188
立即查看
设计史
文章 143
立即查看
设计流程
文章 152
立即查看
界面设计
文章 158
立即查看
职场经验
文章 205
立即查看
优设读报
2022年09月28日 星期三
01
雪铁龙全新车标亮相，该标识将在 2023 年逐步推广并装车
02
B 站登陆索尼 PS4/PS5 游戏主机平台：游玩时查看游戏相关内容
03
网易云音乐首款音乐社交 App MUS 正式开放注册
04
腾讯联合埃森哲发布《全真互联白皮书》
05
微信推出新版本，退出群聊后可保留聊天记录
查看全部
LOGO设计
收藏这个专题，不想学会都难！
查看专题
专题
已有226.3w位观众
已收录
23
篇持续更新
揭秘LOGO设计流程！超详细的腾讯云LOGO 改版记录全过程
103010 人阅读
收藏收藏！超过10万个企业品牌LOGO矢量图免费下载！
80719 人阅读
细节
「小红书」谢谢你的点赞，我也喜欢你
与多数产品的「点赞」交互特效不同，「小红书」的点赞反馈结合了小动画与文案提醒。对着产品图片双击即完成点赞操作，交互上会给用户一个大大的爱心动画进行反馈。但如果取消点赞后又再次点赞该图片，就会变成文案提示进行反馈。
2019/03/21
AmberDu小白
互动
设计问答
全部问答
小番茄 邀请你来回答
面试的时候问HR哪些问题可以判断公司的好坏？
3.4k位设计师围观了该问题
我来回答
zZ喜欢睡觉Zz 邀请你来回答
今年的苹果新品发布会，产品最吸引你的地方是？
3.1k位设计师围观了该问题
我来回答
优设琅琊榜
查看全部
10.9w
1/9
大神的大神！Dribbble顶尖设计师Mike
Mike
Creative Mints
设计神器
全部神器
一秒钟位图转矢量！超级好用的转矢量软件Vectorizer
神器推荐
双12 种草清单！大幅度提高工作效率的软件都在这了！
神器推荐
免费转换！批量将 WebP 转成 JPG、PNG 格式的神器「AnyWebP」
神器推荐
这是一篇干货含量 x2 的「壹周速读」
神器推荐
课程
爆款课程！零基础C4D实战就业班
涨薪指数
技能点 · C4D
涨薪必备
名师亲授
课程
如何快速创作火爆全网的手绘作品？
涨薪指数
技能点 · 手绘插画
私单涨薪
必备技能
课程
插画学到什么程度，才够接私单赚钱？
涨薪指数
技能点 · 手绘插画
接单涨薪
快速入门
课程
为什么阿里和OPPO超爱这类插画风格？
涨薪指数
技能点 · 手绘插画
高效实战
百万人气
求职招聘
发布职位
网站内容运营
武汉
大专及以上
经验不限
4k-6k
高级UI设计师
北京
本科及以上
3年以上
25k-50k
资深平面设计师
武汉
学历不限
3-5年
8k-12k
查看全部
行业新闻
发布行业新闻
如影两款智能硬件产品斩获美国 IDEA 设计奖，设计力再获世界认可
品牌资讯
十万奖金，一日CEO体验！「NAO虚拟面料创新设计挑战赛」正式开启
活动赛事
斩获6项国际设计奖，百度大字版APP是如何做到的？
行业新闻
查看全部
热门频道
设计专题
热门设计知识精挑细选
查看专题
细节猎人
1分钟小短文揣摩设计真谛
查看猎人
优设读报
行业资讯一站知晓
查看读报
优设琅琊榜
顶尖设计作品聚集地
查看榜单
行业新闻
行业大事小事全知道
查看新闻
设计问答
高手大咖在线答疑解惑
查看话题
