教你用 css 写一个拟物化图标

教你用 css 写一个拟物化图标

技术杂谈小彩虹2021-08-22 15:22:24450A+A-

拟物化(Skeuomorphism)风格的图标在iOS7发布之前广为流行。相当长一段时间,无论系统、网页还是第三方应用都争相使用拟物化的设计风格。那时候的dribbble网,各色优秀的拟物化设计作品也争奇斗艳、层出不穷。

下面先展示几张优秀的拟物化设计作品,让你们进一步了解这一风格,甚至爱上这个风格。大可不必站在产品的角度来较真,just欣赏它们的美,感受细节的震撼。

是不是很震撼,很精致,那丰富的细节让观者不禁感叹设计师的一丝不苟。

放两张鄙人当年设计的作品,略显粗糙,跟大神的作品比起来多有不足,见笑了哈哈。

好了,谈正事。设计师们设计的拟物化图标,一般两种方式:纯ps绘制,或者3D软件建模渲染+ps调细节。但今天我要说的是如何用css写一个拟物化图标出来,不需要任何的图片素材。很惊讶是不是!很惊讶是不是! 少啰嗦,先看东西。

一个挂在墙上的旋钮
跟ps绘制出来的图标是比不了的,有很多细节是纯css代码没法实现的,这没办法。不过没关系,我就是通过这个练习让大家了解一下这个设计风格的原理,还有,你尽可以发到朋友圈装逼,并配上一句话“码农能干的事多了”。

ok,教程开始~

理论基础

在写代码之前,先说一些简单的光影原理(不涉及到透视还有材质,追求极简^_^),即素描的基础:三大面和五大调。

三大面:

  • 亮面
  • 灰面
  • 暗面

五大调:

  • 高光
  • 中间调
  • 明暗交界线
  • 反光
  • 投影

不同人叫法可能不同,但本质一样。 三大面是指一个物体在光源照射下,会出现明暗的三种状态: 亮面——受光面; 灰面——侧光面; 暗面——背光面。

五大调是指在三大面中,根据受光强弱的不同,产生更多明显的区别: 高光——受光物体最亮的点; 中间调——高光与明暗交界线之间的区域; 明暗交界线——区分亮面与暗面的区域,不是一条真实的线,它的形状、明暗、虚实会随物体结构转折发生变化; 反光——物体的背光部分受其他物体或物体所处环境的反射光影响的部分; 投影——物体本身遮挡光线后在空间中产生的暗影。

来一张图,具象化这些理论。

明白了这些概念之后,我们在设计这个图标的时候,就有理可循了。因为这个图标结构本就不复杂,不需要做到那么精准,该有的都有就好了。

形状

先把形状写出来,这个图标的形状非常简单,你可以按我的写,也可以任意微调,先不用管颜色,什么颜色都行。 包括墙面、底座、凹槽、旋钮和小红条(我也不知道叫什么)。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wall { position: relative; width: 1000px; height: 750px; background: #eaeaea; } .base { position: absolute; top: 50%; left: 50%; margin-left: -170px; margin-top: -170px; width: 340px; height: 340px; border-radius: 60px 60px; background: #fafafa; } .groove { position: absolute; top: 50%; left: 50%; margin-left: -113px; margin-top: -113px; width: 226px; height: 226px; border-radius: 50%; background: #dddddd; z-index: 50; } .knob { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; border-radius: 50%; background: #fafafa; z-index: 100; } .spot { position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -74px; width: 8px; height: 30px; border-radius: 10px; background: red; z-index: 150; } </style> </head> <body> <div class="wall"><!--墙面--> <div class="base"></div><!--底座--> <div class="groove"></div><!--凹槽--> <div class="knob"></div><!--旋钮--> <div class="spot"></div><!--红色指示条--> </div> </body> </html> 

效果如图:

先把形状绘制出来

颜色

这一步我们来调整一下颜色。要知道生活中的物体是没有绝对的纯色的,只要有光,势必产生明暗,这意味着所有的颜色都有或多或少的渐变。这个图标设计中,为了简单易懂,我们不考虑环境光了,除了那个红色条,其他都用黑白灰,不掺杂色相。

1.确定光源

我们规定光源为位置在正上方稍微偏左的软光,这样看着比较舒服的。

2.墙面

我们先给墙面设置一个径向渐变,渐变圆心在中上方位置,圆心亮,四周相对暗。但不要有太大对比,柔和才好看。

参考色值:

background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221));

效果如下:

墙面颜色
由于光源位置在偏上方,所以墙面最亮的点也对应在偏上方,光源略微偏左在这里暂且忽略,为追求背景的对称。

3.底座

来个线性渐变,同样上亮下暗,色差值不要太大。

参考色值:

background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234));

效果如下:

底座颜色
有点看不清楚了是吧,没关系,先不管它,继续。

4.凹槽和旋钮

这两个一起弄,对比着看,才看的准。 参考色值:

凹槽(由于物体结构这里是凹陷的,光源被遮挡,自然比其他地方要暗)

background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207));

旋钮(旋钮的颜色和底座基本上是差不多的)

background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234));

效果如下:

凹槽和旋钮颜色

5.红色指示条

不要遇到红色就想到那个"red"值,那种高饱和度高亮度的纯红在自然界中是不存在的,而且也不好看。我们挑一个柔和点的红。

参考色值:

background: #ff5d5d;

效果如下:

红色指示条颜色

到目前为止,大体的颜色都调完了,但是没有立体感。我们接下来通过调节投影、内阴影、高光等元素,使其立起来。

立体感

标题起为“立体感”是不负责任的,因为不能这么分类,只是为了通俗易懂。

