图标（icon）设计的方法有哪些？图标设计的设计技巧有哪些

本文目录

• 图标（icon）设计的方法有哪些
• 图标设计的设计技巧有哪些
• UI设计中图标设计的方法有哪些
• 图标设计有哪些流程
• 图标设计的基本原则
• 如何设计logo图标
• 分享UI设计中的图标设计要素
• 经验分享：7个超赞的图标设计技巧(一)
• 如何设计logo图标
• 线性图标的设计要点有哪些

图标（icon）设计的方法有哪些

直接用这个在线的图片生成ico工具吧，方便快捷，常用的图片格式比如jpg/png/webp/bmp等等都可以直接生成ico图标，还可以在线裁剪缩放，选取你需要的尺寸等等，而且清晰度挺高的。在线ICO图标制作生成,图片转换ICO图标Pro版

图片转换ICO图标Pro版步骤：

一、点击或者拖拽到上传框中，即可上传你要转换的图片，直接将新图片拖入上传框即可更换图片。目前已知支持jpg、png等多种常见的图片格式，如果上传图片并转换ico图标成功，则代表支持该格式。二、此时预览框中会出现刚刚上传的图片，可以任意缩放拖拽裁剪框，选择你想要截取并转换ico图标的区域。在拖拽缩放裁剪框的过程中，左上方会有ico图标效果的实时预览。三、选择需要生成的ico图标的尺寸，主要提供宽高为16、32、48、64、128、256、512的尺寸以供选择。通常的ico图标基本都是32、64或者128像素的。四、选择转换生成的ico图标的文件格式，默认的格式是.ico，并且有.jpg和.png格式可以选择。需要注意的是，ico图标一般都是背景镂空透明的图形，只有.ico和.png格式支持透明背景的图片。而.jpg格式的图片本身是不支持的。

图标设计的设计技巧有哪些

计感的通道就是页面中的各种图形与图标。全文16,834字，阅读时长约35分钟。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础，主要以 设计概念 和 设计思路 为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。 如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性

UI设计中图标设计的方法有哪些

一、轮廓清晰带有渐变的图标

渐变色也是这两年最热的趋势，它同样出现在图标设计当中。相对微妙的渐变在图标设计当中，增加了视觉的维度和层次，这使得图标拥有了更加立体化的细节，这种设计使得图标本身的高级感更加明显，也恰如其分地增加了整个设计的信息量和丰富度。

二、色彩明快视觉有趣的图标

并非所有的图标都必须是单色的，但是太多的色彩挤在一个小图标上的时候，会让整个设计显得混乱不堪。通过非常有限的几种色彩来设计图标，就能够让图标显得足够有趣了，同时，如果这几种色彩也足够明快，互相补充，就更吸引用户了。这一趋势在2018年也显得非常突出。

三、形同APP ICON的图标

类似APP ICON一样的图标一直都存在，但是没有像今年这么流行过。使用圆角边框外轮廓，带有彩色背景，中间是几何特征明显的图形和元素，但是并非用作APP的入口，而是运用在网页、APP内等其他的地方。它的流行可能是因为这种样式可以暗示用户，图标背后功能的价值。

四、笔触粗重线条统一的图标

这种的单色图标在今年尤其受追捧，线条清晰统一，笔触粗壮，比起常规的线性图标更加厚重，而且拥有一种莫名的萌感。虽然同样只是单色的设计，但是几何感更强，视觉重量更明显，让用户的双眼无法错过。

五、仍然扁平但更加多变的图标

扁平化设计仍然没有过时，始终还在流行。扁平化的图标在视觉上相对而言更加简约，可以被设计地更加多变，也可以同各种不同的设计风格兼容，和不同的元素搭配起来使用，因此也同样收到设计师和用户的青睐。

六、表情符号化的图标

表情符号，Emoji几乎已经成为一种独立的语言，而图标设计也同样受到了表情符号的影响，各种可供识别的视觉元素，尤其是各种角色头像，都被制作成为图标，在不同的场合使用。表情符号化的图标还有哪些更有趣的用法，还有待探究。

七、永远经典的线性图标

