跳槽进大厂,这些设计技法必须会 | 技法系列第四弹-晶白风格

1年前发布

原创文章 / 多领域 / 观点
我们的设计日记 原创,如需商业用途或转载请与我们的设计日记联系,谢谢配合。

2019年,不要再玩扁平化,大厂设计师技法全公开,第四弹-晶白风格


今天和大家聊聊设计中的白色,说到白色不得不说苹果的白雪设计语言,在很多设计师心中,白雪设计是苹果的设计巅峰期,也是苹果设计最黄金时期。


▲ 当年乔布斯就是靠着这款iMac把苹果起死回生的,这款电脑设计,采用了透明的设计,也是苹果白雪设计语言典型的代表作。


▲ 整个白雪语言不止是在硬件ID设计,在苹果的一系列软件里面也大量运用到,比如垃圾桶这个图标,白色的设计,但是细节却是让人过目难忘。


▲ 虽然苹果iOS系统更新了几个版本,但是白色的设计理念一直伴随到现在,如上图我们能看到一些细微的变化,比如白色由之前纯白慢慢有些透明度变化。


▲ 新的备忘录,从拟物变成扁平,但是整体的设计语言的延续还是很明显的。


▲ Finder的设计也是延续之前,其实“最大化”按钮已更改为“全屏”可以说苹果的设计一直都在变化,但是都有一个核心理念在延续着每一次的变化,就是白雪设计语言!


▲ 包括全球的一些知名应用,整体的风格也逐渐驱动,都以内容为主,设计辅助内容,整体白色为主。那么今天我们一起来学习下,今天和大家研究的趋势也是白色,不过我个人叫它为-晶白,因为它不仅仅是纯白,在白色的风格基础上,有很多微妙的变化。


什 么 是 晶 白 风 格   



简单来说,晶白就是在白色质感下,通过一些透明度变化,投影,外发光等等,让整体设计更加富有层次感!晶白不一定是纯白,因为它的细节变化,使得在不同背景,不同场景会呈现出不一样的设计细节!我们来看一些案例:


▲这个设计就是一个晶白风格,整体视觉就是大拇指点赞的图形,这个图形整体为白色质感,但是相对于扁平的纯白色图形,这种晶白质感更有细节,层次更加丰富,同时白色的质感很好的和背景融为一体。


▲美拍早期的启动图标,整体风格同样运用的晶白处理,相对千篇一律的白色,这种质感会显得更加精致。


▲这套UI作品,采用晶白设计手法,来加强背景的Z空间,通过白色的叠加和前景白色形成一个很有层次的空间。


▲这套图标系列作品,上面线型图标虽然设计很棒,但是在线型图标烂大街的今天很难让人过目不忘,设计师将新的风格改成这种面型,同时质感运用这种晶白,通过透明度的处理,显得非常有细节和层次感,每一个都很精致。


▲晶白除了运用在图形里面,在一些网站背景或者插图都可以运用,国外知名IT服务公司DigitalOcean的官网设计中,背景就是运用这种晶白质感,将抽象的IT服务变得更好理解。


晶 白 风 格 特 点   


1.白色透明渐变


晶白最大一个特点就是运用渐变,白色到透明的渐变,通过透明度来拉开明暗差别,形成设计空间感。渐变可以是纯白色变化,也可以是带环境色的白色渐变,如上图中,渐变白色就是带有环境色的渐变过度!


▲一个网站设计,整体辅助图形运用的抽象几何图形,呈现出秩序感,整体的图形细节配合,白色透明度变化,很好的将每个图形的背景色融于其中,细节丰富。


▲此图形采用的立方块设计,整体也是从白色过度到透明,透明的白色透出深色的背景,整体呈现出高级感。


▲这个LOGO设计,也是采用白色到透明运用,很巧妙的通过一个渐变和字母转折关联起来。


2.多色透明渐变



▲这套插画作品整体也是运用的白色到透明质感,但是除了运用白色到透明,也充分运用背景蓝色,通过环境色运用,整体层次更加丰富。


