设计师会编程、程序员懂艺术: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-gradientbox-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);

}

主要涉及到afterbefore的使用。

记得要写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等。

希望本文可以帮你成为

会编程的设计师

懂艺术的程序员

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

原文发表时间:2017-05-27

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张叔叔讲互联网

浙江省初中信息技术八年级(下)-张叔叔划重点

八年级下册就讲了一件事情:用Flash制作动画。趣味性还是挺强的,至少可以做出一个属于自己的小动画;操作性也很强,但是根据教材中的介绍就可以基本学会了。张叔叔不...

12830
来自专栏菜鸟致敬

[菜鸟致敬⑨] 排版建议

最近有关注诸多大佬的博客亦或微信公众号,也时常阅读一些好的文章,它们的排版风格亦是各不相同。大概是大佬都专注于叠代码的缘故,对于文章的排版好坏可能抱着得过且过的...

11920
来自专栏CDA数据分析师

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

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

28780
来自专栏数据小魔方

可视化基础——排版篇

image.png 今天要给大家简单聊聊文字排版的技巧! 以后无论是图表排版还是PPT版式中将会多次用到这些理念!!! 谈到排版,不得不提一位伟大的世界级设计大...

339110
来自专栏大数据文摘

提升R语言的数据可视化效果的五个范例

31860
来自专栏我分享我快乐

PS绘制手机图标-古典吉他(内附PSD源文件下载地址)

前言:学生们在学习ps软件的过程中非常的认真与努力,所以对于软件的使用可以说已经很熟练了,可是为什么当我们给学生安排一些原创设计需求的时候,学生却有种无从下手的...

363110
来自专栏互联网杂技

如何在设计中使用色彩叠加

色彩在任何设计中都是一个重要的组成部分。无论你是喜欢明亮、大胆的色彩,或是更喜欢简约的黑白色,如何使用颜色对整体的设计有很大的影响。 设计中使用颜色叠加是运用颜...

36860
来自专栏理论坞

电商设计中的极简设计

电子商务经过了几年的发展已经逐渐成熟,并且已经发展出了自己的模式和风格。但是对于电商的设计风格大多数人还停留在最初的用商品堆砌+文字信息+各种乱七八糟的效果。而...

10420
来自专栏李宗阳的专栏

【 SPA大赛 】数据特征处理技巧

作为萌新,很荣幸能参加到第一届腾讯社交算法大赛,我们的队名是“竟然有这种操作”,在这里我希望和大家分享一些比赛过程中leakage和trick处理的技巧。

2.8K00
来自专栏无原型不设计

文字如何实现完美UI?文本排版设计告诉你

一部手机,电量充足,网络通畅,就足以让我们打发一天的时光,尽情沉浸在手机时代的缤纷世界里。这个信息资源无穷尽的手机网络世界,是设计师和开发者们在不停的探索中一...

35470

扫码关注云+社区

领取腾讯云代金券