本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈: nodejs、react native、electron 本号正在更新的系列有: 写给设计师的人工智能指南 移动App设计之xxxx 数据爬取及可视化系列 技能之xxxx 读书笔记 还有其他杂文。 欢迎关注,转发~ 本文为系列文章: 设计师会编程、程序员懂艺术 的第2篇。 往期直达: 以下为正文 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./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./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: 背景图像相对于窗体固定。 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 背景图像相对于元素内容固定,也就是说当内容随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。 自此,整个效果实现啦~ 再回顾下,基本原理: <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等。 希望本文可以帮你成为 会编程的设计师 懂艺术的程序员 |
|
来自: Mixlab交叉学科 > 《待分类》