阐述时代多屏时代下WebUI设计研究

论文导读：
摘 要：本文主要探讨多屏时代下Web页面设计的发展趋势，文章通过探讨流式布局、CSS3、响应式布局等方法，提升不同终端的浏览体验，重点分析了不同分辨率、不同设备下分栏布局、图片显示、视频浏览等应用的设计思路。
关键词：多屏；HTML5；CSS；JQuery
中图分类号：TP315
1 多屏时代到来
电视节目不断创新、生活节奏不断加快，移动互联网快速盛行，当下我们可以把目前的屏幕划分为三类：第一屏——电视屏，在传统的娱乐习惯中，看电视是一个最习以为常的家庭娱乐习惯；第二屏——电脑屏，互联网的出现，把一部分人从电视屏前拉到了电脑屏前，人们获取资讯开始从门户网站开始；第三屏——手机屏和平板电脑屏，移动式屏幕已经形影不离，尤其是移动互联网的带宽逐步提升，这一趋势越加明显。当下，一些电视盒子的出现，使电视大屏浏览网站也成为可能，于是对于WebUI设计师来说，不得不考虑不同尺寸的屏幕，不同分辨率的屏幕，甚至平板的横屏和竖屏等一些列情况下的网页呈现效果。
2 多屏带来的一些问题
第一，Android的碎片化，加速了多屏趋势，从

3.5寸到10寸的手机和平板电脑屏各式各样。网页在手机上呈现，越来越糟糕。

第二，移动设备的横屏竖屏切换广泛应用，人们或竖屏单手持握手机浏览网页，或横屏宽屏浏览网页，浏览器总是导致横向滚动。
第三，浏览器种类繁多，无论是PC浏览器，还是手机浏览器种类越来越多，传统设计难以驾驭。
第四，网页对手触交互支持较差，PC上鼠标操作较为方便，而切换到手机或平板电脑上，触控操作不在准确。
3 实现多屏设计的常用方法

3.1 使用HTML5

Windows7以后的微软的浏览器都已经广泛支持HTML5，不但在网页呈现性能方面越来越强，而且大有替代Flash的趋势，一直以来苹果公司始终不支持Flash，设计师不得不为iPhone和iPad考虑另一套设计方案。HTML5出现，不用再考虑这些问题，大大提高了设计师的开发效率。

3.2 使用“流式布局”

自从Div+Css这种设计模式出现后，流式布局就成为网页设计的主流，它可以充分实现内容、布局、样式的分离，是开发者更好的维护整个设计，也能使网页更好的符合搜索引擎搜索规范。在多屏时代下，“流式布局”仍然会成为整体设计规划时一种好的选择。

3.3 使用百分比代替px（像素）定义盒子的宽度

横向滚动条的出现，大大降低了网页浏览的体验（大多数情况如此），因为用户在电子设备上的阅读习惯不再是左右滚动，而是上下滚动，用户往往会忘记有横向滚动这回事，从而浏览时会丢掉很多信息。百分比是以父容器的宽度为参照，所以始终不会超出父容器的宽度，即使用户切换到不同的屏幕的电子设备，也不会出现横向滚动。这样的选择往往适用于文本内容的显示。

3.4 使用MediaQuery技术

从CSS3开始，我们可以通过使用媒体查询（MediaQuery）技术，实现多屏显示的差异支持。我们可以在页面中添加如下代码：
以上代码表示当我们屏幕分辨率宽度最大源于：毕业论文致谢www.7ctime.com
为480像素时，加载link.css外部样式文件。

3.5 使用JQuery或者Jascript

早期的IE不支持MediaQuery技术，通过JQuery或Jascript去处理，虽然JQuery本质上就是Jascript技术，但是其对Jascript进一步封装，使Jascript得学习和开发成本大大降低。通过JQuery可以判断出IE的版本，从而加载不同的外部样式表。步骤如下：
第

一、导入JQuery库。

第

二、使用JQuery方法处理加载样式表。

其中IE

7.css为针对IE7浏览器设计的样式表。

4 常见场景举例

4.1 多栏处理

不同屏幕尺寸大小不一，所以需要事先为各种大小尺寸的屏幕做好设计准备。在电脑上，往往很大的宽屏显示器，可以显示多栏（3-4栏），但是当用户切换到移动手持设备上多栏就显得很挤，所以不得不变成单栏或两栏。一般来说我们往往以480px、960px宽度为界对屏幕进行分类，划分为3类：小于或等于480px为一类；大于480px并且小于等于960px为一类；大于960px为一类。所以使论文导读：max-width：960px）{……}@mediascreenand（min-width：961px）{……}其中省略号部分为不同屏幕宽度的样式代码。当然需要将传统的像素宽度换算成百分比宽度，以免出现横向滚动。4.2图片处理屏幕宽度决定设计，但是很多图片为了追求很好的视觉效果，通过使用高清或大尺寸，以提高可视面积，但是在小的
用MediaQuery技术，可以写出如下样式代码：
@mediascreenand（max-width：480px）{
……
}
@mediascreenand（min-width：481px）and（max-width：960px）{
……
}
@mediascreenand（min-width：961px）{
……
}
其中省略号部分为不同屏幕宽度的样式代码。当然需要将传统的像素宽度换算成百分比宽度，以免出现横向滚动。

4.2 图片处理

屏幕宽度决定设计，但是很多图片为了追求很好的视觉效果，通过使用高清或大尺寸，以提高可视面积，但是在小的屏幕上浏览起来却十分麻烦。针对这一问题，我们可以将一些图片以背景方式加载到页面，然后在不同的屏幕宽度下，选择加载不同的缩放比例，或缩放或裁剪。这种缩放方式一般都是等比例的缩放，所以图片能很好的适应屏幕大小，同时也能很好的满足横竖屏的切换。如果屏幕过小或过大，可以使用JQuery加载缩微图片或高清图片，以满足用户需要。

4.3 视频处理

由于视频的处理方式与图片不同，在线视频本身控制着播放界面的尺寸，即使我们改变了它的宽度也不能很好的去适应高度。所以一般对于在线播放的视频，在一定宽度之上（譬如480px以上）的屏幕上，固定其尺寸，在一定宽度（譬如480px以下），设定其“max-width：100%；”值，从而在一定程度保证其浏览体验。
综上所述，多屏时代已经到来，WebUI设计必将面临新的挑战，多屏合一给页面设计提出了很多新的要求，使用HTML5等一些列新技术和新的设计方式也必将能给PC的Web用户和移动的Web用户提供更好的视觉体验。
参考文献：
SteveFulton，JeffFulton.HTML5Canvas开发详解[M].任旻，译.北京：人民邮电出版社，2013.
TimKadlec.响应式Web设计实践[M].侯鸿儒，译.北京：人民邮电出版社，2013.