超赞!人气超高的HTML5特效排行榜TOP 10

超赞!人气超高的HTML5特效排行榜TOP 10

11个月前 (01-04) 浏览: 16 评论: 0

现在市面上有一大批HTML5页面模板制作工具,虽然方便了很多非专业设计师制作HTML5页面。但是不得不吐槽的是,很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界,想感受真正精妙的高级特效,这10个专业人士的作品不得不看咯。 那HTML5里有哪些高级动效了?小派几乎仔细体验了国内所有优秀H5页面作品,结合自己的一些理解,整理出下面十大HTML5页面特效。我们的HTML5作品如果能用上其中一两个,相信能增色不少!术语也许不够专业,欢迎吐槽! 1. 粒子特效 星际传奇:这是探索宇宙的门票     百度百科:为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器,脚本来控制其整体或单个的运动,模拟出现真实的效果。 2. SVG路径动画 元小望:SVG练习NO.1_描述孤独     简而言之,就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真,特别适合那些崇尚简约设计风格的网页。 上作品是派友(Epub360用户)元小望用Epub360设计制作的,大家感受下,是不是很酷! 3. 序列帧动画 大众点评:我们之间只有一个字     百度百科:序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样,不但给制作增加了负担而且最终输出的文件量也很大,但它的优势也很明显:逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容,而它类似与电影的播放模式,很适合于表演细腻的动画。例如:人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。 派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版,大家看看Epub360序列帧组件性能如何? 4. 全线性动画 腾讯UP大会:生命之下,想象之上     全线性动画可以理解为动画连续,几乎不间断播放,像视频一样流畅细腻。 这支HTML5页面打破了传统幻灯片式的呈现方式,塑造出了一种宽广、素雅、幽静的整体感受,该作品也被很多人推崇为HTML5里的动画片。 5. Cinemagraphic Levi’s: “换”醒你的夏天     什么是Cinemegraphic?如果你不知道,就有点OUT了。顾名思义,Cinema是电影摄影,Graph是图片,Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。 其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念,只见画面上,人物的头发和衣角飞舞着,仿佛吹拂着一阵阵自然风,在炎炎夏日,他们依旧感受着清爽,尽情玩耍。作为互动者的人们,当看到画面上被风拂过的Cinemagraphic动态场景,他们也身临其境地感受到自然风所能带来的这种清爽感受。 下面说说和交互相关的动画特效。 6. 全景 杜蕾斯的第一座美术馆     虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project,让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新,在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段(比如馆内的彩蛋、12 点闭馆无法访问等等)来创造一个虚拟的真实空间,而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说,“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。” 7. 3D 康师傅:2015最飞羊的新春祝愿         祝福灯笼可以360旋转呈现,而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果,彰显“最飞羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。 8. 点击碎屏 大众点评:这个陌生来电你敢接吗?     “点击屏幕”不新鲜,但是这种屏幕击碎的画面好像也特别讨人喜欢,大概有三轮左右的“击碎”动作,这是整个HTML5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性,点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。 9. 长按逐字 韩寒再谈一加:1步1步看清韩寒     整个HTML5页面用打字机的形式呈现,随着用户按下按钮,纸片会逐渐显示出韩寒从1999年起,为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。 10.滑动触发 腾讯视频:这一幕你期待已久     长页HTML5,滑动触发动效,和呆板的幻灯片式样的HTML5页面拉开了距离。Epub360虽然能实现带动效带触发的长页,但是目前暂时还不能实现这种滑动触发动画。

一个完整的产品专题页面策划思路是什么样子?

一个完整的产品专题页面策划思路是什么样子?

1年前 (2016-09-05) 浏览: 8 评论: 0

