多屏时代下WebUI设计探究.docxVIP

多屏时代下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） 技术，实现多屏显示的差异支持。我们可以在页面中添加如 下代码: 以上代码表示当我们屏幕分辨率宽度最大为480像素 时，加载link, css外部样式文件。 3. 5 使用 JQuery 或者 Javascript 早期的IE不支持MediaQuery技术，通过JQuery或 Javascript去处理，虽然JQuery本质上就是Javascript技 术，但是其对Javascript进一步封装，使Javascript得学 习和开发成本大大降低。通过JQuery可以判断出IE的版本, 从而加载不同的外部样式表。步骤如下： 第一，导入JQuery库。 第二，使用JQuery方法处理加载样式表。 其中IE7. css为针对IE7浏览器设计的样式表。 4常见场景举例 4. 1多栏处理 不同屏幕尺寸大小不一，所以需要事先为各种大小尺寸 的屏幕做好设计准备。在电脑上，往往很大的宽屏显示器， 可以显示多栏(3-4栏)，但是当用户切换到移动手持设备上 多栏就显得很挤，所以不得不变成单栏或两栏。一般来说我 们往往以480px、960px宽度为界对屏幕进行分类，划分为3 类：小于或等于480px为一类；大于480px并且小于等于 960px为一类；大于960px为一类。所以使用MediaQuery技 术，可以写出如下样式代码： @mediascreenand (max-width： 480px) { } @mediascreenand (min-width： 481px) and (max-width： 960px) { @mediascreenand (min-width： 961px) { 其中省略号部分为不同屏幕宽度的样式代码。当然需要 将传统的像素宽度换算成百分比宽度，以免出现横向滚动。 4.