线性图标几乎可以用在任何场合，APP，网页，海报，说它们是不老的经典一点都不为过。线性图标有着良好的可塑性，无论是大是小都可以清晰地传达信息，表明概念。在2018年，线性图标依然是主流，依然是需求大户，相关的素材也一直都稳定地产出着。

八、结构简单含义明确的图标

对于简约设计的追求，一直贯穿着整个2018年。这一点也同样体现在图标设计上，更加图形化，更加简约的形体，但是保持清晰感知度的图标设计在今年大量的涌现。就像上面的这组图标，美食的轮廓通过简单的形体来塑造，细节则使用相同的小圆点和线条来补充，非常巧妙。

图标设计有哪些流程

1. 定义主题

定义主题是指把要设计的图标所涉及的关键词罗列出来，重点词汇突出显示，确定这些图标是围绕一个什么样的主题展开设计，对整体的设计有一个把控。

2. 寻找隐喻

隐喻是指真实世界与虚拟世界之间的映射关系，寻找隐喻是指通过关键词进行头脑风暴，在彼类事物的暗示之下感知、体验、想象此类事物的心理行为。

3. 抽象图形

抽象图形要求设计师将生活中的原素材进行归纳，提取素材的显著特点，明确设计的目的，这是创作图标的基础。

4. 绘制草图

经过对实物的抽象化汲取后，便可以进行草图的绘制。在这个过程中，设计师需要将实物转化成视觉形象，即最初的草图，当然草稿可能有很多方案，这时需要筛选出若干种满意的方案继续下面的流程。

5. 确定风格

在确定了图标的基准图形后，下一步就是确定标准色。我们可以根据图标的类型选择合适的颜色。当不知道使用什么颜色的时候，蓝色是最稳妥的选择。目前图标设计主流是扁平化风格。值得一提的是在UI设计中，大部分扁平化图标以单色图形为主，从技法上来说这样降低了设计的难度。

6. 制作和调整

根据既定的风格，使用软件制作图标。在扁平化风格盛行的今天，单独的图形设计需要更多的设计考量，需要经过大量的推敲，设计调整。因此在图标的制作中，会修正一些草图中的不足，也可能增加一些新的设计灵感。

7. 场景测试

图标的应用环境有很多种，手机的背景色也各不相同，有深色系的，也有浅色系的。我们要保证图标在各个场景下都有良好的识别性，因此在图标上线前，设计师需要在多种图标的应用场景中进行测试。

图标设计的基本原则

图标设计的基本原则就是要尽可能的发挥图标的优点：比文字直观，比文字漂亮，减少图标的缺点：不如文字表达的准确。因此图标设计的基本原则可以简单的归纳一下几点。 我们经常会看到很多界面上，往往会堆砌着各种不同风格的图标，显然，这些图标都是从互联网上收集起来，由于没有完全配套的图标，只能东拼西凑，导致界面粗制滥造，业余。统一风格为什么这么重要，理解这一点，你会明白互联网上有数百万的图标资源，为什么你的老板还要花钱雇一个图标设计师。一套好的图标，要有统一的风格，这条原则，很多设计师都明白，但是真正实现起来，也许并不那么容易。怎么做呢？也许我的定义并不能囊括所有的风格，但是至少可以给你提供一种思路2、如果可能的话，我建议你用铅笔，在白纸上勾勒出你的草图，用什么符号图形代表什么操作，在画的时候，尽可能的想象第一步的风格定义。3、统一你的色彩，准备好你的调色板。比如我喜欢用ILLUSTRATOR，我会从调色板面板里调出一种风格的色彩，略加调整，这将是我这套图标的色彩定义，在画图标的时候，尽可能选择你定义好的颜色，这样，你就能尽可能的保证你的图标色彩的统一。 图标是没有单独存在的，图标最终是要放置在界面上才会起作用的。因此，图标的设计，要考虑图标所处的环境，这样的图标，是否适合这样的界面？比如你的界面是森林和大地，你就可以考虑用石块，木头，或者蘑菇，野花设计一系列的图标。如果你的界面是平面的，简约的，你可以考虑用一些简单的平面的符号或者图形来设计你的图标，这样整个界面会很协调，不要认为这样的图标是简陋的，其实这样的图标的可识别性非常强的，在简洁的界面里，会透露出一种简约之美。 追求视觉效果，一定是要在保证差异性，可识别性，统一性，协调性原则的基础上，要先满足基本的功能需求，才可以考虑更高层次的要求--情感需求。图标设计的视觉效果，很大程度上取决于设计师的天赋、美感和艺术修养，有些设计师做了很多年的设计，作品一堆，拿出来一看，粗糙，刺眼，土气。这一条我不想说的太多，因为这是几乎是每个设计都努力的目标，我提供一套迅速提高技能方法，最原始，但也最管用：那就是多看，多模仿，多创作。当然还少了一个前提，那就是设计师的天赋：勤奋+天赋=成功。 图标的尺寸常有以下几种：16×16 　　24×2432×3248×4864×64128×128256×256图标过大占用界面空间过多，过小又会降低精细度，具体该使用多大尺寸的图标，常常根据界面的需求而定。图标的常用格式有以下几种：PNG，GIF，ICO，BMP。

