使用HTML5、CSS3和jQuery增强网站用户体验[留存]

记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了。在今天这篇文章中,我们将介绍一些非常实用的教程,技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极我们留言!您的支持是我们的最好的动力!

表单类

jQuery的美化Checkbox

这个教程将帮助你构建一个非常动感的checkbox,用来替换缺省的checkbox,相信大家会喜欢更富有活力的UI界面

Rethinking forms in HTML5

这是来自Nettus+的超棒教程,将教你如何使用HTML5特性来构建表单

jQuery impromtu

一个alert,对话框等组件的替代品,用户将会更喜欢这种UI元素

jQuery Simple Modal

一个非常灵活的对话框框架,提供了非常好的用户界面设计,能够帮助你生成非常酷的表单

mcDropdown

多层选择下拉框,非常适合树状结构的展现

jQ transform

个人非常喜欢使用的表单美化插件,能够帮助你构建漂亮的UI界面。

Emblematiq niceforms

非常不错的一款jQUery框架,允许你使用设计的主题将表单转化成非常酷UI。当然你也可以自己自定义一个主题

Uniform

Uniform将使用自定义的皮肤遮盖缺省的表单,并且可以和你实际的表单元素同步,保证了访问和兼容

image buttons a part of input fields

教你如何生成输入框中的按钮

DynamicWP contact form

非常不错的WP插件,能够生成一个停靠页边的联系人表单,不使用的时候自动隐藏

jQuery highlight

jQuery高亮显示功能,能够让输入高亮,提示用户输入内容

jQuery inline form validation

个人非常喜欢使用的表单输入验证插件,具体使用参考这篇文章:

使用jQuery插件jquery.validationEngine实现表单验证功能

导航类

White smoke menu style

这个jQuery开发的导航菜单让人想起了flash开发的菜单效果,整个移动如此的顺畅,让你感觉它就是flash开发的。 兼容所有的浏览器,即使javascript被关闭也可以正常工作。

jQuery mb.Menu

如果你想开发一个多层的属性菜单,那么这个插件就是你要找的解决方法之一。

Coda Slider

一个非常不错的滑动面板,非常适合滑动类型面板的应用。 并且可以使用高级特性增强功能

ID Tabs

如果考虑扩展性,这个插件恐怕是你能找到的最好的面板导航标签页插件了。

Smooth horizontal sliding menu

这个教程教你如何使用jQuery来创建一个垂直滑动显示的子菜单

jBreadCrumb Menu

这个可以缩放的当前位置可以自动根据当前位置长度来缩放,非常不错的创意

jQuery FLOWERNAV

非常动感的一个导航实现, 能够给你的链接添加一个花朵的效果

jQuery Accordion

一个使用非常简单的手风琴显示效果

用户界面类

jQuery Slide Note

Slide node是一个可以帮助你提供一些有效提示或者信息从而方便你访问用户使用网站的插件。

jQuery page peel

一个非常酷的显示广告的插件。

jQuery infiniScroll

jQuery的无限滚动效果插件,用来帮助你现实大幅的内容

jQuery SliderNav

一个动态垂直滑动显示导航菜单的插件

jQuery tipped

一个非常酷的插件允许你添加提示到你的网站。当然提供了可选的皮肤。

Supersized

一个能够让你的网站背景幻灯显示的插件

Imagin8

不是一个简单的图片幻灯插件,它能够让你指定一个目录,这个目录下的所有图片都能够显示,不需要你在HTML代码中指定,非常实用!

jQuery Lettering

一个可以帮助你控制每个单独字母的插件。 帮助你有效的创建一些独特的文字效果

jQuery stylesheet Switcher

这个插件允许你添加链接来修改页面的样式表

Flip

Flip是一个帮助你实现翻动元素效果的jQuery插件。

使用HTML5、CSS3和jQuery增强网站用户体验[留存]

时间: 2024-10-27 03:48:06

使用HTML5、CSS3和jQuery增强网站用户体验[留存]的相关文章

面向Web Cloud的HTML5 App开发实战:Browser&HTML5&CSS3&PhoneGap&jQuery Mobile& WebSocket&Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

Html5+css3+angularjs+jquery+webAPi 开发手机web(一)

