页面响应式设计

1.响应式布局

一个网站能够兼容多个终端(指不同分辨率，不同 Dpi 的显示设备)，而不是为每一个终端做一个特定的版本，这样的网站布局方式即称为响应式布局。

响应式布局结合多种布局方式，从而确保一个页面能够适应不同终端的显示。

常见的动态布局方式：

（1）自适应布局是指当视口分辨率改变时，页面的元素位置会自动调整以适应视口的布局方式。

（2）流式布局是指当视口分辨率改变时，页面元素的宽度根据百分比压缩，而高度自动调整的布局方式。

（3）弹性布局是指当视口分辨率改变时，页面元素按比例缩放从而适应视口的布局方式。

（4）响应式布局综合了多种动态布局，使得页面在不同分辨率的视口可以呈现出不同的布局。

2. 媒体查询

媒体查询是 CSS3(Cascading Style Sheet：层叠样式表)新增的特性。媒体查询使得样式表可以根据不同的媒体、不同的视口尺寸定义不同的样式。这种新特性对于设计响应式页面是非常有意义的。媒体查询可设置 max-width 或者 min-width 来响应不同的屏幕尺寸，但在大多数设计中，都是以移动设备为主，从小到大来设计，即前端在书写代码时以 min-width 来做为开始，从小到大写。

2.1 栅格系统

这里说的网格系统当然不是排版布局中用到的栅格网格，而是响应式布局中用来控制列宽和列数的流式网格系统，其特点是随着视口尺寸的变化，网格的列宽和列数会有不同变化，以适应不同尺寸的视口。

以 Bootstrap 的网格系统为例，讲解响应式布局中网格设计的规范。

一、布局容器

布局容器可以理解为主视图区域，传统的静态布局页面一般会采用 1000px、1100px 或 1200px 等宽度作为容器宽度进行设计。在响应式布局中，一般有两种容器类型：响应式固定宽度容器和全屏宽度容器。

（1）响应式的固定宽度容器：

响应式布局中，由于需要兼容不同宽度的视口，容器显然不能采用固定的尺寸作为宽度。所以，响应式布局所采用的固定宽度容器会根据视口的尺寸而进行调整，常用的规范如下：

