响应式布局的分析与思考

响应式布局就是根据屏幕宽度，自动调整网页显示和布局，以适应不同尺寸屏幕优化浏览体验。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，随着移动设备的普及，越来越多的设计采用这种技术，保持体验的一致。

• 如何在跨设备的情况下保持体验一致呢？

1 、视觉一致性 

从表面上看，视觉一致性，确保网站保持其个性和基调

相同的颜色、图形、搭配、语调等，有助于创造熟悉的体验

2、灵活的布局

有利于模块的挤压拉伸、换行平铺、增加删减、位置变换。

页面整体原则上也尽可能保持简单轻巧，否则会影响整体体验和页面性能。

这也使得卡片网页设计成为流行设计选择的最大原因之一

它们与响应框架的兼容性，不仅是可消化的数据块非常适合大多数移动用户场景矩形美学也适用于用户界面设计本身。

3、每个设备不能都一样

但菜单、搜索功能和按键相对位置，动作调用(如登录)应该跨设备匹配。

作者/版权所有者：Muhammad Rafizeldi ..版权和许可：CC BY-SA 3.0

• 首先来梳理一下网页的排版布局有哪些？

响应式网页使用的大多数布局可以归为以下五种模式：

1 流体（mostly fluid）

大部分为流体的模式主要由流体网格组成。在大屏幕或中型屏幕上，它通常保持不变，只需在宽屏幕上调整边距即可。

在较小的屏幕上，流体柱会导致主要内容物回流。这种模式的一个主要优点是它通常只需要在小屏幕和大屏幕之间建立一个断点即可。

例如：营销网站、电子商务网站、新闻网站

2 减少列

对于多列布局，当窗口宽度对于内容而言太窄时，减少列只是将列垂直堆叠。

最终，这导致所有列都垂直堆叠。为此布局模式选择断点取决于每个设计的内容和更改。

3 布局移位

布局移位模式是响应最快的模式，在多个屏幕宽度上具有多个断点。

这种布局的关键是内容的移动方式，而不是在其他列中进行重排和放下。由于每个主要断点之间存在显着差异，因此维护起来更加复杂，并且可能涉及元素内的更改，而不仅仅是整个内容布局。

4 细微调整

微小的调整只会对布局进行少量更改，例如调整字体大小、调整图像大小或以非常小的方式移动内容。

它适用于单列布局，例如一页线性网站和大量文本文章。

5 脱离画布

脱离模式不是在垂直方向上堆叠内容，而是将不常使用的内容（可能是导航或应用程序菜单）放置在屏幕外，仅在屏幕尺寸足够大时显示它，而在较小的屏幕上，只需单击或滑动即可显示内容。

在某些情况下，页面可能使用多种模式的组合。

• 布局如何在不同设备中进行改变呢？

以sketch为例，里面有关于响应式布局预设设备的尺寸，这些预设可以是你设计断点的选择。

• 断点是什么呢？

为了在不同尺寸上呈现良好的排版，在不同装置上考虑不同的样子。

在网页缩放的时候，有个良好的呈现

为什么是这些大小呢？

（目前中国互联网的主流分辨率为1920X1080px）

为什么后台的数据跟sketch的不一样呢？

具体断点该如何选择呢？

结合Material Design，考虑自己的设计在什么尺寸下会有更好的排版方式来决定断点，或者查看后台数据，跟工程师沟通好你的排版断点。

苹果设备屏幕截图尺寸和分辨率

• 该从哪个尺寸开始设计呢？

在考虑设计一个网页时候，应该要优先考虑其在移动端的呈现方式；

移动优先=内容优先

屏幕的尺寸迫使你对内容进行优先排列，导致了更关系内容，也更关心用户。

网站的核心是内容。

另一个优点是

屏幕断点可以更好的适应内容

当你从最小的界面布局到最大界面时，一步步加上页面的次要元素

举个栗子:

极客公园

总结响应式布局设计流程：

1 确定自己设计的布局模式

2 根据版式设置自己设计需要哪几个断点

3 与工程师确定最终尺寸

参考链接：

https://material.io/design/layout/responsive-layout-grid.html#breakpoints