本文主要介绍的是晶白风格,enjoy~ 今天和大家聊聊设计中的白色,说到白色不得不说苹果的白雪设计语言,在很多设计师心中,白雪设计是苹果的设计巅峰期,也是苹果设计最黄金时期。 当年乔布斯就是靠着这款iMac把苹果起死回生的,这款电脑设计,采用了透明的设计,也是苹果白雪设计语言典型的代表作。 整个白雪语言不止是在硬件ID设计,在苹果的一系列软件里面也大量运用到,比如垃圾桶这个图标,白色的设计,但是细节却是让人过目难忘。 虽然苹果iOS系统更新了几个版本,但是白色的设计理念一直伴随到现在,如上图我们能看到一些细微的变化,比如白色由之前纯白慢慢有些透明度变化。 新的备忘录,从拟物变成扁平,但是整体的设计语言的延续还是很明显的。 Finder的设计也是延续之前,其实"最大化"按钮已更改为"全屏"可以说苹果的设计一直都在变化,但是都有一个核心理念在延续着每一次的变化,就是白雪设计语言! 包括全球的一些知名应用,整体的风格也逐渐驱动,都以内容为主,设计辅助内容,整体白色为主。那么今天我们一起来学习下,今天和大家研究的趋势也是白色,不过我个人叫它为-晶白,因为它不仅仅是纯白,在白色的风格基础上,有很多微妙的变化。 什么是晶白风格? 简单来说,晶白就是在白色质感下,通过一些透明度变化、投影、外发光等等,让整体设计更加富有层次感!晶白不一定是纯白,因为它的细节变化,使得在不同背景,不同场景会呈现出不一样的设计细节!我们来看一些案例: 这个设计就是一个晶白风格,整体视觉就是大拇指点赞的图形,这个图形整体为白色质感,但是相对于扁平的纯白色图形,这种晶白质感更有细节,层次更加丰富,同时白色的质感很好的和背景融为一体。 美拍早期的启动图标,整体风格同样运用的晶白处理,相对千篇一律的白色,这种质感会显得更加精致。 这套UI作品,采用晶白设计手法,来加强背景的Z空间,通过白色的叠加和前景白色形成一个很有层次的空间。 这套图标系列作品,上面线型图标虽然设计很棒,但是在线型图标烂大街的今天很难让人过目不忘,设计师将新的风格改成这种面型,同时质感运用这种晶白,通过透明度的处理,显得非常有细节和层次感,每一个都很精致。 晶白除了运用在图形里面,在一些网站背景或者插图都可以运用,国外知名IT服务公司DigitalOcean的官网设计中,背景就是运用这种晶白质感,将抽象的IT服务变得更好理解。 晶白风格特点 1. 白色透明渐变 晶白最大一个特点就是运用渐变,白色到透明的渐变,通过透明度来拉开明暗差别,形成设计空间感。渐变可以是纯白色变化,也可以是带环境色的白色渐变,如上图中,渐变白色就是带有环境色的渐变过度! 一个网站设计,整体辅助图形运用的抽象几何图形,呈现出秩序感,整体的图形细节配合,白色透明度变化,很好的将每个图形的背景色融于其中,细节丰富。 此图形采用的立方块设计,整体也是从白色过度到透明,透明的白色透出深色的背景,整体呈现出高级感。 这个LOGO设计,也是采用白色到透明运用,很巧妙的通过一个渐变和字母转折关联起来。 2. 多色透明渐变 这套插画作品整体也是运用的白色到透明质感,但是除了运用白色到透明,也充分运用背景蓝色,通过环境色运用,整体层次更加丰富。 这组图形的设计,也是采用环境色运用,重复运用背景多色渐变,整体更加融合一体。 这组插画设计,插画中核心人物太空人整体呈现白色质感,但是在头部以及白色的投影上重复运用背景橙色,使得更加整体协调。 3. 投影运用 晶白风格,还一个很重要特点就是运用投影,来形成前后关系,上图在桃心交叉点,运用透明处理,形成两层空间感。 这个时钟的图标,运用投影拉开层次,让整体没有那么平淡。 这个 LOGO就是一个很好运用投影的案例,通过白色暗面,凸现白熊的立体感。 UI中运用 这个数独游戏设计中,页面主图形就是运用晶白作为主图形风格,整体颜色清爽,细节丰富,其实白色透明几何图形作为背景,主图形,运用白色和环境色融合处理,整体呈现高级感。 航空公司的选座设计,作者很好的将飞机运用晶白设计手法,让飞机整体有一定厚重感,然后将选座的操作行动点融于其中。 在这个引导页设计中,核心的主风格插画,也是运用晶白质感,通过环境色处理,背景处理,整体既有空间感,也充满细节。 这组引导页设计中,核心色调也是围绕白色处理,很好通过灰色调来体现生活场景感。 在UI中作为背景运用,也是常用的一种方式,让整体界面空间感更强。 这组卡片设计非常棒,作者很好的将这种晶白质感和文案融合在一起,运用几何图形的表现很好的让整个背景生动起来,同时也不影响文案阅读 。 运用在页面背景,简单干净,如果你的背景太空,不知道放什么图形,运用这个风格准没错。 Riko的这套作品就是很好将晶白作为整体的背景图形处理,图标,引导页以及背景底纹都是运用这个风格,在配合干净的配色,整体呈现出高级感。 Yar设计的官方榜单,很好的运用晶白质感效果作为背景,将榜单名词凸现出来,恰到好处。 图标中运用 晶白在图标中运用比较方法,能让图形更加更丰富,呈现出透明的细节质感,无论是在图标运用还是在界面运用。 系统小图标,相对传统的线型图标,这种带透明度的小细节会让图形更加有层次感。 一组面的图形运用,简单的技法,让你的图标差异性瞬间拉开。 透明的变化有很多,可以是带渐变,可以是纯透明度变化,也可以在透明渐变中加一些立体感。 非常精致的一个设计,巧妙的将读书和头像剪影融合在一起了,扁平和拟物的巧妙结合。 谁说扁平就一定要同质化,一点点简单的变化让简约而不简单。 很巧妙的背景融合,一个带着环境色的渐变,让整个图形层次更加分明。 插画中运用 这只老鹰的插图设计,造型优美对称,技法上通过透明度运用,让整个羽毛充满层次。 设计师很好的将抽象的几何图形,以及白色,蓝色透明的融合,很好呈现出科技感。 脉脉的一组插画设计,整体运用白色质感,以及脉脉品牌蓝色,非常酷。 总结 趋势的关注和研究,是设计师必备的技巧,我们只有通过大量阅读提炼出有用风格去学习,运用,落地到我们日常设计中,才算真正融汇贯通,希望在设计日记里,能够与大家一起来挖掘最新的趋势和方向! 相关阅读 跳槽进大厂,这些设计技法必须会(系列一) 跳槽进大厂,这些设计技法必须会:系列第二弹-卡通简笔风格 跳槽进大厂,这些设计技法必须会(三):柔光风格