一、图标的定义
1. 什么是图标
图标具明确指含义的算机图形。从功能分类角度分启动图标、应用图标、功能图标。
2. 什么是功能图标
功能图标具指意义且具功能标识的图形,它不仅一种图形,一种标识,它具高度浓缩并捷传达信息、便于记忆的特性。
二、图标的种类
- 具象图标:保持事物本来固有形态进行优设计。如汽车,轮船,飞机,车票……
- 抽象图标:不是一个体的事物,更趋于概念化。如个人中心,空间,模式,最近等。
三、图标的风格
1. 面性图标
面图标是由一根封闭的造成面,面图标同样具有大小、形状、彩、肌理等造型元素。直面图标具有稳重、刚毅的男化特征;曲面具有动态、柔和的女化特征。
不透明度图标
不透明度图标是通节图标的部分面结构来增加次感,从角度属同系。
△ NO-921
光影图标
三大面大,通节面的反光和阴影来增加面图标的纹理。在扁平时代的今天留着微拟物风。
多彩色图标
多彩色给人很酷炫的感觉,从明度角度还提取深浅的颜色表图标的黑白灰。
△ Kyle Anthony Miller
2. 线性图标
线性图标通过粗细一致的线条绘制,高度概括出的图标,既能让人赏悦目,又给用户创造应用的乐趣。
圆角图标
圆角图标给人以亲力,也柔软,软弱的一面。图标设计越来越美的今,圆角图标的应用行业已经越来越广泛。比如性,母婴,儿童,游……
△ Stephen Andrew Murrill
直角图标
直角图标给人以锐利,坚,果断,不拖泥带水的一面。最先让人眼前一亮的是魅族系统Flyme6 面的图标它就是用的直角,给人快干净的觉。真正更好的诠释它内在含义的非金融的图标了 ,投资理财的候需要人果断作出判断。理财有风险,投资需谨慎。直角的觉让人当机立断,不拖泥带水,快买快出。如果用圆角就觉柔一点,觉做事优柔寡断。所以一下在金融领域被做成了标杆式的功能图标。
断点图标
断点图标是点线面演的一种产物。在最开始UI兴起的时候,设计师们满足于单线条的功图标,通过点线面增形式感。最早浪体到这一格,算是还是很错的一种格。很遗憾只留在了我的记忆,上并没有到之前的设计。
△ Catalin Mihut
光式图标
光式图标是传统绘画的产物,我们在传统绘画的时候往往最后一笔都是添光,起到画龙点睛的效果。光式的功图标采里细外粗的规律,和断点式功图标差多一个年代的产物。在断扁平断简洁的今天,会感觉那最后一笔是多余的。
△ Udisk6353
透明图标
透明图标是调节图标的分结构的透明来增图标的层次。色彩上面跟双色图标是一样的,只过从配色角属于同色系的范畴。
△ Laura Reen
双色图标
双色图标在实际应中非广泛,是很百搭的那种。一种可有彩色跟无彩色结合,有彩色的颜色可是企色,可是代表行或者产的颜色跟无彩色黑色相结合。一种是体色跟点缀色组合而成的双色,但使时要考虑到当前界面中的配色宜过多,多了就容易。
△ stay
线面结合图标
线面结合图标是一种很彩的格,线是概括的图标,这时候面更多的是充当点缀的作。面的表现方式有很多种,可是单色的,渐变色的,可像 MBE格那样取体结构形成的面,可取图标里面有闭合路径形成的面。这种格应非广泛。
△ Ted Kulakevich
△ Prakhar Neel Sharma
结构图标
结构图标算较有争议性的图标,结构图标是我们绘画的时候老师要我们起形,要开始绘画结构,对基础的大面五大调有很好的解。现在结构图标正好相反,如对于一个具像图标,我们要分析它的每一笔每一画,看清每一个结构,然后固定的形式来表现来。固定的形式可像优酷图标的相交结构点,可像上海玛娜园一笔一个颜色,等等。
笔画图标
笔画图标是难度系数比较高风格,也是我常喜欢风格,才开始流断图标时候,锤子设计师欧阳念念提出了笔画图标概念,时也是有争议图标。网易云音乐也出了这图标后更具有说服力。般也很难驾驭,也基本都能做出来,是视觉上看上去很舒服是要有深厚功底。
logo类图标
logo 类图标一笔画算同级别难度的,需图标足够精致到可以直接拿当应用图标,乃至于 logo。这种app中屈指可数。典的就当属网易云音乐的 logo 了,其实它也属于一笔画图标,同时又用了 logo,它的含金可知。
情化图标
情化图标是提取人的五官跟图标相结有拟人化的图标,这种拟人化的景模仿人在真实景的应用。QQ 的底部图标通过五官方向大移动变化好的表现出当前景。QQ 开了先河,相后续会有多情化图标出现,会有它的一席之地。
3. 如何转换线性图标与面性图标?
线性的闭合路径的图形变面性图标,闭合路径里面的线条反白,重要的联结构线反白,面性图标透气;线性的闭合路径的图形变面性图标,应适当的增线的粗来达到视觉上的平衡。
△ Jory Raphael
△ Sebo
4. 如何去创造新的图标风格
绘画结构+点线面+色彩,绘画结构可清晰的分析事物的体结构,勾勒体轮廓,对创的图标格有很大帮助。绘画结构的角是人很熟知的角,如正面,尽量要择带有透视角进行设计。点线面是设计的基础,通过从点线面角构思会获得更多的灵感。色彩方面可是企色、行色、题色、点缀色等等。(图design by Ted-Kulakevich and Graphéine )
四、图标的特性
1. 统一性
大小统
在网页设计图标主流尺寸有16×16、24×24、32×3、48×48、 64×64、96×96、128×128、256×256、512×512。在移动端iOS规范在2倍图下最适合击区域大小为48*48px,iOS功能图标其他尺寸为48加或减4倍数;安卓android 功能图标其他尺寸为48加或减8倍数。为什么 iOS 是4倍数,个数除以2倍图在乘以3倍图要是偶数最小数为4;为什么安卓android 是8倍数,安卓开发最小单位是1dp,1dp=2px,时也要满足个数除以2倍图在乘以3倍图要是偶数最小数为4,所以安卓要是8倍数。在很多带有色块图标,不仅要保证色块44*44pt大小统,也要保证里色块里功能图标大小统。
风的统一
风上面已经归纳的很,直角图标和圆角图标基础上以添加一个其他风,双风;但是剩余的其他风最就不要两两相加,不就给用户感很容易乱,也不够简洁,主次不明。
规范的统一
视的规范
为什么我们再样大小区域去绘制正形、圆形、三形,虽然符合了大小统特性,是从视觉上是不能看上去很均衡?这需要我们规范化去绘制图标,安卓android 规范里出了图标绘制法。
圆规范
2. 简洁性
简洁不单单验在图标的简洁,还要现在从创意到际落地的简洁。在使用软件 ai 或者 sketch 的时绘基础图形不要出现小数点和基数,用偶数。
3. 层次明确
图标具可点击性标识性。可点击性就会点击、点击时、点击后三种状态,主流底部标签栏会点击使用线性图标,点击时点击后使用面性图标;也使用颜色区分。
4. 延展性
图标的延展性之前在图标的风格也讲,好的图标可以直当应用图标或者 logo 来使用。同好的图标还可以通过点线面动效变化做下拉加载动画。
五、如何学会合理的设计功能图标?
1. 头脑风暴
头脑风暴看似一个不道怎么释的词,简单的说就是动脑子,越用越活。头脑风暴不单单是里用到,是所有设计师做设计之前必备工。头脑风暴完你得你的设计思路很宽,就是要合理的分析每个的行度,完成的工量,自己当前设计的水平是否以有效完成。其很设计师能有效的搜索到自己想要的东西也是头脑风暴的一种,虽你不想出很点子但还是很明确的道自己想要什么,一定注意不要直接拿来主义,还是要通平时的练习掌握更的风。为以头脑风暴想出的很点子能很的践出来。比以旅游为主进行头脑风暴,个就能想到很很。
2. 搜集资料
搜集资料的时候很好的提取关键词,直接从 iconutopia、iconfont、iconfinder、iconmonstr 搜索获取灵感。具象的事可以看看该事好的品牌公司的产品,品牌公司的业设相对较好,对后面提取元素也会很的帮。也可以通过提取好的关键词,翻译英文,再到外的网站追波、be搜一搜看看。搜索到的素元素一再设,不能拿直接用。
3. 提取元素
提取元素又归结到绘画结构中去了,绘画好的看到具象事,里默默打一灯,三面五调,光影关系都了。不很理解的还多练习吧。具象图标就提取主轮廓线,保留可可不的元素,到后的时候统一删减;抽象图标时候确实一点的思的时候可以就 iconutopia、iconfont、iconfinder、iconmonstr 找找,找到了合的还行 redesign。法后选择一种图标风格这样的绘制效率会很。
4. 规范化
上面素提取好后,需要开始选择一种图标风格进行绘制。开始绘制的候不要过于追求图标的风格,还是要从图标本身出发快速的绘制好。等全部绘制好了突然想换一种图标风格也是快的,水渠成。可能刚开始难在规范化的框框直就提取素开始绘制,那就只能先绘制要你想要创的素图标,全部画好后在统一的规范面再绘制一遍。规划化的目的就是让图标统一,任何个图标拿出来从视觉大、风格都是一个统一的整体。
5. 加减法
一套图标绘制好了之后还是在放在一起一下整理的觉,最后通过加减法适当的修修补补,对于视觉上上去过于繁琐的图标要保留大轮廓的同减少结构达视觉衡;对于确实简但有没法添加任何的西素来增加的为它做加法的候是否可以放大,来增加它的视觉丰。
欢迎关注作者公众号:「RDD」