使用HTML5,CSS3和jQuery增强网站用户体验

日期:2011/11/16  来源:GBin1.com

记 得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了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插件

时间: 2024-08-30 20:29:32

使用HTML5,CSS3和jQuery增强网站用户体验的相关文章

《渐进增强——跨平台用户体验设计》一第1章 为体验而设计1.1 优秀的代码,麻烦的设备

第1章 为体验而设计 渐进增强--跨平台用户体验设计"总有些人干过这种事,在网页顶部或底部搞一个小黄条,写上'请使用XX浏览器(如IE6)访问本网站以获得最佳访问效果'.要我说,这种人到底是多么想回到过去啊,回到Web诞生之前吗?那样你就不可能在别的电脑.别的文字处理器,或者别的网络来访问你这个不想让别人看的网站啦!" --Tim Berners Lee 互联网中,唯一不变的就是变化.四下观望,永远都有新的设计风格,新的语言.框架.工具.新的上网设备在博人眼球.乱花渐欲迷人眼,城头变幻

大话传统企业网站用户体验设计 做细节就是做用户体验

中介交易 SEO诊断 淘宝客 云主机 技术大厅 说到网站用户体验,很多行内的兄弟们要说得可比接下来要写的话还多,用户体验直接影响了网站的营销效果,如从营销推广的五层数据(即浏览层.点击层.访问层.咨询层.转化层)来看,用户体验在其中间起着举足重轻的作用,哪一层用户感觉不爽了都可能跑掉.无论是传统的企业网站还是专业设计的营销型的网站,用户体验一样可轻易地适用于两者之上,优秀的用户体验设计往往在:视觉性.友好性.易用性.有用性(实用性)等方面体现,无论如何,只要用户浏览网站感觉好.舒适.习惯,那么这

提高网站用户体验就这么做

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 做了好几年的网站策划与网络推广,经历了N多的磨难和考验,如今终于有时间静下心来总结一些东西.把过去自己的亲身感受写出来,供大家共勉.网站策划看似简单,实际上这里边学问挺深的,难点也挺多的,每次给客户策划网站方案,都要对客户所处行业进行研究,还要研究这个行业那些竞争对手做得比较好.有时行业跨度也挺大的,对我们来说考验就大.这样说并不是说我们缺乏

温总理的幸福“四心论”也是提升网站用户体验的方向

中介交易 SEO诊断 淘宝客 云主机 技术大厅 今天上午9时至11时,温总理到中国政府网与网民进行了长达2个小时的在线交流,难得周末有空,通过网络切身感受了大国平民总理的坦诚态度.敬业精神和民生情怀.总理用纯朴的语言,直指问题关键所在,个人感觉受益菲浅.特别是在回答网友"幸福的标准是什么?提升百姓的幸福感,政府有哪些考虑?"的提问时,温家宝说:"对于幸福的理解和标准可能人们都有不同,我也曾经讲过关于如何使人有尊严和幸福,我不想再重复过去的话,我只是说如何让人们生活得舒心.安心

网站用户体验优化的重要性

中介交易 SEO诊断 淘宝客 云主机 技术大厅 对于电子商务类型网站来说,如果没有把网站用户体验这个细节处理好,直接的后果就是该网站的转化率提不上去,销售额就无法达标,毕竟每个用户对网站的使用习惯是不一样,功能要求也不一样.那么对于这样的情况最好是要照顾到最主要目标网民的利益需求,要对自己的网民目标有一个清醒的认识,分析网民的需求行为,实现网站用户体验优化目的. 笔者总结以下几种网站用户体验 一:感官体验 这个体验注重来访者的视觉,网站拥有者可以从以下几个方面下手: 1.网站的logo至少要清晰

浅谈:怎样提高网站用户体验那点事

一个网站建立好之后,要有流量才会有用户体验的产生,网站建好之前一定要考虑到用户体验,一个网站的用户体验决定了跳出率,PV数,如果跳出率过高,那用户体验自然就差,跳出率低用户体验就好,只有这样才会得到搜索引擎的青睐.当然我们的目的是服务客户,而不是只为做流量那么简单,如果为做流量而做SEO的话,不注重网站用户体验的话,最后只会让你的网站陷入无人问津的网站.搜索引擎就是这样用户体验好才给你很好的展现位置,这是做SEOer每个人都知道的.下面南宁SEO团队就给大家来介绍一下在网站建设中如何做好网站用户

网站用户体验:提升网站用户体验的专业建议

文章描述:提升网站用户体验:你不能不知道的6条专业建议. 作为网页设计师,我们知道,我们的任务就是与用户对话.这就是为什么我们能够从容的着手眼前的工作.我们选择颜色.字体,以及要使用的网页布局,甚至编写CSS的方式,所有的东西看起来都那么有目的性. 正如我们精心制作设计时,我们会意识到结果会透露出一些关于我们,设计师的内容.然而这些我们所设计东西并不是总能很好道出我们的初衷. 所以每当你正在进行一个网站的设计,问自己:我们如何给用户更好的关怀感? 浮动窗口广告 = 金钱比UX和内容更重要 因此,

SEO培训学院总结的10个提高网站用户体验的方面

谈到提高网站用户体验,很多SEOER都一脸盲然.只知道用户体验对于SEO优化排名有利,但真正讲到如何去提高网站用户体验,脑子却一片空白.其实网站用户体验的提高,可以从很多方面去做,下面就是seo培训学院总结的提高网站用户体验的10个方面,供seoer参考. 1.网站的logo图片.很多seoer都喜欢把自己网站的logo图片做的很大来吸引眼球,这种做法并不恰当.网站的logo图片只是网站名称的标识,不能喧宾夺主.网站logo图片应做到尺寸合适,图像清晰,数据量小. 2.网站应该有在线搜索功能.一

石榴算法:百度抓住了提高网站用户体验度本质

百度推出<石榴算法-低质量页面终结者>文章,意在真正的维护用户体验的措施.当今信息时代,作为互联网用户,上网查看和浏览信息已成为大多数网络用户的生活方式.然而,当用户打开电脑上网的时候,经常会遇到网页上的广告满天飞,甚至部分网页会弹出大量低质.混淆页面主体内容的垃圾广告和掩盖网页主体内容的大面积广告.显然,这样的广告严重的影响了用户体验. 现在,石榴算法正是惩罚因影响用户体验度的网站,真正抓住了提高网站用户体验度的本质内容. 不可否认,广告是若干网站运营的收入来源之一.在优质网站上合理放置广告