这一步骤只用了一个css3的属性,就是box-shadow,它是非常强大的。无论是投影、高光、内阴影还是反光,都可以用它巧妙地调出来。

前方高能!

1.底座

box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200),
            1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset,
            -1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset;

属性虽然只有一个,但是需要设置非常多的值。因为太多,不具体细讲了。

不过,这里有几个原则大家需要知道:

  1. 物体的投影也是有渐变的,离物体越近的地方,投影越暗、越实,离物体越远,投影越淡、越虚。
  2. 亮部也是有层次的,越靠近光源的地方,越亮、越实。
  3. 底部有反光,因为墙面会反射一部分光给它。

具体每个值都是什么效果,大家可以一个一个尝试对照,就明白了。

来看看效果:

底座立体感
是不是很带劲,物体一下子就跟墙面拉开了。请注意底座最低端那一层淡淡的反光(其实墙面也应该有物体给它的反光的,但由于css3没法做出我想要的效果,就不做了,有点遗憾)。

2.凹槽

box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8);

这里需要注意的是,这个结构出现了大角度的转折,那么在转折处,颜色上应该突出一下。 效果如下:

凹槽立体感

3.旋钮和红色指示条

旋钮

box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5),
            1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset;

红色指示条

box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd;

在旋钮的投影交界处,我故意将转折处细细的边缘线进行提亮,这是为了让对比更加突出,增强立体感。红条没什么可说的,试试就知道了。

到这,我们的拟物化图标就完成了,再看一下最终效果:

最终效果

源码奉上,朋友们可以按照自己的想法进行微调,看看谁做出来的最美观最自然。

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wall { position: relative; width: 1000px; height: 750px; background: radial-gradient(circle at 50% 20%, rgb(241, 241, 241) 10%, rgb(221, 221, 221)); } .base { position: absolute; top: 50%; left: 50%; margin-left: -170px; margin-top: -170px; width: 340px; height: 340px; border-radius: 60px 60px; background: linear-gradient(180deg, rgb(244, 244, 244), rgb(234, 234, 234)); box-shadow: 1px 4px 6px -3px rgba(0, 0, 0, 0.05), 3px 8px 20px -8px rgba(133, 133, 133, 0.9), 7px 16px 28px -8px rgb(188, 188, 188), 8px 33px 60px -12px rgb(200, 200, 200), 1px 2px 4px 0 rgb(248, 248, 248) inset, 5px 10px 10px 0 rgba(255, 255, 255, 0.8) inset, 0px 20px 60px 0 rgba(255, 255, 255, 0.4) inset, -1px -2px 4px 0 #cccccc inset, -5px -10px 8px 0 rgba(144, 144, 144, 0.3) inset, 0 -20px 60px 0 #e0e0e0 inset; } .groove { position: absolute; top: 50%; left: 50%; margin-left: -113px; margin-top: -113px; width: 226px; height: 226px; border-radius: 50%; background: linear-gradient(180deg, rgb(221, 221, 221), rgb(207, 207, 207)); box-shadow: 2px 4px 6px 0 #c0c0c0 inset, -1px -1px 0px 0 rgba(255, 255, 255, 0.9) inset, -1px -1px 1px 0 rgba(0, 0, 0, 0.1), -8px -18px 40px 0 rgba(255, 255, 255, 0.8); z-index: 50; } .knob { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(180deg, rgb(250, 250, 250), rgb(234, 234, 234)); box-shadow: 1px 4px 6px -2px rgba(0, 0, 0, 0.05), 3px 10px 12px -8px rgba(0, 0, 0, 0.3), 6px 30px 30px -6px rgba(160, 160, 160, 0.5), 1px 2px 0px 0 #fff inset, 0 -1px 1px 0 rgba(255, 255, 255, 0.4) inset; z-index: 100; } .spot { position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -74px; width: 8px; height: 30px; border-radius: 10px; background: #ff5d5d; box-shadow: 1px 2px 1px 0 #df3434 inset, 1px 1px 0 0 #fffdfd; z-index: 150; } </style> </head> <body> <div class="wall"><!--墙面--> <div class="base"></div><!--底座--> <div class="groove"></div><!--凹槽--> <div class="knob"></div><!--旋钮--> <div class="spot"></div><!--红色指示条--> </div> </body> </html> 

以上,教程部分结束,我再谈谈我对拟物化风格的一些看法。

拟物化设计风格在光影、材质、透视、纹理等因素上都极为讲究,创作灵感通常来源于生活中的物件。一个好的拟物化设计,完美的细节会让人吃惊。这需要考查设计师深厚的设计功底,对光影材质的理解与把握能力,对图形的精准的构造能力,对软件工具的熟练运用能力等。

如今,拟物化的设计风格已很少出现在大众视野,从微软的Metro,到苹果的iOS7风格,再到Google的Material Design(不属于纯粹的扁平化,本文不谈,感兴趣的请自行搜索),扁平化(flat)设计风格已成为数字世界的主流(当然扁平化的风格很早就有,它只是印刷出版美学在当今数字世界的一次重现而已)。在电子产品的用户界面中,扁平化设计风格更为高效、直接,使用户得以沉浸体验,尽量不被眼花缭乱的其他视觉元素所干扰。但是,视觉风格是流变的,拟物化永远不可能被淘汰,它不仅仅是一个设计趋势,它还包括一个设计理念,即把现实生活中的对象用作视觉隐喻,使产品更便于使用。

谈论拟物化和扁平化的优与劣,这个话题没有意义,任何人都有偏好,两者本身也各有优劣。两种设计风格从来就不是对立面,我们可以很清楚地在扁平化设计中看到拟物化设计的精神内核所在。

最后,感谢阅读,希望喜欢,期待你的反馈。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们