设计师会编程、程序员懂艺术：Semi Flat Design

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。

主要技术栈：

nodejs、react native、electron

本号正在更新的系列有：

写给设计师的人工智能指南

移动App设计之xxxx

数据爬取及可视化系列

技能之xxxx

读书笔记

还有其他杂文。

欢迎关注，转发～

本文为系列文章：

设计师会编程、程序员懂艺术

的第2篇。

往期直达：

01设计师会编程、程序员懂艺术：设计规范

以下为正文

Semi Flat Design

半扁平化设计

设计师、程序员需要了解的最新设计趋势，本文包括：

Semi Flat Design的演进阶段；

相关的概念、案例；

CSS代码与Semi Flat Design；

用CSS实现光效；

用CSS实现长阴影效果；

用CSS实现毛玻璃效果。

1、演进趋势与概念

在界面设计中，从苹果、谷歌、微软的设计语言演进过程中，我们可以得出，一个明显的演进趋势：

Skeuomorphism — Flat Design — Semi Flat Design

从拟物化设计到扁平化设计，再到半扁平设计的发展趋势；早期在图形化界面出现以前，人们面对的是命令行界面，这个时候谈不上什么设计感；图形化界面诞生之后，人们开始思考界面设计的风格问题，是“写实”还是“抽象”？也即是拟物还是扁平之争，发展到现在的半扁平，融合了拟物跟扁平的特性，产生一种介于2者之间的风格。

我们看下相关事件：

2006年，

微软媒体播放器内置系统 Zune 就开始使用类似 Metro 的设计风格

2007年，

苹果发布首款iPhone，拟物化设计的iOS系统

2013年，

苹果在iOS7时改用扁平化设计

2014年，

谷歌发布Material Design

2017年，

微软发布Fluent Desgin，称为“Metro的演进”版本

很明显的趋势，当今苹果、谷歌、微软都在推动半扁平的设计风格。

1.1

Skeuomorphism

拟物化

Android、以及iOS7.0以下时代的大部分app是以拟物化为主的，界面模拟真实物体的材质、质感、细节、光亮等，人机交互模拟现实中的交互方式。

典型的案例，如苹果的iBook

1.2

Flat Design

扁平化

扁平化，就是在设计过程中，去除所有具有三维效果的风格和属性。具体如：阴影、梯度变化、表面质地等这些具有三维效果的属性。

扁平化案例，微软的Metro Design

Metro Design是平面设计领域最经典的案例，让文字实现了近乎完美的视觉传达。它最早应用于瑞士的公共交通系统中，随后这种完美的导航设计方法被广泛应用到对速度、视觉、信息传达要求颇高的全球公交系统中。微软的设计师受到了Metro的启发，创作了微软的Metro UI。

Metro UI，也叫Modern UI、Windows8 Style UI，是微软基于设计语言设计的一种界面风格，此设计在创造之后被用于移动操作系统Windows Phone、Windows 8、Xbox 360等多款微软产品。

苹果界面从拟物化到扁平化

1.3

Semi Flat 半扁平化

semi Flat风格最突出的表现，就是在扁平化图标的基础上加阴影效果,让图标更具有活力，当然还有其他的表现，比如增强在光感、层级、材质上的三维效果。

加上阴影的图标

代表案例1：

谷歌的Material Design

Material Design强调：

三维世界 3D world

光影关系 Light and shadow

物理特性 Material

界面是具有变化的长宽尺寸（以 dp 为计）和均匀的厚度（1dp）的卡片组成的；

在界面设计的时候，分析各组成元素的高度及阴影，在Material Design中显得非常重要。

在运用Material Design中，我们往往忽视高度及阴影的关系，而盲目的统一给个阴影值。

正确的做法：

y轴是高度值，表示各种元素在界面上的高度关系，我们可以据此计算出各元素应该有的阴影长度。

代表案例2：

微软最新发布的Fluent Design

Fluent Design是Metro Design的演进版本，我们先来回顾下Metro Design，它强调：

Simple 光滑

