正文

设计图标（设计图标素材）

发布时间：2023-04-07 08:00:11 稿源：创意岭阅读： 147

大家好！今天让小编来大家介绍下关于设计图标的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008

文章目录列表:

1、电脑上怎么设计图标logo
2、图标设计的风格有哪些?(一)
3、图标设计规范（面性与线性图标）
4、有哪些ui图标设计的分类?

设计图标（设计图标素材）

一、电脑上怎么设计图标logo

1、创建一个新文档，转到“查看”标签，然后选中“网格线”框，添加一个网格，帮助对齐logo元素。

2、转到“插入”选项卡，然后在画布上添加一个圆圈。

3、选择背景色，将默认的黑色修改为需要的颜色。

4、创建一个圆的副本，用鼠标右键单击圆圈，然后选择“复制”，使第二个圆小于原始圆，将较小的圆圈放在大的圆圈上方，单击内圆，使边界线变粗，描边线条的颜色更改为白色，如果没有边界线，可以在设置中添加。

5、使用“插入”工具，在logo中添加两条平行的水平线。

6、使用“文本”工具添加公司名称，添加在圆圈内。

7、使用“文本”工具，自定义品牌名称的字体，确保文字颜色与图标相配。

8、文本选择透明背景并删除边框线。

9、选择所有元素，然后单击“组”，确保每个元素都保留在需要的位置。

二、图标设计的风格有哪些?(一)

看起来很简单的东西有很多，其实是设计师的很多心血注入的。那么今天青藤酱就来讲一讲图标设计中包含的风格，希望大家可以多多学习。

设计图标（设计图标素材）

我们通过图标看到的不仅仅是图标本身，而是它所代表的内在含义。那么图标的设计风格都有哪些?

1.扁平化风格图标设计

扁平化风格图标设计现在深受设计师的喜爱，其一是视觉表现效果较好;其二是在进行app应用时，将图标降低像素后在界面中受到的视觉影响也较小，使用方便;其三是和界面整体风格容易搭配，视觉效果能较为融洽的进行统一。

扁平化风格的图标设计在设计上更多的是考虑色彩的搭配和图形的拼接，不再进行过多的色彩渐变运用、高光的应用、阴影的应用，不再过多的运用其他视觉元素的方式，在图标上直接进行互补色或同色系变化的色块运用，能让用户更为直接的感受到其视觉含义，正是因为这种处理方式，让用户的视觉中心更加集中，不再受到其他的视觉元素影响。扁平化风格的图标设计出现以后让UI界面的视觉表现更为直接、更加简洁、更加高效。

以上是环球青藤小编为考生整理的图标设计的风格的相关内容，希望对大家有帮助!更多技能资讯的相关内容尽在本平台，快来看看吧!

三、图标设计规范（面性与线性图标）

在UI设计中，我们经常会遇到各种各样的图标，导航栏区域的图标、金刚区图标、tab栏图标等，在不同的产品、不同功能模块的图标样式也是不同的，有面性、线性、线面结合、异性等等。通过对常见图标类型进行归纳，以及对不同图标不同使用场景进行设计规范总结，我们在做UI设计时才会更加得心应手，更加注重设计规范。

一、面性图标

面性图标是几种图标中最强的一种，其次是线面结合图标，最后是线性图标。面性图标的突显性更强。对于如何选取哪一种图标，应该首先站在信息层级上去考虑。

1.1功能入口

在首页金刚区中常采用面性图标进行功能、业务的导流及流量分发，比如美团、链家、淘宝等。但是也有些产品金刚区采用线性图标。

☛那么为什么有的产品金刚区采用面性图标有的采用线性图标？

——考虑该模块是否为该功能的核心出入口。如果整个产品此功能70%以上都是通过此模块进入的，那么建议采用面性图标；如果此功能还可以通过其他多个模块进入，就可以采用线性图标。

▶设计解析

a.内图标与底板保持一定的呼吸感

也就是说里面的图标不能太大，撑太满，要有一定的留白呼吸感。

市场上一般有两种处理方法：一是二者之间的比例约等于 0.618（内图标与底板的比）；而是两者比例接近 1:2（装饰元素与整个图标的比）。

b.图标的色彩保持四色原则与饱和度统一、渐变统一

金刚区的图标色彩可以根据其业务属性进行色彩选择，如外卖相关的可以选择橙色，健康环保的可以选蓝色绿色等等。在一个模块色彩最好不超过四种颜色。

在色彩上的处理也应保持所有图标在视觉处理上是统一的。比如色彩选取区域、渐变方向等。

c.简约挖空

简约挖空能让图标更加精致与出彩。如何做到让图标简约，首先得在造型上简约，其次再进行适当的挖空处理，进行点缀弱化。值得借鉴的产品美团与支付宝。

1.2标题点缀

标题点缀的意义在于能让用户在快速阅读中，快速找到心仪板块。

▶设计解析

