插画风格图标-图标类型和风格总结

插画的7种风格

特点-扁平、流行、常用的风格、简洁明了

扁平插画简单来讲就是把复杂的关系简约化,让画面更加清爽整洁,也是现在比较常用的风格了,很多商务工具类的APP会选择使用这种风格。比如说拉勾、钉钉

特点-扁平插画的变种、增加颗粒感、有质感、光影关系好

肌理插画顾名思义就是给插画加上了些肌理质感(比如杂色)和光感,本质也和扁平插画差不多,一些想体现质感的页面会用到这种风格。以下是一些设计师的作品。

特点-美术功底要求最高、应用广、展现内容丰富。手绘风格的插画运用的也比较广,常见的有一些插画绘本,故事场景设计等。下面这些是摘自插画师-顾心的作品。

特点-简洁、圆润、可爱、断点

MBE插画(dribbble的一位设计师创作了这种风格),它主要的特点就是圆润、可爱、呆萌、简洁。在APP中的引导页、启动页和缺省页运用也比较广泛。

特点-唯美、颜色的采取近似色、颜色明亮鲜艳。

渐变插画有点类似日本漫画场景的感觉,风格特别唯美浪漫。光感比较强,所以也称为微光插画。颜色一般采用相近色,颜色种类不要太多。

特点-25d插画、立体感强、视觉冲击强。

立体插画也称为25D插画,也就是在二维的空间里表现三维的事物。所以现在越来越多的设计师去学习C4D这个软件,虽然AI和PS也能做,但会麻烦一些。很多电商类的APP会选择使用这种风格。比如说京东

特点-形状、描边、抽象画处理

描边插画除了运用形状,还在它的外轮廓都运用了描边,可以很清晰的表达抽象事物。经常运用在一些图标icon上,比如闲鱼、转转

插画艺术风格有哪些

1扁平插画

。扁平插画相对来说有很强的通用性,因为它简约又直观、弱化了细节和透视,识别度和上手度也相对更快,契合了年轻人对可爱和萌趣的审美要求,是最容易让画面出整体效果的技法;通常会运用规则的几何图形或不规则的矢量图形去保留物体原有的辨识度形态,搭配大块面的色块,用简约的图形去让主体形态更加抽象或者简约化,运用的范围比较广阔,常见的有海报、包装、banner、App闪屏、游戏界面等。

2渐变插画。

渐变插画的特点是大量运用低饱和度的渐变手法,且在用色上一般采取近似色;其细节丰富而细腻、画面风格偏写实、视觉稳重大气,让画面很有视觉冲击力和层次感。其中,渐变插画里面又细分双色渐变、半透明渐变、网格渐变、渐变模糊等形式。

3MBE插画

。这种插画风格的特点是:简洁、圆润和可爱,一般都带有特粗的深色描线、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的空白页设计。

线面结合_卡通插画

整体感觉比较可爱、卡通、二次元,常见于一些二次元或漫画类的APP。

面性_渐变强质感

整体风格的光影质感会比较强烈,常在一些活动运营或小游戏的界面出现。

面性C扁平写实

整体感觉比较扁平,细节的丰富度与现实感知接近。

线面+渐变插画

整体风格比较偏向绚丽多彩的颜色风格,质感和细节较为丰富。

写实风格

3D质感图标

由于C4D的制作成本相对较高,目前较少在常规的APP中看到。但3D作为一个主流的设计趋势,在时间和能力允许的情况下需要多做这方面的尝试。

等距的线面结合

等距的设计,让原本线面的图标丰富了层次,并具有立体透视的感觉。

除了以上这些之外,我们在实际场景中也会发现一些较为特别的图标设计。

Facebook更多页面的列表图标

整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计,因此整个页面在图标的设计上做了很大胆的尝试,与常规的单色图标相比更具有吸引力。为了区别不同的业务,系统性质的功能图标做了色调的区分。

APPStore游戏和新APP界面下的类别列表图标

整体为具象化扁平风格的设计表达,图标的颜色还原了最基本的现实感知。

iOS系统办公类软件的起始页面图标

整体风格比较偏商务简约,具象的图形表达+轻微的渐变质感。

QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达,色调方面基于业务属性结合品牌色进行了区分,整体既统一又具有差异化。

图标设计的基本原则就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确。因此图标设计的基本原则可以简单的归纳一下几点。 我们经常会看到很多界面上，往往会堆砌着各种不同风格的图标，显然，这些图标都是从互联网上收集起来，由于没有完全配套的图标，只能东拼西凑，导致界面粗制滥造，业余。

统一风格为什么这么重要，理解这一点，你会明白互联网上有数百万的图标资源，为什么你的老板还要花钱雇一个图标设计师。一套好的图标，要有统一的风格，这条原则，很多设计师都明白，但是真正实现起来，也许并不那么容易。怎么做呢？