网站运营中专题页面的作用非常大,经常能够看见很多付费推广都把专题页面做落地页,直接打开就能看见,足见一个好的专题页面的重要性了。它可以帮助从不同的角度,或者从某一个优势点去包装我们的产品,好处有很多,如更加具有针对性,能详细的说清楚产品各个优势,嵌套不同的产品文案等。专题页面的类型有很多,不仅仅局限在产品包装上面,我们也可以用来包装一个活动,包装一个品牌形象,或者某一个事件宣传等。今天何杨想和大家聊聊作为网站运营,如何去策划一个符合用户体验的产品专题页面; 一、确定产品专题页面表现形式     说白了就是你的专题页面想要通过什么样式呈现在用户的面前,PC上面目前主流的就是是长页面滚动条,还是多屏滚动切换的形式。如果是移动端的话可以使用H5做一个多屏滚动切换的效果来展现; 表现形式本身并没有什么,个人建议是在PC端如果是信息比较多的可以优先考虑长页面滚动条的形式,如果是针对产品某一个点展开讨论,内容相对比较少,可以优先考虑多屏滚动切换形式; 还有一两点需要提醒一下: 1、如果是使用多屏切换,兼容性很重要,尤其在PC端更是要注意主流浏览器的兼容性(IE8+,chrome,firefox等); 2、还有一个就是不同的设备分辨率展现的效果往往也是不相同的,比如我们以前做过一个多屏切换的专题,在1920分辨率的台式机上面图片居中显示刚刚好,但是在笔记本中就是溢出,所以极大影响用户体验。 何杨在这里不是说作为运营的你从技术的角度出发去检查这些问题并且解决,而是你要考虑到这些问题,然后反馈给技术,因为一个好的显示效果是用户体验的基础; 二、顺着用户心思架构楼层     从这里你就要开始正式的策划你的专题页面布局了,也是本篇文章的重点,但是不同的产品,不同的主题,不同的切入点,不同的人策划出来的专题页面布局都是不一样的,所以无法非常固定提供给大家一个类似公式的东西去嵌套,只能给大家提供以下思路; 这里何杨就以自己之前的策划专题的经验讲解,希望能对新手朋友有帮助,并且找到一些思路,下面你可以试着从下面3个方面去发问自己; 1、用户对自己产品有没有一个直观的认识? 对于这类产品,用户乍一听可能不太熟悉,脑海中没有一个相似的东西来联想,对产品整体印象模糊,这个时候我们专题页面要解决的第一个问题就是让用户知道我们,最快的速度建立起对我们产品的直观印象; 我们可以通过以下方法让用户快速了解你: 1)大树下好乘凉 什么叫“大树下好乘凉”?就是找一个在本行业中已经做得非常不错的典型来举例,让用户一下就能明白你的产品是什么。这比你有时候费半天事说一大堆解释的废话有效的多; 比如之前做过一个O2O系统开发的专题页面,对于这样技术性比较强的产品,你就不能直白从正面介绍,第一用户看不懂,第二用户不会看。所以这个时候我们就要找一个典型; 所以我最终使用“有一个系统能帮你做一个像美团一样的网站”,这样的介绍别人一下子就知道你的产品是什么了; 2)描述一个熟悉的场景 还有一种情况就是我们产品从正面介绍同样是很难让用户了解,但是利用上面的方法去寻找一个“大树”有比较困难,那么此时我们要怎么快速让用户了解我们的产品呢? 描述一种熟悉的使用场景出来是一种不错的办法。这样可能大家还是不太明白,举个例子: 我之前策划过一个做“视频矩阵”产品专题页面,为了让用户快速了解,我就模拟了一个“视频监控电视墙”的场景,左边很多监控探头,右边很多电视墙,中间画上我们的产品,这样别人就能马上知道我们的产品是干什么的了。 还有现在比较流行的VR购物,可能乍一听你不懂,但是告诉你这样的一个场景:戴上一副眼镜,你就能立刻进商店里面去购物了。可能你马上就能明白VR购物是什么玩意了。 3)替他解决什么问题 除了上面两种快速让用户了解你产品的方法,还有一种是我经常使用的,就是告诉用户能帮你解决什么问题,而不是正面介绍。 比如我策划过一个专题是关于创业门户网站运营的,乍一听你可能不太明白,但是我告诉你:它可以帮助你解决创业没有启动资金,没有团队合伙人的难题; 通过告诉你能帮你解决什么问题,用户就能反向模拟产品在脑海中的印象轮廓! 2、用户有没有使用产品的需求?或者说这种需求够不够强烈? 这个疑问要解决的时候,不要你宣传了半天,用户根本没有使用产品的需求,或者他事实上是有需求的,但是没有被“激发”出来,这个时候我们在其他方面花费再大力气也是白费。 在引导用户对产品产生使用需求方面,何杨给大家2点建议: 1)分析行业环境,让用户意识到这种需求的紧迫性; 很多时候我们分析了行业环境,告诉用户某种需求现在已经非常紧迫的时候,可能用户就会去关注,即使之前他不在意的东西。 比如销售减肥产品,可以分析每年有多少肥胖的人患上各种疾病影响健康,有多少人因为肥胖产生自卑影响日常生活,生活越来越多的垃圾食物防不胜防等,这些数据当你罗列到一起的时候,就会让用户有紧迫感,产生使用需求; 2)从用户自身痛点出发,告诉他我们能解决; 就是你要站在用户的角度,想一想他们有哪些头疼的事情是和你的产品相关的,把它们罗列出来,最好是在专题页面有专门的地方展现出来,然后最后别忘了,你可以帮他解决。这样的目的就是先和用户产生情感共鸣,然后以朋友的口吻告诉他,你能帮他(不要直接说销售产品,这样用户容易排斥) 3、即使有了使用需求为什么就要用你的? 好了,到这里用户知道你是什么,也有使用产品的需求,接下来一个非常关键的问题就是:为什么要用你的?市场同类产品那么多家,有的比你的产品便宜,有的比你的品牌大……问自己一句:为什么要用你的? 给出下面的建议之前,先把下面所有建议的出发点亮出来:找差异化。因为有了差异,所以用户才会选择你; 好了,如何寻找更多的差异化让用户接受你呢?可以从下面几个方面着手: 1)亮出产品的特色优势 把自己产品最核心的优势罗列出来,或者说用户最关心的特色功能,文字总结一定要简练,让用户在最短的时间内知道你产品的优势; 2)增加产品的额外价值 除了产品本身的特色功能和优势之外,我们还可以给产品增加一些附加价值,还是以减肥产品为例(以下完全是为了帮助大家理解自己编的附加价值,请知悉),如: 使用起来很方便,跟喝茶一样; 有哪些名人都已经在使用了,并且效果很不错; 晚上睡前吃还有助于睡眠质量的提升; 1个月就能提高回头率…… 3)给用户“算算账” 有很多时候用户徘徊不定是因为对于自己的付出和所得之间的关系太模糊,这个时候我们就要给他算算账,让他知道原来选择你的产品是最划算的,投入和所得之间的差额是最大的,于是他便会做出选择。比如我之前策划的销售源码的专题就使用了这个方法: 思路:达到同一目的(使用你产品的结果),有哪些实现方法,并且列出每一方法背后的投资与回报! 所以我提出了几个假设: 如果用户自己组建团队开发:高额费用(人员工资)+巨大时间成本+团队磨合等风险成本; 如果用户自己找外包公司开发:高额开发费用(价格不透明)+无售后保障(维护费)+不了解行业(结果不达标); 使用我们的产品搭建平台:透明低廉费用(客户平摊)+功能齐全(我们是专业的)+半天搞定(开发工作前期完成) 所以不管是比效率,比专业,比时间,比费用,只要用户的确有需求,他会有非常大的可能性选择我们。 4)打消用户的顾虑 即使用户准备下单了,可能还会有很多顾虑,所以我们在设计专题页面的时候也要考虑进去:如何打消用户的顾虑? 在此之前首先我们弄清楚用户到底会有哪些方面的顾虑,比如售后有没有保证,到底东西是不是想你说的那么靠谱等。这个时候你就可以有针对性的制定应对的方法; 比如用户担心售后,那我们就公开售后服务体系运作流程,并且合同写明;用户担心不靠谱,那就列举一些现实的案例,或者用户真实评价,或者资质认证,名人效应之类的等等,最终目的就是打消用户顾虑。 三、别忘了你要干什么     产品专题页面设计到最后的时候,不要忘了你的初衷:你想要通过这个专题页实现什么?如用户注册会员,点击咨询产品,点击下单,关注公众号,参与活动等等 如果你前面的布局策划的非常好,完全牵着用户的想法在走,那么走到这一步,应该说离你的目标距离又近了一步,只差临门一脚了!甭管最后能不能实现目标,你要做的就是再添“一把火”,告诉用户的紧迫性,让用户自己着急! 你可以使用一句口号,或者图片等形式来表现这种紧迫性,比如: 某一源码类产品:“商机稍纵即逝,你不用,你的对手一定再用!” 某一减肥类产品:“不要等你老公嫌弃你的时候,再想起来减肥” 某一致富类电子书:“你错过的不是一本书,而是一个机会” 某一宽带类产品:“现在下单起,前3个月免费使用!”等等 别小看这最后的刺激,看起来就是一句口号或者一张图片,如果是日常的场景,可能这些口号刺激真的效果不大,但是当用户面临下不下单徘徊两难时,这种刺激就非常有效了,说白点就是给用户一个冲动的理由而已!

