流体拆解

这篇文章写完后可能会停下很长的时间，我肯定不会说我要去考研。好了，前言到此，进入正题。

流体：解释下来就是流动的形体，我们先思考自然界中的流体，生活中的流体，以及工作中看到的流体，脑海里应该是怎么个样子。我想可以用这么几个字简洁的说明，不规则、流畅、不断变化、舒适等。这应该就是流体带来的感受。

拆解分类

拆解1: UI中的流体

拆解2: 图形中的流体

拆解3: 字体中的流体

拆解4: 摄影中的流体

拆解5: 平面中的流体

拆解6: 流体的表现形式

拆解1： UI中的流体

可能这里会有人疑问，界面不都是排版么，哪里还存在流体的概念。对，就是因为排版创造出了流体，排版中的各元素是有连续性的，他们组成的正负型在无意间创造出了流体视觉，显得整个排版具有流体带来的感受。在我们的手机界面中还有一个点会有流体视觉，那就是banner位置。这个位置也是可以创造视觉的点。

格式塔的一些表现形式

如何查看UI中的流体？

首先我先说明一下为什么UI中存在流体。这里要引入格式塔心理的概念，经过相关原理的研究人员在研究中发现人类视觉是整体的，我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。简单来说就是我们的视觉系统强烈倾向于看到完整的物体（具体的设计应用可以了解“影余百味” https://baijiahao.baidu.com/s?id=1619604070075844443&wfr=spider&for=pc 的这篇文章）好了我们了解这个概念，回看界面当中，一个复杂的页面存在很多元素，但视觉会把能整合的都整合成一个物体，这个物体就可能是流体，这就是UI中的流体。

界面流体的意义

界面流体的意义不只是在美观层度上满足用户，在阅读体验上也给用户带来更多的趣味和可读性，其实我觉得可以拿音乐来解释，如果只是同一音阶发声，那就不能称为音乐，那是声音。音乐是不固定的音阶而组成的，所以它是可以带来趣味的。界面的流体也是如此，不同的阅读长度和宽度带来更加丰富的视觉。这点也可以帮助初学设计师提供一定的设计方向。

界面中的格式塔

Banner的流体

banner是界面常见视觉点，主要能用到的流体点可能就是背景了，现商业的banner常常用到流体的背景图形。还有个点就是banner中的一些漂浮的元素也可以用到流体。

流体在banner中作为背景时

流体在banner中作为漂浮元素时

拆解2: 图形中的流体

在工作中涉及到的图形设计中可以归为LOGO的图形设计，图标的图形设计，控件的图形设计。怎么将流体运用到这些图形设计当中去？我们接下来可以进一步分析拆解。

LOGO的流体表现

LOGO图形

logo图形设计的时候常常会根据产品的名字表达的含义，字母进行创造和融合，但往往含义，字母的视觉表达都不是流体形状的，这时加入流体性质，设计含义和字母便很好的将图形丰富出来。流动感的logo能代表自由，创新，科技等，所以可以将这些特性融入到产品特性中去。

功能性ICON

功能性图标注重简化且表达完整和美观，流体可以很好的打造这一些，因为流体的设计本身就自带美观，在简化和表达完整融合上流体也能更好的链接起来。为了和常规图标做区分也可以加入流体，我的第一篇文章图标创意拆解里面就有提到流体，那是一个微信的爱心图标，但融入彩带般的流体后将简单的爱心图标丰富了起来，也通过彩带的含义表达了公益的精神，经典。

l

常规图标和流体图标的不同

控件

一般常见用到流体的控件有数据控件，比如弧线型的数据界面，弧线的流体，一般这种流体的制作上都是横切来制作，这样的弧线最为平滑合适，不会有别扭的拐角。

控件中的流体

拆解3: 字体中的流体

字体设计其实有很多可以操作的点，像笔画的拆分重组、字重的偏移、笔画的设计方法、字与字之间的创意等等都是可操作的点。我们可以在这些可操作的点中加入流体的特点，使流体融入到字体设计当中去，成为字体中的流体设计。

笔画中的流体

在中文笔画中其实就是点、横、竖、撇、捺、五种，毛笔字的笔画很好的展现了流体的设计，使每个笔画都充溺着流体的特性。还有就是一些卡通字的笔画也是流体设计。但是圆体的笔画是不算流体的，圆体的弯曲是机械性的弯曲，只能称为是具有圆头的常规几何。

毛笔笔画

毛笔字体

字与字之间的流体

在营销类字体设计中偶尔会看到字与字之间的创意，比如说连体，两个字可能因为一个笔画连在了一起，这时这个连体点就可以加入流体的设计上去。还比如嵌接，两个字之间没有连体，但是连个字会有相同的缝合点，那缝合点就可以采取流体的方式缝合。

连体字之间的流体

整字的流体

其实这个很好理解，就是整个字的设计具有流体感，是从整个字的方向去看，他是流动感的图形，就好像印在一面旗子上的字体，因为被风吹了，使得这个字体跟着这面旗帜流动。

整字流体的表现

拆解4： 摄影中的流体

摄影这块其实是设计偏门的分支，讲这一块也是为了更全面的理解诠释流体在设计各大类当中的运用。一张照片的信息丰富层度复杂多样，将复杂多样的信息分析清楚，我们才能找到流体在摄影当中的运用点。

板块的概念

照片的信息含量是很高的，怎么更好的分析一个照片，我们可以将照片通过一个特性分开来看，比如占比面积来分、颜色类别来分、前后中景来分等。我们做好了板块区分后就可以运用这些板块来做流体，在板块与板块之间做流体。

板块划分

板块间的流体

拍摄物体或人物的轮廓

除了板块还有一个很常有的流体，就是轮廓，物体的轮廓，可以是流体，人物的轮廓也可以是流体。或许轮廓的流体正是摄影中拍摄的关键标准。

人物的流体轮廓

服装的流体轮廓

拆解5: 平面中的流体

这块的话我觉的可以参考Martin-K老师的《【几何美学】设计中打破常规形态的几何流体》

https://www.zcool.com.cn/article/ZNjI1MjM2.html   这里我就不多去阐述。

拆解6: 流体的表现形式

流体的表现形式也是流体的结构形式，可以大致分为四种：水滴形式、粗细形式、节奏形式、散开形式。每种虽然形式不同但都能表达出流体该有的特性，将他们分析清楚才能更好的运用到设计当中去。

水滴形式

流体的形状可以是水滴的形状，也可以是断流的形状，粘稠的形状。这种形式的流体给人液体的质感，通常用在一些健康类产品或饮料产品的logo上面。表达最自然的元素，也同时表达产品的期望。

水滴表现

粗细形式

流体形状在粗细中不断变化，即流畅又丰富。这种形式有细的紧凑，也有粗的宽广，所以能不断调动人的心里，非常丰富。通常在数据控件上运用波纹这种粗细形式的流体。

粗细表现

节奏形式

整个流体都是具有规律性的流动，显得特别的整齐，在流体本身变化的同时又保证了秩序。这种形式会有无限距离的暗示心里，觉得这条流体是一直在流动。这种节奏形式的流体通常会用在背景的纹理当中，特别是在网页的大背景中，为了丰富细节，有能保证可扩展性，节奏流体是可以复用，所以刚好是合适的。

节奏表现

散开形式

这个形式是在整体流体的基础上进行拆开，保留格式塔心里，让人看着分散的物体，却在往整体看时任然是个流动的整体。在一些基础型的logo上会有看到此创意。

散开表现

最后还是简单的说一下，流体是脱离常规视觉中的不规则视觉，它具有很多的可变形，也具有很多稳定性。它是很好的一个表现形式。