也许我的定义并不能囊括所有的风格，但是至少可以给你提供一种思路

2、如果可能的话，我建议你用铅笔，在白纸上勾勒出你的草图，用什么符号图形代表什么操作，在画的时候，尽可能的想象第一步的风格定义。

3、统一你的色彩，准备好你的调色板。

比如我喜欢用ILLUSTRATOR，我会从调色板面板里调出一种风格的色彩，略加调整，这将是我这套图标的色彩定义，在画图标的时候，尽可能选择你定义好的颜色，这样，你就能尽可能的保证你的图标色彩的统一。 图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？

比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。

如果你的界面是平面的，简约的，你可以考虑用一些简单的平面的符号或者图形来设计你的图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强的，在简洁的界面里，会透露出一种简约之美。 追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。

图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。

这一条我不想说的太多，因为这是几乎是每个设计都努力的目标，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多创作。当然还少了一个前提，那就是设计师的天赋：勤奋+天赋=成功。 图标的尺寸常有以下几种：

16×16　24×24

32×32

48×48

64×64

128×128

256×256

图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需求而定。

图标的常用格式有以下几种：PNG，GIF，ICO，BMP。

APP启动图标的设计要点有哪些？

1、做好信息传达,贴近用户心理

启动图标是一个工具、一个符号、一种沟通手段。启动图标设计的精确与精致,能够提升移动端应用软件的吸引力。设计师可以根据自己的经验,理解功能需求,确立符号图像,也可以将想法在搜索引擎中查找相关含义,收集大量词语到图形之间转化的视觉元素,表达功能信息。

贴近用户的心理模型最好,用常见的视觉元素来表达所要传达的信息,例如:音乐符图形、放大镜图形就经常在音乐类、查询类应用图标中出现。

2、要运用隐喻,注意色彩的运用

在图标设计中隐喻是必要的思维方法,特别是在对抽象事物进行理解和表述的过程中起到了重要作用,在具体设计中,设计师要对抽象概念先进行描述,然后提取出关键词,再使用字典或网络来检测关键词与抽象概念间是否具有同一性。

其次,启动图标色彩要明快多彩,但色彩的数量也不要太多太杂,只要能使图标在显示屏幕中可以与任何背景对比明显,可被用户立即识别就好。

以上就是环球青藤小编关于APP启动图标的设计要点的相关分享,希望对大家有所帮助,想要了解更多相关内容,欢迎关注本平台!

案例——APP启动页

B612把首页首先加载状态图作为启动页面,当在主屏幕上点击B612图标时会立即显示上面这个启动图像。真正启动后界面会把视频及细节显示出来。

优点:遵循ios建议,尽量让用户不去感知页面的存在,“无缝”进入到应用中去。

缺点:启动页较为单调,不易变通,少了为品牌宣传及获取更多商业价值的途径。

美柚、顺丰速运、滴滴出行,利用品牌性质,加强用户对品牌的直观印象,拉近应用与用户之间的距离。均包含三大要素:LOGA、品牌名称、Slogan。

启动页简约,品牌展示型也是用的较多的启动页类型,是任何app启动页设计均可采用的方式。上述三个app均为白底,美柚和滴滴出行要素均位于底部,纯白色背景,需要时可流畅无缝变通设计成扩展定制型,为需要的功能或活动做推广宣传。

品牌展示型启动页面对于产品而言,可以提高它们的知名度,很好的起到了宣传的作用。在做这类页面时,要注意风格的搭配,不要太突兀,影响了产品整体的视觉效果。如果没有商业需求,有品牌名称和LOGO就足够了,代入感也强,不会犯错。

这三个较前面几个品牌展示型app,启动页更为丰富。飞猪根据app内容特征,在启动页底部增添了类似地球的元素,表示世界之大,有一定情怀性;百果园app利用新鲜甜美的水果作为背景,也跟自身内容很好结合,让人看了垂涎欲滴,也是利用启动页起到了宣传引人购买的作用;百度地图则将其图标放大置于中心,更清楚明了,也让用户感觉定位精准的含义。

根据app内容增添元素可带用户更好的认识理解品牌,加强用户对品牌的记忆,或增加情怀,同时达到潜在目的,但要与app整体效果搭配,不要喧宾夺主、造成混乱。

推广宣传型的变招,普通启动页和推广宣传启动页的结合。在APP启动界面出现后,再次叠加一张页面,通过对第二张页面的定制达到想要的效果。

此类启动页视觉要衔接、色彩搭配,否则就会像硬广告、突兀。如QQ音乐用了渐变效果,视觉衔接性更强。而智联招聘、婚礼纪的整个色彩也能承上启下,比较搭配,让用户不会过于反感。

