02 重要的应用图标
2.1 28种应用图标设计模式
应用图标不同于功能图标,它和其他许许多多的应用图标展示排列在手机主屏幕上,用户通过点击应用图标进入应用界面。在各大应用市场中,数以千万的应用图标分门别类等候用户下载,即使是同类型应用也数不胜数。由于应用市场不限制应用图标的风格设计,导致应用图标设计同质化非常严重,随处可见设计相似的应用图标。因此,如何设计个性鲜明、区别于其他同类应用、让用户一眼就能记住的应用图标尤其重要。纵览国内外应用市场中最主流的优秀应用,本篇归纳出28种最常见且最易设计的应用图标设计模式。
单形
单形是指应用图标只展示单个的剪影图形。通常有两种设计方式,在深色的背板上让图形反白,背板可以是单色也可以是渐变色;在浅色的背板上让图形填充颜色,图形可以是单色也可以是渐变色,或是其他视觉效果。这种设计模式的优点是直观醒目和简洁大方,视觉冲击力强,用户易于在众多的应用图标阵列中快速找到目标。


WWDC

滴滴出行

Tinder
双形
双形的设计模式与单形相似,区别在于它由两个剪影图形组成,形成正负图形的组合。组合后新的图形被赋予了多一层的含义,通常是主图形表意,副图形描述特点。例如Messenger,对话气泡告诉用户这是即时通讯的应用,气泡中的闪电则说明它具有快速、及时等特点;又例如陌陌,坐标告诉用户这是基于地理位置的应用,坐标中的气泡则表明它的社交属性。

Messenger

陌陌

iMovie

Goodshop
万能的圆形
圆形是最完美的形状,它能让视觉的重心更加聚焦,对于这一点苹果的设计师毋庸置疑。在iOS 6中标志性的开关按钮被设计成圆角矩形,而在iOS 7中开关按钮被设计成圆形,这一调整也正是因为这个原因。在iOS应用设计中随处可见圆形的设计,即使是普通的形状只要和圆形进行组合,新的图形都能提升整个应用图标的设计感。通常圆形作为背景,可以是单色也可以是渐变色,或是其他视觉效果。

Lofter

音乐神搜

Paper

QQ音乐
复形
复形是重复简单的剪影图形进行有序的排列,可以相同大小地重复,也可以等比缩小地重复,还可以不透明度递减地重复。复形的优点是一方面重复的图形更加饱满并能避开同类应用的相似设计,另一方面它能传递出应用的核心卖点。例如Todoist,重复的纵向对钩图形排列告诉我们这是一个记事本的应用,它比只有一个对钩图形的应用图标更能传递正确的信息。又例如Slo Mo,三角形代表着播放,与音乐、图片或视频相关,重复的横向排列则说明这是一个动态播放或处理的应用。

Todoist

文件夹

Slo Mo

OVLA
拼接
拼接是将两个互不相干的图形进行完美的拼接,组合成为新的图形,它同时包含了这两种图形所传递的信息,这种设计模式在Logo设计中常常使用,它是一种创意的表现形式,能给用户带来深刻的记忆。例如网易云课堂,对话气泡与书本拼接在一起,传递出在线课堂的属性。又例如QQ浏览器,云与圆拼接在一起形成大写字母Q,传递出云存储和大数据的属性。

HomeAdvisor

网易云课堂

朝夕

QQ浏览器
线形
线形的设计模式与单形相似,也分为两种设计方式。在深色的背板上让图标反白,背板可以是单色也可以是渐变色;在浅色的背板上让图标填充颜色,图标可以是单色也可以是渐变色,或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质,适合于文艺、清新的应用,在界面设计时保持这种干净明快的风格,才能与应用图标设计表里如一。

Airbnb

网易云音乐

Boomerang

