赞助商
立即赞助

如何系统学习功能图标?来看资深设计师的全面总结!

UI设计3年前 (2021)发布 流光
2.9K 0 0

一、图标的定义

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」

如何系统学习功能图标?来看资深设计师的全面总结!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一、微交互到底是什么? 微交互通常关注于单个事件或者单个任务,这些交互元素遍布于整个 APP 的各个角落。这些微交互存在的...
交互设计
编者按:Google 旗下有很多不同的设计项目,他们会到每年年底的时候,评估出每年最值得关注的设计项目,这些设计项目中大多有...
Google
昨天,在一个职业咨询的留言中看到一个来自互联网设计师的焦虑,36 岁,从业 10 年,做过后台产品设计、电商设计、内容设计等...
发展趋势
王M争:用户在使用产品过程中,难免会犯错。一个好的产品可以降低用户犯错的概率,并且提升错误被解决的效率。通俗点说就是帮...
容错性
大家在便利店结账的时候,是否有注意到:结账区会放几个货架,货架上面会有口香糖,巧克力,糖果等一些商品,排队的时候我们...
心理学
卡片分类法是一种用户体验设计中的调研方法,它可以帮助我们分析用户,构建符合用户预期的信息架构。 一个网站是否好用,判...
信息架构
最近遇到一个同学,说做了很多稿图标的方案最终还是没有确定下来,但眼看着产品马上就要上线了,该怎么办。经过一轮沟通,发...
ui设计
视觉层次是塑造优秀数字产品的基础,它能让内容以更加有效的方式被组织到一起,使其更容易被理解。视觉层次对于用户体验的影...
层次感