品牌页加入了定制语言,让人内心平静,有阅读情怀;同时运用了动画,使画面更衔接流畅,但由于运用动画,启动速度相对较慢。

全面K歌品牌型用的白色,app主页面也是白色背景,而推广宣传则不同。同样,爱奇艺品牌型用的黑色,app主页面也是黑色,而推广宣传是大红色背景。色彩上不能承上启下,给用户就是硬加广告,突兀闪屏的感觉。

启动页面使用意境化启动页,引起情感上的共鸣。音乐本来就要走情怀,酷狗音乐品牌页上用了很多人听演唱的背景,暗含音乐背后的力量,表达音乐能深入人心,亦能凝聚人。

信息强调型更加注重自身APP的宣传,一般为某一功能或特点的认知加强。酷狗音乐利用启动页强调51全景音效功能,为app功能做了宣传,依旧用蓝色背景作为过渡,有承上启下作用。

运用了动画,画面较流畅,使得广告植入不那么生硬,用户接受度会相对较高。但缺点是容易拖慢启动速度,等待时间较长。

如何设计APP软件图标

每一个iOS应用都会以一枚APP启动图标的形式展现给使用者,它能传达应用程序的基础信息,并能够给用户带来第一印象感受。它能直接引导用户下载并使用应用程序。UI设计人员有时设计出来的图标看起来很炫,但是投入市场后却得不到用户的认可,点击率很低,这其中的原因很多,单从视觉设计的层面讲,如何提升APP软件图标的视觉效果从而提升点击率已经成为每一个UI设计人员都应该考虑的问题。

一、APP软件图标的视觉设计

1视觉设计要符合平台开发的设计规范性

——不同的应用平台往往会产生截然不同设计结果。了解学习平台开发规范,磨刀不误砍柴工。例如苹果移动平台和Windows_Phone_7移动平台的视觉规范就有很大不同。

2视觉设计要找到共性,抓住个性

——分析了解同类的APP软件及各自图标设计的定位,找到设计方向的共性及其自身软件的独特个性。在itunes里搜索软件关键字会发现有很多相似的图标。从搜索结果中不难发现,那些APP软件图标会吸引用户的关注。

3视觉设计要力求设计表现的完整性

——明确任务,大胆设计;简化设计元素(主图形、辅助图形),突出设计主题;层次分明,不刻意追求质感。

4视觉设计要遵循横向、纵向比较的统一性

——设计好图标后,放在同类别APP图标中,去审视自己设计的图标是否能够抓住用户的眼球;有时不同平台会产生不同的视觉效果,某些系列化的APP软件产品更需要通过比较来分析产品的统一性。比较之后可以有针对性的微调、预调,但不要随便更改设计意图及表现形式。

5视觉设计要保持设计过程的连续性

——随着软件版本的升级,APP软件图标也应该在产品升级的大背景下有所体现。比较好的做法是有计划有组织的视觉递进式改进。

二、APP软件图标的设计方法

2重视APP图标视觉设计的层次感,质感表现恰到好处。

3在APP图标的视觉设计过程中不要浪费一个知名品牌的现有的元素。

4在设计过程中运用直接了当的文字内容表现隐喻的设计主题。

5在设计过程中运用行业标准图形或主题图像概括主要内容。

6在设计过程中最大限度的激发用户的好奇心。

三、设计APP软件图标时容易出现的问题

1陶醉于无意义的视觉质感,主题重点本末倒置。

2APP软件启动图标主题元素与软件内容脱节,缺少关联。

3在设计过程中胡乱使用文字表达主题。

4设计方案里的图像元素在不同平台、不同尺寸下的视觉呈现存在明显差异,看不清所要表达的主题。

5APP软件图标给用户的视觉感受“粉”“灰”“模糊”。1、色彩方面:简单特别的图案有助於icon脱颖而出。慎重使用颜色不要打翻调色板,有时候甚至一两种颜色就已经足够了。

2、试著去只用一个标识或者字母去完成icon吧,Ness,Pocket,Vine,Snapguide和Pinterest都是成功的案例。

3、保持创意创意是脱颖而出的好办法。

4、完成了一个icon之後,不要忘了在各种颜色的桌布上测试icon的显示效果。另外也不要忘了将icon放在资料夹中测试一下显示效果。最後,在使用者的设备上,icon会以不同尺寸出现,设计者需要确保icon在所有尺寸下看上去都很舒服。

5、在老款的屏幕只能提供16位标准色彩。新款屏幕的色彩深度和光滑度则要更好,但不同款屏幕之间的差别也大。基于此,设计师应优先为原始16位色彩的设备设计Logo,以保证Logo在所有设备上都能良好显示。APP图标应与品牌的全尺寸Logo有所关联。一些设计师将这定义为“视觉易辨认性”。保持概念简洁。在小型设备上,复杂的设计不可取。