次元相机
负形
负形的设计模式与双形形似,都是正负图形的组合,区别在于负形的图形更加具有设计感,一切的设计元素都只服务于负形图形,从这种角度上看,它又与双形恰好相反——在这里,负形图标传递产品信息。例如NPR One,图标中的负形图形是对话气泡告诉我们这是一个媒体或社交的应用,而正形图形强调产品气质。又例如Gostar,图标中的负形图形是三角形告诉我们这是一个视频相关的应用,而构成三角形的三个不同渐变色强调产品特征。

NPR One

行程助手

Gostar

Palm Reading
倾斜
大多数的应用图标中的图形都是水平展示,一些简单的图形经过旋转后保持一定的倾斜角度,会更加跳脱,令人过目不忘。但不应为了倾斜而倾斜,需符合产品的属性,当倾斜的图形投射到人们大脑中产生联想时,这种联想是否与产品本身的特征相符合,符合则给产品加分,反之用户则难以理解这样设计的目的。例如Popcarte,现实生活中我们常常把信件随意放在桌上,因此倾斜的信封是合理的。又例如Horizon,在摄影中常常摆出倾斜的拍摄角度,当用户看到倾斜的构图就会马上产生联想并对此认可。

ROBLOX

Popcarte

Horizon

Topbuzz
中文设计
中文是我们的母语,每一个汉字都令人记忆深刻,因此中文设计的应用图标比图形更加具有亲和力和识别性。中文设计模式即字体设计,提取应用名称中的一个或多个汉字,再将字体进行设计变形,变形后的字体图形具有产品属性的外貌特征。例如人人中彩票,“彩”字的右偏旁部首被设计成纸张的形象,我们能联想到彩票和礼花。又例如学霸君,“霸”字的右下角使用的矩形和对钩元素,我们能联想到答题、考试和成绩等。

网易邮箱大师

珍品网

人人中彩票

学霸君
填充字母
填充字母是指填补字母的缺口,使之成为面形图形,同时又具备字母本身的识别性。对新的字母图形进行填充背景色,可以是单色也可以是渐变色,或是其他的视觉效果。填充字母非常具有艺术感,通常是提取应用名称的首写或全部字母进行设计。例如Poto,它是一款拍摄与图像处理应用,因此字母填充绚丽的渐变色能与产品属性相契合。又例如Distiller,它是一款红酒应用,红色的酒滴巧妙地填补了字母D的缺口。

Pandora

Poto

Read4Kids

Distiller
英文设计
英文设计与中文设计的设计模式相似,通常是提取应用名称的首写字母融合产品的功能卖点或行业属性进行创意加工,新的字母图形依旧保持本身的识别性。例如Documents 5,它是一款PDF文档应用,将字母D的左上角设计成卷页的造型,因此这种视觉表现符合应用的产品属性。又例如Musement,它是一款旅游应用,在应用图标设计时,巧妙地将爱心图形与字母M结合在一起,爱心图形代表着心愿清单,因此在它的应用界面中随处可见这颗爱心图形的身影。

Farfetch

Documents 5

Musement

Zeek
绚丽背景
色彩比任何图形都更能抓住用户的注意力,同时色彩更加具有情绪,能传递出应用的产品气质。将背板全部填充绚丽的色彩,即使是最简单的图形在其衬托下也能使设计感飙升。背景色的视觉效果千姿百态:可以是多角度的渐变色,例如Instagram;也可以是环状向外扩张的线性渐变色,例如UP;可以是棱镜式的色彩叠加,例如美妆相机;也可以是笔刷式的浓墨重彩,例如Vango Art。


UP

美妆相机

Vango Art
不居中
在iOS中,应用图标由图形和背板组成,大多数应用图标的图形都是与背板形成居中,而一些不居中图形往往能传递出一种独有的气质,令人浮想联翩,并能在众多的图标阵列中跳脱出来。例如Autosleep,图标的画面表现是一轮圆月悬挂在天空,传递出一种安详静谧的美感,如果圆形居中放置就难以让人联想到月夜。例如雨时,居左下放置垂直排列的衬线字体透出浓浓的中国传统文化气息,如果居中放置就会缺失其中的气质。

