CSS3在改善网站用户体验中的应用

陈梅++高斐++张景峰

摘要：在互联网技术快速发展的背景下，不断改善与提高网站用户体验成为Web应用的趋势，CSS3在CSS2.1的基础上拓展了很多强大的功能，在改善用户体验方面提供了更多实现方法，文章从响应式网站、图片展示和导航三个方面阐述了CSS3技术在提高网站用户体验中的应用。

关键词：CSS3；网站用户体验；Web应用

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）23-0011-01

在互联网成为人们生活一部分的时代，伴随着技术的快速更新，网络技术的应用也在满足着用户的更高体验需求，用户在浏览网站时从视觉体验到交互体验都显示出了更高更丰富的要求。CSS3作为CSS（层叠样式表）的第三个版本，是对CSS规范的一个很大改善和增强，既为网站前端开发者提供了易于开发的网站浏览功能，也为使用者提供了更好的用户体验，CSS3中的媒体查询技术、动画技术等在改善网站用户体验方面已经得到了很好的应用。

1 CSS3媒体查询在响应式网站中的应用

随着移动互联网的迅猛发展，用户浏览网站的设备也在不断丰富，能够针对不同大小的屏幕进行网站浏览成为现代web应用的趋势，响应式设计在网站中的应用越来越多，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，目前很多商业类网站都提供的是响应式网站，为用户的购物行为提供便利。CSS3提供的媒体查询功能，其语法结构及用法：

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

以此可以判断设备横竖屏、设备类型、设备宽高以及设备像素比，例如判断设备宽高的代码：

@media screen and （max-width：320px）{

.logo{height：40px}

.header{height：40px}

}

在使用CSS3进行响应式网站设计中，网站内容方面的原则是在较小屏幕的设备上，从上向下根据内容优先级依次显示，网站视觉与交互体验的原则是设备不同体验一致，保证用户在浏览网站时的熟识感受。

2 CSS3的2D动画和3D变换在图片相册中的应用

在网站中进行图片展示的应用实例非常多，例如企业产品宣传展示、营销类网站的商品图片展示，用户在浏览图片的过程中如果能够在全部平铺出来的缩略图中，通过鼠标悬浮在某一张图片获取较大尺寸的图片来了解更多的信息，将会给用户带来更良好的用户体验，如www.booking.com网站，CSS3的2D动画功能就能够实现，它的优势在于不需要编写事件接口，直接使用浏览器提供的事件接口（TransitionEnd，AnimationStart，AnimationIteration，AnimationEnd）即可，目前这些事件接口需要针对浏览器添加前缀，例如webkit内核的浏览器，提供的事件接口为webkitTransitionEnd，webkitAnimationStart，webkitAnimationIteration，webkitAnimationEnd。CSS3的2D动画应用的技术有translate（）、rotate（）、scale（）等方法，以及transition过渡属性。上面提到的图片展示实例的相关实现代码：

img{

width： 150px；

height： 150px；

-moz-transition： width 1s，height 1s，transform 1s；

-webkit-transition： width 1s，height 1s，transform 1s；}

#pic：hover{

width： 800px；

height： 800px；

z-index： 10；

-moz-transform： translate（0px，-170px）；

-webkit-transform： translate（0px，170px）；}

CSS3中的3D transform变换效果更是将图片的展示置于模拟三维空间，为用户的浏览体验提供了更加真实的环境，主要涉及rotateX（）、rotateY（）、rotateZ（）三个方法和perspective属性，相关代码如下：

perspective：**px；

transform-style： preserve-3d；

transition： transform 1s；

img： transform： rotateY（***deg） translateZ（***px）

3 CSS3在网站导航设计中的应用

网站导航是用户浏览网站的重要交互区域，因此对导航进 （下转第14页）

（上接第11页）

行一些微小的交互动画能有效提升一定的用户体验，CSS3在网站导航方面的应用一方面是仅使用CSS3来实现，配合border-radius、transition、transition-delay等主要的技术可以制作出过渡效果非常好的下拉式导航，相关代码如下：

transition：0.5s

transition-delay：0.5s；

background-image： -moz-linear-gradient（-90deg， rgba（255， 255， 255， 0.5）， rgba（255， 255， 255， 0））；

另一方面是将CSS3与JQuery技术两者结合制作的导航，可以实现侧栏折叠展开式导航、垂直固定式导航等效果，在形式和交互方面都能够给用户带来更多的用户体验，例如汽车网站http：//www.lexus.eu/car-models/nx/nx-house/#side-menu中的侧栏导航，对页面的充分利用使得用户能够有更多的空间浏览汽车方面的信息。

总之，CSS3在CSS2.1的基础上拓展了很多强大的功能，为现代网站设计应用提供了更多方法，满足网站前端的设计开发需求，设计者通过应用CSS3的圆角、阴影、渐变、变换、动画以及媒体查询等技术，为用户提供了更加美观、更加良好的用户体验界面，CSS3的新特性降低了网站开发的复杂度，网站在性能上得到了很大进步，用户浏览网站的速度以及交互等多方面的体验都有很多改善，随着CSS3技术的进一步发展完善，网站用户体验将得到更多的提高与实现。

参考文献：

[1] 大漠.图解CSS3核心技术与案例实战[M].北京：机械工业出版社，2014.

[2] 赵建保.响应式Web设计关键技术及设计流程[J].电脑知识与技术，2014（5）.

[3] 张晓军.基于HTML5+CSS3.0+jQuery 在移动电商APP开发中的应用[J].通讯世界，2015（6）.