当前位置:首页 > 杂谈 > 正文内容

学习UI图标设计,一看就会

2023-06-07 18:47:32TONY杂谈280

原标题:学习UI图标设计,一看就会

图标设计是界面设计中不可或缺的模块,同样是体现设计师视觉水平非常重要的部分。那么大家在设计图标时能够运用的风格有哪些?面对不同的应用场景又应该如何选择呢?下面小编梳理了关于图标的风格分类,让大家对图标有整体认识的同时,更好地运用到实际设计当中。

接下来,我们将从以下4个方面展开:

1. 对图标的风格类型分类有清晰的了解;

2. 合理运用到匹配的应用场景中;

3. 图标如何设计及交付;

4. 小众实用的图标下载网站推荐。

简单聊下为什么用图标而不是文字?

首先,是否所有的设计场景都需要用到图标呢,答案是不一定。如果图标的语义不明、风格混乱那还不如用文字表示更为直接。

文字和图标作用的本质都是有效传递信息,与其说图标是一个图形,还不如说图标其实是一种符号,百度百科的定义是:「符号首先是一种象征物,用来指称和代表其他事物。其次符号是一种载体,它承载着交流双方发出的信息。」

因此,图标相较于文字来说,显然更为通用,不受国家语言的限制;且在形式的表达上简单易懂,人的大脑对图形敏感度高,视觉化的图标能够帮助用户快速的定位准确信息,同时还能起到突出重点、增加页面的丰富度、强化品牌等作用。

接下来我们看看图标的应用场景如何分类?

为了对图标有个整体概念的了解,先从大的功能上划分,图标分为应用图标和功能图标。

应用图标也叫做启动图标,相当于LOGO在品牌设计当中的位置,代表着每款应用的视觉形象,所以一般具有高度的品牌识别度。

功能图标可以叫做操作图标,它的作用是在界面中辅助用户操作功能,功能图标的风格有很多种,也是本篇文章的主要内容。功能图标还可以从功能场景上细分为:操作指引、功能导航、状态图标、装饰图标、情感化设计图标。

功能图标的风格有哪些类型,如何应用?

在风格上,功能图标主要分为四大类:线性、面性、线面结合以及其他风格,不同的风格可以应用到不同的应用场景。

1. 线性风格

线性风格指的是,用线条描边勾勒出来的、偏简洁风格的图标。它不仅可以做单色设计,还能通过色彩、不透明度、描边变幻出各种丰富的延伸风格。

✅风格:简洁、轻量

✅主要应用场景:操作指引、功能导航、状态图标

1)单色

2)双色

3)多色

4)断点

2. 面性风格

面性风格指的是,用色块组成的的图标。它相比于线性图标更加有重量感,表现形式也更加丰富。

✅风格:丰富、重量

✅主要应用场景:操作指引、功能导航、装饰图标、情感化设计

1)单色

2)双色

3)渐变

4)质感

5)统一外形

3. 线面结合

线面结合风格指的是,用线条和色块组成的的图标。它相比于线性、面性图标更加有设计感。

✅风格:设计感、个性

✅主要应用场景:装饰图标、情感化设计

4.其他风格

其他风格指的是一些相对不常出现的风格。应用于装饰作用,也是表达设计师创新多用的设计形式。

✅风格:创新、有趣

✅主要应用场景:装饰图标、情感化设计

1)2.5D风格

2)轻拟物风格

3)像素风格

4)插画风格

图标设计流程

设计图标其实包含在整体设计之中,在最初的产品风格定义的时候,图标的大致风格也就定下来了。众所周知,定义风格我们需要用到情绪版和关键词,而这个关键词的提取对后期设计图标有很大帮助。因此,若是后期接到设计图标的需求时,先不要着急动手,咨询下前阶段的同事,拿到视觉形象化的关键词,更容易和整体风格匹配。

图标设计规范

图标的设计一定要有规整的设计规范,并且在项目时间允许的情况下,尽量在交付之前做一个设计组内的规范自查表:

1. 粗细一致:首先使用统一的描边、线条粗细

2. 圆角一致:使用一致的圆角数值

3. 透视一致:使用接近的透视角度,不要有的侧视有的正视图

4. 大小一致:视觉的大小保持一致,有均衡的大小感受

5. 风格一致:设计风格保持一致

