查看原文
其他

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

2017-05-27 shadow 科技Mix设计Lab

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。


主要技术栈:

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、 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。


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

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





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使用的。


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等。



希望本文可以帮你成为

会编程的设计师

懂艺术的程序员



    

欢迎长按二维码

关注本号

本号发布内容主要为设计&科技方面





您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存