跳槽进大厂,这些设计技法必须会(系列一)

产品小白专属,10周线上特训,测、练、实战,22位导师全程带班,11项求职服务,保障就业!了解一下

本文为大家分享了大厂常用的设计风格之一——纹理风格,通过研究,相信你也一定能够从中收获些许设计心得!

本周和大家分享一些大厂常用的设计风格,这些风格大家可能平时有见过,但是可能没有系统了解,今天先和大家带来第一个风格——纹理风格,特别是很多韩国设计种,他们的作品中大量运用了这种设计手法,简单的线条,点线的运用,让页面充满了细节,在国内电商中也运用比较多,我们一起来研究下!

它的用法并不难,常用做法就是基于品牌衍生出一套品牌辅助图形,用在界面中,背景中或者作为肌理效果,它可以是线,也可以是点,也可以是面!用法也很多变化,那么今天我们一起来研究下这种风格是如何使用的。

纹理风格特点

1. 强运用:氛围背景

它可以作为背景,让整个画面不那么单调,同时如果纹理运用的好,反而会显得很高级,呈现那种低调的高级感!点线面其实一直是设计中很重要的点,只是如今大家都玩扁平化,反而很多设计忽略了这些。

▲ 如上图某电商公司的辅助图形,可以看出是由三角形,正方形,圆形,五角星,六边形等组合而成然后基于这些基本图形衍生出一系列组合方式去应用到页面各个场景,如海报,banner等,形成统一的辅助图形符号。

▲ 这种底纹在设计师手里被赋予了魔法,出现在海报里,营销页面上,形成统一的风格和调性。

▲ 在banner中,这种辅助图形做为底纹丰富了背景,让背景更加有层次细节

▲ 在这个海报中,背景的漩涡以及数字的圆点效果都很好的将品牌纹理融于到背景中去。

▲ 这种手法运用起来不用那么单调,完全也可以结合设计师想象力去发挥,去延展出很多不一样的效果,同时很好的达成一致性。有心的同学可以去留意每年的电商设计,在背景上都会有这些统一的底纹细节在里面,这些不是设计师随意加的,而是有一套系统的品牌体系在里面!

2. 强运用-主图形

▲ Facebook 8周年的KV设计,设计师将底纹作为主要图形,当主视觉去运用,在这个工牌设计中,运用了辅助图形来形成整个品牌视觉语言,再结合很年轻的色彩,统一而不单调。

▲ 第54界金马奖的主LOGO,非常有特点,设计师将54这几个字母很好的通过图形表现出来,这个LOGO图形由4个不同图形组成,这些辅助图形也分别作为主视觉运用到其他的设计上。

▲ 海报的设计,简洁有力,配合抽象的图片,让人充满了期待。

▲ 在2018年双11潮流盛典的整体设计中,同样放射重复性的正方形,底纹不断出现在海报上,形成整体的风格调性。

▲ 在主会场上,同样运用3D正方形重复作为整个舞台来渲染,让整体设计记忆点得到强化。

▲ 在海报上,背景的肌理效果贯穿始终,形成整体一套的设计风格。

3. 弱运用-页面辅助

前面两种,底纹都用作主氛围背景,主图形,那么在很多时候,这些辅助元素运用也可以弱一些,使用面积也比较小,它的存在很多时候能够让页面细节更加丰富。

▲ 在平面设计中比较常见的用法,纹理和底纹作为辅助图形,让页面的细节和氛围更加丰富。

▲ 在UI设计中也常常会出现,如果你的主体是内容,背景稍微有点空洞,那么就可以使用这种手法,让背景更加有层次一些。

▲ 在88会员的页面中,会员的辅助元素作为背景出现在一些需要背景氛围的设计中,能很好的将页面设计元素丰富起来。

UI中运用

纹理风格应用场景也很丰富,从上面案例其实可以看出,无论是平面还是营销设计,品牌设计,UI设计中都可以去灵活运用,关键是看你如何运用。

▲ 网易考拉的辅助图形非常棒,都是基于圆形去延展的,运用场景也比较丰富,在官方的方案呈现中,这个辅助图形,从始至终的应用到页面每个场景。

▲ 在页面的海报和传播页面中,基于圆形的辅助图形很好的承载了背景,简洁的排版也很符合产品整体调性。

▲ 官网的设计中,辅助图形圆形也巧妙的运用在设计中

▲ 在APP的界面启动页,营销设计,会员页面,辅助图形都很巧妙融合在品牌之中,详细效果大家可以在http://www.plus-ex.com/#kaola中查看。

▲ 在上图设计中,设计师将线条和圆形很好的融于到整个背景,让原本平淡的页面充满层次和细节。

▲ 在很多这种头部为主核心的页面设计中,如果只一个单独的卡片或者按钮会稍显得冷淡,设计师将自己的品牌logo或者品牌辅助线条很巧妙融合到背景和卡片中,细节顿时丰富起来。

▲ 这种肌理效果很多时候也可以传递出品牌的气质,品牌的调性,左侧那个音乐播放界面的默认图片,就特别有品质感。右侧电商主界面背景,清晰干净,后面的线条背景恰到好处。

▲ 在这种大面积背景上,添加这种点线面,或者几何纹理背景能让页面不那么单调,同时也能传递一些品牌元素

网页中运用

▲ 在很多设计中,底纹可以起到构图作用,同时也可以做为背景细节去运用

▲ 网站的底纹运用,深色背景下能增强光感,浅色背景下能增加空间

▲ 同时在很多场景,它的手法可以是底纹,也可以是渐变也可以是立体的效果,可以根据画面需要效果进行调整。

平面中运用

▲ 品牌宣传海报,如果老板下班前告诉你需要做一个高级的海报,那么用这种底纹简洁效果肯定没错,效果好,还容易出彩。

▲ 各种科技类大会邀请,简单的点线面运用,配合一些网格的排版,效果也不会很差。

▲ 品牌包装,包括我们熟知的大牌LV,BV等都是运用一个底纹图案去作为品牌主图形,简单高级。

图形怎么来?

看到这里很多人可能会疑惑,这个图形辅助形怎么来呢,一定不是网上随便下载或者自己随便画!这里需要注意是图形一定是从你们本身的产品LOGO品牌里面抽取出来,然后去做演变!

▲ 如上图,DOOTA电商的辅助图形一定是从DOOTA整个LOGO品牌体系中推导出来的,一定是有一个设计原点在里面。

▲ 考拉的辅助图形同样也是从LOGO中提取出来的

所以这里很重要的一点是,我们在使用图形或者图案时候,一定不是凭空而来,一定是和我们整个品牌体系有关,你可以是LOGO中提取的辅助图形,你也可以是你们产品定位里面功能服务等等,总之一定需要一个理由来证明这个图形是正确的!

今天和大家分享只是抛转引玉,关于这个风格有很多组合和技巧需要大家多去尝试!希望可以帮助到大家,下周见。

 

作者:我们的设计日记,微信公众号:我们的设计日记(ID:helloskys)

本文由 @我们的设计日记 原创发布于人人都是产品经理。未经许可,禁止转载。

题图来自Unsplash, 基于CC0协议。

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!