漫谈响应式设计

标签: 网页重构 | 发表时间:2013-12-31 15:22 | 作者:zhongfan
出处:http://ued.sina.com.cn

1. 如何理解响应式设计(RWD)

学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了。这里面,就举了一个例子,我的应答对象就相当于我们要讲的响应式的设备,他必须能够解析我发给他的需求。然后咱们再讲一下设计,设计的官方解释是这样的:

1.设下计谋。
2.根据一定要求﹐对某项工作预先制定图样﹑方案。
3.指搞设计工作的人。

直白的讲,设计其实就是设了一个计,来完成我们的需要的工作目标。

从前面我们讲的响应可以看到,响应是双方的,是互动的过程,在这个过程中我们要考虑双方的承受能力,比如我们总不能让小孩子扛大包。在咱们网页设计方面就是咱们要考虑设备的性能,从网速、Dom 节点数量、屏幕的大小等等,如果我们从前后端结合,对小孩子给糖果,给苦力大包,那样就做到了响应式。

但是,我下面讲的响应式是狭隘的,我们只是从 Web Builder 这一层做到了响应式。

什么是响应式设计

2.响应式设计中的界面设计

响应式设计中的界面设计

对于界面设计,我们以前针对桌面产品的设计可能就是一个尺寸的,每个模块的位置比较固定,但是在响应式设计中,这些东西就改变了,设计师会根据产品的需要设计多个版本的设计,在这些不同的版本中,模块A在1024的宽度下,可能会是黑色背景,但是到了768下面可能会变成白色背景,实现了在不同宽度的不同展现。这里面颜色、背景、宽高等都可改变,但是有一点我们需要注意的是 DOM 节点的顺序最好保持一致,因为在响应式的页面中,我们会使用流式布局,在固定版式通过绝对定位或者外边距负值的方式改变DOM 顺序和视觉顺序的技巧,在这里可能并不适用。

3.针对媒体查询的断点

我们知道,我们通过媒体查询(Media Query)的方式改变网页的布局,我们在哪些宽度下改变布局,也就是我们所称作的断点,我们更习惯的思维是针对某些设备(比如桌面、平板电脑、手机)的数据来设置断点,比如 1024 对应桌面、768对应pad、480 对应手机,但实际上,这些东西是靠不住的,因为这些屏幕尺寸会根据时代的发展不断的变化,我们的响应不应该只针对某些设备,我们需要的是一个区间值,而不是将某一分辨率对应一种设备。断点肯定是需要有的,那这些断点是如何设置的呢?怎么才能不是为了断点而断点呢?实际上,这些断点的设置都是根据内容的需要做的,当我们的内容在达到一个临界点后,视觉效果不符合人们的审美或影响了内容获取时,这就是我们需要的断点。但是我们可能无法在视觉设计的阶段就能覆盖其尺寸区间内容所有状况,这样我们就需要把它和现有的设备相结合确立断点。

因此,个人认为不同的项目,在响应式设计中需要的断点是不一样的。我们知道在媒体查询中有 width 和 device-width 两个特性,因为在手持设备中多数用到的是 webkit 内核的浏览器,我们一般会通过 viewport 的属性,将设备宽度赋予视窗的宽度

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">

这样我们就能根据设备的宽度来对某些设备做媒体查询了。

@media screen and (max-device-width:480px){ selector{ } } 响应式设计中的界面设计

4.交互上的那些不同

在响应式设计中,我们不仅要考虑以前桌面用户的使用习惯,也必须兼顾不同尺寸的手持设备。比如大家在PC上习惯使用的浮层在某些小尺寸的设备上就没法使用了,就像我们下图中看到的。而且一些响应区域小的链接也不方便我们使用手指来操作,因此我们可以做到“求同存异”。比如我们根据屏幕的尺寸,来决定是否使用浮层、或者增大操作区域、或者“整齐划一”。比如在新浪视频项目区别设备来使用浮层,将所有的链接的操作区域做成方便手指操作的大小。

谨慎使用浮层 可触控区域

5. 具体项目开发流程


5-1. 产品策略与信息架构

在我们介入具体项目开发流程前,我们应该已经确认了自己产品所面向的内容消费群体,以及潜在目标用户,比如简单的只面向小屏幕的移动用户群或者我们要囊括所有的显示设备(mobile、pad、pc等等)。

当我们确定目标用户的内容消费习惯的同时,我们应该也对他们的访问习惯、时段等等做一些初步分析。这不仅仅面向一个响应式站点,这对产品定位到开发都有决策作用。

在移动博客项目前期的产品分析中我们能看到,随着时代的前进用户内容的消费习惯也在发生着变化。

订阅发展趋势

而订阅设备的变化是在从PC迅速的向phone、pad进化,所以我们更有必要提高移动设备的阅读体验来提供面向移动用户的响应式站点。

当我们确定了以上的群体以及习惯后我们就要针对这类群体对产品自身做架构调整了。产品架构或者内容架构在不同用户不同设备间影响着内容信息的可用性和可寻性,并且响应式一定会在不同分辨率不同设备上对页面中的模块重新调整,以符合不同模块在不同设备中所符合的优先级

5-2. 响应式产品设计

