最新版tp钱包下载|icon是干嘛的

设计师必看的图标设计指南「上」 - 知乎

设计师必看的图标设计指南「上」 - 知乎首发于UI设计师必看系列切换模式写文章登录/注册设计师必看的图标设计指南「上」印迹图标设计是UI设计中非常重要的环节，也是考验设计师基本功的重要标准。全文18,783字，分为上、中、下三篇。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文将对图标进行系统的介绍，篇幅所限，本文只针对图标设计中最重要的设计概念 和 设计思路 为主。大家如果对图标的其他方面感兴趣，欢迎给留言，后续出相关系列内容。过程中也有针对几种典型的图标进行实操代练。想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，又或者是日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。粗浅划分的话，UI设计中常见的图标大致分为两大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果能用一个图标清楚表达含义的时候，就不需要用文字，比如用一个“叉”代表「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。1.3 起源图标的发展历程其实有些类似中文、英文等语言的发展，大体也分为两个阶段：实物 → 符号；符号 → 新符号来看一个小例子：左边这个东西叫软盘，可能很多小伙伴没见过（事实上我也没有），「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。1.4 拟物图标80年代，想做的具象（拟物），却因为像素和机能的限制无法实现，所以对好的标准是越具象越好 。到了1995年计算机显卡的显示能力得到革命性的改变，Photoshop 5.0的发布，恰好让憋屈了这么多年的图形和UI设计师们巴不得立马上天（终于可以施展拳脚了）。从win95开始，到osx/win7的这十来年正是UI拟物化发展壮大并大行其道的阶段。同时也是显示技术飞速发展的十年，从640x480，到800x600，到1024x768，到1920x1080 / 1920x1200，再到4k，再到retina屏，平面显示技术能达到的水准基本已经是人眼能感受到的极致。当人们对计算机尚不熟悉的时候，用户的需求是“弄懂这玩意到底是干嘛的”，是用户体验的核心。拟物化的图标和界面会给予用户具象化的引导，比如回收站，音乐，电脑，文件夹的图标，用户可以直接联想到现实中的物品并更快的理解这些程序或者文件的作用。包括立体的按钮引导用户点击，用户都可以通过联想，更快的理解操作/互动的方式。这样可以降低用户的学习成本，缩短学习周期，让用户更快的适应计算机的使用，弄懂这玩意到底是干嘛的。来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。但是随着 ICON 的发展，拟物图标也带来了一些问题，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。如今人们对各种常规交互模式人们也早已了然于胸，用户的需求也从“弄懂这玩意这么用”变成了“高效快捷更舒心的使用”。用户用的方便变成了用户体验的重心。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被扁平化取代。1.5 扁平化从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计。 不管你喜欢与否，当年的微软让 Metro 和扁平化赚足了眼球，甚至让人一看到扁平化就想到Metro。区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，转而通过抽象、简化、符号化的设计元素来表现。2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。在iOS7中对整个界面的图标、按钮、字体、信息层级等各方面都进行扁平化设计。苹果的这一系列动作打破了人们对扁平化风格的芥蒂，并最终推动了整个移动端扁平化设计的进程。那么，苹果公司在坚持了多年的拟物化设计风格之后，曾经作为该风格的引领者和受益者，为何会突然转向，热情地拥抱起扁平化设计来了呢？难道是因为我们视觉疲劳了吗？答案很简单，1、因为使用了Retina屏，屏幕清晰度支持扁平化更多的细节；2、当具象化慢慢达到了极致，当大师们发现具象化已经不再有挑战时，于是开始尝试从别的角度表达；3、高度的拟物在一定程度上减轻了学习成本，但是提高了辨识成本。总之，扁平化这种二维设计已经成为一种更加流行的设计风格。所有元素的边界都很干净利落，较多使用色块和符号化的图形以及无衬线修饰的字体，界面更加整齐简洁。使用这种设计风格的优点是可以更加简单直接的将信息和事物的工作方式展示出来，将一切干扰信息弱化，减少认知障碍的产生。虽然扁平化的优点有很多，也适合当下技术发展需要的，但是缺点也是显而易见的。譬如表现形式太过于抽象、缺乏情感的传递，而事实上发展到今天的扁平化设计确实也在不断的优化自己~使得自己更加的适应时代的发展。另外还有一个点就是所谓的 “审美疲劳”。当你一直看着简单的东西，久而久之就会越来越烦，你就会越来越想要看那些丰富多彩的东西。反之亦然。这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的“新拟物”风格就是最好的证明。1.6 微扁平、轻拟物由于扁平风格表现形式单一，同质化严重，缺乏个性，图标慢慢开始发展到微扁平轻拟物的方向。相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。1.7 " 新拟物 "风格图标苹果在 WWDC2020 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。macOS Big Sur是第一个将 " 新拟物 " 设计投入大规模商用的操作系统，这可视为 " 新拟物 "在实用化道路上的首次胜利。值得一提的是，在 Big Sur 的 " 外观 " 设置里，多了一项名为" 自适应强调色 "的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代 App 在光影上会有更丰富的效果？" 新拟物 " 设计的精髓在于对光线的绝妙运用。它把光效拿捏在 " 扁平 " 与 " 拟物 " 之间，进而打造一种全新的视觉体验。不同于传统的拟物，" 新拟物 "虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，" 新拟物 " 是将真实光线用于虚拟对象，而 " 拟物 " 是还原实际物品在特定光照下的效果；由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。应用图标的类型及作用产品应用图标（也叫启动图标），是指产品「品牌标识」中独立的图形，也是产品品牌的核心组成元素。作为产品所有视觉通信中必不可少的元素，其使用率非常高，所以该独立图形在设计中应做到最简化。 一个小问题：为什么iOS系统中图标形状是统一的圆角矩形？苹果官方给出的解释是在空间有限的的区域，太多形状显得杂乱，如果形状不规则，就无法控制统一间距，设计师水平也不一样，这样统一规范能保证最低标准。推荐一个iOS启动图标资源网站，设计时可以找找灵感。△iOSIcon gallery而安卓应用图标就没那么规范，处于百花齐放的状态，各家厂商都在设计独属于自己的视觉语言。大家都不一样，也就导致没有个性之美。安卓应用图标设计规范网站应用图标的类型应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。2.1 中文文字图标中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。2.1.1 单字 提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。2.1.2 多字 多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行（四个字）排列。其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。2.1.3 字加图形组合文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。2.2 英文字母图标英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。2.2.1 单字母 通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。2.2.2 多字母 提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。2.2.3 字母加图形组合 字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。2.3 数字图标直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。2.4 特殊符号图标由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：2.5 几何图形几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。2.6 单双形/剪影单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。2.7 线形线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色；在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。2.8 动物图形/剪影动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。2.9 卡通形象卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，例如Bear，它的卡通形象是一头洁白的北极熊，简洁的形象设计与产品的高效阅读体验一致。2.10 正负形以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。2.11 白色渐变白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。2.12 彩色渐变色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。2.13 无无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。2.14 应用图标的作用打开率是一款移动应用的重要数据，应用只有被打开才有它的运营价值。在我们手机里安装了许许多多的应用，除了一些我们每天必须使用的应用如微信，其他大多数的应用在没有使用场景时很难想到去打开他们。因此，这些应用如何在手机屏幕上吸引用户的注意，鼓励用户打开显得非常重要。于是在应用图标上做文章就显得很有必要，常见的设计手法有：品牌传播：在游戏领域比较常见，在应用图标上搭上品牌的旗号就能或者用户的注意；营销事件：将营销事件（例如双11）展示在应用图标上，折扣、促销等都能吸引眼球；核心卖点：将核心卖点出现在应用图标上，引起用户注意，从而提高应用被打开的频率；节日氛围：节日通常伴随着消费，因此电商类应用最注重节日氛围的主题设计，每年春节期间桌面图标几乎一片红，非常有节日气氛；3.1 iOS应用图标在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。iOS的圆角图标并不是标准的圆角矩形，而是某种连续曲线。我们把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。事实上，我们很难在Retina屏幕上区分这么细微的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发同学即可，如果应用图标需用于展示，可以绘制120*120px圆角矩形、27px圆角半径代替。3.2 安卓应用图标安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。3.3 iOS应用图标设计流程在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。3.3.1 寻找隐喻隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。3.3.2 竞品分析应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。3.3.3 提取关键词根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。3.3.4 抽象图形确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。3.3.5 图标栅格线使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。3.3.6 丰富细节通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。然后，白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。3.3.7 多场景测试将应用图标设计稿交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。△ 注：上图非实际大小，仅表明不同分辨率下的比例关系此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x的图，即将120px的图标放大至1.5倍；而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行席位调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。图标设计指南上篇就分享到此，中篇和下篇敬请期待。我在这里， @Fyin印迹编辑于 2020-10-26 21:19图标设计UI视觉设计文章​赞同 18​​4 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录UI设计师必看系列字体、图标、颜色