(2）全屏宽度容器：

顾名思义，全屏宽度容器就是我们用来设计全屏网站所采用的容器尺寸，它在任何时候，容器宽度都为 100%

二、网格系统

1. 从 bootstrap 的网格系统开始网格系统是响应式设计的核心，通过对界面元素定义不同分辨率下的网格列数，可以实现元素的响应式。网格常见的有 12 列、16 列、24 列，之所以采用这样的数字，是因为，这样的网格可以很好的根据需要均分出 1 列、2 列、3 列、4 列……等适用于多种情况的网格。12 列可分成：1 列、2 列、3 列、4 列、6 列、12 列。16 列可分成：1 列、2 列、4 列、8 列、16 列。24 列……

2.Boostrap 的自适应功能

其实理解栅栏模式之后，自适应功能就简单很多了，根据浏览器的大小，Boostrap 有四种栅栏类名提供使用，用法与 Css 样式表类名选择器样式调用是一样的：

xs：col-xs-1 ~ col-xs-12，多列始终在一行内。

sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于 768px 时才在一行内。

md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于 992px 时才在一行内。

lg：col-lg-1 ~ col-lg-12，多列在浏览器像素宽度大于等于 1200px 时才在一行内。

建议我们 UI 设计时也遵循这样的规范，取消 320 这样超小尺寸，因为我们当前的 bootrap 版本已经没有办法再进行自定义设置。

三、设计优化

我们现有的网站设计存在断层现象，因为我们的设计不是以移动优先的规范来设计的。即我们是从大到小来进行页面设计。这导致前端样式书写困难，bootstrap 自带栅格难以复用。有以下几点建议：

1. 保持一致的顺序

响应式布局由于布局的“善变”，对于内容的设计也不会采用固定的大小和顺序。一般来说，内容是以流的形式进行设计。对于内容流来说，需要遵循从左到右 → 从上到下的变化。

这样设计一是符合现代人的阅读顺序且有利于阅读顺序在不同终端上的一致性；二是更利于快速开发前端页面。对于上图中，错误示范的情况，并非决对不可行，而是一般不建议。这种反常规的顺序，对于开发来说难度增大许多，而且会产生更多冗余代码。

1. 尽量使用 12 列栅格系统。

由于使用的是 bootstrap 框架，bootstrap 是以 12 列为基础，虽然栅格列数是可以动态设置，但是如果现在更改可能会和之前已有代码不兼容。一旦设计其他的列数，就意味着前端开发人员需要自己写这个等分样式或者修改框架的网格系统，降低其效率降低。

1. 减少模块的增减

即便 CSS3 提供了媒体查询和元素的显示隐藏功能，但是我们依然还是尽量的减少通过隐藏模块的方式来向下兼容低分辨率的显示器。因为这样做虽然可以增加用户体验，但是对于流量和代码复杂度都没有任何帮助。这样的响应式布局，即便你把移动端的页面设计得非常非常简洁，那些隐藏起来的部分也仅仅只是隐藏起来了，它依然会被下载到你的移动设备上。

1. 样式统一

同一个模块在不同终端上尽量做到统一样式。毕竟视觉效果更统一的话，品牌感会比较强。对于设计师的你来说，视觉规范更容易写，更容易维护。而对于开发人员，也不用为不同的样式去编写、去维护更多的样式表。而代码越少，加载越快，用户体验也越好。

以下元素应该维持一致：

• 链接或按钮文案
• 字体
• 颜色处理

1. 移动优先。

有没有发现，许多优秀的响应式网站，设计总是那么的简洁大方，对手机等小屏设备的支持总是那么的完美，用户体验好到飞起。因为他们采用的是移动优先的设计原则。移动优先这个词是伴随着响应式而出现的，主要是因为移动端的布局和功能总是比更大的设备简单。而从简单到复杂的过程总是比从复杂到简单的过程容易。而在大屏设备上观看简洁的内容也总是比在小屏设备上观看复杂的内容来得舒服。于是，当我们设计响应式网页的时候，应该考虑从移动端开始，先设计移动端的页面，然后再设计更大的屏幕，往其中增加更复杂的布局和内容，最终实现从移动端到超大屏幕的渐进增强。

响应式网站设计一些规则和小技巧：

1、轮播幻灯片：尽量隐藏导航

  在桌面端上导航的存在可能没什么，但是在移动端上查看的时候，导航还是尽量隐藏起来，需要的时候再显现。而诸如左右切换的按钮和标明浏览位置的圆点，最好是在光标移动上去之后再显示，这样的设计不仅可以避免用户分心，而且能避免内容和导航元素之间的冲突，降低整体设计的混乱感。

  2、在移动端上支持手势操作

  在设计响应式图片库的时候，滑动操作等手势操作赋予用户更多的权力，让体验更加逼真。在移动设备上使用箭头导航太过于乏味、老旧，手势交互更加自然也更符合真实的交互体验。

  3、不要让图片和视频混淆

  通常情况下，不同类型的媒体混到一起没啥问题，但是用户肯定不想翻看图片的时候，突然发现下一张图片变成了视频，突如其来的声音和额外的流量消耗绝对是他们不愿意碰到的事情!将视频和图片分割开来，让他们知道接下来的会是什么东西，不要让意外发生。

  4、确保图片显示尺寸不要超过原始图片的最大宽度

  这一点很重要，尽管很基础，但是依然需要强调一下。图片尽量不要去填充超过本身尺寸的空间，这样会让图片表现出象素化的失真效果。值得注意的是，很多情况下图片在移动端完全填满某个区块没问题，但是在桌面端的时候，最大也不能超过本身宽度。这似乎并不难?但是依然有许多响应式页面，当你拉宽浏览器界面的时候，会有图片超出本身尺寸来显示。

  5、图片缩放

  如果你的图库中的图片要牵涉到图片缩放，那么尽量让图片去缩小，而不是放大。甚至最好是为图片设定精确的尺寸。通常，图片缩放会使用百分比来控制它的大小变化，如果你个属性被设定为按照百分比来缩放，那么其他的相关属性最好设置为自动。比如将图片宽度设定为50%，那么高度缩放应当设定为自动。

目前的还有几个其他的问题：
website

1. 目前响应式设计，不是按照移动优先规范来实现。
2. 部分页面过渡不够平滑，例如：invest-how-it-works, we're-hiring, support, rental-how-it-works, press
2. banner部分从大到小应该是逐步减少，除非文本折行导致高度增加
3. 一级文本颜色 ，二级文本颜色这些样式混乱；黑色字体统一色值；或同步给前端规范标准
4. 左右排版请按照一定百分比，比如：图片4个栅格，文本8个。如果可以 请代为标注出来（在标准中写出来也可以）

webapp

组件库复用性低。发现样式没有统一，总是存在差异。