1响应式设计简介

我们提供的服务有：网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、禄劝ssl等。为上1000+企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的禄劝网站制作公司

1.1 响应式的起源

2010 年 5 月，Rthan Marcotte 就在“A List Apart”发表了一篇叫做“Responsive Web Design”（响应式网页设计）的文章，提出了响应式网页设计的理念。 响应式网页设计来源于建筑界的设计理念，即响应式建筑，它是指某个空间的大小会根据内部的人员的数量和流动的速度而自动调整。把这种设计思路运用到网页中来，也有异曲同工之妙。快速增长而且日趋多样化的可联网设备的产生，使得广义的屏幕标准尺寸已经不存在，并且屏幕尺寸也在不断变化以满足人们的需求；严格定义的响应式一般是指响应式 Web 设计， 而 Web 凭借其特有的灵活性和可塑性，可以适应各种尺寸和配置的设备，它可以无处不在。响应式设计概念一提出，各大网站及平台都希望能够采用这秉一应万的模式，可以更灵活地去适配更多设备，尤其是在移动设备大爆棚的时代。

1.2 响应式的发展情况

2013 年 TNW 发布了 10 大网页设计趋势排行， 其中排名第一的为响应式布局，即一个网站适配多种屏幕。 其实早在 2012 年我们就看到一些新的设计趋势出现在 Web 设计领域，特别是响应式网页设计。

国内的响应式发展情况比国外落后很多，在国外的响应式网站很盛行的时候，我国才后知后觉的其优势。 响应式网站在 2013 年才为我国的少数人所知晓，此时，国外的响应式技术已经进入成熟期，不仅小型的商务公司采用响应式设计，很多大公司也在探索在他们的网站采用响应式网页设计。 2013 年底苹果公司的一份调查问卷显示，国外智能手机的覆盖率已经为 80%, 而同年，Google 的智能手机使用调查报告上显示，中国城市的智能手机的普及率为 47%. 而智能手机的普及推动了响应式技术的发展，由此可见，智能手机的普及度也是我国响应式网站发展缓慢的原因。

2用户行为分析

研究用户行为，是因为我们的产品是要为用户服务的。 以用户为中心的设计能给用户更好的体验， 让用户对开发出来的产品产生好感，进而购买我们的产品。设计与生产就是为了出售，而客户就是推动生产与创新的力量，因此，在开发产品的每个阶段，都要把用户考虑在其中。

2.1 设备的多样式

生活中，很多人一天会用三种设备上网。外出时使用手机上网，在室内用电脑上网，而睡前用平板获取信息。 这三种设备的屏幕各不相同，分辨率从 320 像素到 1920 像素不等。 现代家庭中，数字电视也开始普遍，也就是说，有一部分人除了用手机、平板和电脑上网之外，还会使用数字电视，另外还有一部分人用可穿戴设备上网，而同一种设备还有不同的大小型号。 由此可见，现如今的网站比之前的任何时候都更需要能够在不同的设备上适用，而每一种设备又都是功能与被限制的关系产物。

2.2 使用环境与网速的关系

用户在家时，时间比较充裕，最可能使用电脑或平板上网，有些人还会使用数字电视，此时网络连接一般为宽带或 WIFI,网络流畅，速度较快，不在乎浏览网页时所花的流量多少，也会增加页面的等待时间；用户在户外时，所在的地方有公交车上、开车中、行走中、商场或者等待中，此时的用户时间都是碎片化的，而且网速较慢，时间匆忙，用户很容易失去耐心。

3响应式网站的优点

3.1 一个站点适应所有屏幕

在国内，很多大型网站，财力比较充足，所以会为 pc 端和移动端各建立一个站点，方便在各个端口实现最好的页面效果。 然而时代在发展， 各种的设备的种类越来越多， 屏幕分辨率也各不相同。 随着Google 眼镜的推出，Apple Watch 的成功发布，可穿戴设备离我们越来越近，这也说明，今后会有更多我们闻所未闻的设备接踵而来，并且这些设备将会越来越普及。 面对如此多的设备，我们的网站应该如何去适应各个不同设备的端口？解决这个问题的最好方法是建立一个可以适应各种屏幕的站点，这种站点就是响应式网站，不仅解决了需要建立多个站点的问题，而且在各个站点都能最好地展示页面效果。

3.2 提升用户体验