icon图标是什么意思？ - 知乎

icon图标是什么意思？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册图标设计用户界面设计图标icon图标是什么意思？网上看到一些icon图标绘制，然而就是用ps画一个图。但没弄明白什么叫icon图标，是指一类图标吗？显示全部 ​关注者8被浏览40,569关注问题​写回答​邀请回答​好问题​添加评论​分享​7 个回答默认排序即时设计​已认证账号​ 关注icon图标就是人们生活中随处可见的一种“符号”，比如说各种紧急出口图标，卫生间图标，还有日常手机里使用的APP图标，比如微信的绿色对话框气泡图标。图标的形式有很多种，而且表现方式也非常丰富，从拟物到扁平化图片到线图标，各种风格和形式层出不穷。如果从UI设计这个专业角度粗浅划分的话，常见的图标大致分为2大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。一名UI设计师需要会的基础操作当然是包含图标设计的。因为图标是整个UI设计中极其重要的一环，设计师在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致，同样也会提升可读性。所以UI设计师在日常的练习中除了需要提升对图标造型的把控力以外，也需要不断地紧跟设计趋势，学习更多类型的设计。为了方便大家在设计、开发和创作过程中使用优质的图标素材，我整理了八种不同风格的免费开源图标资源，供大家自由下载、使用和进行二次创作。这些资源涵盖了各种主题和用途，无论你是设计师、开发者还是创意爱好者，都能在其中找到适合自己项目的完美图标。快来看看吧！一、线面图标点击获取→字节跳动出品「IconPark图标插件」你可以一键搜索 IconPark 站内2400+ 图标并直接拖拽到编辑界面，这些图标都是完全开源的，而且可免费商用，所以题主完全不用担心版权的问题。点击获取→「Phosphor Icons图标」Phosphor Icons图标及其站点也是同样完全开源、可免费商用的。点击获取→→阿里旗下1600W+Iconify 开源图标库点击获取→Arco Design 图标库字节团队打磨3年的 Arco Design 企业级设计系统官方图标库，提供了通用、编辑、影音、方向、交互及提示等6大类共计263个图标，覆盖各种日常设计场景，可一键引用到资源库中随时搜索并拖拽复用，帮助你快速完成创作。这是份将近300个图标的 Arco Design 图标库，基本覆盖了功能层面的大多常规分类，而且图标精致度够高，用它们做出来的 UI 绝对不会差。面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面形图标具有表意能力强，细节丰富，情绪感强，视觉突出，创作空间大等优点。面性图标可以让用户迅速定位图标位置，预知点击后的状态。但是面性图标在页面中不可过多出现，否则会造成页面臃肿，难分主次，用户视觉疲劳。点击获取→百度智能小程序图标库有一套不得不提的。百度智能小程序发布的新版图标库，大概有 1000 多个，种类异常丰富，覆盖各种场景，除了设计小程序外，移动端和 Web 端都会用到，可引用到资源库并在创作时直接使用。书籍影音、互动社交、交通出行、生活服务、政务服务等等，还提供了彩色和线型两种风格，适用范围更广，实用性高。点击获取→TDesign 图标库腾讯内部近 300 名设计师与开发者共同打造的企业级设计体系图标库，其中包含了适用于多种场景的 231 个图标，有方向、文本编辑、媒体控制、文件管理等常用功能模块和一些品牌 logo，整体风格统一，实用性高。Remix 线性图标库/面性图标库点击获取→Remix面性图标库点击获取→Remix线性图标库Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高，风格中性大气，分为“线性图标”和“面型图标”两种。图标库能覆盖的范围和种类很多，包括建筑、商务、沟通、设计、扩展、设备、文件、编辑、媒体、地图、系统、金融、生活、用户、天气以及企业logo图标。而且，图标分类明确、整理详细，丰富的内容还能满足绝大多数的功能需求，非常推荐~点击获取→560+ Zwicon 通用线性图标这是一套由 zwoelf 创作的通用线性图标，包含了「金融」、「设备」、「文件」、「媒体」等常用的26类图标。图标整体给人的感觉精致、圆润、外形简单，但是风格性很强，整体性也很强。更不错的是，在实际使用过程中，可以根据自己的需求，在现有资源的基础上将图标修改为双色、线面结合等风格，可拓展性也大大增强了。二、毛玻璃图标点击获取→3d blender 磨砂毛玻璃分享者：秋月的设计资料夹三、拟物风图标轻拟物图标相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容点击获取→轻拟物设计毛玻璃icon分享者：小肥爱小胥点击获取→轻拟物化图标分享者：吴小雷四、3D效果点击获取→C4D磨砂玻璃科技3D图标分享者：Freedom五、像素风点击获取→像素风格界面图标设计分享者：徐润z六、抽象风点击获取→几何图标分享者：Yancy Min七、卡通风点击获取→3D卡通 立体 小清新图标分享者：有点小洋气八、手绘风点击获取→手绘书本学习用品类卡通小图标分享者：东边的冬天如果想寻找更多风格和样式的图标，在「即时设计」网站里也有海量优质的icon图标资源也可供你下载使用噢。发布于 2023-08-30 17:23​赞同 3​​添加评论​分享​收藏​喜欢收起​UI设计鲲鹏教原画的老师​ 关注icon就是你手机上的那些图标都算，但是不是什么PS画个图都是能叫icon图标，每个图标也有自己的规范发布于 2018-11-29 13:58​赞同​​添加评论​分享​收藏​喜欢

