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

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

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

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

15年磨一“器”!华中大研制新型等离子体空气净化器

15年磨一“器”!华中大研制新型等离子体空气净化器

长江日报大武汉客户端7月6日讯7月4日,华中科技大学电气与电子工程学院卢新培教授、潘垣院士团队宣布,成功研制出新型等离子体空气净化器。经检测认证,该设备对空气中流感病毒(H1N1)的消杀率超过99.99%,在对医院、飞机、高铁、教室、影院等公共场所进行预防性消杀方面运用前景十分广阔。...

洛可可 × 霍尼韦尔:空气净化器再就业

洛可可 × 霍尼韦尔:空气净化器再就业

这两天,北方多地遭遇沙尘天气,PM2.5指数一路飙红,再加上春季特色花粉、柳絮的影响,许多人都搬出了家里压箱底的空气净化器。 数据显示,空气净化器百度搜索指数同比增长176%,环比增长165%。有行业人士介绍,空气净化器对于净化室内空气...

湘菜:在“辣”中重生,小吃也登大舞台

湘菜:在“辣”中重生,小吃也登大舞台

点击上方蓝字 可以订阅哦! 近年来,背靠网红新一线城市长沙和“流量大户”湖南卫视,自带“网红基因”的湘菜“出圈”似乎已不是新鲜事。2020年,湘菜代表炊烟小炒黄牛肉等菜品的出席,让湖南卫视春晚直播现场变“吃播现场”。2021年春节前夕,由湖南卫视、湖南时代华影文化传媒有限...

打开抖店官网,打开你的新生意无限可能

打开抖店官网,打开你的新生意无限可能

原标题:打开抖店官网,打开你的新生意无限可能 中国电商历经近20年的发展,已经形成了庞大的市场规模。相关调查显示,2020年中国线上零售市场规模为2.3万亿美元,已经连续7年位居全球线上零售国家榜首。而在2021年,一种全新的电商生态——“兴趣电商”被抖音电商定义,从此,许许多多...

最新!2月70城房价数据来了!

最新!2月70城房价数据来了!

最近宁波的天气 真是变幻莫测 就像房地产市场一样 你永远也猜不到 下阶段房价是会升还是降 宁宝今天给大家带来了 2月份70城最新房价数据! 不管你目前有没有买房计划 都可以先来围观下~2月70个大中城市商品...

人民艺术家秦怡去世,享年一百岁,曾出演铁道游击队芳林嫂

人民艺术家秦怡去世,享年一百岁,曾出演铁道游击队芳林嫂

5月9日,据报道,“人民艺术家”秦怡于4时08分病逝,享年一百岁。作为中国百年电影史的见证者和耕耘者,“人民艺术家”的秦怡,生于1922年,先后出演了《铁道游击队》、《马兰花开》、《女篮5号》、《上海屋檐下》、《青海湖畔》、《那些女人》等多部经典优秀的影视作品。1956年,秦怡搭档曹会渠,一起出演了...