如何设计logo图标

设计logo图标方法如下：

1、了解logo设计类型

如果是首次设计logo，可以通过收集一些各种类型的logo设计样式，通过这些样式的收集，也能够给予自己一些设计灵感。

2、了解logo的定位

不同的企业或者个人，在设计logo的时候，都会有不同的含义，因此，通过了解logo的定位之后，再做好相关的设计这样才能更加符合要求。logo设计要突出主题。

3、设计logo草图

如果刚开始没有logo设计灵感的时候，可以将自己的一点点想法在草纸上画出来，这样也能够给自己很多的设计灵感，再将画好的手绘稿进行电子稿的制作，把图形部分和文字部分相结合。

4、Logo色调定位

在设计草图的时候，也可以顺便想一下，logo的整体色调，既要符合品牌定位，也能够让大众清晰可见。恰当运用色彩的记忆感和感情规律，如：黄颜色代表富丽、明快，橙红给人温暖、热烈感。用ps等软件对图标进行效果处理。

5、Logo尺寸设计

Logo在设计的时候，还要注意尺寸的考究，品牌的logo在不影响整体设计和美观的情况下，这样的logo才能够更加适合品牌长期的延用。在电子稿的制作当中，要精确衡量每个角度的尺寸。

6、logo保持简洁的原则

简洁的logo元素，才是能够吸引大众的前提，这样的logo才会更加有辨识度，也更加能够利于品牌的宣传。附加说明处理：在logo底部加上需要强调的信息。

分享UI设计中的图标设计要素

一. 图标功能

图标是 Web 和 App 设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。

二. 图标类型

关于图标的类型目前并没有很权威的分类，我根据图标的用途将其分为两大类：「功能型图标」和「展示型图标」。

1. 功能型图标

一般来说，凡是 UI 界面中，用户可以点击的图标均可看成是功能型图标，该类图标往往代表某一功能或某一链接的跳转。这类图标的典型应用场景就是 iOS 系统中的底部标签栏，以及 Material Design 中侧滑菜单选项的左侧。某些列表或卡片内的图标也属于功能型图标，但这类图标往往代表一个功能，而底部标签栏图标往往代表一个页面或板块。2.展示型图标

相比功能型图标，展示型图标更加具有「设计感」，是独特的、有内涵的以及具备辨识度的。一般来说，展示型图标主要是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等。

三. 图标风格

图标的设计风格有很多种，例如：线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等，我对其中常见的几种作下简要的介绍。

1. 线性图标

线性图标是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练，具有一定的想象空间，且不会对界面产生太大的视觉干扰。

2.面性图标

面性图标可以简单理解为对线性图标的填充，但面性比线性更加稳重和扎实，对色彩的传达也清晰明显。

3.线面结合图标

线面结合图标典型代表是「MBE风格」图标，其设计特点是采用了粗描边线和偏移的填充面相结合，灵动而鲜明。粗线条起到对画面的绝对分割，突显内容、表现清晰。

以上就是环球青藤小编关于图标设计要素的相关分享，UI设计行业近年来比较火热，如果你想学习，那就快快行动吧!

经验分享：7个超赞的图标设计技巧(一)

一、捕捉对象的特征

