0°

图标设计,原来这么多学问哦~

很多萌新学习UI设计,都是从图标开始涉猎,把图标设计等同于UI设计,就认为UI设计师只需画图标即可,作为一个混迹10年的职场老兵发自肺腑相告,图标是UI设计很重要的模块,但绝不是全部,笔者作为国内较早一批从事UI设计的人,从网页设计转型过来,也是从临摹图标开始,为了撰写这篇图文,特别在我塞满了小电影的硬盘里找出来不少拟物图标,如下:Image titleImage titleImage titleImage titleImage title

搜索枯肠+百度+道听途说,我总结了这种拟物图标的特征:

充分运用物体的光影、结合PS投影、渐变、斜面和浮雕等图层样式,结合实物诸如木质、金属、塑料等材质,将图标写实化设计,将生活中司空见惯的物体搬到界面中,使得认知成本非常低,不论腐乳老幼在无需学习的情况下,可以轻松辨识。

很多萌新继续发问,现在学习UI设计,还需要临摹写实图标吗?

作为成年人的世界,任何事物都不是非黑即白的,凡事都有正方面,我觉得如果说你想画拟物图标用在项目中,那肯定是凤毛麟角的,像一些活动专题、游戏、儿童益智等产品,但是为什么要学呢?Image titleImage title

通过临摹,达到动手实操能力,要知道你是否有设计天赋,动手能力是非常重要的,还能培养观察能力,提升灵感。

一、图标的定义

图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识,界面中的图标是功能标识。它源自于生活中的各种图形标识,是计算机应用图形化的重要组成部分。

二、图标的分类:功能图标、应用图标、装饰图标

1、功能图标

功能图标具有明确表意功能,是图形化的符号,用于替代或者辅助文字传达信息,使用户形成记忆思维,简化用户对复杂文字的记忆。

功能图标分为:

功能按钮图标(可点击)(交互性)

常用于导航、标签、操作

辅助展示图标(不可点击)

常用于数据信息,文字标题辅助、警告提示Image titleImage titleImage title

2、应用图标

软件应用的桌面启动图标,代表一个产品特色,充满个性,已引起用户注意,常用语电脑、手机桌面、APP应用市场Image title

3、装饰图标

装饰性图标用于渲染整个气氛,吸引用户,提升整个画面,不一定具有特定的功能特性,常用插画形式表现,常用于引导页、弹窗、活动专题。Image titleImage titleImage title

三、图标的风格

面形图标、线性图标、线面图标、扁平图标、拟物图标、微质感图标

1、色块图标/剪影

通过剪影的形式,概括性的展示图形外观Image title

2、线型图标

用线的形式勾勒图形外观,重量比面形图标更加轻巧,更加灵活。常见的有:

单色线条、彩色线条、断点线条Image titleImage title

3、线面图标

用线与面组合,通常用深色线条配浅色色块,图标设计更加丰富,更具情感,比较常见的有:

单色线面结合、多色线面结合、MBE图标Image titleImage title

4、扁平图标Image titleImage title

5、拟物图标

这部分图标可以回到本文开篇,这里就不在赘述了。

6、微质感图标Image titleImage titleImage title

四、福利赠送

通过这篇图文相信你对于图标多了一份认知,为了将理论结合实战,末了给大家赠送一些干货福利(精心整理的图标PSD文件),关注公众号转发此文即可获取哦~Image title




免费获得三圈儿课堂S币(积分)的途径:https://www.sanquaner.com/announcement/892.html


除非注明,否则均为三圈儿课堂原创文章,转载请注明本文链接。

本文链接:https://www.sanquaner.com/902.html

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论