logo 和 icon的区别？ - 知乎

logo 和 icon的区别？ - 知乎首页知乎知学堂发现等你来答​切换模式登录/注册平面设计logo 和 icon的区别？关注者10被浏览16,417关注问题​写回答​邀请回答​好问题​添加评论​分享​3 个回答默认排序知乎用户logo，既标志对某种事物，或者意义进行融合，创造后得出的图形，具有代表性，或具象或抽象。icon，图标，具有指示，解释的含义，功能性更高，比如知乎底栏上的“主页”“我的”的就是icon而不是logo，而知乎的蓝色“知”则是logo。光在屏幕上看到“知”在不知道知乎的情况下你也许根本不知道他得指代含义，但是如果放一个小齿轮的图标，你一定知道它指的是“设置”。发布于 2016-11-29 17:56​赞同 3​​2 条评论​分享​收藏​喜欢收起​开裆裤1PX的价值​ 关注结论放在前面，好logo一定是好icon，但是好icon不一定都是好logo;先问是不是，再问为什么；分析问题首先要推敲和理解到字面的意思；logo以及icon，其实都是舶来品；这两个英文单词的意思：一个是标志，一个是图标，从字面上来看的话，狭义的理解；其实两者是一致的，都是图形标志；但是细致思考下来，两者在涵盖的范围上面；确实有着分支的区别；logo从设计领域及商标领域来看的话，能细分出图形标，文字标，图文结合标等；再涉及到商标申请范围，分支就更大了，能开单章来详细介绍；这里就不一一展开；icon的字面理解，冠以“图标”来概之；“图标”，简单的说法；就是视觉化的功能特征说明，这也是icon的主要作用；即是看见图标，就能够知晓用途；所以；logo和icon，从功能性上出发，都是视觉化的功能特征说明，第一要务都是讲清楚“有什么作用”；logo的作用就是，我是干嘛的，或是我能提供什么服务；icon的作用就是，这里是干嘛的，或是这个区块的作用是什么；所以第一个结论就是“从功能性上考虑，logo和icon的作用是一致的”；第二点，从表现方式上来说；icon的表现方式，有很多很多；有拟物、有长阴影、有扁平化等；但logo的方式，就近几年的的设计走势来看；“简洁”，一定是一个大的趋同,用最简单的设计语言，说清楚事情的来龙去脉；这不是一个好活计，他需要很多很多思考；加上很多很多的尝试，才能得到一个不错的效果；第三点、从使用范围来说；icon的适用范围一定是有边界的；这归结于他的功能性特点；超过边界或是区块；那就是系统下；另一个icon的功用了；但是logo的适用范围，一定是没有边界的；能够最大化的适用所有使用环境；是优秀logo必备的特征之一；综上，结论就是“好logo一定是好icon，但是好icon不一定都是好logo;”发布于 2019-04-26 10:13​赞同 8​​添加评论​分享​收藏​喜欢收起​​

UI设计-Icon基础知识（一） - 知乎