图标的命名、导出与交付

图标的命名一般用英文或者拼音,如果初学者对于英文命名不好理解,那么推荐下面这个网站,它将常用图标命名汇总非常方便。

图标的导出一般有PNG和SVG两种格式,主要看开发小哥哥的需求。导出方式也有几种:

1. 上传蓝湖,自动下载和标注;

2. 上传Iconfont,需要符合上传标准;

3. 手动导出本地图片。

小众实用的图标下载网站推荐

阿里巴巴图标库Iconfont大家已经很熟悉了,如果有更多的个性化需求可以看看下面推荐几个相对小众的图标下载网站。

IconPark

字节跳动旗下的一款图标下载网站,相比Iconfont,图标种类不算太多,但图标的规范非常统一,也可在右侧的操作栏更改图标属性,另外还有免费的插画库可供使用。

Iconduck

Iconduck有两个优势,一个是种类非常丰富,有超过十万个图标资源;第二个是可以满足设计师的创新需求。

Iconfinder

Iconfinder是一款全能的图标下载网站,它最大的特点是可以在线编辑,简化了下载-编辑-再上传的过程。

ikonate

ikonate同样是一款可以在线编辑的图标网站,可直接调节线条粗细,size大小。

图标设计的意义不言而喻,不管对设计初学者还是资深设计师来说都是体现其设计能力的重要部分,图标即符号,而符号连接着这个世界,随着互联网的发展,构建统一的视觉符号势在必行。因此,学习好图标设计也是未来的趋势之一。返回搜狐,查看更多

责任编辑:

“学习UI图标设计,一看就会” 的相关文章

悦呼吸全净器敢于变革,重新定义空气净化器

悦呼吸全净器敢于变革,重新定义空气净化器

3月29日-31日,第二届国际环境空气净化产业博览会暨高峰论坛在广州举行。作为全国规模最大、资源最全的空净展,第二届空净展延续往届精彩,汇聚了空净行业各知名品牌企业悉数登场。 其中最近备受关注的悦呼...

58同城"移动经纪人"升级适用多类智能手环 助经纪人高效服务

58同城"移动经纪人"升级适用多类智能手环 助经纪人高效服务

房产服务线上化转移加强了经纪人对于智能手机的依赖,然而在线下带看中,出现了无法及时查看手机导致错过来自线上的用户消息和微聊信息等,以及各类软件消息众多导致找房用户信息被淹没等各类影响用户体验的问题。...

18个月IPO,瑞幸咖啡“闪电战”

18个月IPO,瑞幸咖啡“闪电战”

美东时间5月17日,瑞幸咖啡在美国纳斯达克成功上市,IPO首日,盘中最高涨幅一度超过50%, 最终收盘报20.38美元,较IPO发行价17美元/股上涨19.88%,市值47.4亿美元。这个股票代码为“LK”的“小蓝杯”,是今年在纳斯达克IPO融资规模最大的亚洲公司。这次IPO也成...

武汉知云科技有限公司是做什么的?

武汉知云科技有限公司是做什么的?

武汉知云科技有限公司 公司地址在九省通衢的湖北.武汉 武汉知云科技有限公司(简称:知云通信)是中国领先的移动通信运营服务商,主要经营移动通信转售业务,目前已与中国移动、中国电信、中国联通三大基础运营商,以及银盛通信、长江时代、分享通信、极信通信、远特通信、红豆电信等...

金山办公 WPS 365 全家桶发布:包含 Office、云盘、邮件等服务

金山办公 WPS 365 全家桶发布:包含 Office、云盘、邮件等服务

原标题:金山办公 WPS 365 全家桶发布:包含 Office、云盘、邮件等服务 IT之家 4 月 5 日消息,金山办公宣布推出旗下办公软件的全新品牌“WPS 365”。据官网描述,“新一代・WPS 办公全家桶”WPS 365 是金山办公提供的通用办公套件产品,包含强大的办公软...

电动车自行车业也有了24小时道路救援服务 “小哈修车”开始服务

电动车自行车业也有了24小时道路救援服务 “小哈修车”开始服务

梁长玉报道 用户的电动自行车若在途中发生故障,不用推车回家,只需通过哈啰App下单报修,道路救援服务人员会在最短时间内赶到现场提供维修服务。经过半年的试水,哈啰电动车在2022年...