作为一个UI工程师，在这个移动互联网叱咤风云的时代，每次看到timeline中被分享的各种花样H5页面，总是心痒难耐，也想做有着酷炫动画和带感声效的H5呢。刚好企鹅FM为了迎接中元节，要做一期相关的活动页面，关键是宣传的内容用的还是盗墓笔记，盗墓笔记和盗墓笔记啊。作为一个盗（ge）墓（sao）脑残粉，非常高兴能参与制作，还是职业生涯中第一个有着酷炫动画以及动人声效的H5呢。
作者：major，微信高级设计师 2014至2015年，H5发展得如火如荼，各类手机端小游戏、运营、广告，纷纷采用H5的形式来进行产品和品牌传播。在这里聊一下对H5运营类页面设计的观察和思考，抛砖引玉。 一. 简介 H5运营类页面设计，是指用来承载运营活动、品牌活动或信息传递的移动端页面设计；具有展示空间小、时间碎且短、操作可互动的特点；直接目的是引起用户病毒式分享，从而提升活跃度和品牌形象。常见类型如下： 展示型：多用于图文展示，通常采用上下滑动或者左右滑动来进行多页切换，每页集中一个内容点
现在不管是微信 微博还是抖音亦或者那个平台，我们经常都能看到宣传海报、现场抽奖等等以精美图卡为依托的活动，真的是大型心动现场！
在互联网产品的研发流程中，页面的视觉还原是很重要的一个步骤，也往往是问题最多的一个环节。如果一些细节问题在这个环节没有被有效地发现并解决，那么后续流程中再去解决这些问题的成本就会呈指数上升。
平平无奇学习水贴，闲逛B站偶然发现的H5编辑器DooringX, 可以制作H5页面,并支持强大的动画设计, 并且可以使用这款框架轻松定制自己的可视化编辑器。托拉拽式页面设计，支持多样组件嵌入，可创建模板进行在线预览，但目前一些功能还没有完全开放，可用性还不太明确。
NOW直播年度盛典，是齐聚主播、公会及粉丝于一堂的表演盛会。作为体量大、时间跨度长且节奏快的大型运营活动，策划具有感染力和记忆点的视觉包装，是吸引用户的第一要素。在此设计师倾向用故事化的思维去策划整体运营，用有代入感的故事包装和引人入胜的情节画面作为情绪触点，加深用户的品牌印象，并为其带来沉浸式的视觉体验。 在进行故事化的视觉包装时，我们通常以品牌特征为出发点，结合相应用户群体的身份映射与特殊的时代背景，去设定整体的主题、故事情节与视觉调性。通过规范化的视觉包装灵活延展到线上、线下的各类应用场景，最终打
从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014下半年起，各种H5游戏和专题页纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。本文聚焦于基于微信传播的H5页面的视觉设计，通过一些案例分析来谈谈设计思路与方法，希望与大家进行交流探讨。 功能与目标 首先从功能与设计目标来看， H5专题页主要有以下4大类型： 1.活动运营型 为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、
在上月底，一则有关HTML5游戏的的消息震惊业界，蝴蝶互动宣布旗下的《传奇世界》月流水破1500万，成为业内首款千万级别爆款游戏，这无疑给H5游戏行业注入了一针强心剂。从H5诞生以来，对于H5游戏一直唱衰不断，而这又一次把H5游戏推向风口浪尖。 区别于寻常的Flash页游，此游戏采用了H5的Canvas技术，能在PC端和移动端跨平台运行。一直以来，游戏开发都是把前沿技术运用到极致的媒介，H5游戏也不例外，这篇文章会从带你从浅入手，深入H5游戏开发的世界。 1、准备条件 1.1、设计师应该注意的地方 移动端最
3年前我开发了一款零代码搭建平台 H5-Dooring, 主要目的是想用更低的成本, 更快的效率, 上线 web 页面(其实是不想写重复的代码了,写麻了). 好在陆陆续续折腾了3年, 目前已经可以满足基本的页面设计和搭建能力, 并能快速上线页面.
12年的时光里，QQ空间记录了你我TA之间最真实、最有温度的瞬间。还记得当年的火星文和非主流照片、初中高中到大学的空间相册吗？它不仅承载着数亿用户的美好过往，还是每一代年轻人心中的乌托邦。“总有故事，不负时光”，此次活动主题正是来源于此。我们重新定义空间的品牌形象，通过更青春、活力、趣味化的设计语言，结合空间产品功能玩法，完成一系列的运营设计内容，刷新用户对空间的固有印象，给用户带来不一样的趣味体验。 一. 12周年品牌设定 整体品牌创意 我们希望通过一致性的品牌设计语言，将项目所囊括的内容统
作者：谭照强，热爱折腾前端，喜欢新奇创意的程序员，业余喜欢玩摄影，弄咖啡。 作为一名前端，在拿到设计稿时你有两种选择： 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。 同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。 （1） CSS3时序错开渐显动画 这是一种比较常用的动画，它的优点是节奏
作为一名前端，在拿到设计稿时你有两种选择： 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端，当然是选2啦！可是需求时间又很短很短，怎么办呢？ 这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。 同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。 ====前方高能==== （1） CSS3时序错开渐显动画 这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后
来源：低代码一哥本文约2500字，建议阅读9分钟本文分享几个值得学习和使用的前端低代码开源项目，更深入地了解什么是低代码。 近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了钉钉低代码，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。 低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。下面就来分享几个值得学习和使用的前端低代码
第一步：从UI设计师拿到设计稿（psd） 640*1136 第二部：在样式中给HTML一个fontSize值，我们一般都给一个比较好算的值，比如：10px 100px... 在这里我们之所有用100px,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差
这位设计小兄弟，说好只加 3 个页面，最后硬是加了 6 个页面，打工人何必为难打工人。
作为前端工程师，页面布局是基本功。面对悟空中台的海量的活动需求，仅仅有几招常规的布局套路显然是难以招架的，悟空开发者团队从个性化需求中提炼特定场景下的共性特点，设计了多个“创意布局”方案。
前言 最近火热的有声娱乐平台 APP，企鹅 FM，在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种花样 H5 页面，总是心痒难耐，也想做有着酷炫动画和带感声效的 H5 呢。回想到做鬼节活动页的时候，接近午夜零点还在调整页面效果，看着页面上渐隐渐现的可怕画面，活生生吓到了自己，也是蛮难忘的。作为刚刚来到活动页新手村的朋友，踩到了一些坑，所以让我进入正题吧。哦，等一下，请先扫一下二维码啦~ 与设计师的沟通
正如开篇所说，分析师应该协同产研一起进入埋点工作中。由于大部分公司的埋点系统或平台都不太一致，这里也仅以笔者的经验进行简单分享。首先，埋点的整体流程大同小异，产品过稿-->埋点设计-->埋点开发-->埋点测试与验收-->上线后统计需求。
前言 任何技术优化都依托于业务的发展，随着QQ会员增值业务的重心转移到手Q移动端，对H5页面不仅要求加载更快，还需承载丰富多彩的运营活动，同时由于每个页面都意味着KPI收入，任何可能导致页面功能不可用的发布行为都是不可接受的。 本文为SDCC 2016（杭州站）的分享实录，介绍QQ会员的前端开发团队在手Q的hybrid模式下对H5页面的性能优化、组件化和持续集成方面的实践。 分享实录： 首先简单介绍一下自己，作为一名80后老腊肉，呆过若干创业团队；2012年加入腾讯超级QQ团队，负责前端开发工作；2013年
最近，有个需求需要开发H5应用和微信小程序。如果针对不同的平台开发自己的一套代码，那将是一件很糟糕的事情：如果下次需要兼容支付宝小程序、快应用，那工作量随着平台的添加而快速增加。所以我们选择了uni-app开发。
前言 最近火热的有声娱乐平台 APP，企鹅 FM，在8月28日鬼节前夕，联合《盗墓笔记》推出了“勇敢者的游戏”活动。作为一个 UI 工程师，在这个移动互联网叱咤风云的时代，每次看到朋友圈中被分享的各种
摘要 如何成为一名优秀的切图工程师？百度资深研发工程师潘征与大家分享自己的工作心得。 ROLE移动端酷炫运营页 2014年开始，我在我们部门负责移动端酷炫运营页面，也就是俗称的H5的研发工作。 这些酷
不知道大家在学习 H5 的时候，有没有疑惑过，对于 align 和 valign 两种对齐方式在不同的情境下往往会有不同的取值，所表示的意思也都不尽一样。下面我就简单做一个小结，将我在学习 H5 过程中曾经疑惑过的几条做一个总结。
声明viewport视口 viewport对于移动端设备来说非常的重要，用于定义视口的各种行为。其中最为重要的就是要设定一个展示页面的宽度width=device-width，如果我们不设置的话，width默认的值是980PX，假设我们当前用的是IPHONE 5来访问H5页面，IPHONE 5本身的宽度只有320PX，但是设备定义了H5页面展示的区域宽度应该是980PX，这样的话要想把H5页面全部进行展示，只有整体缩小大约三倍或者让用户在320PX的区域中来回的挪动才能看全整个H5页面。这种方式用户的体验度会非常的差，所以我们设定width=device-width，意思是当前设备屏幕有多宽，那么就按照多宽来渲染页面，这样就不会出现需要靠缩小或者左右移动来看完整个页面了。
毋庸置疑，善用工具可以加速开发，拉满开发效率，减少996的频率，提高我们的生活质量。
搭建一套完全本地化部署的流媒体直播点播系统，引入本地演播室，录播，报告厅、会议，电视节目等实时信号，实现本地网络的手机、PC、机顶盒等智能终端进行观看。系统集成直播，点播，录制，转码，用户管理等功能，采用B/S架构，多协议适配，保证本地化部署安全同时完成流媒体大数据并发。
刚好是周末，无意之间在收集相关资料的时候，发现有部分童鞋在问《如何判断一个APP页面是不是H5页面》或者是《如何判断app中原生页面和h5页面》等等类似的问题。
上周有热心的小伙伴向Magiccc反馈，点击“阅读原文”发现极验移动官网底部有不可描述的浮窗广告，点击后跳出一篇小黄文。
移动商城是电商平台的重要组成部分，它面向终端用户，为用户提供商品浏览、选购、订单查询和个人信息管理等服务。
flexible方案是手淘经过多年的摸索和实战，总结出的一套移动端适配方案，这里我推荐一篇w3c大漠老师的一篇文章使用Flexible实现手淘H5页面的终端适配，里面详细的讲解了该方案的使用和原理。
《腾讯网UED体验设计之旅》是腾讯网UED十年精华输出的干货型读物，从用户研究、创意剖析、绘制方法、项目管理等实体案例出发，解读了网媒用户分析与研究方法、门户网站未来体验设计、H5技术在移动端打开的触控世界、手绘原创设计、改版迭代方法、文字及信息图形化设计、媒体产品的交互设计、大项目设计管理方法等部分内容。
2个月前开源的H5编辑器 H5-Dooring 目前已经成功迭代到1.0版本, 从最开始的基本的页面生成框架到现在的支持更丰富的组件资源,交互能力和数据追踪能力, 期间做了很多的设计和迭代,也收获了很多网友的反馈和启发, 也有很多志同道合的朋友加入进来一起让 H5-Dooring 变的更好更强大, 在此特意分享一下我们最新的版本和功能实现.
1.CodeFun是什么 CodeFun是一款UI 设计稿智能生成源代码的工具,支持微信小程序端、移动端H5和混合APP,上传 Sketch、PSD等形式的设计稿，通过智能化技术一键生成可维护的前端代码. 2.学习成本高吗？ 对于前端工程师来说，几乎没有学习成本。 对于用惯了蓝湖/摹客的前端工程师来说，CodeFun使用流程与前者几乎一致：设计师上传完稿件后，工程师打开界面，选择任意需要的 UI 区域拷贝走想要的代码即可，只是从原来看标注变成了直接拷贝代码。 对于设计师来说，完全不需要遵循某些设计规范。 CodeFun 算法的识别过程并不依赖于设计稿中任何的手工标注、特殊编组或特定规范，所以设计师按照原有的流程和设计风格正常输出即可，零新增工作量、零学习成本。
当你打开某一个网站的内页页面不存在，提示页面不存在或者连接错误，该页面上可以访问到网站的其他页面，这样的页面称之为404页面。
MAKA的官方网站是一个无所不包的平台，可为微信提供可访问的H5页面，微型场景和各种珍贵资产。该平台充满了世界一流的H5模板，海报，节日贺卡，电子相册，创意海报，场景自定义等等。MAKA准备为您提供帮助，因此过去使用Photoshop的日子过去了。
随着网络与新媒体的高速发展，H5标准在正式推出之后，借由微信等平台的巨大传播力，各种H5游戏和专题页面纷纷崭露头角，越来越多地出现在人们的视野中。 Html5（简称“H5”）是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。目前，H5技术正处于不断发展的过程中，作为移动轻应用，它在未来具有无限可能，潜力巨大。 关于H5技术的发展，搜狐集团董事局主席兼CEO张朝阳曾表示，如今各类APP应用正日益丰富，与此同时，H5技术也在崛起，将对APP形成有力竞争。
FAutoTest是腾讯开源UI自动化测试框架。目前已公开使用，业务涉及腾讯视频、QQ空间、腾讯彩票业务、充值业务、腾讯百科、医疗云等；
春招热季，在招聘火热之际，面试了一家主打研发C端产品的企业，在相关面试环节，面试官考了我一个小知识点 : " 如何判断一个APP页面是原生的还是H5页面 " 不知道你工作种是否由留意
网页截图功能目前也是非常常见的需求, 尤其是在在线教育领域. 我们朋友圈的微信海报, 活动海报等, 一般都是运营/市场人员通过设计工具设计而成, 但是如何更好的映射到自己的服务体系里面, 比如H5页面中, 植入更多信息收集, 交互能力. 这一块的应用探索, 页面截图是一个非常好的解决方案.
404报错页面，作为提醒网站访问者服务器未找到请求资源或文件的页面，时常被UI/UX设计师，产品经理以及网页/软件开发者视作 (包括枯燥的登录页面，加载页面以及引导页面在内) 导致网站/软件用户流失或跳出的重要元凶。然而，但这并不意味着404页面在任何情况下，对于他们来说都是不能提及的噩梦。
在现代 Web 开发困境与破局[1]一文中，作者「牛岱」谈到当前前端与UI的配合模式如下：
优然家是北京向东科技有限公司旗下全新品牌，是一家专业从事智能化系统设计、研发、实施于一体的高新技术公司。
眼下正值就业的“金九银十”，又有大批新人小伙伴要涌入UI设计这片红海啦。然而在某度搜索“UI设计师”会发现，其实大部分人对这一行并不是十分了解。笔者作为一名正奋斗在一线的UI设计师，给准备入行或已经入行却仍然迷茫的小伙伴们解析一下，UI的工作内容以及流程究竟是怎样的。
在实际业务中，app中的H5页面使用的场景越来越多，在货拉拉app中也存在大量的H5页面，比如金秋拉货节、余额、车型介绍页等，加载速度成为了困扰用户的一个痛点。为此我们决定引入离线包方案，另外还需要解决传统离线包方案不灵活，体积大，不易管理，不易降级等问题，我们设计和开发一套H5离线包系统，经过几个sdk版本的迭代，目前货拉拉H5离线包sdk，已在多个业务中落地，接受了大量用户检验。车型介绍页面使用离线包前后打开效果：
我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。
(H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面拖拽布局配置解决方案，让你轻松实现拖拽式生成html5页面，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react为主， 后台采用nodejs开发。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