UI设计-Icon基础知识（一） - 知乎首发于设计切换模式写文章登录/注册UI设计-Icon基础知识（一）渔夫​招聘亚马逊运营，欢迎滴滴我只是一个搬运工。。。。。。ICON 的定义 提到 ICON 明确的定义，搜索结果告诉我们，ICON 指有明确含义的图形视觉语言。这告诉我们它的首要目标就是代替文字，用图形化的语言来传达信息。但是这个定义会让我们容易与 LOGO 相混淆，那如何区分 LOGO 和 ICON 呢？他们虽然都是图形化的语言，但是 ICON 重在展示功能，它是功能识别图标，而 LOGO 主要传达的是身份信息属于身份识别图标。应用场景在日常生活中 ICON 的应用应该是非常广泛的，我们随时可以在各个地方看到 ICON 的存在，例如我们熟知的界面设计中，还有日常生活的指示牌上等等，我们可以把这些场景归为三类，图形界面，产品表面和日常交通指示。图形界面，就是我们最熟悉的桌面图标、手机应用图标、APP界面图标等等...产品表面，常见的电器开关按钮、易碎品标识、USB接口图标等。日常交通指示图标包括：地铁交通指示标、卫生间图标、安全出口…想必这些大家应该都很熟悉，在日常生活中我们接触到的 ICON 比比皆是。界面图标界面图标的发展风格可以归纳为从拟物图标过渡到2.5D图标再到扁平图标，到现在的微扁平，微拟物的发展过程。拟物图标由于人们都是通过以往的认知来理解新事物，所以基于这一点，当时应用界面必然要采用拟物风格，以便于人们的理解和操作。但是随着 ICON 的发展，拟物图标也带来了一些问题，因为用户关注的核心永远都是信息本身，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被取代，2.5D 图标就是在拟物图标和扁平图标中的一个过渡风格。扁平图标2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是：去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。扁平图标风格发展到后期也随之带来了一些问题，由于它们表现形式太过于抽象、缺乏情感的传递，也没有获得大众的青睐，这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。微扁平、轻拟物从扁平风格发展至现在，图标慢慢开始发展到微扁平轻拟物的方向，相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。界面中的图标分类界面中的图标可以分为功能性图标和产品图标两类。产品图标可以体现整个产品的特性和风格，有时通过产品图标我们可以直观的感受到这个产品的主要功能。功能性图标则向我们传达了一定的含义，它代替文字可以让我们看到图标快速反应图标所对应的功能。这次我们主要来分析一下功能性图标。功能图标风格在界面中最常见的功能图标按样式一般分为线性图标和面性图标两大类，在线性和面性图标两类的基础上根据不同设计技法又区分出了更多的分类。线性图标面性图标线性图标线性图标通过线来塑造轮廓。在界面中App的图标尺寸并不大，所以如果线过于复杂，在小面积中过多的线会对识别性产生较大的困扰。另外苹果iOS11系统倾向于使用剪影图标，所以线性图标风格使用会相对减少。在图标设计中使用的线有粗细之分，常用的App图标设计线的粗细一般有2PX或者3PX，不同的线条粗细 ICON 所带来的视觉感受也不同，细线显得精致，粗线视觉面积大，显得厚重。圆角粗线条的 ICON 显得饱满而可爱，个别 App 的底部标签栏图标采用粗线条设计，但粗线条的 ICON 图形较为极简才适用。线性图标根据样式还可以分为：双色线性图标、线性填充图标、线性渐变图标。面性图标面性图标是通过面来塑造形体的图标，采用了剪影的设计形式，通过线或者面去切割基础轮廓面，通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。面性图标根据不同的配色样式可以分为：单色饱和度填充图标，纯色渐变图标和多色渐变图标。功能性图标位置功能性图标一般在界面中应用于标签栏，导航栏以及金刚区。1. 标签栏标签栏是移动应用中最普遍、最常用的导航模式，也被我们称为 Tab 栏，一般图标有3-5个，应用于信息之间的跳转，提供页面的切换、功能入口以及界面导航的功能。其目的意义在于指示当前页面所处的位置。2. 导航栏导航栏我们称它为 Navigation Bar ，和标签栏本质上其实相似，但是展现形式有很大区别。导航栏一般处于页面的顶部，在使用数量和形式上更加灵活。3. 金刚区金刚区一般位于首图 Banner 之下的，属于页面的核心功能区域，多以宫格的形式排列展现的图标，一般情况一屏5-10个，主要负责着业务导流和功能选择的作用。ICON 中的品牌感传递当我们掌握了图标的基本知识，那么如何设计非常有特色的图标，设计符合产品定位的图标呢，这时候我们需要引入品牌设计的理念。通常意义的品牌包括了理念、视觉、行为三个部分，而我们这里提到的品牌只是视觉表现层面的。品牌基因是一个图形符号，在界面设计中，我们需要将这些基因、灵感可视化，提取出一个或者多个视觉符号传达给用户。怎样在图标中加入品牌感，可以归纳为四个方法：吸取品牌色、提取品牌元素、吉祥物和应用品牌图形。1. 吸取品牌色每个应用都应该有自己独特的品牌色，我们可以直接提取品牌色作为图标设计视觉元素，使用户加深对品牌色的感知，像“闲鱼”Tab 图标使用了品牌色——黄色和黑色。Keep 应用的图标也提取了品牌色——蓝紫色来作为图标的颜色，和品牌传达的感受是一致的。2. 提取品牌元素除了颜色之外，我们还可以抓取品牌元素特征来运用在图标中，例如优酷的图标，除了采用了颜色基因之外，还在 logo 上提取了一个叠层的效果，这样使得整套图标风格十分统一，传达的品牌基调也是十分一致的。Google的图标也是提取了 logo 上的颜色，并且把 Google 的特色融入了其他图标中，一次次加深用户对品牌的认知度。3. 运用吉祥物现在很多品牌都有人们熟知的吉祥物形象，那么在“我”中，美团外卖和站酷都打破了用人物缩影图标的形象来作为 tab 栏图标，而是运用自己的吉祥物的形象，做出了自己产品的独有特色。4. 品牌图形品牌图形的运用，通过对logo或品牌元素提取特定形状的提取来运用在图标上，例如网易云音乐和花瓣的图标就是将 logo 图形直接作为图标运用，网易云的图标不仅提取了品牌图形，而且其余图标也将品牌图形的圆润感运用其中。ICON 的评判标准我们了解了 icon 的基本知识，那么如何设计一个好的 icon 呢？怎样评判我们的 icon 是否合适，是否贴合整个产品呢？我们需要了解什么才是一个好的 icon 。我们可以从四个方面来检验，分别是：识别性，规范性、整体风格与品牌感。1. 识别性图标就是帮助用户理解信息，所以识别性是一个图标最重要的一项，尤其在没有文字说明的情况下，一定不能让用户产生疑惑，识别性可以分为两类，分别是含义识别和视觉识别。含义识别：是视觉语言是否替换文字语言，简言之就是让你的图标可以被用户理解，不会让用户产生歧义。视觉识别：是图标的大小，颜色，线条的粗细，这些影响影响视觉识别的因素，在具体样式中提高视觉识别性。2. 规范性规范性也是做好一个图标的基础，我们要保证图标在视觉大小的一致性，图标饱满度、遵循同一种规律，细节统一性。a. 视觉大小的一致性：我们在同等尺寸的基础上分析形状间的视觉差异，来审视视觉上是否统一，如同等大小圆和方形的视觉大小就不一致，那么我们可以规定它的最大尺寸，进而在尺寸规范中调整适当的距离，使得视觉大小达到统一。b. 饱满度：如何判断图标是否饱满呢？常用的衡量方法就是正负形衡量法，在图标所占区域的矩形框中，看图标的正形的面积是否还可以增加。c. 同种规律：同一套图标必定是以同种风格呈现的，那么我们检验时可以看下自己的图标是否是遵循了同一种规律，如：是否全部使用了圆角或直角的风格，绘制风格是否一致。d. 细节统一：细节问题包括像素是否对齐、圆角、描边粗细是否统一的细节都需要我们在绘制时注意。3. 整体风格整体风格是要注意图标传达的性格与 app 的基调是否一致，每个产品因为定位，针对人群不同，整个 app 的基调也不一样，例如一个针对儿童教学类的应用，它的性格就是偏卡通可爱的类型，那么我们的图标设计上也要体现这个性格特点，尽量使用卡通圆润的方法去设计。4. 品牌感品牌感就是我们上面谈到的要与品牌理念相符，传达给用户的感受一致，通过吸取品牌色，提取品牌元素，采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解，寻找自己产品独特的品牌气质，挑选合适的技法。然后把这些元素具象化，融入在界面设计中。总结在尺寸有限的界面上，小小的 icon 可以更加简单高效的表达含义，传递给用户情绪和设计感，并且给用户正确和友好的指引，怎样把图标设计做到更好，这就需要我们在平时设计的基础上进行深度的思考，希望我的这篇梳理可以给大家带来帮助。如有遗漏，欢迎大家补充。作者：许了了原文地址：https://www.zcool.com.cn/article/ZODMxNTM2.html编辑于 2019-02-12 15:11设计​赞同 43​​添加评论​分享​喜欢​收藏​申请转载​文章被以下专栏收