Clean 快

Modern 现代，

属于典型的Flat Desgin风格；

而Fluent Design则强调:

Light 光感

Depth 深度

Motion 动效

Material 材质

Scale 缩放

其中提到的光感、深度、材质是不是有点像Material Design。

以上就是半扁平设计的特点。

据此，我做了些小练习，主要是阴影的处理；

2

CSS3 中可用于Semi Flat Design

的特性

主要是阴影、滤镜、变换

box-shadow

text-shadow

boxShadow 属性把一个或多个下拉阴影添加到框上。为了实现更为逼真的影子效果，我们可以叠加多个下拉阴影到框上，我试验了下，效果见下图，最后的效果叠加了3个阴影，第三个是内阴影。

text-shadow属性连接一个或更多的阴影文本，同样也支持多个阴影的叠加，尝试下多加几个阴影，见下图，产生了一种水墨感的阴影效果哈，拿来做水墨风格的UI蛮好的～

transform:

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

translate3d(x,y,z)

scale3d(x,y,z)

rotate3d(x,y,z,angle)

perspective(n)

transform我用的比较多的是scale跟rotate，缩放跟旋转，可以配合css的伪元素、伪类after、before、hover使用，达到更多好玩的效果。

比如我使用了hover，当鼠标移动到右侧详情页时，会放大，阴影也会拉长，把空间感体现了出来。

ps：打个小广告，上图也是我最近在开发的 JS Playground For Designer的一个工具的界面效果。

filter:

blur

brightness

contrast

drop-shadow

grayscale

hue-rotate

invert

opacity

saturate

sepia

url

filter属性，图片的滤镜库，可以实现图片等模糊、调节图片亮度、对比度、透明度、去色等等。大家可以详细看下官方文档。

目前我常用的是blur，模糊效果，用来实现毛玻璃效果的，下文会详细介绍blur的使用。

background:-webkit-linear-gradient

背景线性渐变属性，Flat Design的颜色一般是纯色的，Semi Flat Design为了体现光感，出现了渐变色的效果，css除了线性渐变，还有径向渐变。

具体看下文的例子。

z-index

z-index 属性指定一个元素的堆叠顺序。

主要是配合position使用的。

3

用css代码实现Semi Flat Design

我选择了几个半扁平设计具有代表性的特征：

光：高光效果

阴影：长阴影

材质：毛玻璃效果

3.1

渐变+阴影

HTML只需简单的一个div即可。

<div class="shadowBtn"></div>

CSS代码

