谈设计与技术，以WEB布局为例

本文基于“跨界”思维，以 WEB 布局为例，从3个方面，谈谈设计与技术的关系：

1 自适应布局与响应式布局

2 CSS 的布局特性演进

3 设计语言与 WEB 前端框架

1 

自适应布局与响应式布局

从早些年，由于显示器的尺寸变化较少， WEB 布局大部分都采用自适应布局，即宽度自适应，宽度采用百分比的方式进行设置。到后来，由于终端设备的分辨率的丰富， PC 端、移动端的同时需要兼顾，于是产生了根据屏幕分辨率进行动态布局的自适应布局。

自适应布局，设计师基于相对宽度进行设计，所有的元素考虑的是各自在宽度上的比例关系。在建筑设计领域，相当于推敲形体的比例关系。一个形体的比例是否和谐，往往是决定了其是否优美的主要因素。

在 WEB 布局，设计师其实在考虑各种元素的比例尺度关系，而不是聚焦在某个元素具体多高，多宽。

“ 

设计考虑的是布局的比例尺度，而技术考虑的是通过百分比 % ，em ，rem 等技术实现动态计算尺寸的目的。

”

我们继续思考，响应式布局 Responsive design ，目的是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。 WEB 技术上，通过设置 Meta 标签，告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。然后搭配使用媒介查询 Media Queries 来设置样式。

Media Queries  是响应式设计的核心。假如一个终端的分辨率小于 560px，可以这样写：

@media screen and (max-width: 560px) {  #main { … }  #other { … } }

也可以写成：

<link rel="stylesheet" media="screen and (max-width: 560px)" href="main.css" />

其他更详细的配置参数，可以查阅 Media Queries 的相关文档了解。这里以图片缩放的方法为例，在 css3 中，任何元素都可以使用 content 属性。结合 css3 的 attr 属性和 HTML 自定义属性的功能，图片缩放的实现更加简便。

HTML 代码：

<img src="img.jpg"     data-src-480px="img-480px.jpg"     data-src-600px="img-600px.jpg"     >

CSS 代码 ：

@media (min-device-width:480px) {    img[data-src-480px] {        content: attr(data-src-480px, url);    } } @media (min-device-width:600px) {    img[data-src-600px] {        content: attr(data-src-600px, url);    } }

WEB 技术提供了 Media Queries ，类似于一个“分类器”，支持设置不同分辨率的“类”，定义对应的 css 样式，浏览器自动根据窗口的分辨率，调用对应的“类”，达到响应式的布局效果。而这时的设计，更多地考虑如何基于“设计的基类”，进行不同分辨率媒介的拓展应用，简单理解为分辨率如何拆分，应该设计几种分辨率的样式，各自的样式如何变化。

举个例子，这个过程类似于 VI 设计，先考虑品牌的定位，确定其 LOGO 、字体、标准色（上文提到的“设计的基类”），然后应用到不同的媒介上（可以理解为“不同的分辨率设备”），比如名片、信纸、信封、公文袋、合同封面、纸杯、办公用笔、工牌、海报风格、 PPT 幻灯片风格、业务用车等等。

再如，景观设计中，土人设计的红飘带，基本的“设计基类”是红色的曲线矮墙，应用到不同的空间中，变换为坐凳、种植池、平台、雕塑、栏杆、挡墙等等。

“ 

设计关注的是设计的核心基类是什么？在不同分辨率下如何变幻，而技术考虑的是如何提供一个分辨率分类器，根据分辨率调用其风格。

”

2 

CSS的布局特性演进

目前，CSS 可控制的维度，有3种：

一维横向 Float

一维横向-纵向 Flex

二维 Grid

如果你对 Flex 及 Grid 还不是很理解，可以动手实践下，深刻理解 Flex 与 Grid 布局。

HTML 代码：

<div class="container">   
    <div class=“item"></div>
    <div class=“item"></div>
    <div class=“item"></div>
    <div class=“item"></div>
    <div class=“item"></div>
    <div class="item"></div>
</div>

2.1 浮动 Float

这个简单实验下就行。

2.2 弹性盒子 Flex

Flexbox 布局算法基于水平或垂直的块或行内元素来布局。把父级元素的 style 的 display 设为 flex ，即可开启 flex 布局方式。

flex-direction 可以设置主轴方向。决定 item 元素的排列方向，有横向 row 和纵向 column 两种。

多行排列可以通过设置 flex-wrap: wrap; 来实现。这个时候有点像在 item 元素上设置 float:left 。

2.3 二维布局 Grid

父级元素设置 display:grid ，先把 item 的 width 取消，看下效果，grid 的默认效果是纵向单列的布局方式。

再设置下2个属性：

grid-template-rows: 74px 141px 98px; grid-template-columns: 107px 101px 28px;

grid 布局的跨行跨列，在第一个 item 里加下以下属性：

grid-row-start: 1; grid-row-end: 4;

从 CSS 的技术演进，我们可以看到：

“ 

技术的演进，不断为设计师提供更多、更灵活的设计方式。当设计实践积累到一定程度，会有更多自由度的要求，促使技术的迭代、演进。 

”

3 

设计语言与WEB前端框架

曾经写过2篇跟设计语言相关的文章：

谷歌的 Material Design 强调的是给2维的 WEB 增加第三个维度的关系，赋予光影及无力特性。微软的 Fluent Design 则演进了 Material Design ，赋予更多的光感、材质、动效等特性。但它们都没有对布局提出明确的思考。这里以 Ant Design 为例，总结一些布局方面的思考。 Ant Design 受到建筑界大师柯布西耶的模度思想的启发，基于“ 秩序之美 ”的原则，提出了动态、体系化的布局方式。

3.1 基于一个画板尺寸进行设计

简化了设计过程，设计只需集中精力考虑一个尺寸的情况，其他交由设计系统来生成。

3.2 适配方案

左右布局，左边固定，右边动态缩放；上下布局，两边设定最小值，中间区域动态缩放；还有许多适配方案，总体的思路是：

3.2.1 变与不变

类似于 CSS 中的 width 的设置可以是确定的值，也可以是 auto ，甚至百分比。

3.2.2 变化中的限制

比如动态缩放中，最小值的设定。类似于 CSS 里 width ，我们可以设置 min-width 。

3.3 栅格体系（网格体系）

这里引用 Ant Design 的官方说明：“ 对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格 ”。

通过设计原则的提炼、梳理，设计师更多的思考设计的本质“基于固定尺寸的画板进行设计”，“设计的可变与不变”、“变化中的限制”、“关于尺寸的网格体系”。而技术根据设计的原则，进行实现。

从 Ant Design 的实现，我觉得：

“ 

技术实现了更好的设计，设计传达了技术

 ”

以上，是一些关于设计与技术的思考：

“ 设计思维模式跟技术实现的情况密切相关，设计的自由度要求技术不断演进，技术为更好的设计提供了基础，同时，设计传达了技术价值。”

*

知识星球

包括：

1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球;

2 我会在知识星球发一些非常机密的研究心得;

3 一些非常有技巧的知识，给付费用户;

4 公众号的迭代版本，针对文章发更为升级、核心的内容。

5 当然，还有资深的专家在星球里。

*

热门文章

*

关于公众号：

本公众号定期更新人工智能&设计&科技内容。

谈点设计，敲点代码，偶尔创作点人工智能实验产品。

码字不易，开启新的打赏方式：