在网页中使用 icon 字体图标 | 前端开发 - 知乎

在网页中使用 icon 字体图标 | 前端开发 - 知乎首发于效率工具指南切换模式写文章登录/注册在网页中使用 icon 字体图标 | 前端开发彭宏豪本文首发于我的个人号「效率工具指南」最近在 B 站上看 Pink 老师的前端视频，简单总结一下在网页中使用 icon 图标的两种方法。 直接插入字体图标这里说的字体图标，是指既有普通 icon 图标的外观，又带有字体特征的图标，可以像调整字体那样、调整图标的大小和颜色，且图标放大之后不会失真变模糊。 我们一般是从网上下载字体图标的，譬如国内的阿里巴巴旗下的矢量素材网站 iconfont、国外的 IcoMoon 等。去年写过一篇文章《微信小程序开发 | 如何在小程序中使用自定义 icon 图标》，其中介绍了 iconfont 图标的使用，这回介绍一下使用来自 IcoMoon 的图标的方法。 打开 IcoMoon 图标官网，从中挑选你想使用的 icon 图标，底部的 Selection 会统计你选中的图标数量，选好图标之后，点击右下角的 Generate Font，生成字体图标。在打开的页面，会显示我们刚才挑选的所有 icon 图标，并且提供图标的 unicode 编码，这些编码等下要用到，但现在先不管。点击右下角的 Download，下载生成的字体图标文件。 IcoMoon 图标下载：https://icomoon.io/app/#/select 解压下载的压缩文件，其中包含下面这些文件，我们需要用到其中的 fonts 文件夹。fonts 文件中包含了 4 个字体文件，这是因为不同浏览器所支持的字体格式是不一样的，考虑到兼容性，fonts 文件夹就包含了主流浏览器支持的字体文件： TrueType 字体(.ttf)：是 Windows 和 Mac 最常见的字体Web Open Font Format 字体(.woff)：支持的浏览器有 IE 9+、Firefox 3.5+、Chrome 6+、Safari 3.6+、Opera 11.1+Embedded Open Type 字体(.eot)：是 IE 专用的字体，支持的浏览器有 IE 4+ SVG 字体(.svg)：是基于 SVG 字体渲染的一种格式，支持的浏览器有 Chrome 4+、Safari 3.1+、Opera 10.0+、iOS Mobile Safari 3.2+将 fonts 文件夹复制到网页的项目文件夹 中，譬如放在与 index.html 文件同级的路径下。打开 HTML 文件，在 style 标签中粘贴下方的代码，定义我们等下需要用到的字体 icomoon。需要注意的是，如果 fonts 文件与 html 文件在同个路径下，就不需要修改下方代码中的 url 地址。粘贴代码之后，先来看一下我们最终想要实现的效果，如下图，下方的红色爱心❤️图标，就是前面说到的字体图标。根据最终想要实现的效果，我们要去到 html 文件中书写相应的代码。在 html 文件的 body 标签中输入下方的一行代码，中间的 span 标签包含的方块，其实就是爱心图标，只不过它无法在 html 文件中正常显示。

我  你

我你

font-family: 'icomoon';

}此时在浏览器中重新打开 html 文件，我们所使用的字体图标就会正常显示了。如果你还想调整字体图标的大小和颜色，可以在 CSS 中增加另外两个属性：font-size 和 color。css：p span {

font-family: 'icomoon';

font-size: 50px;

color: red;

}一番设置之后，重新在浏览器中刷新页面，就可以看到最终的效果啦。通过伪类选择器使用字体图标前面介绍的第一种方法，需要同时在 body 标签(html) 和 style 标签(css) 中同时书写相关的代码，如果我们想让 html 文件的结构更加简单，我们可以通过第二种方法——在 style 标签(css) 中通过伪类选择器使用字体图标，这样就只需要在 style 标签或 css 文件中书写相关的代码。 先来看一下我们最终想要实现的效果，如下图所示，给输入框的右侧添加一个向下的小三角 图标。想制作这个效果，同样是先从前面介绍的 IcoMoon 网站下载字体图标，将解压后的文件中的 fonts 文件夹放到与 index.html 同级的路径下，接着在 html 的 style 标签中粘贴下方的代码：在 html 的 body 标签中插入一个空白的盒子 div 标签：

接着在 style 标签中，给 div 盒子设置宽度、高度，并给它设置一个粗细为 1 px 的灰色边框：

