插画的7种风格
特点-扁平、流行、常用的风格、简洁明了
扁平插画简单来讲就是把复杂的关系简约化,让画面更加清爽整洁,也是现在比较常用的风格了,很多商务工具类的APP会选择使用这种风格。比如说拉勾、钉钉...
特点-扁平插画的变种、增加颗粒感、有质感、光影关系好
肌理插画顾名思义就是给插画加上了些肌理质感(比如杂色)和光感,本质也和扁平插画差不多,一些想体现质感的页面会用到这种风格。以下是一些设计师的作品。
特点-美术功底要求最高、应用广、展现内容丰富 。手绘风格的插画运用的也比较广,常见的有一些插画绘本,故事场景设计等。下面这些是摘自 插画师-顾心 的作品。
特点-简洁、圆润、可爱、断点
MBE插画(dribbble的一位设计师创作了这种风格),它主要的特点就是圆润、可爱、呆萌、简洁。在APP中的引导页、启动页和缺省页运用也比较广泛。
特点-唯美、颜色的采取近似色、颜色明亮鲜艳。
渐变插画有点类似日本漫画场景的感觉,风格特别唯美浪漫。光感比较强,所以也称为微光插画。颜色一般采用相近色,颜色种类不要太多。
特点-2.5d插画、立体感强、视觉冲击强。
立体插画也称为2.5D插画,也就是在二维的空间里表现三维的事物。所以现在越来越多的设计师去学习C4D这个软件,虽然AI和PS也能做,但会麻烦一些。很多电商类的APP会选择使用这种风格。比如说京东...
特点-形状、描边、抽象画处理
描边插画除了运用形状,还在它的外轮廓都运用了描边,可以很清晰的表达抽象事物。经常运用在一些图标icon上,比如闲鱼、转转...
插画艺术风格有哪些
1.扁平插画
。扁平插画相对来说有很强的通用性,因为它简约又直观、弱化了细节和透视,识别度和上手度也相对更快,契合了年轻人对可爱和萌趣的审美要求,是最容易让画面出整体效果的技法;通常会运用规则的几何图形或不规则的矢量图形去保留物体原有的辨识度形态,搭配大块面的色块,用简约的图形去让主体形态更加抽象或者简约化,运用的范围比较广阔,常见的有海报、包装、banner、App闪屏、游戏界面等。
2.渐变插画。
渐变插画的特点是大量运用低饱和度的渐变手法,且在用色上一般采取近似色;其细节丰富而细腻、画面风格偏写实、视觉稳重大气,让画面很有视觉冲击力和层次感。其中,渐变插画里面又细分双色渐变、半透明渐变、网格渐变、渐变模糊等形式。
3.MBE插画
。这种插画风格的特点是:简洁、圆润和可爱,一般都带有特粗的深色描线、Q 版化卡通形象、圆润的线条、矢量绘制的线条+面组合的设计风格,整体很清新、可爱的调性,一般运用在图标和空白界面的提醒等方面。
4.肌理插画。
肌理插画一般是在基于扁平画的基础上,最后融入肌理效果,最后呈现出有质感,且有光影效果的画面;这种画法一般没有描边线,大多都是通过色块的明暗来区分每个元素;通过增加质感、杂色等,来增加插画的层次和立体感,可以有效的刻画作品的细节;给人很朴实的感受,比较轻松随意;肌理中的颗粒感增加了画面细节,也更耐看,同时也更有个人风格。
5.立体插画。
立体插画能够二维的空间里表现三维的事物,为画面带来透视感和空间感,更好地传达信息。
6.描边插画
。描边插画可以简单理解为众多线面结合图标组合在一起,互相呼应而组成一个大画面,多带有描边的处理;多运用线条和描边,画面整体比较干净整洁,常用于H5/App;在应用时要注意描边的粗细对比,要衡量是否符合常规。
7.剪纸插画。
剪纸风格插画就是用剪纸的方式制作插画,通过切割,堆叠分层剪纸来营造不同的内容。与传统的平面插画相比,剪纸插画可以使画面更具层次感和立体感,形式上也更加新奇有趣。
8.国潮插画。
国潮在近几年备受推崇,简言而知,国潮就是以中国文化和传统为基调,集时尚、格调和腔调于一身,是传统与现代的文化思潮碰撞,更是东方美学的淋漓展现。因此插画融合了国潮文化,加速画面的传播力度,更具时尚感;同时也赋予了品牌更多的符号和文化价值。品牌可以借此迸发出无限的魅力和营销潜力。
9.光影插画。
光影插画能利用光线和阴影结合,将画面的氛围烘托到极致,是一场想象与现实的完美碰撞。通过明暗和阴影层次变化,让视觉上更有立体感,以此形成固象,让画面更加有吸引力和视觉空间感。
10.手绘型插画。
手绘插画是插画表现手法中最原始的一种,很考验创作者的形体和绘画功底;通过运用手绘的肌理和图形来直观地传递情感的艺术设计语言,可以让观众更直接的接受情感,极具直观的形象和真实的生活感以及快速的情感感染力,比其他的插画形式多了一种人情意蕴。多用于艺术性的活动或者动漫、海报设计,整体张扬又随意,带着诸多的生活气息,很有亲和力。
图标类型和风格总结
这篇文章来自优设网,主要是最近的工作中经常用到图标,但是设计给到的图标放到页面中总是有点不协调,所以看到这篇文章想要收藏分享一下。
作者写的还是很细致的,喜欢的可以关注他。链接地址在下面。
编者按:图标类型千变万化,实际上万变不离「线性、面性、线面结合」3个方面, 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等表达方式设计而成。本文将近 6000 字,一篇就可以了解全部设计风格!
图标是 UI 设计中极为重要的一个环节,我们在做每个界面的设计几乎都会涉及到图标的表达,出色的图标设计可以让界面表达更加精致、有趣。
图标的设计往往也体现着设计师的基本功,因此除了日常多画提升对图标造型的把控力外,我们也更需要了解和学习图标设计的趋势类型,从而帮助我们提高在设计中的效率。
基于自我学习的目的,平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理,以及自己对于每种图标类型的思考。
图标的类型划分
设计网站上的图标可以说是多种多样,不同类型的图标都有着独特的魅力。例如,线性图标简洁轻量、面性图标厚重直接,当然同一种类型的图标也具有很多不同的表现形式。
因此基于本人对图标的理解,大致划分为三类:线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。
线性图标
使用轻量的线条勾勒的图标,整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受,细线轻量、直线硬朗、曲线柔美。
1. 线型图标基础分析及想法
粗细对比
粗细不同,图标的力度和重量感就会有差异。粗线的图标,视觉关注力来说会更加突出,但较于细线的图标也会显得粗壮、厚重。细线的图标,精致、透气、秀美。
但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细,而并非单纯的考虑图标的关注度,反而更需要考虑图标与界面整体的平衡感。
柔度对比
直角与圆角决定了外形的感知和风格的走向,如下图对比中看出,圆角越大图形越趋向于可爱柔美(如下右图),圆角越小则越直接、硬朗和阳刚(如下左图)。因此刚或柔或中间值完全取决于早期对于整体风格的定调。
繁简对比
除了轻量化和简洁之外,图标的识别性也是极为重要。如下左图,「过度简洁」 导致图标失去该有的识别度而出现歧义,而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中,应该保持在不影响图标识别度的情况下,最大限度的提升图标的简洁程度。
特征的识别度
除了简洁程度,也需要考虑图标该有的特征。例如下图 「评论」 图标的案例,当我把图标中的「三个点」 去掉时,图标依旧具有 「对话/评论」 的表意,而当我把下面的 「箭头」 去掉保留 「三个点」 时,则会出现歧义,它可以被表意为 「更多」 的意思,因此在设计图标时需要对于表意做精准把握,避免歧义出现。
保持图标的特征美感
如下面的 「心形」 图标,下左图是我们具有普识性的图标,与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计,整体外形虽然保持着爱心,但为了与整体风格「一致」 强行对外轮廓进行切割,与原图形在美感上则稍微有些出入,这也是我们需要思考的关键点。
组合型比例
组合型的比例会影响到图标的精致程度,准确的 「比例值」 能让整体的造型趋向平衡,更具有美感。如下图案例尝试了两组不同比例的效果,这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时(下图2),图标的整体视觉效果较为平衡;当大于 1 : 2 并接近 4 : 3 时,图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时(下图3)则会产生稀疏不紧凑的效果。(这里的比例只是案例需要,实际设计以最终的视觉感知为准)
2. 线性类型拓展
基础的理论,结合延展的应用,可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例,可以看看线型图标设计类型的多样性。
极简风格
整体风格极为简约,没有多余的线条,通过线条还原图形的本质,外形 「简单」 却具有很强的识别性,在视觉感知上轻松、干净。
极简的风格图标在于对图形的把控,多一笔可能显得复杂,少一笔可能影响识别程度。以上图为例,图标的组合元素保持在 2 个左右,整体较为干净。
实际应用:Instagram、Airbnb、Facebook、Twitter
双色
相较于 「纯色的图标」 更具表现力,细节上也会更加丰富,形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。
同色系:同为冷色系、暖色系或同一色系的表达形式。如下图案例,以暗色为主色,亮色点缀提亮,使得图标具有一种高光提亮的感觉。
另一组案例是亮色主色结合暗色,整体图标效果还算可以,但较亮的颜色没有应用在图标的关键特征上,使得图标第一眼的感知稍有减弱。
对比互补色:颜色跨度更大,层次更加分明。如下图案例,红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。
实际案例:腾讯动漫我的页面
透明度变化
本质上与上面一种为一个类型的设计,通过透明度的叠加和变化,提升图标的层次感和空间感,降低图标的压迫性。
实际案例:爱奇艺9宫格图标
渐变层次叠加
渐变带出了图标的质感,结合「不同深度」或「不同饱和度」的变化,让图标更具有细节和层次。
黑白+品牌色
黑白色作为主色调,结合品牌色作为点缀色。与常规的黑白图标相比,既产生了变化,同时兼顾了品牌色的透出。
实际案例:大众点评攻略页面图标
线性渐变
结合渐变的颜色,丰富了整个图标的视觉表达,并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试,白底:粗线比细线的视觉效果相对较好,渐变也能较为清晰地被表达;黑底:细线比粗线的视觉效果显示得更加精致和具有锐度感。
实际案例:网易考拉、NAVER
一笔成形
此类图标在视觉表达上具有较高的线性流畅度和设计感,关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如,「从左到右」或「从右到左」形成一体化的连贯线条,开口起始点不一致会影响整组图标的一致性,应用在页面时也会显得杂乱。
断点图标
与上一种较为类似,但没有连贯度的要求。在线形图标基础上面,寻找一个缺口来打破 「全包边图标」 的沉闷感,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数避免过多导致图标外形过于零碎。
实际案例:腾讯体育、京东
面性图标
面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。
1. 面型图标基础分析及想法
轮廓对比
轮廓的差异会体现出不同的气质,如下图的左边和右边的区别,一个气质较为直接硬朗,另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整,如下图中间的图标在轮廓的处理上则显得比较碎,整体外轮廓造型的连贯度有所欠缺。
镂空对比
适当的镂空除了补充了图形的识别度之外,还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例,过小或过大都可能影响图标的平衡感。如下图的中间和右边,镂空过小对图标的辨识度并没有多大作用,没有镂空则少了一些透气感。
形体对比
形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例,单独形体与组合之后的形体相比视觉感知更直观些,而组合形的图标相对会精致一些,多了一些层次。在日常设计中的经验是:越小的图标形体应该越简单,因此建议单体出现较好;若图标的尺寸足够大时可采用组合型的设计,补充图标的细节。
繁简对比
设计面性图标时,对于多余细节的管理也很重要。随着细节的增加,块面切割过多,会使得整体图标变得过于零碎(如下右图)。保持简约的设计提高图标的识别度,在关键的特征细节上做补充(如下中间图的相机闪光灯)。
2. 面性图标类型拓展
面性图标在设计时也可以结合各种不同的表达方式,来提升图标的质感和创意,而非只是简单的填充颜色。
单色面+点缀色
整体的外形使用统一的颜色,结合图标的属知使用不同的颜色进行点缀,通过点缀色提亮了图标的视觉效果,达到既统一又具有差异化。
多彩双色
通过对比色、邻近色的搭配来营造整体的图标氛围,提升了图标的层次和丰富度,双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见,简单且容易出效果。
微质感渐变
微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果,因此可以根据不同设计的需要进行调整。如下图案例:
实际案例:全民K歌
透明度/灰度变化
透明度/灰度的变化,让原来单色的图标变得更加具有层次感和空间感,设计细节更加丰富,降低了单色面性图标的厚重感。
实际案例:企鹅FM我的页面
透明度变化+渐变
渐变的设计提升了面性图标的质感,从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化,使得图标具有了层次感。
透明叠加的图标+渐变的背景
此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。
实际案例:全民K歌点歌页面
颜色叠加穿透
图标透明叠加之后产生了交错的负形,叠加出第三个面。虽然整体设计依然保持着扁平化,但却多了一份层次感,并且增加了图标的细节。
实际案例:百度网盘
渐变层次叠加
整体的效果与透明度变化的图标较为接近,通过渐变的深浅变化,使得形状的衔接处出现了明暗对比,因此图标也具有了厚度感和层次感。
实际案例:NAVER、掌上生活
高斯模糊
此类图标基本没有在 APP 中看到,与「透明度变化」或「颜色叠加」相比都更具层次感和空间感,同时图标也具有较强的设计感。
线面结合
结合了线性和面性的优点,既保持了面性的重量感,同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控,不同比例可以呈现出不同的视觉感知。
1. 线面结合图标的基础分析及想法
线面比例
线面比例的差异,图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例,从下图中可以看出,当填充与外形窄边比为 1 : 3 时(左图)图标呈现往内收的感觉;填充与外形窄边比为 1 : 2 时(中间)图标整体较为平衡;当填充与外形窄边比为 2 : 3(大于1:2)时(右图)整体具有外扩趋势。
组合形式
线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标,不同的组合形式会体现出不同的设计风格,因此在设计时尽量多发散思考,寻找出适合你的组合方式。
繁简对比
线面结合本身就由两种形式组合,因此在设计的时候更需要对整体造型进行把控,单体(线和面)造型必须保持较高的简洁程度,这样最终组合形成的图标才不会过于复杂(左图),若本身形态过于复杂,则会降低图标的辨识度和视觉美观度。
2. 线面结合图标类型拓展
线面结合的图标集合了线性和面性的优点,在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合,因此可以结合出更多设计的可能性。
黑白线+面性品牌色
与「线性+品牌色」的做法较为接近,统一的线性颜色叠加品牌色的透出。
实际案例:好好住、soul
线面双色
基于线面的基础上,在线和面的颜色上做差异。具体做法与线性或面性的双色接近。
线面结合-阴阳
线和面的结合按 50% 的比例进行设计,依据上下、左右、居中等基础方式的结构化设计,整体图标的视觉效果较为跳跃,非常规。
线面双色+错位
在双色图标的基础上,线和面按照统一的 「百分比」 进行缩放,并进行透视和位移的设计,整体呈现出来的是一种交错叠加的视觉效果,相比普通的线面双色更加丰富。
实际案例:闲鱼底部tab、脸球底部tab
线面错位+渐变
基于上一种风格,对面或者线的颜色进行渐变设计,丰富了图标的质感和颜色更加细腻。
线面透明度变化
与「线面透明度变化」的设计方式大致一样。如下图案例,「弱线强面」的第一识别度较弱,而「弱面强线」 的外形识别度较高,也更符合图标的表达。
实际案例:新浪微博、腾讯新闻
基于三种基础的类型表达,可以拓展出多种多样的设计形式。除了以上的案例之外,还收集了一些其他的设计。
线面结合 C 插画
整体比较偏向插图的感觉,细节和元素较多,常见于一些 APP 的空白页设计。
线面结合 C 卡通插画
整体感觉比较可爱、卡通、二次元,常见于一些二次元或漫画类的 APP。
面性 C 渐变强质感
整体风格的光影质感会比较强烈,常在一些活动运营或小游戏的界面出现。
面性 C 扁平写实
整体感觉比较扁平,细节的丰富度与现实感知接近。
线面+渐变插画
整体风格比较偏向绚丽多彩的颜色风格,质感和细节较为丰富。
写实风格
3D质感图标
由于 C4D 的制作成本相对较高,目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势,在时间和能力允许的情况下需要多做这方面的尝试。
等距的线面结合
等距的设计,让原本线面的图标丰富了层次,并具有立体透视的感觉。
除了以上这些之外,我们在实际场景中也会发现一些较为特别的图标设计。
Facebook 更多页面的列表图标
整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计,因此整个页面在图标的设计上做了很大胆的尝试,与常规的单色图标相比更具有吸引力。为了区别不同的业务,系统性质的功能图标做了色调的区分。
APP Store 游戏和新APP界面下的类别列表图标
整体为具象化扁平风格的设计表达,图标的颜色还原了最基本的现实感知。
iOS 系统办公类软件的起始页面图标
整体风格比较偏商务简约,具象的图形表达+轻微的渐变质感。
QQ手机版中延展的功能图标
整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达,色调方面基于业务属性结合品牌色进行了区分,整体既统一又具有差异化。