前言 随着浏览器的发展 HTML5+CSS3 的使用也越来越广泛,一直想学这个,想学那个折腾下来几乎没学到什么东西.工作经验告诉我,要掌握一门技术,就需要在项目中去磨练, 所以我就准备开发一个手机端的BBS练练手,技术更新快,也要学的快,跟的上时代,才涨的了工资. 技术的选择 jQuery Mobile  Phone Gap  等都是比较成熟的框架为什么我不用这些框架呢? 因为我考虑到底层的技术应用和练习 . 我的选择是:Html5+css3+angularjs+jquery HTML5+CSS

网站用户体验的5个分类和76个要素

发现很多的网站不仅没有把用户体验这个最重要的部分处理好,并且对用户体验的概念都比较模糊,更不知道从何下手,尤其对于电子商务网站而言,直接的后果就是网站的转化率提不上去,销售额无法突破(参考:什么是网站转化率及其重要性),其实袁勇认为,用户体验就是把自己当作目标受众,在自己的网站上不停的逛来逛去,看看哪里的感觉不好就是用户体验有问题.当然,说起来简单做起来难,因为每个人都网站的使用习惯不一样,功能要求也不一样,要做到最好的用户体验只能是照顾最主要目标受众的需求,因此要实现用户体验的优化,前提之一是

网站用户体验是王道 网站seo如何优化?

网站用户体验建设是网站seo优化的王道,就象我们每个人的性格一样,性格影响一生,网站用户体验好,网站访客都喜欢这个网站,就算搜索引擎把你 的网站全部k光,对你来说也不会有很大的影响.网站的用户体验好坏反映在2个指标上,第一是网站的跳出率,第二网站的访问时长.那我们应该怎么样做才能降 低网站的跳出率,增加网站的访问时长呢?今天曾维健将带领大家从策略的角度来分析这2个问题! 跳出率优化 首先我们要温习一下什么是网站跳出率.就是网站访客到达网站后,马上就关掉网站跟网站在总访问量的比例.那网站访客到底会

运用页面二次点击,提升网站用户体验度

今天广州SEO跟大家分享的文章题目是:<运用页面二次点击,提升网站用户体验度>,简单的说就是用户看了一个页面之后,还在当前浏览页面看了用户同样需要看得页面,这样就完成了用户二次需求,用户二次点击了. 在网站关键词排名比较稳定后,这时我们进入了SEO后期维护工作.SEO的后期工作,其实就是根据数据对网站不断进行微调,从而提升用户的体验.那么这些数据我们从个哪里来?这时我们需要用到百度统计里的页面点击图和链接点击图.注意,现在不能用第三方数据了哈.. 页面点击图是百度统计里面的一项统计工具,大多数

什么是好的电子商务网站用户体验

最近被朋友问道:什么是好的电子商务网站用户体验?做了近六年的电子商务网站项目,参与了五六个电子商务网站的需求分析和测试,这个问题乍一听好像很好解释,但说出来却自觉杂乱无章.这就好比别人问你什么人可以称得上好人.听上去是一个很简单的问题,回答起来却一时半会无从说起. 静下来想一想,或许可以从用户体验五要素来阐述. 用户体验五要素图解如下: 图解详情请见Jesse James Garrett的<用户体验要素>一书 结合用户体验五要素, 一个电商网站良好的用户体验可以体现在以下几个方面: (注: 以

提高网站用户体验的4个方面

很多朋友都会说,建设网站的目的就是为了让网站带来流量,就是让用户访问,就是让企业盈利.这些一点都不错,但是对于搜索引擎优化越来越难做,用户体验要求越来越高,成本控制越来越低,网站投入扎堆的大环境下,我们如何让网站脱颖而出? 在这里,笔者认为:做好用户体验,流量自然会到来. 所谓网站用户体验,其实就是:个人浏览习惯.网站操作习惯,搜索引擎搜索习惯.网络交流习惯等互联网相关习惯的结合. 那么一个网站如何做到上述习惯的结合? 第一点:行业分析.要做一个合格的网站不能不对行业进行整合分析,这里说的是合格

Windows Server 2012 R2超级虚拟化之二 增强的用户体验

   WindowsServer 2012 R2超级虚拟化之二 增强的用户体验     在Windows Server2012 R2的Hyper-V中出现了一个新功能增强的会话模式,这个功能将虚拟机连接会话的本地资源重定向.当你与虚拟机进行交互时,它提供的功能是类似的远程桌面连接,提供增强的交互式会话体验.在以前版本的Hyper-V的虚拟机连接重定向到虚拟机的屏幕,键盘和鼠标的复制功能有限,为了获得额外的重定向能力,可以通过远程桌面连接到虚拟机,但是这需要一个虚拟机的网络路径.使用虚拟机连接时,

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H