谈设计与技术,以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 属性。结合 css3attr 属性和 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

如果你对 FlexGrid 还不是很理解,可以动手实践下,深刻理解 FlexGrid 布局。

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 布局算法基于水平或垂直的块或行内元素来布局。把父级元素的 styledisplay 设为 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 变化中的限制

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

3.3 栅格体系(网格体系)

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

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

Ant Design 的实现,我觉得:

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

以上,是一些关于设计与技术的思考:

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

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2018-03-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

UX 设计之——商品详情页

现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能...

2986
来自专栏BestSDK

如何为App图标挑选合适的颜色

image.png 在之前我已经研究过了从app描述、截图、名称到国家/地区的所有东西。最能勾起我兴趣的是app的图标,但苦于不知如何去对此进行有效的研究。 ...

2579
来自专栏九彩拼盘的叨叨叨

前端学习

前端主要包括 HTML,CSS,JavaScript。开始的时候,可以看熟悉下基本概念

934
来自专栏互联网杂技

用微妙动效改善用户体验的简单方法

应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧...

2997
来自专栏CDA数据分析师

【图表大师一】如何让Excel图表更具“商务气质”?

如何让Excel图表更具“商务气质”? 文/ExcelPro的图表博客 这是去年底的时候,应《电脑爱好者》杂志约稿写的一篇小文,内容大致是《图表之道》第1章的略...

2518
来自专栏HTML5学堂

1分钟读懂HTML5技术

HTML5学堂:如何来理解HTML5技术是什么呢?我们从几个角度进行阐述,分别是狭义上的HTML5(就技术来讨论技术)、广义上的HTML5(平时技术会议、聊天时...

3498
来自专栏知晓程序

为什么小程序能适配不同机型?因为微信做了这个

1443
来自专栏姬小光

写给设计师的移动页面适配小知识

话说从设计稿到前端页面实现,是产品流程中非常重要的一环,这个阶段决定了设计师设计的设计稿能否完美地变成真正的产品雏形。废话不多说,本文主要介绍以下三块内容:移动...

1072
来自专栏HTML5学堂

无技术基础 看懂HTML5

HTML5学堂:如果你对C语言、网站制作等技术没有什么了解,你可以查看这篇文章。无论你是唱歌的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。只要你平时...

44711
来自专栏姬小光

普通程序员如何培养设计感?

你好,我是姬小光。如果你订阅这个号比较早,可能会看过我的《像素眼是怎样炼成的》。那篇文章主要是教你如何“找茬”,即如何发现设计稿或者网页上的不足之处。那么何为不...

1371

扫码关注云+社区