捕捉对象的特征对于图标设计是关键的一步。毕竟图标设计的核心就是小而易懂，设计师如果能够抓住对象的主要特征，那么对于图标设计的成功就进了一大步。总之，图标需要突出对象的最典型特征，表现它所表达的概念和细节。当你设计出一个图标，用户需要能够立即辨认，这样它所表达意义的识别性，必须一目了然，必须具备经典的隐喻特征。

二、让图标简单、通用，从而让它适应一系列项目

设计图标的关键在于让图标尽量简单些，瞄准一个风格和目标，这有助于让软件开发者更加灵活的使用图标，增加图标的可用性，当然，如果你的图标设定范围更广，可以使用在首页或其他地方，那它的潜在市场会更大。

三、使用一致的光源

光源的设置可是直接关系到图标设计整体的质量，在这里，青藤小编分享一个特别有用的技巧：当你在设计一系列图标时,不紧紧要在风格上一致,像“光源”这些细节也需要注意。因此来说，在图标设计中，使用一致的光源是非常重要的一个技巧。

四、创建矢量格式的图标

矢量格式在平时工作中也是很常见的，它的优势非常明显，图标通常在一个尺寸范围内使用，因此创建一个视觉效果很棒的可缩放矢量图形，可以有多种用途，当你需要不同尺寸时，矢量绘图可以让你不需要重绘。

以上就是小编关于图标设计技巧的相关分享，希望对学习设计的小伙伴们有所帮助，当然，想要了解更多相关内容，还请关注本平台，小编期待与大家共同学习成长。

如何设计logo图标

方法1：全名组合方法这是目前为止最常见最实用的LOGO设计方法，代表LOGO有淘宝和天猫。直接用品牌名称设计一个企业LOGO的好处是，LOGO发布后，可以直接加强消费者对品牌的认知，让消费者快速记住你的LOGO和品牌。同时，利用品牌名称直接制作LOGO也可以避免重复、侵权等诸多麻烦。方法2：元素替换法这种LOGO设计在传统品牌中很常见。现代企业和公司不善于更换元素。他们在设计自己的logo时，用另一个共同的元素代替了自己的品牌，让自己的品牌也能和这个元素联系起来。通过符号元素图形和名称字体的组合，这种设计让人感觉坚韧而有活力，更适合男性品牌。方法3：文化整合法这种LOGO设计方法，在地域文化特色明显的企业或公司，如旅游公司、文化公司等，经常会用到。这种LOGO具有丰富的个性和人文思想的特点，对提升品牌调性有很好的效果。方法4：符号表达这种LOGO设计方法主要采用与表达内容有一定联系的媒介手法，如图形、元素或色彩等。传播媒介的创造力，以具象的方式表达抽象的内涵。常见的LOGO是联合利华，一个U充满了各种象征性的东西。但是这样设计LOGO，需要对品牌背后的含义进行理解、分类、总结和概括。这样才能提取出有代表性的符号元素，设计LOGO。方法5：配色法这种LOGO设计方法在互联网领域应用广泛，具有一定的现代性和视觉冲击力，主要是因为互联网人比较年轻，所以更喜欢视觉冲击力强的LOGO。这个LOGO的设计需要很强的审美能力和配色能力。同时，由于LOGO具有现代感，需要更多抽象的东西来代替企业品牌，让LOGO能够传达企业品牌的心情和基调。

线性图标的设计要点有哪些

线性图标的设计要点：

图标基础形状一般由外轮廓+内部线条组成。在造型上可以从线条粗细、圆角半径大小、图标复杂程度等方面来考虑。

1、线条粗细

线条粗细不同，图标的力度和重量感也会有差异。

粗线的图标：粗壮、厚重，视觉上看更加突出。

细线的图标：精致、透气。

2、圆角半径大小

圆角越小：视觉上越硬朗和稳重

圆角越大：视觉上越柔美和活泼

3、图标复杂度

过度简洁会导致图标失去该有的识别性，图标太过复杂视觉上会更繁重。

建议在不影响图标识别度的情况下，提升图标的简洁程度同时要表意准确。

4、断点图标

在线形图标基础上面，寻找一个缺口剪断，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数，一般不会超过2个。

5、两种线条粗细

外轮廓线条和内部线条用2种粗细大小，丰富图标细节。

扩展资料：

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