a.五分原则。根据亲密性原则，让图标离文字更近，离页边更远，两种的比例为1:2。

b.图标与文字高度保持一致，或比文字略小。这样看上去才更平衡。

c.图标极简原则。此场景图标一定要简约，不能太复杂，达到区分性即可。

1.3列表流

列表流图标能让列表内容更加丰富，吸引用户去阅读与快讯定位心仪内容。值得借鉴ios设置页面。

▶设计解析

a.上下间距保持一致，左右间距保持一致。

b.图标略高于文案

c.业务属性相同的图标色彩上保持一致，图标的视觉处理保持一致

d.图标简约

☛ 为什么有的产品个人中心有统一底板，有的却没有？？

—— 在视觉呈现上追求统一感，可采用底板；追求图标的辨识度不用底板

1.4选中状态

常见于tab栏的选择状态，或者点赞、收藏等此类按钮点击后的状态。能区分于其他图标，让用户明白此时的位置与记录自己的操作状态。

▶设计解析

a.选中颜色使用品牌色

b.统一设计范围与视觉比重（采用图标栅格系统进行处理）

c.视觉处理保持统一

▶利于图标栅格系统进行图标视觉比重处理

这是很多初级设计师常常忽略的一个设计重点。导致设计处理的图标视觉比重不一致。图标栅格系统能很好的规避这个问题。

ant design里面有对图标的设计规范有很好的说明

Ant Design 的图标设计对于设计稿的分层也有一定的要求，其目的除了让设计师实现有序的文档管理之外，更多的是便于团队间文档的传递，统一的设计框架像是无形的共识，可以让彼此间的理解得到进一步的提升。

图标栅格系统资源分享链接： https://pan.baidu.com/s/1ak0Fjz2XwerfRZwQjtpl4Q

2.主流面性图标样式总结

▶白色面性微渐变

内图标采用白色到背景色的微渐变比直接用白色看上去更具有质感与细节。

▶色块不透明度叠加

色块不透明的叠加类图标更具有空间感，更丰富。

▶ 微投影图标

加上图标颜色的微投影，让图标更细腻精致

二、线性图标

2.1功能入口

非主流业务入口、或者平台工具类产品使用居多。

▶设计解析

a.视觉比例统一，利用图标栅格系统去设计

b.颜色符号业务色

c.圆角数值不宜过大，一般3-4px

2.2辅助功能按钮

辅助功能按钮如feed流里面的点赞、评论、转发等功能。线性的辅助功能图标比面性辅助图标呼吸感更强。

▶设计解析

a.视觉比例统一，利用图标栅格系统去设计

b.线条简练，描边粗细统一

c.图标高度略大于文案，或保持一样的高度（参考微博）

2.3列表流

▶设计解析

a.上下边距与页边距保持一致

b.线条简练，描边粗细统一，圆角统一

c.图标高于文案

2.4选中状态

对于选中状态的处理建议还是选用面性图标。

▶设计解析

a.选中颜色使用品牌色

b.统一设计范围与视觉比重（采用图标栅格系统进行处理）

c.视觉处理保持统一

主流线性图标样式总结

▶选中图标定制化（趣味性）

▶断点处理（形状拼接处进行断点处理，处理一定要克制）

▶粗像素（更加个性化、突出）

链接：https://www.jianshu.com/p/b8b499999464

四、有哪些ui图标设计的分类?

1、ui图标设计的分类——交互图标

该图标不仅是用户界面中的显示功能，而且参与用户交互，是导航系统不可缺少的一部分。它们可以被点击和响应，帮助用户执行特定的动作，触发相应的功能。

2、ui图标设计的分类——装饰和娱乐图标

这些图标通常用来增强整个界面的美感和视觉体验，而不需要明显的功能。但它们也很重要。这个图标迎合了目标受众的喜好和期望，具有特定的外观风格，提高了整个设计的可靠性和可信度。更具体地说，这些装饰性的图标不仅能吸引和留住用户，还能让用户的整体体验更加积极。装饰图标通常是季节性和周期性的。

3、ui图标设计的分类——应用程序图标

应用程序图标表示不同操作系统平台上不同数字产品的入口和品牌。它是数字产品的标识符号。在大多数情况下，它将品牌标志和颜色融入到图标设计中。一些图标将使用吉祥物和公司视觉标志的颜色组合。一个好的应用图标设计实际上是市场调研和品牌设计的结合。它的目标是创建一个引人注目的设计，不会让用户在屏幕上快速找到它。

同时，ui图标设计的分类往往作为行为的视觉辅助元素存在于文本中，以提高对信息的识别能力。大多数时候，用户会使用这些解释性图标来获取信息，而不是匹配文本。环球网校将会持续更新ui设计的相关资讯及技巧，也可以点击本站的其他文章进行学习。

以上就是小编对于设计图标问题和相关问题的解答了，如有疑问，可拨打网站上的电话，或添加微信。