谈设计与技术，以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篇跟设计语言相关的文章：
设计师会编程、程序员懂艺术：Semi Flat Design
谷歌的 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 当然，还有资深的专家在星球里。
*
热门文章
*
关于公众号：
本公众号定期更新人工智能&设计&科技内容。
谈点设计，敲点代码，偶尔创作点人工智能实验产品。
码字不易，开启新的打赏方式：