当你浏览网站时，你会发现很多网站在 pc 端是如此的完美，但是到了移动端却是惨不忍睹。 例如在国外的 copyblogger 的博客有提到过一个很经典的案例---迪士尼公司的网站，他说在迪士尼网站中有许多给小朋友玩的网页游戏，但是这些游戏却只能在 pc 端玩，在移动端是无法打开的。 而响应式网站却能够让你无论在 pc 端还是移动端都能体验到良好的视觉效果。

4响应式在伯乐相马网站的应用

4.1 响应式导航的设计方式

响应式导航常见的设计模式有 7 种，分别是：置顶、页脚锚点、置底、菜单选择、侧滑、开关和彻底隐藏。在伯乐相马网中，主要采用的是菜单选择，菜单选择是将导航收纳在一个选择菜单的控件当中的方法。 减少了导航所占用的屏幕空间。 选择菜单选择的原因如下：

在移动设备中，空间资源非常有限，因此移动端的导航不能像 pc端那样直接显示，需要将导航整合在一起。 置顶虽是简单的导航实现方式，但是在移动端会造成不好的视觉效果；对于页脚锚点和和置底来说，都是将导航放在页脚，对于一个求职网站来说需要的是快速寻找所需的信息，而这种方法增加了用户的使用成本；开关的导航方式，是用户点击后菜单才滑动展开，但菜单的设置区域是固定的，用户需要寻找才能发现，增加用户的使用成本；彻底隐藏也同样增加了用户成本。

4.2 响应式网页的布局

基于响应式网页的布局，有人曾经这样形容：倒入杯中的水的形状由装它的容器形状决定。 网页设计也可以把这个概念融入其中，网页的展示形式取决于展示它的设备屏幕尺寸。页面常用的布局方式有固定布局、流动布局、弹性布局和混合布局。响应式网站中一般采用后三种，选择合适的方式才是最好的，并没有哪一种布局方式是最好的。可以多种方式混合使用，取长补短。通栏、等分结构的适合采用弹性布局方式、 而对于非等分的多栏结构往往需要采用混合布局的实现方式。

4.3 设计模式

设计模式主要有两种：基于设备和内容优先，早先年间很多网页采用基于设备的模式，因为当时屏幕种类较少，且有标准屏幕之说。如今，标准屏幕已经不复存在。 因此，内容优先是一种不错的选择。 在伯乐相马网中采用的是内容优先的方式，因为对于一个信息类的网站而言，可读性和移动性至关重要。

4.3.1 基于设备

通过主流设备的类型及尺寸来确定布局断点（Break point），设计多套样式，再分别投射到相应的设备。 不要使用流行的设备尺寸来确定断点。 该设备的屏幕（Device Landscape）是不断在变化的，所以使用流行设备的尺寸作为断点， 他的实际价值存在的意义可能没有什么，甚至一年的时间都坚持不到。 Web 本质是流动的，因此我们的工作是在任何屏幕上创建外观、功能等。

4.3.2 内容优先

根据内容的可读性、易读性作为确定断点（Break point）的标准，即在对内容进行布局设计的时候，可以无视设备，由内容决定何时需要采用不同的呈现方式。 这种方式和未来友好型是相契合。

4.4 响应式网页的字体

字体对于一个网站来说，起着至关重要的作用，不单是画风影响风格，字体也会影响风格，响应式网站的字体尺寸会随着屏幕尺寸而不断调节，展现最适合人类视觉的界面。

4.4.1 字体大小

从 2006 年开始有人开始推荐了“透视化比例”字体尺寸。 正文字体尺寸可以通过透视窍门来评估，而行高需要一些调整。 随着更远的阅读距离和更多的像素污点，给屏幕上的文字比印刷的更大一点的行高是比较好的方式。140%是一个好的参照。 调整字体尺寸不是一个关于兴趣的问题，是一个阅读距离的问题。 相当一部分的网站会选择小字体，想用这种方法让人觉得此网站做工很精细，大部分用户也会按照这个字体大小去阅读，到后面也会习惯了。

4.4.2 字体边界

字体跟边界的距离很有讲究，在响应式网站中，不同屏幕尺寸中的边界也是不一样的，符合人类的观看视觉，才会让读者觉得舒服，如若处理不当，就会让用户觉得太窄，空间不够用，太挤或太宽，存在感小，视觉上出现不适，就不想再看下去了。 所以每次变换屏幕的时候，边界尺寸也需要调整。