Autosleep

雨时

Mend

健康
透明白色
透明白色是指在深色背板上的一组白色图形,呈现不透明度递减形成一种特殊的视觉效果,它比单纯的剪影图形更加通透和具有设计感。不透明度带来的层次感可以构建出新的图形,而无须过多的修饰。例如Paypal,透过上层半透明可以清晰可见下层的字母P。例如Fliboard,三个白色不透明度递减的矩形构成了应用名称的首写字母F。

LINE DECO

Paypal

Fliboard

Musixmatch
白色渐变
白色渐变的设计模式与透明白色相似,都是通过白色不透明度来构建出图形的立体空间感,它比单纯的剪影图形更加具有质感,这种质感带给了我们视觉上的享受。例如印象笔记·圈点,它是一支白色的鹅毛形象,垂直的线性渐变使鹅毛富有了生命力一般,显得更加轻柔。又例如美拍,原本普通的剪影图形在关键性位置进行渐变处理后,设计感和质感都得到了大大提升。

印象笔记·圈点

美拍

为知笔记

迅雷
色彩叠加
色彩叠加是指在浅色的背板上将一组色块进行叠加,重叠区域共同拥有的色彩令两者之间的层级关系变得模糊不清,即使是最简单的色彩经过叠加后都能发生神奇的视觉变化。像透明白色一样,色彩叠加的设计模式令图形更加清澈透亮。例如Momento GIFs,图标虽然是两座山脉的形象,但完全感受不到它们的厚重。又例如Zola Wedding,它是一款婚礼应用,清新的色块经过叠加后能看到彼此连接的爱心,令人十分愉悦。

Momento GIFs

日日煮

Labelbox

Zola Wedding
笑脸
笑脸是一种表情符号,我们看到这种表情会产生愉快的心情。任何图形一旦融入了笑脸符号就会变得亲切、可爱,具有了生命力。例如良仓,小屋子有了笑脸就不再是冷冰冰的屋子,它可以体现产品的服务和品质,欢笑也带给人们对美好生活的想象。又例如网易哒哒,倒置的笑脸让图形更加俏皮和欢乐,符合应用输出趣味内容的产品定位。

良仓

Moovit

网易哒哒

To Me
极简
极简是永恒的设计模式,看似简单的设计却蕴含深刻的含义,这就是极简设计的魔力。极简不是简陋,需要精心雕琢每一个细节,大面积的留白是为了更加突出内容,减少周围环境的视觉噪音。采用极简设计模式的应用需由外而内都始终保持风格统一。例如Solar,应用图标与主界面高度一致,全屏渐变色,白色的图文信息言简意赅,没有一丝繁冗,带给用户一致的使用体验。

想去

Prisma

Solar

HotelTonight
晶格化
晶格化是指图形像晶体一般具有棱角分明的块状,这是一种艺术的表现形式。晶格化的图形由于不同饱和度的色块拼接,可以营造一种立体空间感,适合于塑造本身就具有晶格化特征的物体。例如SellerLab,它的应用图标是一枚钻石,钻石本身就具有棱镜的外观,晶格化的钻石图形既美观又符合其本身的特征,同样的例子还有松果生活。

Blur

SellerLab

松果生活

Youtube Gaming
拟人化
拟人化是利用应用的产品属性与可爱的人物形象相结合,强调以卖萌的形象获取用户的好感,它比笑脸的设计模式在细节刻画上更加丰富,视觉形象上也更加饱满。例如Piku Piku,将相机镜头设计成眼睛,与开怀大笑的嘴构成一幅萌萌的画面,既可以与同类应用形成差异化,又可以增加应用的记忆点。又例如Threes!,给方块画上眼睛和嘴,用户在游戏过程中被这种欢乐的情绪所感染,拉近了用户与产品之间的情感距离。