背景图设计对于整体网站设计的影响

背景图设计对于整体网站设计的影响

1年前 (2016-08-26) 浏览: 10 评论: 0

一个好的网站背景,对于网页上的内容都有衬托的作用。  什么样的背景适合你的网站?   很多人根据自己的喜好来选择网站背景,或者是盲目,甚至是随便的选择,这是错误的做法。至于什么样的背景适合你的网站,并没有一定的原则,不过却有一些共同的要素需要注意。 首先,网站设计背景的内容要有目的性。何为目的性?简单的说,背景要和你的品牌,你的公司文化,产品的特点相符合,风格要一致,不至于差的十万八千里,比如网站展示的产品是健康绿色减肥类的,那么你背景就不可能用大红大紫的背景图片。 其次,网站背景信息传达要明确、清晰、快速。背景上的文字内容要容易阅读,不论是颜色、反差还是尺寸大小,背景的主题要和网站连贯一致。如果内容表达的不清楚,背景加载速度要快,莫要让背景影响到访问者的浏览。

利用Font Awesome为网页添加图标

利用Font Awesome为网页添加图标

2年前 (2015-12-31) 浏览: 15 评论: 0

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。 主要特色: ✓  一种字体,369个图标,是网页操作的象形语言; ✓  纯 CSS 控制,能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果; ✓  无限缩放,矢量图标在任何尺寸下都一模一样; ✓  免费使用,包括商业和非商业项目; ✓  支持 Internet Explorer 7 浏览器; ✓  能够在 Retina 屏幕完美呈现; ✓  完全兼容 Twitter Boostrap 最新版本; ✓  对设计师友好,设计师能够轻松使用; ✓  和其它图标字体不同,兼容屏幕阅读器; 使用方法: 下载Font Awesome 解压下载的文件,放至一定目录,通过css引入使用。 例如:本博客的菜单列表前置图标就是通过该字体库达到的; 首先在header.php中引入,我是将上述文件放在主题目录下的,因此引入代码为: PHP <!-- AWESOME FONT --> <link rel="stylesheet" id="fontawesome-style-css" href="<?php bloginfo(" template_directory'); ?>/font-awesome/css/font-awesome.min.css?ver=4.0.1' type='text/css' media='all' /> 1 <!-- AWESOME FONT --> <link rel="stylesheet" id="fontawesome-style-css" href="<?php bloginfo(" template_directory'); ?>/font-awesome/css/font-awesome.min.css?ver=4.0.1' type='text/css' media='all' /> 然后在wordpress后台-菜单编辑中设置某个菜单比如首页的导航标签属性为: PHP <i class="fa fa-home"></i>首页 1 <i class="fa fa-home"></i>首页 font-awesome各种图标具体css类见官网  

