BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

什么是响应式Web设计?怎样进行?: Page 4 of 4

什么是响应式Web设计?怎样进行?

显示或隐藏内容

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

responsive-web-design-digg-app

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

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

display: none;

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

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

responsive-web-design-content

图中上半部分是大屏幕设备所显示的完整页面,下面的则是该页面在小屏幕设备的呈现方式。页面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;}

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

触屏与鼠标

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

responsive-web-design-touchscreen

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

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

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (47)
关于这篇译文在语法方面的建议。“安静的窝在家里做做博客、学做些新东西”与“响应式的做到元素的同比缩放、布局结构的改变、内容的优化调整”中,“安静的”和“响应式的”都应该是副词,译文翻译为形容词,这好比英文中,adj.与adv.混用了。个人愚见,谢谢。
在其他网站看到你的文章,发现其中portrait和landscape与你原文翻译的相反,portrait很明显是竖屏,landscape明显是横屏,为什么会这样,转载的文章会对原文进行了修改,这对原创是一种影响。
博主感觉web后台应该学习什么呢?预测一下主流后台是PHP还是Node.js??
博主,做web响应式设计的时候作为设计师应该注意哪些,目前查到的多是和前端相关的。。求指教
今天遇到这个问题了 一下 就搜到这篇了 博主 我要怎么感谢你:P
有用就好:)
感谢分享
谢谢支持
文章不错,楼主搞得很细,让我知道响应式一些知识主干
有用就好:)
写的很好。图文并茂。容易理解。
写的内容相当不错 很受用。。。。
有用就好,多交流:)
博主很强大~~学习了。
过奖,多交流的:)
最近正在做html5的手机端页面,这篇文章很有用啊
有用就好=)
难得好文章,感谢翻译,分享~
谢谢支持
响应式设计确实很好,但是如果兼容各种平台工作量相当之大,而且庞大的CSS代码也是累赘,而且还没得测试!如何保证做出来的页面能够完美的兼容?
hi,我个人觉得所谓响应式设计,本身就是一种折中性质的方案,要考虑和权衡的方面很多;所以通过这样的方式寻求完美恐怕也不是很合乎实际,特别是您提到的这种很现实的问题。不能算是很到位的回答,抱歉=P
其实我也不是否定这种响应式设计的方案。这种方案做出来的效果确实非常OK,只不过结合实际应用的话确实有一定的考虑。但是如果某些网站只兼容比如说主流的平台 桌面 iphone ipa Android 如果是这样的话,比起针对每个平台都去做一个独立的版面样式的话 。那果断的这种响应式设计有它的优势。比如说QQ的产品 3G.qq.com 针对N个平台做了N个板式。这种纯属是被这N个平台强奸了自己的劳动力,你说的也对 “本身就是一种折中性质的方案,要考虑和权衡的方面很多” 毕竟现在没有很完美的的方案来解决,只能在实际应用中自己去权衡。但是有一点是可以肯定的这种响应式设计的肯定在以后会是主流,只不过是时间的问题。个人拙见~还望博主指点。
hi,我理解当中,响应式主要解决的是同一套内容及结构在不同“尺寸”显示设备当中的表现,而不是平台;当然也许您一直用平台这个词其实就是在指设备的显示规格方面的区别。在我看来这种方式只是一种锦上添花的方式而已,它并不等同于Web App这样的概念。比如我自己的这个博客,我知道它在Pad及iPhone当中完全可以通过响应式的方法来改善呈现方式,但是我不是很在意,因为网站本身没达到这种需求程度,而有这类需求的网站产品,可以花些时间针对几种典型的尺寸规格来定义输出样式;也许他需要面对N多平台,但真正需要特别定义的只有3到5种典型尺寸规格。
嗯,其实我说的平台的意思就是指不同设备。可能我没表达清楚我的意思。确实该怎么用,该不该用,需不需要用,等等这些问题都是结合自己本身的需求。作为一个前端,当然我是比较迎合这种响应式设计,我觉得很新颖,很创新。你说的对,它并不等同于Web App这样的概念。只不过是在不同设备中表现的一种设计方法。哈哈。半夜没睡着,爬文呢。BZ的内容都写的不错。以后常来...
重读此文,受益匪浅。
很受益的东西,有空经常过来!
欢迎常来=)
写的很好,受益匪浅。值得收藏的一篇文章。
谢谢支持=) 还望多交流指正的
感谢翻译~~太棒了!!
谢谢 =)
我们正想解决这个问题呢,受益匪浅!
嘿嘿有用就好的
翻译给力!赞!看原文通常都很没耐心看完,看您的译文觉得事半功倍好多!谢谢!
=) 谢谢支持
很受用,如果自己读E文版的肯定很晦涩,翻译的很棒。
谢谢支持,多多交流;翻译方面自己也是玩票,还麻烦多指正的
太棒了,以后天天来学习
欢迎常来,多交流=)
大哥,你的个人站点好多呀。永远支持
被发现了...多谢...你的应酷很赞啊
谢谢分享!
谢谢支持,欢迎常来=)
写得很详细,学了不少。谢谢分享
有用就好,谢谢支持=)
谢谢你的分享,这篇文章确实帮助到了我,谢谢。
谢谢,欢迎常来玩=)