此时在浏览器中打开 html 文件，就可以看到下图所示的孤零零的输入框。接着继续给这个输入框「添砖加瓦」——添加一个向下的小三角 ，继续在 style 标签中书写代码：div::after {

content: '';

font-family: 'icomoon';

}稍微解释一下这个代码，在 div 后面加上两个英文中的冒号，并且跟上单词 after 或者 before，就是所谓的伪类选择器，在我目前的认知范围内，伪类选择器就是用 css 代码来给 html 页面添加额外的元素，我们也确实可以在网页中看到添加的小三角，如下图。但这段代码是写在 css 而非 html 文件中，一定程度上可以简化 html 文件的代码。到这里，我们就顺利地在 html 页面中添加了字体图标，值得一提的是，伪类选择器中 content 属性的值，除了可以是字体图标对应的方块字符，还可以是字体图标下方的编号。以下图为例，爱心图标的编号是 e9da，因此 content 属性的值也可以是 \e9da ，通过编号来调用字体图标的时候，需要在编号的最前面加多一个反斜杆 \ 。div::after {

content: '\e9da';

font-family: 'icomoon';

}引入字体图标之后，字体图标默认位于输入框的左上角，为了将字体图标移动到右侧居中的位置，这里还需要用到另外的知识——定位，包含相对定位和绝对定位。关于定位的知识，这里暂时就不过多展开了，可以记住一个口诀「子绝父相」，即子元素设置绝对定位，父元素设置相对定位，就可以达到自由移动下拉小三角位置的目的。分别给 div 和伪元素选择器 div::after 添加另外的样式：div {

position: relative;

}

div::after {

position: absolute;

top: 12px;

right: 10px;

}这里的 top 和 right 属性的值，并不是唯一的，需要根据实际情况，配合浏览器的开发者工具进行调整，最终得到看起来比较舒适的值（主要就是调整到小三角可以位于输入框水平居中的位置），最终效果如下。以上，就是本次想和你分享的内容。希望对有需要的朋友有帮助。发布于 2021-09-19 08:13字体前端开发网页设计​赞同 5​​5 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录效率工具指南公主号同专栏名，欢

设计师必看的图标设计指南「上」 - 知乎

