响应式Web设计的概念(四)

显示或隐藏内容

通过前文的学习，我们已经了解到，对于响应式Web设计，同比例缩减元素尺寸以及调整页面结构布局，是两个重要的方式方法。但是对于页面中的文字内容信息来说，则不能简单的只从"同比缩小"和"调整布局结构"这两方面去处理。对于手机等移动设备来说，在文字内容方面，已经有了很多最佳实践方式和指导原则：简化的导航、更易聚焦的内容、以信息列表代替传统的多行文案内容等。

响应式Web设计的思想，一方面要保证页面元素及布局具有足够的弹性，来兼容各类设备平台和屏幕尺寸；另一方面，则是增强可读性和易用性，帮助用户在任何设备环境中都能更容易的获取最重要的内容信息。

有一条样式代码，我们已经使用了多年：

display: none;

我们可以在一个针对某类小屏幕设备的样式表中使用它来隐藏掉页面中的某些块级元素，也可以使用前文的方法，通过JS判断当前硬件屏幕规格，在小屏幕设备的情况下直接为需要隐藏的元素添加工具类class。比如，对于手机类设备，我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。

注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被输出。对于移动设备来说，避免这些不必要的资源浪费还是很重要的。我们来看一个简单的示例：

图中上半部分是大屏幕设备所显示的完整页面，下面的则是该页面在小屏幕设备的呈现方式。页面HTML代码如下：

<p class="sidebar-nav"><a href="#">Left Sidebar Content</a> | <a href="#">Right Sidebar Content</a></p>
    <div id="content">
  	<h2>Main Content</h2>
  </div>
    <div id="sidebar-left">
  	<h2>A Left Sidebar</h2>
    </div>
    <div id="sidebar-right">
  	<h2>A Right Sidebar</h2>
  </div>

下面是默认的主样式表，其中，我们要隐藏掉链接导航部分(sidebar-nav)，因为默认样式适用的设备屏幕会足够大，足够显示包括两个侧边栏在内的所有内容。

#content{
  	width: 54%;
  	float: left;
  	margin-right: 3%;
  }
    #sidebar-left{
  	width: 20%;
  	float: left;
  	margin-right: 3%;
  }
    #sidebar-right{
  	width: 20%;
  	float: left;
  }
  .sidebar-nav{display: none;}

下面是用于小屏幕移动设备的样式表代码。现在，我们要隐藏掉两个侧边栏，并使sidebar-nav显示出来。借助JavaScript，当用户点击sidebar-nav中的链接时，对应的侧边栏可以恢复显示。当然，触发恢复显示的方式有很多种，即可以通过JS改变侧边栏的display属性值，也可以为其添加额外的布局样式。

#content{
  	width: 100%;
  }
    #sidebar-left{
  	display: none;
  }
    #sidebar-right{
  	display: none;
  }
  .sidebar-nav{display: inline;}

现在，我们的页面已经可以随着设备和屏幕规格的变更，响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整。特别是对于手机设备，我们还要在实践过程中注意一些该类设备共有的设计指导原则。比如，针对手机设备，使用一个特定的样式，将页面原有的文字导航元素变为更易操作的图标形式。下面的一些文章资源可作参考阅读：

Mobile Web Design Trends For 2009

7 Usability Guidelines for Websites on Mobile Devices

触屏与鼠标

触屏设备已经成为主流。虽然目前多数触屏设备还是小屏幕类型的产品，比如手机，但是市场上越来越多的大屏幕设备也开始使用触屏技术；且不说iPad一类的平板电脑，就连一些笔记本和台式机也加入了这一行列。比如HP Touchsmart tm2t，即使用传统的键鼠设备，同时也加入了触屏技术。

相比于传统的基于鼠标指针的互动，触屏技术显然带来了截然不同的交互方式与相应的设计规范；两者又有各自所适用的领域。所幸，要使我们的设计方案同时满足这两类设备的规范，并非一件难事，只是有些地方需要注意。比如，触屏设备无法反映CSS定义的hover行为及相应的样式，因为它没有鼠标指针的概念，手指点击就是click行为。所以不要让任何功能依赖于对hover状态的触发。

有兴趣的话，可以读读这篇"Designing for Touchscreen"，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备；这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。

作者：C7210

文章来源：beforweb.com

 

更多：北京logo设计,网站logo设计,平面广告设计,企业logo设计,北京标志设计,企业vi设计,北京画册设计北京广告公司,北京网站建设