Slider Revolution强大的视差响应幻灯插件

Slider Revolution强大的视差响应幻灯插件

4年前 (2014-06-03) 浏览: 22 评论: 0

Slider Revolution codecanyon上销量第一的wordpress幻灯插件,themeforest中wordpress主题使用率最高的幻灯插件。文章缩略图、图片切换、动画效果、3d效果….只有你想不到,没有它做不到,Slider Revolution幻灯插件的强大只有你使用过后才能知道。这也是themeforest众多主题作者把它作为主题内置插件的原因。 插件特点 充分响应,支持移动设备 使用超快的Greensock动画引擎 强大的API让您随意控制幻灯 拥有各种模式:自定义,自动响应,全屏 任意调整图像大小和高度 随意设置图片的封面、背景、纹理、遮罩 自定义图像ALT标签,优化搜索引擎 所见即所得的拖放编辑器 可设置幻灯片是否发布 多用户角色管理 支持手机触摸,键盘翻页 内置幻灯、视频播放计时器 可自由导入导出幻灯设置 支持多语言插件WPMU 可调用任意id文章或任意类别文章缩略图 可使用短代码插入至主题任意位置 延迟加载,增加页面加载速度 可设置全屏YouTube、Vimeo和本地的HTML5视频播放 自动设置影片的开/关

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册