设计师必看的图标设计指南「上」 - 知乎首发于UI设计师必看系列切换模式写文章登录/注册设计师必看的图标设计指南「上」印迹图标设计是UI设计中非常重要的环节，也是考验设计师基本功的重要标准。全文18,783字，分为上、中、下三篇。图标是UI设计中除了文字之外最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准，了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。本文将对图标进行系统的介绍，篇幅所限，本文只针对图标设计中最重要的设计概念 和 设计思路 为主。大家如果对图标的其他方面感兴趣，欢迎给留言，后续出相关系列内容。过程中也有针对几种典型的图标进行实操代练。想要把图标设计的更好，这就需要我们在平时勤加练习外，还要进行深度的思考，希望我的这篇梳理可以给大家带来帮助。1.1 图标的定义图标，也称为icon或Picoto，是计算机世界对现实世界的隐喻和概括，代表软件产品中的功能及操作。图标做为国际通用性语言，生活中随处可见，例如商场导视中收银台图标、出口图标、卫生间图标等，又或者是日常手机里使用的那些App图标，如微信、电话、短信等。的确，图标的形式有很多种，它可以应用在很多场景中，并且表现方式非常丰富，有线的、有面的、还有拟物的等。粗浅划分的话，UI设计中常见的图标大致分为两大类，第一类我们称之为「标志性图标」，比如手机中应用启动图标；第二类我们称之为「功能性图标」，这类图标经常出现于 App 或网站中，用于功能性指示引导或操作。1.2 图标的重要性对于UI设计而言，图标可以说是整个产品的点睛之笔，它甚至可以直接影响着一款产品的形象和气质。在不少 UI 界面中，图标几乎是这个页面的核心支撑体，它直接影响着产品的视觉体验和产品调性。它有以下几点好处：全球通用：Windows,iOS, etc., 中文版和英文版甚至各种语言版本，在不打开菜单之前，基本上都长一样；节约空间：如果能用一个图标清楚表达含义的时候，就不需要用文字，比如用一个“叉”代表「关闭」；快速定位：图标可以用它独特的形状或者颜色让人快速定位到一个功能；上下文的定位：比如小飞机的图标单独放出来不确定是什么，但是在和收件箱在一起它就可以认为是发件箱了。1.3 起源图标的发展历程其实有些类似中文、英文等语言的发展，大体也分为两个阶段：实物 → 符号；符号 → 新符号来看一个小例子：左边这个东西叫软盘，可能很多小伙伴没见过（事实上我也没有），「保存」图标就是将「软盘」符号化之后形成的图形，「软盘」是「保存」图标的实体。但随着时间的推移，人们逐渐将长期接触的符号本身作为一种新的实体，在大家的眼里，它不再是一个具象事物的抽象符号，而是直接当成一个实体来使用，甚至这个符号的实体已经淡出历史，但人们还在习惯性使用这个符号。如你所知，图标、标识都不是界面设计师所创造的概念，它的存在可以追溯到人类文明诞生之初，在漫长的历史长河当中，早期用来传达信息的图标演变为系统的文字，而在地图、图书、壁画和建筑等各种各样的地方，还存在着用来代表和传达特定概念的图标和标识。随着技术的发展，计算机诞生了，而显示器的出现，也为图形化界面的诞生，铺平了道路。20世纪70年代，施乐在位于帕罗奥托的研究所当中，诞生了最早的拥有图形化界面的电脑，著名的「 Xerox Alto」。这款昂贵的概念机最终并没有走进大众的视野，但是它的后续机型施乐之星在1981年问世，并且成为了计算机史上的重要里程碑，而Xerox Alto 对于乔布斯和比尔盖茨的启发，更是引发了计算机历史上最著名的一场战争：苹果VS微软，Windows 对抗 Macintosh。当然这都是后话。1.4 拟物图标80年代，想做的具象（拟物），却因为像素和机能的限制无法实现，所以对好的标准是越具象越好 。到了1995年计算机显卡的显示能力得到革命性的改变，Photoshop 5.0的发布，恰好让憋屈了这么多年的图形和UI设计师们巴不得立马上天（终于可以施展拳脚了）。从win95开始，到osx/win7的这十来年正是UI拟物化发展壮大并大行其道的阶段。同时也是显示技术飞速发展的十年，从640x480，到800x600，到1024x768，到1920x1080 / 1920x1200，再到4k，再到retina屏，平面显示技术能达到的水准基本已经是人眼能感受到的极致。当人们对计算机尚不熟悉的时候，用户的需求是“弄懂这玩意到底是干嘛的”，是用户体验的核心。拟物化的图标和界面会给予用户具象化的引导，比如回收站，音乐，电脑，文件夹的图标，用户可以直接联想到现实中的物品并更快的理解这些程序或者文件的作用。包括立体的按钮引导用户点击，用户都可以通过联想，更快的理解操作/互动的方式。这样可以降低用户的学习成本，缩短学习周期，让用户更快的适应计算机的使用，弄懂这玩意到底是干嘛的。来自苹果的Macintosh系统在图形化界面发展史上是无法绕过的里程碑。1991年，苹果借由Macintosh，首次发布了彩色的图标设计。图标所能容纳的信息量比起上一个黑白界面的时代更大，全新的样式使得它在信息传达的功能性上有了明显的提升。但是随着 ICON 的发展，拟物图标也带来了一些问题，华丽的视觉元素或许在用户使用的初期，起到赏心悦目的装饰，但久而久之，这都将成为对用户获取信息的一种干扰。如今人们对各种常规交互模式人们也早已了然于胸，用户的需求也从“弄懂这玩意这么用”变成了“高效快捷更舒心的使用”。用户用的方便变成了用户体验的重心。再者，大家都熟悉的事物其实非常有限，而 APP 的创新却在不断进行，很多创新的产品本身在现实世界就没有参照物，所以也决定了拟物图标必然会被扁平化取代。1.5 扁平化从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦——拟物图标的质感、光影会分散用户的注意力，形成「视觉噪声」。于是UI设计师开始探索更新的表现形式来设计界面中的图标。如微软引领的Metro风格图标设计和Google引领的长投影风格的图标设计。 不管你喜欢与否，当年的微软让 Metro 和扁平化赚足了眼球，甚至让人一看到扁平化就想到Metro。区别于拟物化更加接近于真实的实物，扁平化则是简化真实的物体，转而通过抽象、简化、符号化的设计元素来表现。2013年，苹果推出了iOS7 开启了拟物向扁平转变的风潮。在iOS7中对整个界面的图标、按钮、字体、信息层级等各方面都进行扁平化设计。苹果的这一系列动作打破了人们对扁平化风格的芥蒂，并最终推动了整个移动端扁平化设计的进程。那么，苹果公司在坚持了多年的拟物化设计风格之后，曾经作为该风格的引领者和受益者，为何会突然转向，热情地拥抱起扁平化设计来了呢？难道是因为我们视觉疲劳了吗？答案很简单，1、因为使用了Retina屏，屏幕清晰度支持扁平化更多的细节；2、当具象化慢慢达到了极致，当大师们发现具象化已经不再有挑战时，于是开始尝试从别的角度表达；3、高度的拟物在一定程度上减轻了学习成本，但是提高了辨识成本。总之，扁平化这种二维设计已经成为一种更加流行的设计风格。所有元素的边界都很干净利落，较多使用色块和符号化的图形以及无衬线修饰的字体，界面更加整齐简洁。使用这种设计风格的优点是可以更加简单直接的将信息和事物的工作方式展示出来，将一切干扰信息弱化，减少认知障碍的产生。虽然扁平化的优点有很多，也适合当下技术发展需要的，但是缺点也是显而易见的。譬如表现形式太过于抽象、缺乏情感的传递，而事实上发展到今天的扁平化设计确实也在不断的优化自己~使得自己更加的适应时代的发展。另外还有一个点就是所谓的 “审美疲劳”。当你一直看着简单的东西，久而久之就会越来越烦，你就会越来越想要看那些丰富多彩的东西。反之亦然。这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢，即“认知简约”。也许当满世界都是扁平化后，拟物化的设计却又变得更显眼了呢？最近流行的“新拟物”风格就是最好的证明。1.6 微扁平、轻拟物由于扁平风格表现形式单一，同质化严重，缺乏个性，图标慢慢开始发展到微扁平轻拟物的方向。相较于拟物风格不会有太多复杂的视觉元素，与扁平风格又有了更丰富的情感内容，所以现在界面中，在面积比较小的区域我们使用扁平图标或线形图标；在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。1.7 " 新拟物 "风格图标苹果在 WWDC2020 搞了个大新闻：macOS 将与 iOS 统一步调，从X86 平台迁移至ARM 平台，并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur。macOS Big Sur是第一个将 " 新拟物 " 设计投入大规模商用的操作系统，这可视为 " 新拟物 "在实用化道路上的首次胜利。值得一提的是，在 Big Sur 的 " 外观 " 设置里，多了一项名为" 自适应强调色 "的选项。苹果将主题色的指定权留给开发者，这是否暗示新一代 App 在光影上会有更丰富的效果？" 新拟物 " 设计的精髓在于对光线的绝妙运用。它把光效拿捏在 " 扁平 " 与 " 拟物 " 之间，进而打造一种全新的视觉体验。不同于传统的拟物，" 新拟物 "虽然将符合物理规律的光影效果引入界面，但它所模拟的材质是自然界不存在的。换句话说，" 新拟物 " 是将真实光线用于虚拟对象，而 " 拟物 " 是还原实际物品在特定光照下的效果；由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。应用图标的类型及作用产品应用图标（也叫启动图标），是指产品「品牌标识」中独立的图形，也是产品品牌的核心组成元素。作为产品所有视觉通信中必不可少的元素，其使用率非常高，所以该独立图形在设计中应做到最简化。 一个小问题：为什么iOS系统中图标形状是统一的圆角矩形？苹果官方给出的解释是在空间有限的的区域，太多形状显得杂乱，如果形状不规则，就无法控制统一间距，设计师水平也不一样，这样统一规范能保证最低标准。推荐一个iOS启动图标资源网站，设计时可以找找灵感。△iOSIcon gallery而安卓应用图标就没那么规范，处于百花齐放的状态，各家厂商都在设计独属于自己的视觉语言。大家都不一样，也就导致没有个性之美。安卓应用图标设计规范网站应用图标的类型应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。2.1 中文文字图标中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。2.1.1 单字 提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。2.1.2 多字 多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行（四个字）排列。其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。2.1.3 字加图形组合文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。2.2 英文字母图标英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。2.2.1 单字母 通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。2.2.2 多字母 提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。2.2.3 字母加图形组合 字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。2.3 数字图标直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。2.4 特殊符号图标由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：2.5 几何图形几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。2.6 单双形/剪影单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色；在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。2.7 线形线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色；在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。2.8 动物图形/剪影动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。2.9 卡通形象卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，例如Bear，它的卡通形象是一头洁白的北极熊，简洁的形象设计与产品的高效阅读体验一致。2.10 正负形以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。2.11 白色渐变白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。2.12 彩色渐变色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。2.13 无无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。2.14 应用图标的作用打开率是一款移动应用的重要数据，应用只有被打开才有它的运营价值。在我们手机里安装了许许多多的应用，除了一些我们每天必须使用的应用如微信，其他大多数的应用在没有使用场景时很难想到去打开他们。因此，这些应用如何在手机屏幕上吸引用户的注意，鼓励用户打开显得非常重要。于是在应用图标上做文章就显得很有必要，常见的设计手法有：品牌传播：在游戏领域比较常见，在应用图标上搭上品牌的旗号就能或者用户的注意；营销事件：将营销事件（例如双11）展示在应用图标上，折扣、促销等都能吸引眼球；核心卖点：将核心卖点出现在应用图标上，引起用户注意，从而提高应用被打开的频率；节日氛围：节日通常伴随着消费，因此电商类应用最注重节日氛围的主题设计，每年春节期间桌面图标几乎一片红，非常有节日气氛；3.1 iOS应用图标在设计模板还没有如今这么发达时，设计师需要设计启动图标（1024x1024px）之后按照程序员的要求切出几十个不同尺寸的图标。比如，在手机中@3x情况下桌面图标尺寸为180x180px，在@2x情况下为120x120px；在应用商店图标需要使用的尺寸是1024x1024px；这个工作太烦人了，好在现在我们只需要专注在启动图标设计本身上了。在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。打开这个文件，用我们自己设计的启动图标替换掉智能对象里的内容，你会发现所有尺寸的图标都变成了我们的图标。iOS的圆角图标并不是标准的圆角矩形，而是某种连续曲线。我们把两个圆角曲线放大重叠后进行对比，其中灰色线框为标准圆角矩形绘制的圆角，红色为iOS平滑圆角，它与圆角矩形拥有相同的对角线锚点，区别在于其曲线稍微向中心收紧。事实上，我们很难在Retina屏幕上区分这么细微的差别，因此设计师在绘制iOS应用图标时不必过分纠结它的圆角，直接绘制成直角矩形交给开发同学即可，如果应用图标需用于展示，可以绘制120*120px圆角矩形、27px圆角半径代替。3.2 安卓应用图标安卓应用图标同样需要很多尺寸，主流需求是1024px、512px、144px、96px、72px、48px六种。设计师提供给程序员的同样是直角矩形，然后程序员通过代码进行切割使其变成圆角图标。3.3 iOS应用图标设计流程在我之前的设计作品中，有个“影记”的摄影社区APP，本篇我们就以此为产品案例抛砖引玉来学习一个iOS应用图标的绘制过程。3.3.1 寻找隐喻隐喻是在彼类事物的暗示之下感知、体验、想象、理解、谈论此类事物的心理行为、语言行为和文化行为，即人们看到某样东西或听到某件事情能够马上在大脑中形成联想。例如说到摄影，马上就能想到相机、快门、闪光灯、暗房等。然后通过这些联想词，去找一些气质相符的图片制作情绪版，通过情绪版可以感受到产品的调性，然后从中提取一些形状和色彩作为产品图标的主要造型。3.3.2 竞品分析应用市场各类产品不胜其数，在同类应用中存在大量相似的应用图标设计，如何保持应用图标的唯一识别性非常重要。唯一识别性不单单指图形与其他应用有所差异，避免创意撞车，让用户在脑中形成思维模式，它还指图形表意是否清晰，是否符合用户的心里预期。3.3.3 提取关键词根据收集的图片，创建情绪版，结合自己的产品提取关键词，然后就知道在接下来的设计中应该突出什么。我们从“影记”中可提取首字母“Y”，相机中的“快门”“信号灯”“开关机”，并依次将关键词描绘成下列图形。3.3.4 抽象图形确立了首字母“Y”、“快门/开关机”和“信号灯”作为应用图标的主图形，接下来将绘制好的3个图形相结合，即完成初步设想。3.3.5 图标栅格线使用iOS应用图标栅格线作为设计依据有助于建立和谐的图标绘制比例，并与iOS系统保持统一，下图为iOS系统天气应用使用了图标栅格线。将图形放置在图标栅格上调整大小并注意图形与其比例协调。3.3.6 丰富细节通过上面图形组合已基本完成应用图标的设计，接下来我们还应从颜色、质感、背板等着手丰富图形的细节，建立起应用的产品气质。“影记”作为摄影师分享佳作平台，摄影师们用的器材颜色大多以黑色为主，因此酷酷的黑色更适合作为应用的主色。然后，白色的信号灯过于普通，使用相机本身发出的橘红色灯光作为信号灯的颜色，使其更加具有动感和活力。整体像「消息气泡」的造型暗示可以在这里进行摄影交流。3.3.7 多场景测试将应用图标设计稿交付开发提交至App Store上架，正确的图标设计稿应是直角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住，假如图标设计稿自带圆角，就有可能露出图标透明区域。△ 注：上图非实际大小，仅表明不同分辨率下的比例关系此外，应用图标还会以不同的分辨率出现在不同场景中，例如在iPhone 8plus上需@3x的图，即将120px的图标放大至1.5倍；而在iPhone7的设置页需要58px的图，就需要将120px的图缩小。将大图缩小成小图时，一些细节就会丢失，使画面变得模糊，因此设计师应对小尺寸图标进行席位调整，去除不必要的装饰元素，以确保应用图标在小分辨率应用场景下也能保持清晰的识别度。图标设计指南上篇就分享到此，中篇和下篇敬请期待。我在这里， @Fyin印迹编辑于 2020-10-26 21:19图标设计UI视觉设计文章​赞同 18​​4 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录UI设计师必看系列字体、图标、颜色