响应式设计是从产品角度来进行的设计,在这个阶段我们需要产品经理、交互设计师、设计师以及工程师共同介入了。我们需要打破传统的思维模式去思考设计,从纯粹传统的Web向移动应用过度。通过我们第一步明确的信息架构,来从最小显示屏的移动设备做产品设计,在移动设备中抛弃更多的使用干扰,保证核心功能的最优体验;同时交互与设计师的介入处理如何把模块设计的更小更有弹性,并初步确定设计风格、设计框架等方案;而工程师需要在产品经理与设计师确定的方案中进行代码测试,充分利用不同设备独有的特性并进行框架搭建。

5-3. 响应式开发

虽然在上一步我们提到从最小显示屏的移动设备做产品设计,但实际不论是设计师还是工程师都是从最复杂的桌面端开始,把表现最丰富最复杂的功能实现,做减法对结构的改动会适当的减少。

移动博客项目的前期开发其实是一个与产品、交互和设计师边测试边沟通边确认不断循环的过程,因为在不同的设备中内容的呈现及某些特性的支持都不同,有些是与我们的预期有出入的。

对我们页面制作工程师而言,在只有桌面端的时候,我们面向的设计稿是单一的,但是到了响应式设计,这种情况就改变了,虽然说我们可以让设计师根据我们产品的受众总结的屏幕宽度断点给予几个版本的设计稿,但是这些设计稿并不能覆盖我们用户的所有设备情况,比如我们缩放浏览器的时候,从1024到320之间,包含了太多不同分辨率的设备。因此,在此开发过程中我们需要不断的和设计师沟通在设计稿无法覆盖情况下的特殊状况。

在后面的文章中我们会具体介绍在新浪视频项目和移动博客项目开发中我们踩过的坑,以及一些问题的解决方法,敬请期待......

相关 [响应式 设计] 推荐:

响应式网页设计

- - 前端观察
这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下. 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以 先看下这个PPT. 在说到这个话题前,我们先看下网页设计和前端开发的现状:. 全球有超过53亿手机用户(包括传统手机).

响应式Web设计

- - 葵中剑's Blog - SwordAir.com
响应式Web设计( Responsive Web Design – RWD)一般是指那些使用CSS3 Media Query特性制作站点,其可以适应不同视窗尺寸的布局. 虽然很早就已经有了类似RWD的概念,但直到最近一年里才开始变得特别流行,各种文章、例子、工具、模板,不断地从无到有,诸如:. 响应式Web设计50个例子和最佳实践.

响应式网页设计

- - IT技术博客大学习
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案. Web设计应该做到根据不同设备环境自动响应及调整. 当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先.

响应式Web设计

- - 阿里巴巴(中国站)用户体验设计部博客
在设计中经常遇到这几个问题:. 1.想要网站兼容手机、平板电脑、pc,就得为不同的设备定制不同的版本. 2.想要网站的某些页面在宽屏显示器下一行显示更多的内容,又得为宽屏定制一个版本. 3.很多人并不是在全屏的情况下浏览我们的页面,如果让页面随着浏览器宽度改变而相应的调整会不会比较好. 有没有办法能有效解决这些问题呢.

漫谈响应式设计

- - 新浪UED
学究一些,首先大家先了解一下响应,然后再讲一下设计,响应就是我发出的请求能得到什么样子的回复,比如我说“你好”,你会很容易的给我回复“你好”,因为大家都是中国人,如果我说“hello”,我们这代人如果上过初中,他也会给我说“Hello”,但是如果我给对你说“Bonjour”,那可能只有高配的人才可能知道了.

淘宝响应式WebUI设计实践

- - Taobao UED Team
感谢贷岩的邀请,我在本期奶茶会上做了“响应式设计实践”的分享,是接着上一次的话题进一步讨论“如何实现”. 响应式Web设计(Responsive Web design)是当下比较流行的话题,什么是响应式设计. 简单讲,页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整.

Screenqueri.es:响应式设计测试工具

- - 我爱水煮鱼
当你创建一个响应式的布局的时候,在绝大部分流行的分辨率的设备上进行测试是非常重要的,这可以让你决定页面上的每块是否现实或者优化它们的显示方式. 今天给大家介绍的 Screenqueri.es 就是一个免费的基于 Web 的响应式设计的测试工具,它能够让你输入一个网址,然后选择移动或者平板设备,然后对你的网站在各个分辨率下进行测试.

非响应式设计的viewport

- - 前端观察
整理自: Viewport Meta Tag For Non-Responsive Design. 中文原文: 非响应式设计的viewport. 请尊重版权,转载请注明来源,多谢~~. 大家已经非常熟悉 响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化.

响应式设计简易指南

- - Jing
我们想让我们的网站通过响应用户的行为、设备的屏幕大小和屏幕方向,从而在所有设备上都能用. 截止2013年,有成千上万种不同的设备在浏览网页,所以我们不可能设计出适应所有屏幕大小的网页. 相反,我们必须得采用一种更加流畅的方式去设计. 最近一个比较火的词叫移动优先. 它的意思是,先为移动端设计样式,然后再根据需求去优化更大屏幕的样式.

响应式网页设计示例

- - CSDN博客推荐文章
若要全方位测试你自己或别人的响应式网站,则需要针对每一种设备和不同的屏幕尺寸,分别准备不同的测试系统. 尽管这是最完美的办法,但通过改变浏览器窗口大小其实就可以完成大多数测试. 除此之外,还有很多第三方插件和浏览器扩展可供选择,通过它们可以将当前浏览器窗口或视口设定为指定像素. 必要时,还可以自动将当前浏览器窗口或视口切换成为默认大小(如1024×768像素).