▲这组图形的设计,也是采用环境色运用,重复运用背景多色渐变,整体更加融合一体。


▲这组插画设计,插画中核心人物太空人整体呈现白色质感,但是在头部以及白色的投影上重复运用背景橙色,使得更加整体协调。


3.投影运用


▲晶白风格,还一个很重要特点就是运用投影,来形成前后关系,上图在桃心交叉点,运用透明处理,形成两层空间感。


▲这个时钟的图标,运用投影拉开层次,让整体没有那么平淡。


▲这个 LOGO就是一个很好运用投影的案例,通过白色暗面,凸现白熊的立体感。


U I 中 运 用 

  

▲这个数独游戏设计中,页面主图形就是运用晶白作为主图形风格,整体颜色清爽,细节丰富,其实白色透明几何图形作为背景,主图形,运用白色和环境色融合处理,整体呈现高级感。


▲航空公司的选座设计,作者很好的将飞机运用晶白设计手法,让飞机整体有一定厚重感,然后将选座的操作行动点融于其中。


▲在这个引导页设计中,核心的主风格插画,也是运用晶白质感,通过环境色处理,背景处理,整体既有空间感,也充满细节。


▲这组引导页设计中,核心色调也是围绕白色处理,很好通过灰色调来体现生活场景感。


▲在UI中作为背景运用,也是常用的一种方式,让整体界面空间感更强。


▲这组卡片设计非常棒,作者很好的将这种晶白质感和文案融合在一起,运用几何图形的表现很好的让整个背景生动起来,同时也不影响文案阅读 。


▲运用在页面背景,简单干净,如果你的背景太空,不知道放什么图形,运用这个风格准没错。


▲Riko的这套作品就是很好将晶白作为整体的背景图形处理,图标,引导页以及背景底纹都是运用这个风格,在配合干净的配色,整体呈现出高级感。 


▲Yar设计的官方榜单,很好的运用晶白质感效果作为背景,将榜单名词凸现出来,恰到好处。


图 标 中 运 用   


▲晶白在图标中运用比较方法,能让图形更加更丰富,呈现出透明的细节质感,无论是在图标运用还是在界面运用。


▲系统小图标,相对传统的线型图标,这种带透明度的小细节会让图形更加有层次感。


▲一组面的图形运用,简单的技法,让你的图标差异性瞬间拉开。


▲透明的变化有很多,可以是带渐变,可以是纯透明度变化,也可以在透明渐变中加一些立体感。

▲非常精致的一个设计,巧妙的将读书和头像剪影融合在一起了,扁平和拟物的巧妙结合。


▲谁说扁平就一定要同质化,一点点简单的变化让简约而不简单。


▲很巧妙的背景融合,一个带着环境色的渐变,让整个图形层次更加分明。


插 画 中 运 用   


▲这只老鹰的插图设计,造型优美对称,技法上通过透明度运用,让整个羽毛充满层次。


▲设计师很好的将抽象的几何图形,以及白色,蓝色透明的融合,很好呈现出科技感。


▲脉脉的一组插画设计,整体运用白色质感,以及脉脉品牌蓝色,非常酷。


总 结   


趋势的关注和研究,是设计师必备的技巧,我们只有通过大量阅读提炼出有用风格去学习,运用,落地到我们日常设计中,才算真正融汇贯通,希望在设计日记里,能够与大家一起来挖掘最新的趋势和方向!


相关阅读:


跳槽进大厂,这些设计技法必须会 | 技法系列第一弹-纹理风格

跳槽进大厂,这些设计技法必须会 | 技法系列第二弹-卡通简笔风格

跳槽进大厂,这些设计技法必须会 | 技法系列第三弹-柔光风格


作者:sky,支付宝设计专家 ,公众号:我们的设计日记(ID:helloskys),设计交流请添加微信:helloskys000

本文由 @sky原创发布于站酷。未经许可,禁止转载。


1264
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息