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

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

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

原标题:学习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图标设计,一看就会” 的相关文章

《侯卫东官场笔记》经典官场小说,最畅销的小说之一,值得珍藏

《侯卫东官场笔记》经典官场小说,最畅销的小说之一,值得珍藏

《官路风流》是作者小桥老树创作的一本都市官场小说,这是一本官场沉浮类型的小说,首发在起点中文网,出版后更名为《侯卫东官场笔记》,畅销超过500万册,是起点中文网创立以来最畅销的小说之—。 主要讲述了侯卫东从大学毕业参加公务员招生考试,以第二名成绩入职官场,一开始被发配到边...

95588是哪个保险公司

95588是哪个保险公司

95588不是保险公司的电话,而是中国工商银行的客服电话。 1、保险公司是指依保险法和公司法设立的公司法人。保险公司收取保费,将保费所得资本投资于债券、股票、贷款等资产,运用这些资产所得收入支付保单所确定的保险赔偿。保险公司通过上述业务,能够在投资中获得高额回报并以较低的保费向客户...

华为P60终于到手,本地和云盘文件下拉一搜就有

华为P60终于到手,本地和云盘文件下拉一搜就有

  手机桌面下拉一下,存储在本地的海量文件就能一搜到手,到底能给我们的工作带来怎样的便利?   上个月,很多小伙伴心心念念的华为P60系列终于发布,不仅搭载了更加强悍的影像功能,全新的洛可可白配色也让P60系列更显艺术质感。其实,华为P60系列还有很多人性化功能,比如对打工人来说非...

香港汇丰港卡激活指南

香港汇丰港卡激活指南

第一步, 汇丰香港卡激活 1.香港卡片和密码分开寄送,会收到2个包裹; 2.香港卡片结尾(888/833);密码在国内 ATM 机不能修改,请务必保留好信封及牢记香港卡密码。(后期忘记密码须来支行填表,耗时1个月左右) 3.香港卡和密码都收到之后,拨打香港客服进行激...

汇丰银行(世界著名银行)

汇丰银行(世界著名银行)

(金融 : 银行 - 保险 - 证券 ) 汇丰银行由苏格兰人托玛斯•萨瑟兰德(Thomas Sutherland)于1864年在香港发起,资本500万港元。最初的担任发起委员会成员的包括宝顺洋行(Messrs Dent & Co委员会ZX)、琼记洋...

编程实用工具大全,你见过吗

编程实用工具大全,你见过吗

这些工具从事:Python,前端,Java,C,C++, R ,Javascript,C#, Matlab , Swift , Go ,数据库等领域的都适合。感兴趣的可以了解一下 1.Snipaste...