imtoken下载正版|设计icon
作者： imtoken下载正版
2024-03-08 22:21:05
iconfont-阿里巴巴矢量图标库
iconfont-阿里巴巴矢量图标库
推荐7个非常实用的icon设计网站 - 知乎
推荐7个非常实用的icon设计网站 - 知乎首发于邵飞在记录切换模式写文章登录/注册推荐7个非常实用的icon设计网站邵飞今天给大家推荐几个icon图标设计的网站，可以在做设计的时候激发一下灵感，升级一下自己的设计库。iconfindericonfinder图标收录超过210万个，包含PNG，SVG，CSH，等格式，部分图标收费，总体来说已经是非常良心了。iconfont国内最大的图标设计网站了，是由阿里巴巴创建的图标矢量库，由于开放上传，所以部分图标质量较低，可以参考。iconmonstriconmonstr的图标风格简单实用，整体为黑白配色，图标更加偏向于功能性，适合做参考。icons8收录62800个图标设计，icons8的特点在于，图标在线可交互，可以通过自己的喜好在网站上，直接可以调试图标的颜色和风格，再来选择是否下载，非常好用。Noun Project除了丰富的图标以外，还可以帮你收集收集整理精美的图形插画，功能强大，方便使用，下载需要注册。Font Awesomeweb中比较常用的图标网站，除了可以下载图标源文件以外，还可以引入css文件。Androidicons免费开源的图标设计网站，图标质量非常好，可用性极高，有很多有意思的图标设计可供参考。获取更多设计内容请关注微信订阅号：如履薄冰发布于 2018-01-03 10:22设计图标设计图标赞同 22添加评论分享喜欢收藏申请转载文章被以下专栏收录邵飞在记录设计是一种多维
10个免费UI设计图标资源网站分享 - 知乎
10个免费UI设计图标资源网站分享 - 知乎首发于设计资源分享切换模式写文章登录/注册10个免费UI设计图标资源网站分享林林爱设计Iconfonthttps://www.iconfont.cn/Iconfont是中国最大的矢量图标网站，800多万矢量图标以及创业插画素材，图标可以按颜色风格来进一步筛选，选中后还能直接更改颜色下载还支持svg、ai和png。IconDeposithttps://www.icondeposit.com/IconDeposit图标库一个综合的设计图标库，收录了大量的icon作品，还包含一些经典的设计教程和PS源代码。除了免费的APP图标设计素材，还有图标集，UI / UX设计，插画/矢量图形，CSS，CSS3，jQuery，PS图象处理软件教程。Iconstorehttps://iconstore.co/Iconstore一个免费图标素材的网站,由超一流设计师提供的优质 icon 图标,可供网页设计、UI 设计师自由下载使用以及商业用途。unDrawhttps://undraw.co/unDraw可以在任何商业或个人项目中使用插图图标,而无需注明出处。IconFinderhttps://www.iconfinder.com/?ref=iamxkIconFinder一个提供超过四百多万个免费 icon 图标下载使用,是世界上前几大免费图标搜索引擎之一,注意部分是收费的。Icons8https://icons8.cn/icon8免费的高品质的矢量图标素材网站。iOS、Windows和安卓图标一应俱全。图标风格统一，矢量图可直接编辑，快速生成任何格式、大小和颜色的图标。分类齐全，方便用户迅速筛选出不同设计风格的图标。此外还提供API接口，方便开发人员快速对接。Easyiconhttps://www.easyicon.net/EasyiconEasyicon在国内是非常不错的搜索/下载图标网站，收录了60多万的图标资源可免费下载为了满足更多用户的需求，网站提供了多种语言搜索。Flat Iconhttps://www.flaticon.com/Flat Icon是一个非常庞大的图标资源集合网站，数百万的图标资源免费下载，满足你多方面的需求。IconsDBhttps://www.iconsdb.com/iconsDB图标库一个超赞的免费图标库，目前拥有4000多个图标。支持用户自定义颜色和尺寸下载自己想要的图标，而且大部分图标支持个人和商业使用。IconPnghttp://www.iconpng.com/IconsPng图标库目前收录的图标系列，可免费下载使用，里面已对图标做好分类，可快速找到自己想要的设计图标。关注公众号“林林爱设计”编辑于 2023-02-28 15:13・IP 属地福建UI视觉设计用户界面设计图标设计赞同 9添加评论分享喜欢收藏申请转载文章被以下专栏收录设计资源分享分享设计资讯、教程、软件、素材等各
设计师必看的图标（icon）设计指南 - 知乎
设计师必看的图标（icon）设计指南 - 知乎切换模式写文章登录/注册设计师必看的图标（icon）设计指南扬扬图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文尽量将图标进行系统一些的介绍说明，当然仅一篇文章是不可能面面俱到包含所有知识点。内容比较基础，主要以 设计概念 和 设计思路 为主，对图标相关的内容进行组织梳理和分类，便于小伙伴们建立图标的概念体系。过程中也有针对几种典型的图标结构进行实操代练，想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。它的本质是一种符号，它采用对这个世界的隐喻，来指代功能，含义，用途等。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。 如果粗浅划分的话，UI设计中常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果在一个图标能够表述清楚含义的时候，比如用一个叉就可以不用写「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。1.3 发展历程如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计，但由于它们的表现形式太过于抽象，缺乏情感的传递，并没有获得用户的青睐。 在此之后，越来越多的图标开始借由灵活而强大的数字技术而诞生，并且基于不同的需求而演化出不同的分支和风格。许多操作系统和工具开始预制一些成体系的图标，诞生基于种种需求，越来越多的自制的、重设计的图标，逐步进入了我们的视野。图标类型很多，我们可以用不同的方式来划分它们。图标的类型2.1 拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，早期应用界面必然要采用拟物风格，以便于人们的理解和操作。是一个由实物 → 符号的发展历程。例如「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。更具体点来说，拟物设计就是追求模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现（也可适当程度变形和夸张）；扁平化设计就是摒弃以上对效果（尤其是高光、阴影等能造成透视感的效果）的追求，转而通过抽象、简化、符号化的设计元素来表现。你还记得曾经熬夜画写实图标的日子嘛～上千个图层不在话下有木有！但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代。2.2 扁平图标区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，进行平面化的表现。2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展的后期，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的新拟物风格就是最好的证明。2.3 微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。2.4 线性图标线性图标是由直线、曲线、点在内等元素组合而成的图标样式，通过线来塑造轮廓。线性图标具有辨识度高，清晰，简约易识别等优点，线性图标不会对页面造成太多的视觉干扰。缺点是：线性图标的创作空间较少，太复杂的线性图标对识别性产生较大的困扰。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。直角线条的icon显得专业严谨，圆角粗线条的 ICON 显得饱满而可爱。2.5 面性图标 面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点。面性图标可以让用户迅速定位图标位置，预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。2.5 文字图标文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号，英文的首字母或者词语关键字本身也具备很强的信息浓缩性，因此在某些场景下，采用文字或字符作为图标，是一种很不错的表现手法。比如「提示」图标，使用一个圆圈包裹一个英文字母「i」，表示 information，表示「注释信息」的含义；比如停车场直接使用「Parking」中的首字母 「P」，这些都是比较约定俗称的使用方式。还有一些场景，很难用象形或者表意的方式进行表达，那么就很适合使用文字符号，例如京东/天猫某些商品具备「正品保证」的标识，这个概念太抽象了，很难用象形去概括，创造新的表意符号又很难被大众接受，这时「正」字就很适合作为这个场景特定的图标符号，作为针对中国用户群体的产品图标，简单粗暴且有效。如果可能的话，尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等)，那么请你自己绘制，而不是直接使用字体。2.6 " 新拟物 "风格图标苹果在 WWDC20 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。macOS Big Sur是第一个将 " 新拟物 " 设计投入大规模商用的操作系统，这可视为 " 新拟物 "在实用化道路上的首次胜利。值得一提的是，在 Big Sur 的 " 外观 " 设置里，多了一项名为" 自适应强调色 "的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代 App 在光影上会有更丰富的效果？" 新拟物 " 设计的精髓在于对光线的绝妙运用。它把光效拿捏在 " 扁平 " 与 " 拟物 " 之间，进而打造一种全新的视觉体验。不同于传统的拟物，" 新拟物 "虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，" 新拟物 " 是将真实光线用于虚拟对象，而 " 拟物 " 是还原实际物品在特定光照下的效果；由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。产品应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。3.1 中文文字图标中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。3.1.1 单字 提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。3.1.2 多字 多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行（四个字）排列。其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。3.1.3 字加图形组合文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。3.2 英文字母图标英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。3.2.1 单字母 通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。3.2.2 多字母 提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。3.2.3 字母加图形组合 字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。3.3 数字图标直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。3.4 特殊符号图标由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：3.5 几何图形几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。3.6 单双形/剪影单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。3.7 线形线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色；在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。3.8 动物图形/剪影动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。3.9 卡通形象卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。3.10 正负形以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。3.11 白色渐变白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。3.12 彩色渐变色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。3.13 无无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。应用图标尺寸规格4.1 iOS应用图标iOS6及之前的版本，应用图标的圆角半径都可以通过1/4圆绘制出来，即绘制标准的圆角矩形即可，主屏幕应用图标为114*114px，使用20px圆角半径，App store应用图标为512*512px，使用90px圆角半径等。从iOS7开始，主屏幕应用图标调整为120*120px，并且不再是标准的圆角矩形，而是某种连续曲线，接近于26-27px圆角半径。我们把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。事实上，我们很难在Retina屏幕上区分这么席位的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发同学即可，如果应用图标需用于展示，可以绘制120*120px圆角矩形、27px圆角半径代替。4.2 安卓应用图标安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。4.3 iOS应用图标设计流程在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。4.3.1 寻找隐喻隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。4.3.2 竞品分析应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。4.3.3 提取关键词根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。4.3.4 抽象图形确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。4.3.5 图标栅格线使用iOS应用图标栅格线作为设计一句有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。4.3.6 丰富细节通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。然后，白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。4.3.7 多场景测试将120*120px应用图标设计稿放大至1024*1024px，交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。△ 注：上图非实际大小，仅表明不同分辨率下的比例关系此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x的图，即将120px的图标放大至1.5倍；而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行席位调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。APP中的功能图标除了产品图标，还有一种图标被称为功能（或系统）图标，功能图标指的是担负一定功能和含义的图形，一般来说需要像文字一般地被人迅速理解，所以表达方式上不适合特别复杂，如微信底部四个系统图标就使用了比较简洁的线性风格。功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，其作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时设计精致、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来了良好一致的使用体验。在 @1x 一倍图设计模式下，以 24px 为网格基准的话，常使用的图标粗细有：1px 、1.5px、2px、3px，1.5的粗细常用于高倍屏，如近几年旗舰机的手机屏幕或者 retina电脑屏，否则像素渲染会比较模糊。5.1 图标栅格图标栅格被用来促进图标的一致性，以及为图形元素的定位建立一组清晰的规范。这种标准化的规范造就了一个灵活但有条理的系统，令所有的设计保持协调、一致和美学的视觉特征。5.1.1 像素栅格基于像素划分的像素栅格是最基础的栅格系统。在绘制图标时，我们总是希望将对象对齐到每一个像素，特别是直线。因为像素对齐不仅仅可以更好地渲染，还能让图标更加整洁、舒服。下图展示了Sketch 中像素对齐和没对齐图标之间的差异：左：像素不对齐 右：像素对齐可以在绘制图标之前就先设置好栅格，在Sketch和Figma中都有相似的设置。Material Design官网给出了图标的辅助网格，为设计师绘制小图标提供一致的标准。图标网格通常包含三部分内容：活动区域，修饰区域，关键线形状。我们以此为例进行介绍。活动区域：是指图标主要内容的绘制区域，通常而言图标图形的主体都在该区域内。修饰区域：是指用于承载部分图标的一些出格图形，某些视觉占比较小的图形可以延伸到修饰区域，但不能超出网格范围。关键线形状：关键线形状是网格的基础。有4种关键线形状，利用这些核心形状作为向导，你可以在产品图标的设计中保持一致的视觉比例。如 Material Deisgn 的图标网格中，活动区域宽度为 20dp，修饰区域宽度为 2dp，4 种关键形状分别对齐于 20pd和 18dp 和 16dp的边缘，对齐于像素。上图为基于网格和关键线形状绘制图标的示例：如左侧「剪切板」图标，整体核心图形部分以网格中的正方矩形为模板，顶部的挂钩图形视觉面积较小，部分内容伸入修饰区域。右侧「相机」图标以长方矩形为模板。5.1.2 视觉栅格除了像素栅格，还有视觉栅格。视觉栅格可以帮助我们找出图标的中心在哪里，以及人眼能感知到它有多大。圆形和弧形物体看起来会比正方形更小。因此我们应该在绘制图标时设定一个固定大小的容器，这样它们在导出时就都是相同的尺寸了。添加内边距可以让图标在视觉上看起来更加平衡，避免以后开发时还需要重新调整。5.1.3 视觉重量绘制图标不光要满足物理上大小统一，还要实现视觉上大小统一。设计师要懂得调节图标大小以避开视觉上的觉错。UI界面的图标通常可以近似的看做以下的基本格式之一：横向矩形，纵向矩形，对角矩形，圆形，三角形，正方形。如果把它们做成高斯模糊效果，你就会发现它们具有相同的视觉重量，因为它们变成或多或少相同的斑点效果。根据图标形状，将它们放在相应的框架中。你就会发现，方形图标比三角形或细长图标更紧凑。5.2 图标绘制细节清晰是图标的基本要素，在sketch中，参数不要有小数点，让图标占满像素网格。因为计算机不能识别小数点，导出图标时计算机会把不能识别参数的部分拉伸填满像素网格，导致图标出现虚边。如果为图标设置1像素的边框，边框应该使用外部或内部的描边样式，但是不建议居中描边样式，居中描边的1px边框，虽然在放大它们的时候，它们看起来很清晰。但在100%比例大小显示的时候，它们会模糊，如下图：根据像素的网格线来设置一条线的起点和终点，会让你的图标看起来更清晰。通常情况下，线的倾斜角度在45°，30°，60°的时候，清晰度会比一些不常见的角度效果会更好，比如13.7°，81°等等。所以，尽量避免用这些奇怪的数值。从一套图标中最复杂的那个开始来设计通常是最有效的，因为它会帮助我们定义相同的视觉重量，让所有的图标视觉重量保持一致。因为当图标具有不同的细节层次时，更复杂的图标会吸引用户更多的注意力，而且视觉上看上去更重。5.3 图标的基本元素5.3.1 大小一致性是设计图标的关键，在绘制时，一定要确保所有的图标都相同大小。在UI界面设计中，网格的大小必须要是4或12的倍数。@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕，界面中通常使用的图标尺寸24*24px、48*48px。通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的产品图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。5.3.2 描边和填充没有什么比看到一个填充图标和一个线性图标放在一起更让人抓狂的了。确保你的图标风格一致是非常非常重要的。比如你想用填充图标来表示选中状态，那么请一定要确保你的其他图标风格一致，只有少量的变化。通常，填充图标具有更高的可识别性，而描边图标更方便添加细节。并且在选择你哪种风格更合适的时候，也别忘了考虑品牌定位和风格。如果你要绘制描边图标，那么需要保证所有的笔画都是相同的粗细，并且笔画之间的间距不要比笔画本身更细。当我们绘制线性图标的填充版本时，首先需要考虑如何简化线条。理想情况下，填充图标类似于阴影，而不是直接翻转颜色。绘制填充图标的描边版本，需要确定好线条的粗细，以及在保证清晰度的情况下可以添加多少细节。5.3.3 颜色如果是功能图标，那么最好只使用一种颜色:黑色。否则你的组件可能变得过于复杂，不利于和其他设计师协作。而对于营销图标，出于品牌宣传的目的，你可能会想要使用两种颜色，个人认为图标最好是单一颜色的，3种或3种以上颜色的东西都是插图，而不是图标。5.4 功能图标的风格常见的功能性图标风格大致有三种：线性图标、面形图标和扁平化图标。但其实我们可以将「扁平化图标」可以看作是「线性图标」和「面型图标」的一种组合形式，所以归根到底，基础的图标风格有两大类：「线性图标」和「面型图标」；5.4.1 线性图标线性图标是通过线条来表现物体的轮廓，它比面形图标更能塑造优美的外观，且作为贯穿图标绘制的线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。例如twitter和微信底部的tab图标等。在一个场景下的几个同等重要的图标，如果线条粗细不一致，会给人一种权重上存在差异的感觉。所以，在绘制线型图标时，通常会使用统一粗细的线条。常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线面填充图标、线性渐变图标。5.4.2 面形图标面形图标是以面为主要表现形式的图标。在「微信」底部标签栏中，为选中的图标是线性图标，而选中的图标则是面形图标，同时颜色会变成微信的品牌绿色再次暗示用户选中状态。面形图标占用的面积要比线性图标多，所以更加显眼。实际上，苹果在新的设计规范中也建议开发者在APP底部标签栏中全部使用面形图标，是否处于点击态通过改变填充图标的颜色进行区别。这是因为填充图标看上去像可点击的。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。基于最基本的「线性图标」和「面型图标」，通过不同的形态和风格的组合，再结合丰富的 表现手法，就可以设计出形形色色的图标风格了。比如：不同粗细线条线性图标的组合，或者面面组合，或者线面组合。大家在设计图标的时候，需要根据自己的产品特征、受众和使用场景，去选择适合自己的表现形式。6.1 图标绘制方法图标的绘制方式主要有两种：布尔运算 和 贝塞尔曲线。6.1.1 布尔运算布尔指的是乔治·布尔，19世纪的一位数学家，为了纪念布尔在符号逻辑运算中的杰出贡献，所以将这种运算称为布尔运算。布尔运算听起来比较难，但其实非常简单，布尔运算采用的数字逻辑推演法，主要有数字逻辑的联合、相交、相减。设计师在使用软件过程中引用了这种逻辑运算方法，对应到设计软件中，就有：合并形状、减去顶层形状、与形状区域交叉、排除重叠形状。例如两个圆形相减可以得到一个月亮的造型，这就是布尔运算。合并形状：将两个形状合并为一个，取的是交集；减去顶层形状：用底层图形减去顶层图形所得最终图形；与形状区域相交：得到的形状是两个图形重叠的部分，取的是交集；排除重叠形状：简单理解就是减去两个图形重叠的部分，与「与形状区域相交」相反；基本上通过布尔运算，我们能绘制出常见的大部分图标了，但有时我们需要针对某些线条进行单独的调整，又或者我们需要打造一套手绘风的矢量图标，这个时候就需要用到贝塞尔曲线了。6.1.2 贝塞尔曲线贝塞尔曲线适用于二维图形绘制的数学曲线。1962年法国工程师皮埃尔·贝塞尔（Pierre Bézier）所发表。他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线是绘制矢量图形时的重要工具，使用钢笔工具画出的所有图形一般来说都是贝塞尔曲线组成的。贝塞尔曲线包括：节点、控制点、控制线、曲线这几个基本概念。矢量图形便是由这几个基本概念构成的。图形由基础节点作为支撑构成，控制点和节点之间的线段称为控制线，控制线就像皮筋一样，调整控制点的位置，可以改变曲线的形状，就像被皮筋（控制线）拉扯一样。节点包括 4 种基础属性类型，一种是没有控制点和控制线的「直线节点」；另一种是「镜像关联节点」，这种节点控制其中一侧的控制点，另一侧的控制点会发生镜像变化，适合绘制对称结构的曲线；再有一种是「无关联节点」，即节点两侧的控制点可以各自自由控制它们那一侧的曲线而不互相影响；最后一种是「不对称关联节点」，这种类型下，节点两侧的控制点和节点会永远保持在同一条直线上，但是却不会对称控制线的长度。在 Sketch 中，我们可以在选中节点后通过快捷键 1 / 2 / 3 / 4 来快速切换当前节点的类型，加快绘制效率。6.1.3 钢笔工具绘制自由贝塞尔曲线常用的工具便是钢笔工具，钢笔工具也是所有矢量软件的核心工具。它的使用对于新手可能稍微薇有点复杂，但是一但上手，会非常方便。The Bézier Game 这个是一个非常不错的练习钢笔工具的网站，以游戏的形式练习钢笔工具，通关的时候你对钢笔工具就已经轻车熟路了。绘制实战这里选择了几个比较典型的图标，简单演示下绘制方法和各自的绘制思路：6.1.4 面性眼睛：布尔运算相交 / 相减 / 合并形状绘制一个正圆，然后复制这个正圆形，通过布尔运算「与形状区域相交」得到眼睛外轮廓，再绘制两个圆通过「相减」与合并形状得到眼睛造型。位置定位：旋转 / 相减这个图标由两个大小圆形相减，得到环形，再绘制一个和大圆半径相等的正方形，和圆环左、下对齐，最后逆时针旋转45度完成。WIFI：相加 / 相减 / 旋转绘制多个圆通过布尔运算的相加减得出三个圆圈嵌套“靶子造型，再绘制一个正三角形，和靶子图形相交得到Wi-Fi图标。齿轮：旋转 / 相减通过两个图形的布尔运算得到环形，然后绘制一个梯形，复制一个镜像，将其对齐环形两端，复制梯形编组并旋转复制三次（45度），最后合并全部形状完成。铃铛：相加 / 相减由3个矩形组成铃铛主体，铃铛顶部圆顶结构通过设置全圆角所得，铃铛底部的半圆使用圆形和矩形进行布尔运算，完成。6.1.5 线性放大镜：旋转 / 相加绘制一个正圆和一条线，用对齐工具将其居中对齐，编组后逆时针旋转45度即可。时钟：钢笔 / 剪刀工具绘制一个正圆和一个矩形，使圆形的左下角对齐圆形中心，用钢笔工具在矩形左边和下边增加两个锚点，再用剪刀工具减去多余的线条即可。注意指针的长短关系。雨伞：相减 / 剪刀工具绘制一个正圆，再绘制一个矩形与其相减得到伞顶，然后绘制一个矩形，通过剪刀工具减去多余部分，得到伞架，完成。相机：合并绘制一个矩形和一个梯形，通过合并得到相机主体，再绘制一个正圆完成相机镜头部分，完成。爱心：相加 / 旋转绘制两个正圆和一个直径与圆形等宽的正方形，然后逆时针旋转45度所得。6.2 制定规范无规矩不成方圆，规矩的出现可以让一切杂乱的东西变得合理，统一起来。在设计上也是如此，规范具有统一输出，指引细节、便于查看的好处，规范就是一组图标中的规矩，所有图标的绘制都按照规矩来，最终的成品就会显得井然有序。小小的图标是由很多图形元素组成的，在这些图标中，元素的一致性是建立一个共同视觉于洋的关键。熟悉这些元素可以更容易地理解每个图标和他们之间细微的差异，也将帮助我们学会图标设计的底层结构，依次是笔画末端、圆角、留白、笔触、内部角、禁绘区。在制定规范时，我们通常先绘制出一个符合业务风格的图标，然后根据这一个图标定制后续的图标规范，依次按照上述图标元素进行规范。如果是渐变填充图标还要规定它的渐变角度，光影角度等。在一组中的图标需要在这些图形属性中进行统一，这样的图标虽然形状不一样但是在视觉上看起来是属于同一系列的。制定规范的三个过程：拆分细节：将图标中的细节元素（圆角、笔画末端等）进行分解，并在规范中制定细节元素的使用法则。风格定位：根据产品调性，业务属性在规范中制定相应的色彩、质感风格。功能划分：不同功能（金刚区和标签栏等）的图标要区分开来，功能相近的包括色彩、质感应该采取相近性。图标设计规范6.3 图标管理和交付完成图标后需要进行视觉检视，避免任何多余的线条或形状，保证尽可能整洁。检查所有线条是否都在标准框架内，让其他人帮忙来检查你的图标是否整洁是非常有必要的。对图标精心设计评审，合格后再加入资源库，这样避免多人同时修改而造成混乱。文件格式是导出图标的关键。不同的人需要的文件格式也不同，如果你为外部合伙人提供图标，那么可能会提供1x、2x和3x.的png文件，以适应多种设备。而对于开发和其他设计人员，则通常需要导出.svg文件，这些文件可以在设计程序中编辑，并且可以通过代码在应用程序或浏览器中绘制。当导出SVG时，代码应该尽可能简洁。选择Figma的另一个重要原因是它有超小的SVG导出，并且还能自动优化。图标资源管理工具：Nucleo或许你能做出完美无瑕的图标，但如果不能让它们产品中发挥作用的话，那将毫无意义。所以在你开始设计之前，可以和开发人员谈谈，他们能告诉你图标交付的要求，这将改变你的一些选择，比如图标的粗细或大小。问问其他设计师过去做过什么，以确保你们没有重复工作。你还可以和市场运营人员聊一下，看看他们在日常物料中缺少什么。总之，多向别人寻求反馈、建议和帮助。他们会激励你发现更好的想法，并让你了解自己应该做什么。一套完整的图标设计规范是有必要的。6.4 线性or面性设计中，我们应该是用「线性图标」还是「面性图标」呢？其实二者没有太明显的选择优劣，很多场景下已经越来越模糊，但总的来说，还是有一些法则可以作为参考：常用的手法：在App的底部导航栏，选中状态使用面型图标，而非选中状态使用线性图标；16px左右的小图标慎用线性图标，线性图标在16px下，可排布像素的区域较小，这个时候线性图标不容易设计；面型图标比起线性图标，除装饰性外具备更强的视觉信息层次感，更具引导性，比如金刚区功能图标、IOS设置界面，使用面型图标；车载等系统界面，更适合用面型图标，面型图标的视觉面积较大，短时间内更加容易识别；线性图标看起来通常会更加细腻精致，适合比较精致简洁的设计或者女性化产品设计；功能图标在UI设计中占据非常重要的作用，几乎存在于每一个应用界面中，无论是在导航栏、工具栏或标签栏，还是在首页、详情页、或个人中心页，都随处可见功能图标的身影。功能图标具有明确的表意功能，起作用在于替代文字或辅助文字来指引用户进行快速导航，它具有图形化的符号，比文字更加直观，符合普罗大众的认知习惯，有助于用户形成记忆思维，提高应用的易用性。同时，设计精美、风格统一的功能图标提升了产品视觉效果，不但给用户带来视觉上的愉悦感，还带来良好一致的使用体验。7.1 线性图标使用场景在iOS所有原生应用的导航栏和工具栏都采用了2px线框的图标设计，很多APP产品的标签栏都选择用线性风格的图标设计。无疑，线性图标可以减少视觉干扰，让用户集中在产品核心功能上，同时轻量化的视觉语言也与扁平化的设计风格更为融合。它比面形图标更能塑造优美的外观，且线条本身就是一种设计语言，因此绘制整套线性图标会更加统一，具有整体感。通常，在UI设计中，线性图标很少和背板同时存在，因为线条的图形视觉表现力较弱，容易埋没在背景色中，但也不是必须的，如果掌握好一定的规则，一些简单的线性图标和背板的组合也会很协调。7.2 面形图标使用场景面形图标具有广泛适用性，通常在运动、时尚类应用的标签栏出现。由于面形图标的视觉占比最大化，具有强烈的视觉表现力，一般用于应用界面的主要功能入口，以方便用户快速寻找。功能入口的面形图标通常分为反白和正形两种类型。反白即在彩色背板上显示白色的图标，正形即图标直接填充色彩且无背板。在带有背板的图标设计时要注意图标与背板的尺寸比例，虽没有严格的绘制标准，但从整体视觉效果上考虑，图标尺寸最好不低于背板直径但1/2，最大不超过背板直径的0.618(黄金比例)，同时还要考虑所有图标的视差一致。7.3 扁平图标的使用场景扁平化图标实际上是线性图标和面形图标的一种组合形式，这种类似插画感觉的图形一开始多用于引导页、空状态也的情感化设计，后来逐渐在标签栏、首页主要功能入口也出现了扁平化图标的身影。精致的扁平化图标令人赏心悦目，拉近了与用户之间的距离，从而建立起良好的用户印象。我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从以下五个方面来检验，分别是：识别性，规范性、统一性、呼吸感与品牌感。8.1 识别性图标就是帮助用户理解信息，所以识别性（也可以说是可访问性）是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑。我们检测图标的可读性通常要将图标的背景色底板在黑色和白色之间进行切换对比，不论是黑色还是白色的背景都可以看清图标的全部细节，还需要确保图标中的每一种颜色都是可见的。第二就是将图标拿到强光下进行观察，在强光下是否可以看清图标的主题结构，图标是否有足够的辨识度。图标识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否可替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：图标的大小，颜色，线条的粗细，这些影响视觉识别的因素识别性是否高。8.2 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。视觉大小的一致性：在相同尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如一样尺寸大小的圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中适当调整，使得视觉大小达到统一；饱满度：常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加；相同规律：同一套图标必须是以同种风格呈现的，例如是否全部使用了圆角或直角的风格，圆角大小、绘制风格是否一致；细节统一：包括像素是否对齐、圆角、描边粗细是否统一的问题；8.3 统一性在绘制多个类型相同的图标时，我们需要注意这一套图标合集需要在视觉上保持统一性。在一整套产品中，会有很多种图标，但是图标的功能不一样，所表达的内容也不同。这时，图标一致性的意义就体现出来了，根据格式塔原理中的相似性原则：人们会将如元素彼此相似的东西感知为一组。这也意味着如果具有相同功能、含义和层次结构级别的元素，则应在视觉上保持统一匹配。图标内容的统一会让用户明白相似的图标所代表的的功能也相同，而且在视觉上也更加和谐美观。因此我们在绘标后还需检查线条的粗细比重，边角的大小，配色方案，细节层次和设计元素在整个合集中是否是不变且一致的。8.4 呼吸感呼吸感的意思就是适当留白。不管是图标还是界面，适当的留白可以突出主体内容，让内容具备易看性。在图标的绘制过程中，我们应该注意图标元素之间的间距不宜过近，元素也不宜过多。图标是一个物体的简略缩影，目的是为了表达内容，让用户快速理解，太过复杂的细节会影响图标的识别速度。因此在图标的绘制过程中应该删除所有无法传达图标意义的元素，避免使图标变得太过复杂难以识别。8.5 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。那么，该如何提升品牌感，打造属于自己App的独特风格呢？品牌基因为我们提供了一些线索，这是近年来非常流行的一种趋势。我们都知道图标在APP设计中的重要性，但是打开许多APP你会发现他们的图标设计都非常普通，似乎是在图标网站上下载的素材。虽然一些优秀的设计师在进行图标设计师加入一些诸如圆角、断线等设计语言，但是仍逃脱不了与其他APP设计雷同、毫无个性的通病，使得UI看上去普通、不精致，缺少产品气质。那么，该如何打造属于自己APP的独特风格呢？品牌基因为我们提供了一些线索。它是由平面设计中的VIS（视觉识别系统）引入的一种设计策略，通过对品牌形象进行延生设计形成一套完整的视觉符号。每一个APP都有其品牌形象，代表了与众不同的气质。接下来，我们就来学习如何利用品牌基因进行图标设计。9.1 提取品牌图形通常一个App的第一个tab是首页，是用户进入App后看到的第一个页面，最常见的图标设计是一个小房子的图形。首页是App中最重要的页面，承载了整个产品的核心功能，是用户浏览最多的地方，因此使用一个让人印象深刻的品牌图形作为“首页”图标是必要的，不但使App内外形成了视觉联系，同时也二次传递了品牌形象，加强了用户对App的良好印象。例如网易云音乐的首页标签就直接使用了它的品牌图形，其优点不言而喻。但是请注意，这种设计策略并不适合于所有的App，当第一个tab被赋予特定功能，就不可使用品牌图形，否则用户会难以理解。例如微信第一个tab是聊天列表，此时使用气泡就比品牌图形更加合适。还有另外一种情况。通常一个App的最后一个tab是个人中心，即“我的”。如果App的品牌图形是动物图形，也可以使用其整体或局部图形来作为「个人中心」的入口图标。9.2 提取品牌色彩色彩也是图标设计中重要的构成元素之一，合理协调的色彩搭配让用户在浏览页面时感觉舒服。从品牌形象中提取色彩作为图标设计的依据，可以给用户带来由内而外一致的视觉体验。在设计时提取品牌色彩可适当调整色彩的饱和度，明度，既可以将图形整体填充色彩（例如微信），也可以局部填充色彩，还可以填充为图标背景色，使图标之间形成色彩上的关联。直播应用Bigo Live的品牌色是青蓝色，在标签栏的图标设计上（选中态）将图形局部元素填充青蓝渐变色，活泼清爽的搭配带给用户轻快的感觉，与整体品牌调性高度一致。9.3 提取设计语言在VI设计中通常提取辅助图形作为设计元素，这在图标设计中同样适用，当所有的图标都具备了相同的设计元素，他们就构成了一套完整的视觉符号。例如飞猪的品牌图形就很特别，猪的头部轮廓是由大写字母F演变成的翅膀造型，因此可以看到“我的”小人图标的也使用了类似的轮廓，这样他们就形成了某种视觉联系。9.4 提取产品气质品牌形象决定了产品的气质，而产品的气质决定了吸引什么样的用户。就如当我们第一次看到一个人的时候，往往会根据他的外貌形象特征，产生一个大致的印象，这就是一个人的气质。APP也同样，例如传递传统手工艺人社交的「东家」，其产品流淌着古朴、温润、精致的人文气息，它将宋体汉字的笔画进行拆解组合，创造出具有东方韵味且极具形式感的图标设计。9.5 拆分品牌名称App标签栏图标最常见的形式是图形加文字的组合，由于文字本身就能传达最直接的含义，因此图形的识别性并不那么重要了，我们就可以在其视觉表现形式上赋予更多创意和个性。MONO是一款阅读类App，它的标签栏图标直接将品牌名称中的4个字母拆分成4个图形。虽然每个字母与其对应的功能模块本身并没有直接联系，但加上标签文字的辅助也不会造成阅读困难，而且产品本身的用户人群就是比较能接受新鲜事物的年轻人，因此这样的创意反而给App设计加分了。9.6 展开形象联想我们日常使用的众多App大多数都有着相同的功能模块：首页、发现、动态、我的等，因此也就出现了很多雷同的图标设计。比如“首页”是尖顶房子，“发现”是眼睛，“动态”是气泡，如果有差别也只是设计风格的差异，有的直角有的圆角，有的线性有的面形。这样的设计没有品牌归属感，试一下将这些图标单独拿出来就无法判断它是谁，它从哪儿来？优秀的设计师不仅要具备将图标绘制精美的能力，还要具备丰富的设计想象力，不拘泥于设计规范的条条框框，有时候打破规则才能设计出优秀的图标。“首页”除了小房子我们还可以想到什么？马蜂窝的做法就很巧妙，“首页”图标是“蜂巢”，而蜂巢是马蜂的房子，这样的设计与品牌形象紧密相连，简直完美！不过最新的改版好像已经改没了。总之，要想在绘制整套图标时建立统一风格，就要从外观和颜色上确立主风格，在局部寻求个性特征，将两者结合，并融合产品属性和符合用户定位，先在脑海中构思出清晰的概念，然后在稿纸上绘制草图，最后确立一个最佳方案上机完成，只有不断地思考和打磨才能创作出最佳的设计方案。写在最后图标设计是UI设计中非常重要的环节，因为除了文字和图片的排版之外，在扁平时代能够传递给用户情绪和设计感的通道就是页面中的各种图形与图标。在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户正确和友好的指引。建议每位UI设计师在平时做大量的练习尝试各种不同的风格，以满足不同的业务需求。OK，图标设计指南就分享到这里，希望对大家有所帮助。因为篇幅较长，几经修改，有细节不严谨的地方，欢迎斧正，感谢阅读。编辑于 2021-10-04 11:53UI设计师设计图标设计赞同 39添加评论分享喜欢收藏申请
30 个免费 icon 下载网站推荐：图标、SVG、矢量图等使用指南 | Eagle 博客
免费 icon 下载网站推荐：图标、SVG、矢量图等使用指南 | Eagle 博客首页浏览器扩展用户故事资源社区博客教程视频教程使用技巧所有功能帮助中心立即购买目录Eagle 博客设计资源30 个免费 icon 下载网站推荐：图标、SVG、矢量图等使用指南图标无版权免费素材罗杰摩尔・2021-09-01人的想像力无远弗届，就如我们提供你的免费 Icon 网站使用也几乎没有限制。不管你正在寻找免费下载图标的网站，还是打算下载特别的 Icon 用于个人作品或商业用途，这篇帖子通通都可以满足你的需求！本篇帖子特别提供给需要使用各种图标及 Icon 来美化自己的网页风格、用户体验及UI界面的设计师，内文包含了 30 个免费图标网站下载链接和使用说明。
你可以在以下提供的网页找到：
使用于 Android 或 iOS 界面的元素
不同皮肤的图标及 icon
不同社区网站的功能按钮
可用于商业用途的授权图标（请在下载前再次检查授权说明喔！）
可用于个人作品的免费 icon
30 个免费 Icon 网站推荐清单Eagle App - 你的图标及素材整理工具在搜索更多免费图标之前，先来认识 Eagle！ Eagle 是一款专门给设计师使用的素材整理工具，有了它，在找寻灵感图标时，只需单击即可批量保存网络上你喜欢的所有图标和图像，然后轻易使用筛选器、标签、甚至颜色轻松整理和浏览！ 它支持超过 81 种格式，包括图标、图像、3d、视频、字体、文件等等！ Eagle 有许多出色的 UI，特别有助于设计师进行不同专案工作，也可以很轻松与 Figma、photoshop、ai 一起使用，提升设计生产力！ 官网: cn.eagle.cool1. ICONFINDERICONFINDER 是一个在设计圈中广为人知的图标搜索网站，它界面设计清晰且简洁，只要在网站中输入关键字即可找到需要的不同颜色图标！使用说明：ICONFINDER 包含免费及付费的 icon，如果想要使用免费商用授权的图标，请在搜索页面左边的筛选器中选择Free，即可使用。网站： https://www.iconfinder.com/2. flaticonFlaticon 是一个与 FreePik 同一家公司的网站，专门为设计师找寻免费素材。Flaticon 最棒的特点是可以使用网站内的收寻引擎找到「免费且商业可用」的图标。此外，在这里找到的 Icon 及图标都包含了矢量图形文件和常见的图像格式，方便设计师在下载后直接使用。使用说明：使用时需要标注出处，即使用于个人作品也需要。若要用于商业用途则需要购买商用授权。网站： https://www.flaticon.com/3. FIND ICONSFindIcons 是一个图标搜索网站，它们拥有世界上最大的免费图标数据库，网站内有筛选器和推荐功能，帮助你在做设计作品时更快速找到需要的免费图标。虽然，它的搜索引擎看起来有点简易且传统，但相信一定有需要这种设计风格的设计师们。使用说明：每个图标上都列出了不同授权的使用说明，请在下载前检查用途规范。网站： https://findicons.com/4. IconArchiveIconArchive也是一个巨量的素材搜索引擎，它不仅包含常见的界面按钮图标，还有纹理材质风格的图标及各种皮肤的漫画 icon。IconArchive 网站的特别之处在于它的搜索结果是以颜色排列的，你可以使用赞同及不赞同的投票功能，帮助改进搜索结果。如果你突然没有灵感，也可以选择最热门、最多人预览的 Icon 款式找到你喜爱的图标。 使用说明：大部分图标都是采用 CC 授权方式，但每个图标稍有不同。下载前请在各别的图标页面中查找。网站： https://iconarchive.com/5. GraphicBurgerGraphicBurger 是一个免费提供给设计师们使用的设计资源网站。在这里你甚至可以找到每个 Icon 专属的 PSD 文件来修改图标，变成你想要的样子。如果你正在寻找可爱特别的图标，请不要错过 GraphicBurger！使用说明：
GraphicBurger 上所有的资源都可以随意下载，包括logo模型、产品模型、文本效果、图标、用户界面、插图、背景图像等，均可在个人和商业项目中免费使用。
使用时无需要注明出处及原始链接，但如果你愿意注明作者或出处，我们会很感激你。
网站： https://graphicburger.com/6. Premium Pixel如果你真的不知道要使用什么图标的话，Premium Pixel 提供了专家精挑细选的免费图标，你可以在这里搜索各种免费素材和界面图标的懒人包。使用说明：所有资源都是免费授权使用，几乎没有限制。网站： https://www.premiumpixels.com/7. Freebiesbug这个网站上的资源是由许多设计师共同制作和发布的一系列 PSD 图标。就像他的网站名称一样，它提供了大量免费在 Photoshop 上使用的 Icon 素材。使用说明：可以在个人作品中免费使用这些图标。若用于商业用途，请在使用前再次检查授权，因为每个图标的作者要求都不太一样。网站： https://freebiesbug.com/psd-freebies/icons/8. IcoMoon app想要制作自己的图标吗？那你应该会喜欢 IcoMoon！IcoMoon 不仅可以找寻想要的图标，还可以建立或合并你自己的 Icon 样式，最后生成多种文件格式直接使用。使用说明：
每个图标都有一个授权链接可以参考详细使用授权。
网站上的图标都可以免费下载，进行基本的编辑，也可以导入你自己的图标，制作图标字体文件或生成 SVG、Polymer、PDF、XAML、PNG 和 CSS sprite 格式。
网站： https://icomoon.io/app/9. Squid Ink想找特别又可爱的图标下载吗？ Squid Ink 上的图标都是亲手画的，总共包含了 2000 个图标， 17 个类别，并提供了 5 种不同的下载格式，允许任意更改 Icon 颜色或图层样式、移动和重新调整元素和大小。使用说明：可以免费选择 50 个喜爱的 Icon 在个人或商用作品中，第 51 个开始需要付费。网站： https://thesquid.ink/flat-icons/10. Freepik相信喜爱免费素材的你应该对于 FreePik 不陌生，如果你还没有听说过它，那么现在也是时候了！ 这是一个一直都在更新的在线资源网站，提供的不仅仅是免费图标或 Icon 。他们也提供大量的矢量图像、插图、照片和 PSD 设计文件可供免费下载。使用说明：使用时需要注明出处。网站： https://www.freepik.com/
收集了很多 Icon 却不知道怎么有效的整理他们吗？ 试试你的专属 Icon 管理神器 Eagle
11. iconstoreIconStore 是一个免费的矢量 (SVG) 图标库，由才华横溢的设计师们一同建立，全部的文件都可下载用于商业用途。使用说明：你可以在个人和商业作品中使用网站内的所有图标，无需要注明出处及原始链接，但如果你愿意注明作者或出处，我们会很感激你。网站： https://iconstore.co/12. icon8icon8 网站最初是一个提供免费 Icon 资源的网站，但如果你也想找寻免费的高画质图像、矢量图像和免费音乐使用那就到这里！他们还拥有强大的图标编辑功能，可以让你自由调整 Icon 的颜色、添加文本、背景、大小、位置、形状…等功能。如果你需要将 Icon 嵌入到网站中，只需点击「嵌入 HTML」按钮，就会显示各种嵌入方法！使用说明：
需要注明出处及原始链接，即可免费使用带 icon8 上面所有的图标，在个人或商业用途中。
请注意，不允许将原始图标文件转售和发布给第三方人士。
网站： https://icons8.com/13. OxygennaOxygenna是一个小的创意设计公司，专门从事网页设计及 App 开发。他们网站上有一个资源专区，专门提供给设计师免费的资源，增加工作的效率。 你可以从网站中下载免费的 Icon 资源，最棒的是提供你 Photoshop、Illustrator 和 PNG 文件格式，。使用说明：不管是在个人或商用作品中，都可以任意使用。网站：: https://www.oxygenna.com/14. 1001freedownloads1001FreeDownloads 是一个很著名的网站，直至今日他们每天都不断的增加免费可下载的内容。它目前拥有数以千计的免费矢量、照片、画笔、渐变、PSD 和字体文件供大家免费下载。 使用说明：可以在个人和商业作品中使用网站内的所有图标，无需要注明出处及原始链接，但如果你愿意注明作者或出处，我们会很感激你。网站： https://www.1001freedownloads.com/15. iconshock在这里你可以找到各种不同样式、大小、格式和皮肤的各种图标。 从 iOS 、Line Icon 到以食物为皮肤的图标皮肤通通都有。 所有图标在 Iconshock 上都可完全免费供个人使用。小编最喜欢 iconshock 的一点是他们提供 3D 图标，他们的 3D 图标款式多样且整洁，下载的出来的文件画质也很棒！使用说明：可以在个人作品中免费使用网站： https://www.iconshock.com/free-icons/16. pngtreePngtree 是一个拥有数百万个高画质的 png、矢量、模板和创意插图的网站。 多年来，它为 3000 万+ 设计师们和用户提供了许多方便且适合商业用途的图像内容！想要一次浏览多种 Icon 的人可以参考这个网页。使用说明：可以在个人和商业作品中使用网站内的所有图标，需要注明出处及原始链接。网站： https://pngtree.com/so/icon17. google fonts这里的所有 Icon 皆由 Google 免费提供。 如果你正在开发 Android App，或者你想看看大公司都怎么设计 Icon 界面，那么你可以用 Google 自家生产的 Icon 作为参考。Material Icons 有五种样式和一系列不同的尺寸和大小可以下载。 使用说明：可免费在个人或作品中使用。网站： https://fonts.google.com/icons?selected=Material+Icons18. steamline拥有 12 种不同风格的皮肤，帮助你在 Streamline 中找到适合你工作项目的 icon。 网站上面拥有 100,000+ 个 Icon 、插图和表情符号。 全部由 steamline 团队一一画出，如果你想要在 Figma、Sketch 和 Adobe XD 上使用的话，可以下载他们自己开发的插件搭配使用，非常方便喔！使用说明：需要注明出处及原始链接。网站： https://streamlinehq.com/19. Fontawesome想要找寻可以把 Icon 变成 font 字型的网站吗？Fontawesome 为你提供各种可缩放的矢量图标，
可以改变大小、颜色、阴影以及符合 CSS 的样式。你也可以使用 style prefix 将 Font Awesome 提供的图标放置在任何你想要的位置。使用说明：每个图标的使用规范不同，请在下载前检查用途规范。网站： https://fontawesome.com/20. Dribbble如果常常在设计圈的你对 Dribbble 一定也不陌生，他就如同设计界的 Facebook 一样。 上面有来自世界各地的设计师在上面发布作品，包括各种图形、动效、UI、Web 和插图。 你可以使用关键字在 Dribbble 上发现 500 + 多个不同设计师提供的免费 icon，若遇到任何 Icon 使用上的问题也可以直接联系设计师讨教。使用说明：每位设计师的提供的 Icon 使用权限不一，请在页面中仔细查看规范，或询问设计师。网站： https://dribbble.com/tags/free_icons21. UXwingUXwing 是一个经验丰富的 Icon 设计师团队，专长制作矢量图标。他们帮助设计师和开发者画出漂亮的移动端 app 图标、网站图标、Web 设计、产品设计…等其他创意作品，网页上 Icon 支持矢量文件、透明背景的 PNG 和图标字体格式。 UXwing 上主要分成三大类别：实体、线条、颜色，以上再细分成 150 多个子类别，可帮助大家实时找到合适的 Icon 。使用说明：全部的 Icon 都可以做个人或商业用途，无需要注明出处及原始链接。网站： https://uxwing.com/22. iconfactoryIconfactory 的团队拥有了二十多年的设计及软件开发经验，网站上的 Icon 可以供大家在个人作品中免费使用，如果你有任何 Icon 使用上的问题都可以询问他们。使用说明：免费 Icon 仅供个人作品使用，若需要作其他用途，请洽所有者。网站： https://freeware.iconfactory.com/icons23. thenounprojectThenounproject 是一个由 120 多个国家及地区的设计师组成的网站，他们致力将 Icon 变成世界上最通用的交流工具，希望可以跨越语言和文化的界限。 无论你是在寻找加密货币 icon、人工智能 Icon 、拥有 UI 元素 Icon，或是像 Beyoncé 等名人的 icon，你的特殊喜好在这里都能被满足。使用说明：
使用权限依每个 Icon 有所不同，下载使用前请仔细阅读页面。
免费使用需要注明出处及原始链接，若不想标记出处可以参考网站内的订阅服务。
网站：https://thenounproject.com/icons/24. DeviantArtDeviantArt 是一个充满活力的艺术家社区及论坛，上面有近 200,000 + 个免费 Icon 可供下载。 若你正在寻找动效风格的 icon，到 DevianArt 一定可以找到！使用说明：每个 Icon 的使用规范不同，有些作者会要求你是 DeviantArt 社区上的成员才能下载，因此请在下载仔细前检查。网站： https://www.deviantart.com/25. iconmonstriconmonstr 网站中集结了 316 个类别，共 4512+ 个免费图标，在这里 Icon 只有黑与白。全部采用填充、粗体和细化设计。 每个 Icon 都有 SVG、EPS、PSD 和 PNG 格式可供你下载使用。SVG 格式也有嵌入的 code。 若想要更改 Icon 设计，可以选择 PNG 格式直接在网站上更改图像、大小、颜色、背景颜色等基本编辑。使用说明：可以在个人和商业作品中使用网站内的所有图标。网站： https://iconmonstr.com/26. softiconSoftIcons.com 允许免费下载 Icon 包供个人使用。 网页上包含了 2,849 组，共 475,655 个 Icon 及图像。网站自 2010 开始，每周增加了 9 组新 icon，从来不间断。若是希望每周都可以发掘新的图标，这里会是你的好选择。使用说明：所有 Icon 均可供个人作品使用。 若需将 Icon 作为商业目的使用，请阅读欲下载的 Icon 页面授权区。网站： https://www.softicons.com/27. fontelloFontello 是一种将矢量图像快速打包成 webfonts 的工具。 你可以将其视为 Twitter Bootstrap 的图像。若你想把 Icon 大量嵌入网站中，这里拥有你所需要的一切。Fontello 提供的 Icon 最大优点是在高分辨率的萤幕上没有像素化或模糊化的缺点，任何浏览器都支持。使用说明：使用权限依每个 Icon 有所不同，下载使用前请仔细阅读页面。网站： https://fontello.com/28. veryiconVeryIcom.com 是一个图标搜索引擎，它涵盖了 1000 多个 Icon 包，共 20000 个高画质的 Web icon。 每个图标都有 PNG、ICO 等多种文件格式，你可以轻松在 Windows、Macintosh 和 Linux 系统上免费浏览和下载。使用说明：网站上所有 Icon 都可以免费用于非商业用途，但部分版权归原作者所有，如果想将 Icon 用于商业目的，必须付费获得作者的版权协议。网站： https://www.veryicon.com/29. BoxiconsBoxicons 是一个精心设计的开源图标网站，拥有 1500 多个简单的图标。 如果不想要太复杂的图标，到 Boxicons 就对了。使用说明：Boxicons 是一个开源网站，使用的是创用 CC 授权 4.0，网站上的 Icon 均可以做个人或商业用途。网站：https://boxicons.com/30. FeatherFeather 上面的图标皆是开源免费图标。每个图标都设计在 24x24 大小上，每一个 Icon 都强调简单、一致和灵活。使用说明：全部的 Icon 都可以做个人或商业用途，需要注明出处及原始链接。网站：https://feathericons.com/结语这篇帖子中的 30 个网站提供了超过数百万个 Icon 让你免费下载，在挑选合适的图标及 Icon 时，选择正确的质量跟大小也很重要，别忘了也适时的给提供免费素材的作者一些鼓励吧！如果你正在寻找一个工具来整理下载的所有 Icon 文件，那你一定要下载 Eagle！ Eagle 是一款功能强大的文件管理工具，专门为设计师整理素材而设计，不管你需要整理一大堆不同类型的图标文件，还是想要快速搜集 Icon 文件，Eagle 都能帮助你的设计工作流程更轻松、有效率！这篇文章对你有帮助吗？分享给朋友
罗杰摩尔
社区经理兼职设计师。在这里将纪录：创意发想的过程、设计职场心得与观点，深信有好的客户服务才能带领团队走得更长远。欢迎交流！
想加入 Eagle 博客作者群吗？相关文章【全网最全】59 个免费、免版权视频素材下载网站分享免費素材好難找？版權使用條款長篇大論看不懂？本文將介紹59個免費無版權影片素材網站，讓你低成本做出精美影片！2021-09-27・设计资源47 个免费商用图库！无版权、高分辨率、可商用图像素材下载本文收集了 47 个免费、高品质、高分辨率的 CC0 图像网站，大部分皆可商用，也保有二次创作的空间，让你不必再担心侵权问题，轻松下载制作，吸睛又吸金！2023-03-22・设计资源12 首 IG Reels 热门音乐推荐，有效提升连续短片触及率！想让你的 IG Reels 更吸睛吗？12 首热门的连续短片音频推荐，让你跟上潮流、掌握趋势，轻松找到好听又适合的配乐，让音乐为你的 Reels 加分！2023-08-11・设计资源免费打造专业设计！25 款中英文字体任你下载，精美可商用本文我们精选了 25 款可免费商用的中文英文字型，精美的字体设计，轻松让你的作品变更专业！附上载点可立即下载收藏，布局、品牌广告、社区贴文都适用！2023-06-22・设计资源免费 20 组精选图标，直接下载帮你的下个专案找到好素材！立即发掘这免费精选的 20 组图标包，立即下载，为你的下个专案找到绝佳素材！让 Eagle 博客陪你提升设计品质，加速创作！2023-06-06・设计资源免费素材一网打尽！20 个优质样机网站推荐，掌握实用素材想用更专业的方式呈现你的设计，让客户和主管一眼看出设计的重点吗？20 个免费的样机网站推荐，免费下载所有样机素材，快速模拟产品效果！2023-06-01・设计资源产品立即购买下载最新开发进度教育优惠功能浏览器扩展标签文件夹智能文件夹颜色筛选快速查看高效分类星等评分密码保护GIF 播放器字体管理音频管理视频管理帮助帮助中心常见问题故障排除忘记序列号联络我们隐私权政策最终用户许可协议资源快速上手学习中心用法与技巧资源社区博客Eagle API 官方文档商务合作联盟营销计划内容合作活动赞助自媒体赞助媒体素材包关注我们 Twitter Facebook Instagram扫码关注微信公众号EnglishEspañolРусскийDeutsch日本語한국어中文(繁體)中文(简体)© 2017-2024 ogdesign.inc All rights reserved首页浏览器扩展快速上手资源社区博客帮助中心立即购买
Yesicon - 精选全球高品质、开源、免费的矢量图标库
Yesicon - 精选全球高品质、开源、免费的矢量图标库
简体中文English简体中文Español正體中文Deutsch日本語Français한국어Português反馈及建议切换到日间模式216,162 枚高品质矢量图标 来自全球顶尖设计团队168 组开源、免费的图标库 开发者 和 设计师 的 CV 好帮手Yes I can!陷入自我怀疑时，记得握个拳，心中默念：Yes I can! SearchEmoji 类似于 Yesicon 的 Emoji 搜索引擎热门搜索箭头设置人首页搜索用户电话文件github时间数据分享消息定位爱心删除手机返回编辑火关闭播放更多下载图片视频更多...图标库目录168常用图标Material Symbols10012321 个图标作者：Google开源协议：Apache 2.0Material Symbols Light10112379 个图标作者：Google开源协议：Apache 2.0Google Material Icons10210955 个图标作者：Material Design Authors开源协议：Apache 2.0Material Design Icons1037447 个图标作者：Pictogrammers开源协议：Apache 2.0Phosphor1047488 个图标作者：Phosphor Icons开源协议：MITSolar1057401 个图标作者：480 Design开源协议：CC BY 4.0Tabler Icons1065200 个图标作者：Paweł Kuna开源协议：MITMingCute Icon1072806 个图标作者：MingCute Design开源协议：Apache 2.0Remix Icon1082860 个图标作者：Remix Design开源协议：Apache 2.0Bootstrap Icons1092050 个图标作者：The Bootstrap Authors开源协议：MITCarbon1102078 个图标作者：IBM开源协议：Apache 2.0IconaMoon1111781 个图标作者：Dariush Habibpour开源协议：CC BY 4.0Iconoir1121551 个图标作者：Luca Burgio开源协议：MITIonIcons1131338 个图标作者：Ben Sperry开源协议：MITLucide1141435 个图标作者：Lucide Contributors开源协议：ISCUnicons1151206 个图标作者：Iconscout开源协议：Apache 2.0TDesign Icons1161203 个图标作者：TDesign开源协议：MITTeenyicons1171200 个图标作者：smhmd开源协议：MITClarity1181103 个图标作者：VMware开源协议：MITBoxIcons119814 个图标作者：Atisa开源协议：CC BY 4.0BoxIcons Solid120665 个图标作者：Atisa开源协议：CC BY 4.0Majesticons121760 个图标作者：Gerrit Halfmann开源协议：MITAnt Design Icons122830 个图标作者：HeskeyBaozi开源协议：MITcss.gg123704 个图标作者：Astrit开源协议：MITGravity UI Icons124663 个图标作者：YANDEX LLC开源协议：MITOcticons125604 个图标作者：GitHub开源协议：MITMemory Icons126651 个图标作者：Pictogrammers开源协议：Apache 2.0CoreUI Free127554 个图标作者：creativeLabs Łukasz Holeczek开源协议：CC0 1.0Flowbite Icons128539 个图标作者：Themesberg开源协议：MITMyna UI Icons1291089 个图标作者：Praveen Juge开源协议：MITBasil130493 个图标作者：Craftwork开源协议：CC BY 4.0Pixelarticons131480 个图标作者：Gerrit Halfmann开源协议：MITAkar Icons132453 个图标作者：Arturo Wibawa开源协议：MITcoolicons133442 个图标作者：Kryston Schwarze开源协议：CC BY 4.0System UIcons134430 个图标作者：Corey Ginnivan开源协议：UnlicenseTypicons135336 个图标作者：Stephen Hutchings开源协议：CC BY-SA 4.0Radix Icons136318 个图标作者：WorkOS开源协议：MITZondicons137297 个图标作者：Steve Schoger开源协议：MITElement Plus138293 个图标作者：Element Plus开源协议：MITCircum Icons139288 个图标作者：Klarr Agency开源协议：Mozilla Public License 2.0Material Design Light140284 个图标作者：Pictogrammers开源协议：Open Font LicenseFeather Icon141255 个图标作者：Megumi Hano开源协议：MITEOS Icons142253 个图标作者：SUSE UX/UI team开源协议：MITBitcoin Icons143250 个图标作者：Bitcoin Design Community开源协议：MITCharm Icons144261 个图标作者：Jay Newey开源协议：MITPrime Icons145260 个图标作者：PrimeTek开源协议：MITHumbleicons146246 个图标作者：Jiří Zralý开源协议：MITuiw icons147214 个图标作者：liwen0526开源协议：MITUnicons Monochrome148296 个图标作者：Iconscout开源协议：Apache 2.0Unicons Thin Line149214 个图标作者：Iconscout开源协议：Apache 2.0Unicons Solid150189 个图标作者：Iconscout开源协议：Apache 2.0Maki151212 个图标作者：Mapbox开源协议：CC0Gridicons152207 个图标作者：Automattic开源协议：GPL 2.0Mono Icons153180 个图标作者：Mono开源协议：MITQuill Icons154140 个图标作者：Casper Lourens开源协议：MITGala Icons15551 个图标作者：Jake Wells开源协议：GPLLets Icons1561528 个图标作者：Leonid Tsvetkov开源协议：CC BY 4.0Framework7 Icons1571253 个图标作者：Vladimir Kharlampidi开源协议：MITMage Icons1581042 个图标作者：MageIcons开源协议：Apache 2.0Fluent UI System Icons15915647 个图标作者：Microsoft Corporation开源协议：MITIconPark Outline1602658 个图标作者：ByteDance开源协议：Apache 2.0IconPark Solid1611947 个图标作者：ByteDance开源协议：Apache 2.0IconPark TwoTone1621944 个图标作者：ByteDance开源协议：Apache 2.0IconPark1632658 个图标作者：ByteDance开源协议：Apache 2.0VSCode Icons1641255 个图标作者：Roberto Huertas开源协议：MITJam Icons165940 个图标作者：Michael Amprimo开源协议：MITHeroIcons1661176 个图标作者：Refactoring UI Inc开源协议：MITCodicons167455 个图标作者：Microsoft Corporation开源协议：CC BY 4.0Gitlab SVGs168375 个图标作者：GitLab B.V.开源协议：MITPepicons Pop!1691275 个图标作者：CyCraft开源协议：CC BY 4.0Pepicons Print1701275 个图标作者：CyCraft开源协议：CC BY 4.0Pepicons Pencil1711275 个图标作者：CyCraft开源协议：CC BY 4.0Bytesize Icons172101 个图标作者：Dan Klammer开源协议：MITEvil Icons17370 个图标作者：Alexander Madyankin and Roman Shamin开源协议：MITStreamline1742000 个图标作者：Streamline开源协议：CC BY 4.0Guidance175360 个图标作者：Streamline开源协议：CC BY 4.0Font Awesome Solid1761390 个图标作者：Dave Gandy开源协议：CC BY 4.0Font Awesome Regular177163 个图标作者：Dave Gandy开源协议：CC BY 4.0OOUI178356 个图标作者：OOUI Team开源协议：MITNimbus179140 个图标作者：Linkedstore S.A.开源协议：MITOpenSearch UI180386 个图标作者：OpenSearch Contributors开源协议：Apache 2.0FormKit Icons181142 个图标作者：FormKit, Inc开源协议：MIT动画图标Material Line Icons200601 个图标作者：Vjacheslav Trushkin开源协议：MITMeteocons201450 个图标作者：Bas Milius开源协议：MITSVG Spinners20246 个图标作者：Utkarsh Verma开源协议：MIT表情符号OpenMoji3004129 个图标作者：OpenMoji开源协议：CC BY-SA 4.0Twitter Emoji3013668 个图标作者：Twitter开源协议：CC BY 4.0Noto Emoji3023555 个图标作者：Google Inc开源协议：Apache 2.0Fluent Emoji3032961 个图标作者：Microsoft Corporation开源协议：MITFluent Emoji Flat3042980 个图标作者：Microsoft Corporation开源协议：MITFluent Emoji High Contrast3051545 个图标作者：Microsoft Corporation开源协议：MITNoto Emoji (v1)3062162 个图标作者：Google Inc开源协议：Apache 2.0Emoji One (Colored)3071834 个图标作者：Emoji One开源协议：CC BY 4.0Emoji One (Monotone)3081403 个图标作者：Emoji One开源协议：CC BY 4.0Emoji One (v1)3091262 个图标作者：Emoji One开源协议：CC BY-SA 4.0Firefox OS Emoji3101034 个图标作者：Mozilla开源协议：Apache 2.0Streamline Emojis311787 个图标作者：Streamline开源协议：CC BY 4.0品牌 / 社交BoxIcons Logo400155 个图标作者：Atisa开源协议：CC BY 4.0SVG Logos4011812 个图标作者：Gil Barbara开源协议：CC0Simple Icons4023047 个图标作者：Simple Icons Collaborators开源协议：CC0 1.0CoreUI Brands403830 个图标作者：creativeLabs Łukasz Holeczek开源协议：CC0 1.0Font Awesome Brands404484 个图标作者：Dave Gandy开源协议：CC BY 4.0Nonicons40567 个图标作者：yamatsum开源协议：MITArcticons4068749 个图标作者：Donnnno开源协议：CC BY-SA 4.0Custom Brand Icons4071106 个图标作者：Emanuele开源协议：CC BY-NC-SA 4.0File Icons408930 个图标作者：John Gardner开源协议：ISCDevicon409764 个图标作者：konpa开源协议：MITDevicon Plain410575 个图标作者：konpa开源协议：MITSkill Icons411397 个图标作者：tandpfun开源协议：MITBrandico41245 个图标作者：Fontello开源协议：CC BY SAEntypo+ Social41376 个图标作者：Daniel Bruce开源协议：CC BY-SA 4.0Cryptocurrency Icons414483 个图标作者：Christopher Downer开源协议：CC0 1.0Cryptocurrency Color Icons415483 个图标作者：Christopher Downer开源协议：CC0 1.0地图 / 国旗Flag Icons500538 个图标作者：Panayiotis Lipiridis开源协议：MITCircle Flags501428 个图标作者：HatScripts开源协议：MITFlagpack502255 个图标作者：Yummygum开源协议：MITCoreUI Flags503199 个图标作者：creativeLabs Łukasz Holeczek开源协议：CC BY 4.0Font-GIS504358 个图标作者：Jean-Marc Viglino开源协议：CC BY 4.0Map Icons505167 个图标作者：Scott de Jonge开源协议：Open Font LicenseGeoGlyphs50630 个图标作者：Sam Matthews开源协议：MIT专题Game Icons6004046 个图标作者：GameIcons开源协议：CC BY 3.0FontAudio601155 个图标作者：@fefanto开源协议：CC BY 4.0Academicons602157 个图标作者：James Walsh开源协议：Open Font LicenseWeather Icons603219 个图标作者：Erik Flowers开源协议：Open Font LicenseHealth Icons6041917 个图标作者：Resolve to Save Lives开源协议：MITMedical Icons605144 个图标作者：Samuel Frémondière开源协议：MITCovid Icons606142 个图标作者：Streamline开源协议：CC BY 4.0已归档 / 不再维护Line Awesome7001544 个图标作者：Icons8开源协议：Apache 2.0Eva Icons701490 个图标作者：Akveo开源协议：MITDashicons702342 个图标作者：WordPress开源协议：GPLFlat Color Icons703329 个图标作者：Icons8开源协议：MITEntypo+704321 个图标作者：Daniel Bruce开源协议：CC BY-SA 4.0Foundation705283 个图标作者：Zurb开源协议：MITRaphael706266 个图标作者：Dmitry Baranovskiy开源协议：MITIcons8 Windows 10 Icons707234 个图标作者：Icons8开源协议：MITInnowatio Font708105 个图标作者：Innowatio开源协议：Apache 2.0HeroIcons v1 Outline709230 个图标作者：Refactoring UI Inc开源协议：MITHeroIcons v1 Solid710230 个图标作者：Refactoring UI Inc开源协议：MITFont Awesome 5 Solid7111001 个图标作者：Dave Gandy开源协议：CC BY 4.0Font Awesome 5 Regular712151 个图标作者：Dave Gandy开源协议：CC BY 4.0Font Awesome 5 Brands713457 个图标作者：Dave Gandy开源协议：CC BY 4.0Font Awesome 4714678 个图标作者：Dave Gandy开源协议：Open Font LicenseFluent UI MDL27151735 个图标作者：Microsoft Corporation开源协议：MITFontisto716615 个图标作者：Kenan Gündoğan开源协议：MITIcoMoon Free717491 个图标作者：Keyamoon开源协议：GPLSubway Icon Set718306 个图标作者：Mariusz Ostrowski开源协议：CC BY 4.0Open Iconic719223 个图标作者：Iconic开源协议：MITIcons8 Windows 8 Icons720200 个图标作者：Icons8开源协议：MITSimple line icons721189 个图标作者：Sabbir Ahmed开源协议：MITElegant722100 个图标作者：Kenny Sing开源协议：GPL 3.0Elusive Icons723304 个图标作者：Team Redux开源协议：Open Font LicenseVaadin Icons724636 个图标作者：Vaadin开源协议：Apache 2.0Grommet Icons725614 个图标作者：Grommet开源协议：Apache 2.0 Copyright © 2024 Powered by Iconify 数据源于 @iconify/json 2.2.188
UI设计教程—六步画出好ICON - 知乎
UI设计教程—六步画出好ICON - 知乎首发于零基础如何学好新媒体ui设计？切换模式写文章登录/注册UI设计教程—六步画出好ICONUI小哥最近好几个朋友在画icon的时候遇到了问题，不知道从何入手，也不知道怎么评判自己画的icon。这里正好有一篇ICONFINDER的设计师写的文章，文章讲述了图标的三个属性，以及画好图标的六个步骤。ICONFINDER和阿里推出的Iconfont图标库类似，可以搜索出各种图标，图标会分为“Free（下载免费）”“Premium（优质，下载需收费）”两类。在本文的例子中，笔者会重新设计一个狗的图标（它的名字叫作Corgi）。这个图标对于“Premium”来说还不够好，笔者会提供一些简单的指南，稍作优化，这个图标已经达到了“Premium”的标准。那么正文开始了。二、图标设计的三个属性好的图标通常会有三个重要的属性，而这三个属性在大多数设计中是共通的。在设计新的图标时，我会以迭代的方式考虑每一个属性。即使我只设计一个图标，这三个属性仍然是隐含的，能从单个图标中看出来。1. 结构“结构”是图标的基础形式。先不看图标的细节，在图标的主要形状周围画一条线，会构成正方形、圆形、水平或垂直矩形、三角形还是更有机的形状？最成功的图标设计往往有着简单的、可识别的图案或形式。主要的几何形状有：圆形、正方形、三角形。这些形状为图标设计创造了视觉上的稳定感。2. 特征图标的“特征”由单个图标和图标集共同的元素组成。这些元素包括圆角、直角、线宽、样式（平面型、直线型、纹理填充线型），色板，等等。3. 辨识度图标的“辨识度”指的是其本质或图标的独特之处。“辨识度”决定图标是否“有效”，即识别度和清晰度，也就是说用户能否轻松地识别图标所描绘的对象、想法或行为。“特征”和“辨识度”往往相辅相成，多个图标共同的辨识度元素形成了整个图标集的特征。三、图标设计的六个步骤。1. 始终从网格开始不同大小的网格有各自的优势。在本文中，我们将使用32*32像素网格。我使用网格的时候，还会注意一些基本的规则，下图就是我设计每个图标时所遵循的基本规则。网格的外部2个像素，我叫作“禁区”。除非绝对必要，否则我不会让图标的任何部分进入此空间。禁区的目的是在图标周围创造一些呼吸的空间。圆形的图标从网格的中心开始。圆形的图标通常会触及内容区域的外面四条边，但是不会进入“禁区”。（图标的某些元素或小部件也可以超出该范围）方形的图标也是从网格的中心开始的。但在大多数情况下，方形的图标不会一直延伸到内容区域的最外边缘。下图中有三个同心的正方形，分别为浅蓝色、橙色、浅绿色。我做的大多数图标会和中间的正方形对齐（下图中橙色的正方形）。而是否要对齐每一个像素方格由图标本身的视觉重量决定。在32像素的正方形内，有两个20像素乘以28像素的矩形（见下图，一个垂直，一个水平）。我会大致遵循这两个矩形来设计图标，这样我的图标方向会相对一致。也有通过对角线定向的图标（如下图）。请注意，图标“锯”最外面的点差不多和圆形的边缘对齐。这里你做的时候不需要非常精确，大概靠近就可以。你不需要每一次都遵循上述网格和参考线。单个图标的优秀比整个图标的一致性更重要。网格可以帮助你保持图标的一致性，但如果设计超棒的图标需要打破规则，那就打破规则。谨慎一点就好。2. 从简单的几何形状开始设计图标的方法与画草图的方法相同：先用简单的圆形、矩形、三角形创建主要形状的大形。即使我的图标最终大部分是有机形状的，我也会从Adobe Illustrator中的形状工具开始。在制作图标时，特别是对于屏幕上较小的尺寸，手绘所带来的微小的边缘抖动会使图标看起来不精致。从基本几何形状开始有助于使边缘更精致（特别是曲线），也能快速调整设计中元素的相对比例，并确保图标遵循网格和形状。3. 数据化：边缘、线条、圆角、曲线和角度数字上不精确的圆角、曲线和角度为让你的设计看起来奇怪。所以，在涉及细节时，不要只用眼睛看或者手绘。这些细节的不一致性会降低图标的质量。角度大多数情况下，我会使用45°角或它的倍数。45°角的“消除锯齿”（Photoshop中使用选区工具时能看到这个勾选项）分布比较均匀（见下图）。45°角的完美对称性使其成为一种易于识别的特征，人眼看起来很舒服。45°角可以在图标集中构建一致性。如果情况不允许用45°角，我会将其一分为二（22.5°，11.25°），或者使用15°的倍数。每个图标案例不尽相同，所以要根据具体情况做出决定。使用45°角的一半的好处在于，这些角度的“消除锯齿”仍保持得不错。曲线曲线是最引人关注的地方之一。“高级／专业”和“业余”之前的差别往往在于曲线。虽然人眼可以看出精确度的微小变化，但人的手眼协调却不能总是达到高精度（下图紫色背景的图标为手绘的曲线，很不精致）。我会通过形状工具和数字来构建曲线，而不是通过手绘。当一定要手绘时，我会用Adobe Illustrator的约束修改键（Shift），或者使用Astute Graphics的VectorScribe和InkScribe来更精确地控制我的贝塞尔曲线，这样更好。圆角我通常使用2像素的半径。但是，你用的圆角半径值取决于你想表现什么样的个性。2像素的圆角，不是太大，但是给图标带来了更“泡沫”的外观。是否使用圆角是整个图标集特征的一部分。像素级完美“像素级完美”是现在图标和用户界面设计中的流行语。在设计小尺寸图标的时候，“像素级完美”很重要。小尺寸图标边缘上的“消除锯齿”会使图标显得模糊。没有与像素网格对齐的线之间的空间也变得模糊。图标边缘与像素网格对齐才能显得清晰完美，而通过精确的角度和曲线能更加清晰完美。不过，像素级完美并不是最重要的问题（至少对于消除锯齿、大尺寸和更高分辨率的显示屏，如Retina屏，来说）。线宽关于线宽，我认为2像素最理想，但有时也需要3像素。我通常选择2像素和4像素线宽。理想情况下，我尝试将图标中的每个值都保持为2的倍数。有时，单个图标的细节可能不满足这个规则，但我会尽可能遵守。尽量避免使用非常细的线条，尤其是字形和平面图标。除非你故意要创建线条形式的图标，否则不要依赖线条来定义形状。你应该使用光线和阴影来定义形状。4.在图标间保持一致性和相同的调性Dutch Icon的Hemmo de Jonge在2015年的Icon Salon上发表了精彩的演讲，并详细讲述了他的图标设计元素（见下图）。在他为荷兰政府开展的为期两年的图标系统项目中，Hemmo和他的设计合作伙伴在每个图标中都加入了“缺口”这一元素。不是每个图标都有缺口，但大多数都有。在图标集中统一地使用这种调性，可以使图标间产生更多的关联。5.谨慎地使用细节和装饰图标应该快速地表达物体、想法或行为。太多的小细节会引入复杂性，这会使图标不易识别，特别是在小尺寸的时候。单个图标（图标集）中的细节的详细程度是其特征和辨识度的重要组成部分。那么，什么才是图标（图标集）正正好好的细节程度呢？经验表明—只包含能使意义清晰的最少细节就是正好。6.让你的图标独一无二现在很多设计师过于依赖流行趋势，或者重复一些受欢迎的设计师风格。这会扼杀创意。作为创意专业人士，我们应该在图标设计以外寻找灵感，例如，建筑、排版、工业设计、心理学、大自然以及我们可以找到灵感的任何其他领域。现在很多图标集看起来都相似，所以，让你的设计独一就很重要。独特性还有助于使图标更易于识别。（注意下图狗狗鼻子的形状）四、总结这简单的6个步骤是大家设计图标的一个起点，并不是什么权威指南。笔者在本文中概括了自己的设计方法和知识，其他设计师当然也有他们自己的观点和技术。成为一个更好的设计师的最佳办法是尽可能地多看，多阅读，定期素描（可以随身带着素描本），还有就是，练习，练习，练习。（左边是原来的icon，右边是优化后的icon）发布于 2019-07-04 21:08UI设计师UI设计入门前端 UI赞同 43 条评论分享喜欢收藏申请转载文章被以下专栏收录零基础如何学好新媒体ui设计？关注公众号“天天向上好好学习”学5880+视
免费logo设计生成_公司logo设计在线制作神器 - 标智客
免费logo设计生成_公司logo设计在线制作神器 - 标智客
首页
智能LOGO生成
VI设计生成
名片设计生成
VI设计生成
海报设计生成
门头设计生成
包装设计生成
电子名片设计生成
灯箱设计生成
易拉宝设计生成
奖状/证书设计生成
工作证设计生成
菜单设计生成
手提袋设计生成
邀请函设计生成
全部类型
设计模板素材
品牌VI设计
商品 / 包装VI设计
办公 / 商务VI设计
餐饮 / 店铺VI设计
会议 / 活动VI设计
设计类型
LOGO设计
名片设计
招牌/门头
包装瓶帖
包装袋
查看所有
LOGO定制服务
商标注册
设计攻略
首页
智能LOGO生成
设计生成
设计模板素材
LOGO定制服务
商标注册
成为会员
工作台
成为会员，即可享受
全站模板
名片/工作证/门头等应有尽有
3亿版权素材
插画/图片/文字全类型覆盖
商业授权
线上/线下全渠道，皆可商用
VI物料高清无水印
无水印多格式文件下载
立即开通会员
LOGO
生成LOGO
查询商标
找模版素材
热门搜索
LOGO
VI设计
门头招牌
招聘
名片
首页
智能LOGO生成
设计生成
设计模板素材
LOGO定制服务
商标注册查询
设计攻略
设计模版中心
设计类型
品牌VI设计
查看所有
设计类型
LOGO设计
名片设计
招牌/门头
包装瓶帖
包装袋
查看所有
品牌VI设计
商品 / 包装VI设计
办公 / 宣传VI设计
餐饮 / 店铺VI设计
会议 / 活动VI设计
查看所有
设计生成
名片设计生成
VI设计生成
海报设计生成
门头设计生成
包装设计生成
易拉宝设计生成
奖状/证书设计生成
工作证设计生成
菜单设计生成
手提袋设计生成
电子名片设计生成
灯箱设计生成
邀请函设计生成
全部类型
不仅是
智能LOGO设计
LOGO智能生成
海量设计模板
3亿＋版权图片
全渠道商用授权
云端保存在线设计
微信登录/注册
关注"标智客公众号"进行登录/注册
其他方式登录
手机登录
企业微信
手机登录
账号登录
手机注册/登录
账号密码登录
获取验证码
登录即同意《标智客用户使用协议》
微信登录
其他方式登录
微信登录
企业微信
手机登录
账号登录
手机注册/登录
账号密码登录
记住此账号
忘记密码?
登录即同意《标智客用户使用协议》
忘记密码
微信登录
其他方式登录
微信登录
企业微信
初次注册，请绑定手机号
获取验证码
登录即同意
《标智客用户使用协议》
我已阅读并同意
《标智客用户使用协议》
确定要退出当前账号吗？
确定
取消
企业微信登录入口将于近期关闭
新用户注册功能现已关闭
老用户登录后请绑定手机号，避免数据丢失
微信登录(新用户)
继续登录(已有账号)
企业微信登录功能即将关闭，请绑定手机号，避免数据丢失
去绑定
微信扫码联系客服
智能LOGO设计生成
开始生成
今日LOGO下载2721个
| 累计制作8390869个 | 可商用授权
一键生成品牌VI设计
首创智能VI设计生成
全场景VI设计在线编辑
提供多种印刷文件格式下载
线上/线下全渠道，皆可商用
生成设计
品牌LOGO定制设计
多对一贴身服务
多支团队，方案竞标
设计到满意为止
立即预约
标智客将严格保护您的隐私，请放心填写
智能LOGO生成
设计智能 一键生成
智能VI设计生成
品牌VI设计 一键生成
企业定制设计
量身定制 独一无二
不仅是智能LOGO设计
开始生成
Array
Array
Array
Array
Array
今日LOGO下载2721个
| 累计制作8390869个 | 可商用授权
不止有智能LOGO设计·还有全场景VI设计物料
LOGO
行政办公
教育培训
实体店面
餐饮外卖
电商
商品包装
会议活动
商标设计
公司LOGO
徽章设计
网站标志
App图标
店铺头像
公众号LOGO
使用模板
标智客
使用模板
标智餐馆
使用模板
标智文创
使用模板
标智客重庆小面
使用模板
标智重工
使用模板
标智客智创
使用模板
标智智能
使用模板
标智科技
换一批
生成LOGO
运营物料·应有尽有·一年省5万设计费
使用模板
简约创意文艺春节手机海报设计
使用模板
红色 新年 元旦 春节 手机海报 设计
使用模板
红色简约春节手机海报
使用模板
红色 新年元旦春节 手机海报设计
使用模板
红色极简节日祝福烟花手机海报设计
使用模板
创意简约大气新年手机海报设计
使用模板
简约现代新年春节手机海报设计
使用模板
简约创意春节新年手机海报设计
使用模板
简约喜庆元旦春节手机海报设计
使用模板
创意喜庆春节门神手机海报设计
使用模板
创意喜庆春节门神手机海报设计
使用模板
简约现代新年春节元旦手机海报设计
换一批
模板中心
智能LOGO设计生成
通过智能化分析，为您自动生成图文结合标志、文字标志、徽章标志，并支持换色、换组合、换图标等功能生成出无尽的LOGO。
开始生成
All in Logo·可商用·可注册商标·可买断
开公司 | 做团队
公司logo设计
标志设计
企业VI设计
做产品 | 印包装
商标设计
产品logo设计
包装标签设计
标贴设计
开网店 | 自媒体
淘宝店标设计
美团店铺入口图/头像
微信/抖音/小红书头像
开门店| 做生意
门头设计
店标设计
侧招灯箱设计
搞活动 | 办社团
徽章设计
会标设计
活动主题logo设计
会议主视觉logo设计
徽标设计
建网站 | 做App
网站标志设计
站标设计
App图标设计
美团头像设计
先生成，后付费！全力以赴为您设计属于自己的LOGO
智能化LOGO生成
只需要公司/品牌名称、所属行业，标智客就能智能化分析，为您自动生成图文结合标志、文字标志、徽章标志等多种创意设计供你选择，比你更懂你！
个性化编辑
强大图文编辑器让你可以对logo在线生成结果随心所欲地调整图标、字体、颜色、布局等，让你公司logo设计更加个性，与众不同！
原创LOGO设计
如果你的公司logo、网站标志需要量身设计，标智客专业设计团队可为您提供原创logo设计服务。
用户好评
正纯环保-张先生
制作公司标志不仅非常容易，还免费获得高清源文件。
汤氏书院-吴先生
推荐给我的朋友说这个网站可以自动生成商标，没想到它还能定制商标设计，能满足我之后有商业用途的需要。将文字与图形完美的融合，我对于这个效果十分满意。
优释-李先生
你如果和我一样对商标设计一窍不通，那么就把专业的事情交给专业的人做！因为考虑到后期商标设计需注册，所以我选择了定制化服务，与我沟通的顾问非常负责，做出的效果让我十分满意，会推荐给其他要设计公司logo的朋友。
利通云高-孙先生
一开始还因为它是直接生成的而有所疑虑，结果让我意想不到！强烈推荐！
荣文房产-范先生
因为想打造一个让人看到就能想起，还可以商用的logo商标设计，所以选择找专业logo设计公司去定制，设计出来的商标效果非常符合我的要求，十分满意！
意品-周女士
对商标设计生成的结果非常满意，值得一试！不仅logo图标素材多，还能任意编辑，更能免费下载源文件。
MARSHARK-李先生
网上的这些logo在线生成工具，它绝对是是良心又专业的一家！不仅可以免费生成logo，我想要定制化的需求也可以得到满足。
文玺轩-文先生
因为想要打造一个店铺品牌头像，设计的logo必须能够注册商标，所以选择了定制化的logo设计。设计结束后，顾问还耐心指导我怎样使用源文件。我喜欢他们这种专业认真的态度，会推荐给其他朋友的。
再深情的凝望也比不上一次伟大的尝试
智能生成LOGO
为什么上万企业选择生橙视觉？
●多方案坚持多团队作业 / 多创意方案PK
●快出品专业流程 / 系统协作 / 定稿快
●好服务方案品控 / 不满意退款 / 非原创退款
●省成本定稿快50% / 费用省50%
预约设计 费用评估
*
请输入称呼
*
请输入正确手机号
*
选择服务
品牌设计
LOGO设计
VI设计
包装设计
吉祥物设计
门头设计
宣传单设计
海报设计
画册设计
*生橙视觉将严格保护您的隐私，请放心填写
来不及找到心仪的内容 按+D收藏我们
本网站使用cookies以提升您的使用体验及统计网站流量相关数据。继续使用本网站表示您同意我们使用cookies。我们的《隐私及Cookie政策》提供更多关于cookies使用及停用的相关信息。
我接受
首页
LOGO在线制作
LOGO制作案例
LOGO定制服务
商标注册查询
代理合作
法律声明
API接口
侵权申诉
客户端
Copyright 2012-2023 标智客 All rights
reserved. 京ICP备2023004016号-3
京公网安备 11010502053486号
隐私政策
友情链接
热门推荐
AI Logo
品牌设计
logo在线设计生成器
商标设计
LOGO设计公司
宣传册设计
鸟哥笔记
苏打苏塔
H5
设计素材
在线视频制作
中国设计之窗
ui素材
123RF图库
演界网PPT
app软件
crm
VI设计
手机海报设计
名片设计
门头设计
招牌设计
包装瓶贴
包装袋
Favicon.ico图标生成器 | 一键免费制作ico图标 - 标小智
Favicon.ico图标生成器 | 一键免费制作ico图标 - 标小智
LOGO生成器
LOGO模板
AI设计师
博客
网站/小程序
友情推荐
前往上线了官网十分钟创建你的网站和小程序
专属7折优惠码：LOGOSC
首页
LOGO生成器
LOGO模板
AI设计师
博客
网站/小程序
登录
免费Favicon.ico图标在线生成器
输入字母汉字在线生成Favicon图标
Favicon
图片
图标
字符
生成
或选择
图片ICO
Favicon.ico图标下载
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
编辑
下载
透明PNG图片
Favicon.ico
如何使用Favicon图标生成器？
你可以通过字母或者图片两种方式制作Favicon图标
字母Favicon：直接输入字母（支持汉字）后点击生成按钮就能看到多个基于字母（或者汉字）的图标样式。选择直接下载或者继续编辑图标的字体，颜色，或者背景图形。
图片Favicon：如果您已有图片或者logo，可以点击图片→ICO的链接来在线生成你的Favicon图标。
如何安装Favicon图标？
点击下载并选择Favicon格式，你将获得Favicon图标的zip打包文件包含：
android-chrome-192×192.png
android-chrome-512×512.png
apple-touch-icon.png
favicon-16×16.png
favicon-32×32.png
favicon.ico
site.webmanifest
直接将Favicon文件上传到你的网站服务器根目录，在网页的 head 部分复制粘贴HTML代码即可。
{{ code }}
Favicon.ico图标常见问题
什么是Favicon图标？
Favicon也称为URL图标或网站图标。这些图标非常小（通常为16×16或32×32），并会显示在浏览器窗口和书签中网站网址的旁边，让访问用户可以轻松在其打开的窗口中识别你的网站。
如果本地有ico图标文件，如何添加网站Favicon图标？
步骤1：重命名Favicon名称
将本地图标名称修改为 favicon.ico . 文件的名称非常重要，因为Web 浏览器会自动查找具有该名称的文件。
步骤2：上传Favicon文件
将Favicon图标上传到网站的主目录或根目录，默认位置为 yourwebsite.com/favicon.ico 同样浏览器会首先在网页所在目录默认位置寻找favicon.ico文件。
步骤3：测试
Favicon图标安装成功后，将在浏览器的地址栏上显示出来。也可通过添加为网站书签的方式，来测试图标是否正确展示。
步骤4：调试
为什么Favicon图标安装后没有显示？
通常情况为，图标命名或安装位置错误。确保你的favicon图标在以下位置能够访问到 http://websitename.com/favicon.ico
为什么显示的Favicon图标不是最新版本？
这是由于浏览器缓存问题，有时会显示旧版本，在强制清除浏览器缓存后，就能展示最新上传的favicon图标。
Favicon图标有什么作用？
Favicon图标用于帮助用户更轻松地在浏览器、书签、快捷方式和地址栏中直观地识别出你的网站，也让用户更容易在他们的浏览器上保存和记住你的网站。作为经常被忽视的主要品牌元素，一个好看的Favicon图标可以让你的网站在众多竞争对手中脱颖而出。
常见的favicon图标格式有哪些？
ICO - favicon.ico
最常见的favicon图标格式是 ICO、PNG 和 SVG，但对于特定的浏览器或设备还有其他格式。ICO 文件格式由 Microsoft 开发，是 favicon 的原始文件格式。该格式是独一无二的，因为它允许在同一个文件中包含多个小图像。这是最大的优势，因为 ICO 格式（16x16、32x32 和 48x48 像素）的favicon图标所需的小图标可以独立缩放和优化。在小尺寸下，你不能依靠浏览器以最佳方式自动调整图标大小。所有浏览器都支持 ICO 格式，它是 IE5 ～IE10 唯一支持的格式。
PNG - favicon.png
PNG 格式是一种很棒的格式，因为它是大多数人熟悉的格式，并且不需要任何特殊工具来创建。随着现代屏幕的高分辨率，小分辨率的小图标尺寸的原始问题不再存在。对于支持 PNG favicon 图标格式的浏览器，通常在浏览器选项卡或书签栏中显示的 favicon 的质量将高于 ICO 格式。PNG 格式的缺点是它与 IE5 ～ IE10 不兼容。
SVG - favicon.svg
SVG 格式优于 PNG 和 ICO 格式，但大多数浏览器都不支持。SVG 文件非常轻量级，并且可以无限扩展，图像质量高，而且没有大图片加载消耗时间长的问题。目前只有 Chrome、Firefox 和 Opera 支持 SVG 格式的网站图标。
常见的favicon图标大小有哪些？
首先，你的favicon图标必须是方形的，由于桌面浏览器和IOS不支持其他形状的图标。
对于 ICO 格式，推荐的尺寸为 16x16、32x32 和 48x48 像素。
对于 PNG 格式，推荐的尺寸为 16x16 和 32x32，不过浏览器可以兼容任何方形 PNG 图像。
Favicon图标会影响搜索引擎排名或SEO吗？
Favicon图标可间接帮助你优化搜索引擎（SEO）：有些搜索引擎会在搜索结果中显示你的 Favicon图标。一个吸引力的Favicon图标能够提高在这些搜索引擎上点击率（CTR）。此外，Favicon图标是建立品牌认知度和品牌专业度的必要条件，缺失Favicon图标可能会降低用户对网站的信任并增加跳出率。
智能LOGO在线设计生成器！
LOGO神器为您在线设计logo，生成企业VI，打造个性品牌。
在线logo设计
超过500万用户的AI智能logo设计神器！标小智是国内领先的品牌创建平台。快速在线设计公司logo，生成企业VI，打造属于你的个性品牌。
产品
Logo生成器
公司起名
商标注册
AI设计师
公司
Logo价格
推广合作伙伴
Logo API
神器集
联系
常见问题
在线客服
商务合作
友情链接
标小智 上海婷平网络科技有限公司 Copyright 2023 沪ICP备11048151号-6
-
使用条款
-
使用合同
请用微信扫码支付