多屏时代下WebUI设计探究

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

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

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

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

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

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

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

8、般都是等比例的缩放，所以图片能很好的适应屏幕大 小，同时也能很好的满足横竖屏的切换。如果屏幕过小或过 大，可以使用jquery加载缩微图片或高清图片，以满足用 户需要。4.3视频处理由于视频的处理方式与图片不同，在线视频播放器本身 控制着播放界面的尺寸，即使我们改变了它的宽度也不能很 好的去适应高度。所以一般对于在线播放的视频，在一定宽 度之上（譬如480px以上）的屏幕上，固定其尺寸，在一定 宽度（譬如480px以下），设定其"max-width： 100%；"值, 从而在一定程度保证其浏览体验。综上所述，多屏时代已经到来，webui设计必将面临新 的挑战，多屏合一给页面设计提出了很多新的要求，使用 html5等一些列新技术和新的设计方式也必将能给pc的web 用户和移动