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

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

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

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

百度怎么从百度联盟赚钱?该业务占百度总收入大概有多少?是不是等同于百度为客户提供广告位?

百度怎么从百度联盟赚钱?该业务占百度总收入大概有多少?是不是等同于百度为客户提供广告位?

百度联盟对百度的意义有两个,首先是巩固百度搜索的地位,第二是赚钱。 百度变现能力最高的流量是搜索流量,搜索推广(就是以前叫竞价排名那个)是最主要的收入来源。所以,巩固百度搜索的地位,保持和提升百度搜索的流量,非常重要。...

二维码红包应用案例

二维码红包应用案例

你是否还在为此烦恼?那么你可以抽两分钟看一下以下的案例时间:2019年1月地点:山东威海荣成样本:当地某购物中心公众号周期:2个月由公众号后台数据显示,订阅号粉丝数量由原先不到3000增长到8000,服务号粉丝数量由原先1000增长到8600(最快一星期增长6000多)。每个公众号粉丝女性占60%以...

俄罗斯卢布是今年全球表现最好的货币

俄罗斯卢布是今年全球表现最好的货币

俄罗斯卢布是今年全球表现最好的货币。卢布的价值跌至不到一美分,在现代历史上最迅速、最严厉的经济制裁中,俄罗斯货币出现了惊人的逆转。自1月份以来,卢布兑美元汇率已经上涨了40%,这是一个不同寻常的情况。 通常情况下,一个面临国际制裁和重大军事冲突的国家会出现投资者逃离和资本持续外流,...

原创
            皮肤科 | 最新发表的万篇论文大数据分析:40本SCI期刊投稿指南、研究热点等

原创 皮肤科 | 最新发表的万篇论文大数据分析:40本SCI期刊投稿指南、研究热点等

原标题:皮肤科 | 最新发表的万篇论文大数据分析:40本SCI期刊投稿指南、研究热点等 在pubmed上进行检索,我们可以看到自2000年以来,皮肤科领域相关研究共发表254,298篇,从2018年起年发表量超过2万篇(20799篇),2021年--2022年每年发表相关研究2....

1月70城房价公布:15城同比上涨,北京涨5.2%领跑一线城市

1月70城房价公布:15城同比上涨,北京涨5.2%领跑一线城市

乐居买房讯 编辑:孙晓萌 2月16日,国家统计局发布了2023年1月份70个大中城市商品住宅销售价格变动情况。1月份,70个大中城市中,新建商品住宅销售价格同比上涨城市有15个,比上月减少1个。...

车险里的小秘密,24小时救援不打烊?

车险里的小秘密,24小时救援不打烊?

买车险,都在考虑怎么理赔,怎么降费率,怎么能够拥有好的服务,为什么是好的服务? 好的服务,就是理赔的时候快一点,服务就是24小时理赔到帐,快赔? 好的服务,就是降低资费,帮助你搞诈保,搞个现场什么的? 是也不是,不是也是,还有更绝的呢? 以上这些,...