多屏时代下webui设计探究

《多屏时代下webui设计探究》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、多屏时代下WebUI设计探究摘要：本文主要探讨多屏时代下Web页面设计的发展趋势，文章通过探讨流式布局、CSS3、响应式布局等方法，提升不同终端的浏览体验，重点分析了不同分辨率、不同设备下分栏布局、图片显示、视频浏览等应用的设计思路。关键词：多屏；HTML5；CSS；JQuery中图分类号：TP3151多屏时代到来电视节目不断创新、生活节奏不断加快，移动互联网快速盛行，当下我们可以把目前的屏幕划分为三类：第一屏——电视屏，在传统的娱乐习惯中，看电视是一个最习以为常的家庭娱乐习惯；第二屏一一电脑屏，互联网的出现，把一部分人从电视屏前拉到了电脑屏前，人们获取资讯开始从门户网

2、站开始；第三屏一一手机屏和平板电脑屏，移动式屏幕已经形影不离，尤其是移动互联网的带宽逐步提升，这一趋势越加明显。当下，一些电视盒子的出现，使电视大屏浏览网站也成为可能，于是对于WebUI设计师来说，不得不考虑不同尺寸的屏幕，不同分辨率的屏幕，甚至平板的横屏和竖屏等一些列情况下的网页呈现效果。2多屏带来的一些问题第一，Android的碎片化，加速了多屏趋势，从3.5寸到10寸的手机和平板电脑屏各式各样。网页在手机上呈现,越来越糟糕。第二，移动设备的横屏竖屏切换广泛应用，人们或竖屏单手持握手机浏览网页，或横屏宽屏浏览网页，浏览器总是导致横向滚动。第三，浏览器种类繁多，无论是

3、PC浏览器，还是手机浏览器种类越来越多，传统设计难以驾驭。第四，网页对手触交互支持较差，PC上鼠标操作较为方便，而切换到手机或平板电脑上，触控操作不在准确。3实现多屏设计的常用方法3.1使用HTML5Windows7以后的微软的浏览器都已经广泛支持HTML5,不但在网页呈现性能方面越来越强，而且大有替代Flash的趋势，一直以来苹果公司始终不支持Flash,设计师不得不为iPhone和iPad考虑另一套设计方案。HTML5出现，不用再考虑这些问题，大大提高了设计师的开发效率。3.2使用"流式布局”自从Div+Css这种设计模式出现后，流式布局就成为网页设计的主流，它可以

4、充分实现内容、布局、样式的分离，是开发者更好的维护整个设计，也能使网页更好的符合搜索引擎搜索规范。在多屏时代下，“流式布局”仍然会成为整体设计规划时一种好的选择。3.3使用百分比代替px（像素）定义盒子的宽度横向滚动条的出现，大大降低了网页浏览的体验（大多数情况如此），因为用户在电子设备上的阅读习惯不再是左右滚动，而是上下滚动，用户往往会忘记有横向滚动这回事,从而浏览时会丢掉很多信息。百分比是以父容器的宽度为参照，所以始终不会超出父容器的宽度，即使用户切换到不同的屏幕的电子设备，也不会出现横向滚动。这样的选择往往适用于文本内容的显示。3.4使用MediaQuery技术从

5、CSS3开始，我们可以通过使用媒体查询（MediaQuery）技术，实现多屏显示的差异支持。我们可以在页面中添加如下代码:以上代码表示当我们屏幕分辨率宽度最大为480像素时，加载link,css外部样式文件。3.5使用JQuery或者Javascript早期的IE不支持MediaQuery技术，通过JQuery或Javascript去处理，虽然JQuery本质上就是Javascript技术，但是其对Javascript进一步封装，使Javascript得学习和开发成本大大降低。通过JQuery可以判断出IE的版本,从而加载不同的外部样式表。步骤如下：第一，导入JQuer

6、y库。第二，使用JQuery方法处理加载样式表。其中IE7.css为针对IE7浏览器设计的样式表。4常见场景举例4.1多栏处理不同屏幕尺寸大小不一，所以需要事先为各种大小尺寸的屏幕做好设计准备。在电脑上，往往很大的宽屏显示器，可以显示多栏(3-4栏)，但是当用户切换到移动手持设备上多栏就显得很挤，所以不得不变成单栏或两栏。一般来说我们往往以480px、960px宽度为界对屏幕进行分类，划分为3类：小于或等于480px为一类；大于480px并且小于等于960px为一类；大于960px为一类。所以使用MediaQuery技术，可以写出如下样式代码：@mediascreena

7、nd(max-width：480px){}@mediascreenand(min-width：481px)and(max-width：960px){@mediascreenand(min-width：961px){其中省略号部分为不同屏幕宽度的样式代码。当然需要将传统的像素宽度换算成百分比宽度，以免出现横向滚动。4.2图片处理屏幕宽度决定设计，但是很多图片为了追求很好的视觉效果，通过使用高清或大尺寸，以提高可视面积，但是在小的屏幕上浏览起来却十分麻烦。针对这一问题，我们可以将一些图片以背景方式加载到页面，然后在不同的屏幕宽度下，选择加载不