Piku Piku

iMark

360儿童卫士

Threes!
中国风
中国风的设计模式强调输出中国传统文化价值观,在视觉表现上,淡雅的色调、素朴的笔墨;在元素运用上,笔墨纸砚、花鸟虫鱼、日月星云。例如每日故宫,祥云是古代帝王的象征,亦是中国传统文化里最常见的元素。又例如一束,竖排的黑色宋体汉字,横竖撇捺之间散发着浓浓的中国文化气息。

词

每日故宫

素记

一束
红黄绿蓝
红黄绿蓝是万能的色彩搭配,红黄蓝是三原色,黄蓝混合成绿色,这四种色彩搭配在一起既能让视觉画面丰富饱满彼此之间又能和谐共处。红黄绿蓝的搭配顺序更加和谐,因为这是色环上的色彩顺序,例如Polaris Office和掌阅;如果打乱这个色彩搭配顺序,则画面活泼跳跃,例如Folioscope和58同城。

Folioscope

Polaris Office

58同城

掌阅
卡通形象
以卡通形象作为应用图标也是最常见的设计模式之一,一个可爱的卡通形象有助于加深用户对产品的印象。例如Bear,这是一款阅读应用,它的卡通形象是一头洁白的北极熊,简洁的形象设计与产品的高效阅读体验一致。又例如印象笔记,这是一款多功能笔记应用,在美国有一个说法,“An elephant never forgets”(大象永远不会忘记事情),因此使用大象形象作为应用图标更加符合用户的认知。

今天玩什么

Bear

印象笔记

多邻国
折纸
折纸是通过规则的几何形状的明暗关系表现出来的一种视觉效果,它与晶格化的设计模式区别在于画面更加简洁,能构建出干净明快的立体空间感,但这种空间感会产生一种错觉,亦正亦反,反而令人着迷。例如Zoosk,爱心图形被分成左右明暗两半,我们很难分辨它究竟是凹陷还是凸起,但这又有什么关系呢?

Zoosk

V

Sprout Social

扫描宝
趣味
趣味是时下流行的文化现象,搞怪、逗趣、夸张、个性的形象能快速吸引用户的注意力。趣味的设计模式适合定位于年轻用户的应用,他们乐于尝试新鲜事物,更加忠实。例如暴走漫画,制造了许许多多的网络语言和表情包,笼络了一批又一批的年轻人群。又例如小咖秀,这是一款对嘴应用,夸张的形象将产品核心功能表现得淋漓尽致。

爆炸投

花椒直播

暴走漫画

小咖秀
旋转
简单重复的图形绕中心点旋转,叠加后呈现的视觉效果宛若绽放的花朵,异常美丽。这种近乎完美且规则的几何式构图美学,常常给人留下非常深刻的印象。旋转的角度必须是360的约数,即可以被360除以后是整数。叠加图形可以是半透明的单色,例如开眼和Parrot Flower;也可以是渐变色,例如Photos。

开眼

Blur Chats

Photos

Parrot Flower
气质
美好的事物总是能带给人们愉悦的视觉享受,一个漂亮的应用图标设计同样能获得用户的好感,从第一印象开始就建立起对产品的认同感。例如UC头条,这是一款提供优质内容的阅读应用,其应用图标无论从图形、色彩或设计手法都传递出无可比拟的气质。令人惊叹的创意表现也是打造产品气质的关键。又例如网易美学,两颗桃心一左一右构成艳丽动人的红唇,深刻而又有内涵。

UC头条

每日故宫

网易美学

Pillow
无
无,即没有设计,除了背板什么也没有。虽然这样的设计模式容易引起话题,但我们并不鼓励,因为用户很难从一个颜色上得到有用的信息。YO可能是第一个仅使用颜色作为应用图标的先驱者,它的功能极简到只能收发“YO”,因此它的应用图标设计也不无道理。

YO

Yellow

Nox

黄油相机