.shadowBtn {

width: 98px;

height: 98px;

border-radius: 49px;

position: absolute;

top: 658px;

left: 100px;

background: -webkit-linear-gradient(-108deg, #fbbef6, rgba(10, 13, 138, 0.94));

box-shadow: -10px 12px 20px rgba(51, 47, 93, 0.58);

}

最主要的是background里的linear-gradient及box-shadow属性。

代码简单，大家可以自行再做细微效果的调整。

3.2

高光+渐变色+长阴影

HTML也是个div

<div class=“longShadowBtn"></div>

CSS代码

.longShadowBtn {

width: 98px;

height: 98px;

border-radius: 49px;

position: absolute;

top: 658px;

left: 300px;

filter: brightness(118%);

background: -webkit-linear-gradient(-108deg, #fbbef6, rgba(10, 13, 138, 0.94));

box-shadow: -10px 12px 20px rgba(51, 47, 93, 0.2);

}

.longShadowBtn::before {

content: '';

width: 72px;

height: 18px;

transform: rotateZ(23deg);

top: 2px;

left: 29px;

border: 1px solid red;

background: white;

position: absolute;

filter: blur(31px);

}

.longShadowBtn::after {

content: '';

position: absolute;

width: 98px;

height: 148px;

top: 42px;

left: -48px;

z-index: -1;

background: -webkit-linear-gradient(-108deg, rgb(22, 16, 27), rgba(6, 7, 41, 0.1));

transform: rotateZ(36deg);

filter: blur(20px);

}

主要涉及到after及before的使用。

记得要写content: “”;不然后面的代码都是白写的。

before里我写的是高光效果，通过rotateZ的旋转，还有top、left、width的调整，把高光的位置摆在了右上方，然后是blur实现的模糊效果，背景颜色是白的。

把fliter:blur(31px)注释掉，可以看到具体的位置，我用border描边把before元素标注了出来，见下图。

after我写的是长阴影，记得把z-index设为-1，让其置于最底层；跟高光一样，通过rotate、top、left、width的调整，把阴影摆好，长度可以通过height调整。background通过linear-gradient设置的渐变色，从深灰色到浅灰色，模拟真实阴影的效果。同样，也可以通过注释掉fliter属性来查看具体位置。

3.3

毛玻璃

HTML

<div class="groundGlass_container">

<div class="groundGlass_content">

<h3>HI~Semi Flat Desgin</h3>

<p>semi Flat风格最突出的表现，就是在扁平化图标加上阴影效果,让图标更具有活力，还有其他的表现，比如增强在光感、层级、材质上的三维效果。</p>

</div>

</div>

CSS代码

.groundGlass_container {

width: 800px;

height: 600px;

position: relative;

background: url('http://pic1.win4000.com/wallpaper/3/54657881790c3.jpg') center top;

background-size: cover;

}

.groundGlass_content {

width: 320px;

height: 200px;

position: absolute;

top: 186px;

left: 230px;

overflow: hidden;

box-shadow: 0 12px 20px 4px rgba(39, 34, 26, 0.47);

z-index: 99;

}

.groundGlass_content::before {

content: "";

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: -1;

filter: blur(20px);

margin: -30px;

background: url('http://pic1.win4000.com/wallpaper/3/54657881790c3.jpg') center top;

background-size: cover;

background-attachment: fixed;

}

.groundGlass_content h3 {

margin-top: 32px;

text-align: center;

color: white;

font-family: PingFangSC-Semibold, sans-serif;

}

.groundGlass_content p {

padding: 8px;

color: white;

font-family: PingFangSC-Thin, sans-serif;

font-size: 14px

}

我们先分析下要实现的效果。

需要有个背景大图，大图上有一个文本框，显示标题跟正文，文本框是毛玻璃的效果。

先试试毛玻璃效果，效果见下图

我们发现，在这个应用了blur效果的div里，不管输入啥，比如我们的h3标题及p的文本内容，也是糊成一片的。很明显需要在另外个平行div里实现文本内容的输入。

我们采用的方案是before伪元素的应用。

div里放文本内容，div：before伪元素里放毛玻璃效果，只要把两个div重叠就可以达到我们预想的效果啦，代码实现下

效果还不太对，边缘竟然是模糊的，因为用了blur嘛～

把margin设成负数就可以解决啦，也就是把背景往外撑一定的距离。

背景还不太对，我们可以调整下background-size:

background-size: length|percentage|cover|contain;

cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain

把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

这里先不管cover还是contain，先设置个cover。

有点效果了，见下图

不过，好像还不太对，我们把fliter先关掉看看，见下图

再调整下background-attachment，把底图设置成固定fixed。

background-attachment

设置或检索背景图像是随对象内容滚动还是固定的。

1）fixed：

背景图像相对于窗体固定。 2）scroll：

背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 3）local：

背景图像相对于元素内容固定，也就是说当内容随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

自此，整个效果实现啦～

再回顾下，基本原理：

<div class="groundGlass_container">

<div class=“groundGlass_content">

　<h3></h3>

<p></p>

</div>

</div>

1、对齐，groundGlass_container的背景图和groundGlass_content:before的背景图。

2、给groundGlass_content:before加blur滤镜，通过调整margin值撑满边缘。

3、在groundGlass_content里写入h3及p标签。

最后，

Semi Flat Design，

最大的特点就是光、阴影、材质。

对应的css属性主要有box-shadow、text-shadow、transform、filter等。

希望本文可以帮你成为

会编程的设计师

懂艺术的程序员