《aigc+ui 交互设计》课件 第三章 图标设计基础

第三章

图标设计基础目录01图标概述02图标设计规范03图标设计流程04功能图标0506装饰图标启动图标图标概述

01图标，也称为icon，是一种图形化标识。图标分为广义和狭义两种，广义的图标是指具有指代意义的图形化符号，例如：男女厕所标志、交通标志等。狭义的图标主要是指设备界面中的符号，这些设备泛指承载互联网产品的载体，如手机、电脑、iPad等。UI设计体系中图标主要是针对狭义的概念。在UI设计体系中，图标是最重要的组成部分之一，也是任何UI界面都不可或缺的视觉元素。一、图标的定义一、图标的定义图标设计在UI设计中通过简洁、直观的图形语言，帮助用户快速理解和操作界面。良好的图标设计不仅能够提升界面的美观度，还能增强用户体验。因此，图标设计需要遵循相应的基本原则方能达到最佳的效果。二、图标设计原则1.简洁性原则图标设计应尽量简洁，避免复杂的线条和过多的细节。简洁的图标更容易被用户识别和记忆。在现代UI界面中，图标通常需要在较小的尺寸下展示，复杂的细节可能会导致图标模糊不清，难以辨认。简洁的设计能够确保图标在不同尺寸下都能保持清晰可读。苹果公司的图标设计风格以简洁著称，例如，“相机”图标仅用简单的线条勾勒出相机的轮廓，用户能够迅速识别其功能。二、图标设计原则2.一致性原则在同一个应用或系统中，图标的设计风格应保持一致，包括形状、颜色、线条粗细等元素。一致性能够帮助用户建立对界面的认知模式，减少学习成本。当用户看到一个图标时，能够根据已有的经验快速理解其功能。例如，在微信应用中，所有功能图标都采用了相似的线条风格和色彩搭配，用户在使用过程中能够轻松识别不同功能的图标。二、图标设计原则3.可识别性原则图标需要能够清晰地传达其代表的功能或概念，避免让用户产生误解。图标的主要作用是帮助用户快速理解界面元素的功能。如果图标无法被用户正确识别，将严重影响用户体验。如在常见的办公软件中，“保存”功能通常使用一个软盘图标表示。这个图标因为其高度的可识别性，被广泛应用于不同的软件中。二、图标设计原则4.适应性原则图标设计应考虑不同的设备和屏幕尺寸，确保在各种场景下都能保持良好的显示效果。随着移动设备和多平台应用的普及，图标需要在手机、平板、电脑等多种设备上显示。适应性原则能够确保图标在不同分辨率和屏幕尺寸下都能保持清晰、美观。在设计图标时，通常会提供多个尺寸的图标文件，以满足不同设备的需求。二、图标设计原则图标设计规范02

当下，数字产品种类繁多，用户对界面易用性的要求越来越高。而图标是用户与产品交互的关键元素，一份规范的图标设计指南，对打造优质产品体验至关重要。遵循图标设计规范，能确保图标风格统一、表意清晰。这不仅有助于塑造一致的品牌形象，还能降低用户学习成本，提升交互效率。​图标栅格系统是一种用于规范图标设计布局的框架体系。它通过设定固定的网格结构，精确约束图标元素的位置、大小与间距，使图标在视觉上达到规整、协调的效果。图标栅格系统源于平面设计领域的栅格概念，最初被广泛应用于报纸、杂志排版，旨在优化内容呈现、提升可读性。随着数字化时代来临，其理念被引入UI图标设计，用于确保图标在不同尺寸、平台下的一致性与可识别性，帮助设计师高效构建风格统一且符合用户认知习惯的图标体系

。一、图标栅格系统常见的图标造型可概括为4种：圆形图标、方形图标、横长形图标、竖长形图标。图形的形状不同，视觉张力就不同，最终呈现的视觉大小也就不同。比如实际尺寸都为144px×144px的正方形和圆形，正方形要看起来大一些。而将正方形缩小后，正方形和圆形在视觉上看起来大小一致。一、图标栅格系统两个图形的视觉大小是否一致是由两个图形的面积是否相同决定的，只要能够保证两个图形的面积基本相同，就能保证两个图形的视觉大小基本一致。因此，为了确保图标在手机屏幕上显示的视觉大小一致，在绘制时要遵循图标栅格系统规范。图标栅格系统中的尺寸不是随意定制的，而是具有严格的比例关系。在iOS界面中，底部标签栏的系统图标标准大小为44px×44px，因此选择这个尺寸作为标准来定制图标栅格系统。一、图标栅格系统1.圆形图标圆形图标具有天然的收缩性，在撑满整个网格的情况下，圆形是在固定尺寸内的最小视觉大小。一、图标栅格系统2.正方形图标正方形图标在实际尺寸中比圆形多了4个尖角，为了与圆形图标在视觉上统一，需要将正方形图标缩小。一、图标栅格系统3.横长形图标制定横长形图标栅格的原理和正方形图标一样，将圆形和横长形重叠在一起，然后适当压低高度，直到圆形和横长形的面积基本相同。一、图标栅格系统4.竖长形图标竖长形图标跟横长形图标的栅格系统一样，即将横长形图标栅格旋转90度。一、图标栅格系统图标栅格系统作用重大，它能确保图标风格和尺寸的一致性，让整个图标体系协调统一且视觉平衡，帮助设计师快速定位布局图标，让图标适配不同屏幕尺寸，在不同设备上都有良好的视觉效果与可操作性，提升用户体验。一、图标栅格系统二、iOS系统图标规范1.启动图标启动图标是用户在主屏幕上看到的应用图标，点击后可以启动相应的应用。在AppStore中，启动图标尺寸为1024×1024px，所以设计师在设计iOS系统启动图标时，不仅需要提供该尺寸的设计稿，还需要提供多尺寸的图标以适应不同设备。需要注意的是，从iOS13开始，开发者可以提交完整的方形图标，系统会自动为图标添加圆角，无需再手动设计圆角。设备类型尺寸（像素）用途iPhone（全面屏@3x，如iPhoneX及以上）180×180px用于主屏幕iPhone（全面屏@2x，如iPhone8及以下）120×120px用于主屏幕AppStore图标1024×1024px用于AppStore展示二、iOS系统图标规范2.栏图标在iPhone中，栏图标通常指的是出现在状态栏、导航栏、标签栏或工具栏中的图标，用于指示状态、辅助导航或提供快捷操作。在设计栏图标时，建议使用

SFSymbols（苹果官方图标库），确保与系统风格一致。图标类型尺寸（像素）用途导航栏图标（@2X）44×44px用于导航栏，如返回、设置、搜索等图标导航栏图标（@3X）66×66px标签栏图标（@2x）50×50px用于标签栏，图标下方通常搭配文字标签标签栏图标（@3x）75×75px工具栏图标（@2x）44×44px用于工具栏，如分享、收藏、删除等图标工具栏图标（@3x）66×66px状态栏图标由iOS自动管理，开发者无法直接修改尺寸二、iOS系统图标规范3.小图标小图标用于应用内的次级场景，如列表项、下拉菜单等，作为功能或内容的视觉标识。在设计小图标时，建议从最大尺寸开始，逐步调整小尺寸的细节，具体尺寸需根据使用场景调整。图标类型尺寸（像素）用途Spotlight搜索图标（@2x）80×80px用于Spotlight搜索Spotlight搜索图标（@3x）120×120px通知图标（@2x）40×40px用于系统通知图标通知图标（@3x）60×60px设置图标（@2x）58×58px用于系统设置图标设置图标（@3x）87×87px三、Android系统图标规范1.启动图标Android系统主屏幕上的启动图标，没有强制要求使用圆角矩形作为背景，因此设计师要确保启动图标在任何背景上都能清晰可见。在GooglePlay商店中显示的启动图标尺寸为512×512px，所以设计师在设计Android系统启动图标时，需提供尺寸为512×512px的设计稿。除此之外，由于使用Android系统的手机品牌众多，设计师还需将其适配到不同屏幕像素密度的手机上。屏幕像素密度启动图标尺寸Ldpi（小屏）36×36pxMdpi（中屏）48×48pxHdpi（大屏）72×72pxXHdpi（特大屏）96×96pxXXHdpi（超大屏）144×144px三、Android系统图标规范2.栏图标栏图标是指在系统界面的各个栏中显示的具有特定功能或代表特定状态的图形标识，是用户在App中执行操作的入口。按照不同Android系统手机的屏幕像素密度进行缩放，得出操作栏图标的设计尺寸和焦点区域大小。屏幕像素密度操作栏图标设计尺寸操作栏图标焦点区域尺寸Ldpi（小屏）24×24px18×18pxMdpi（中屏）32×32px24×24pxHdpi（大屏）48×48px36×36pxXHdpi（特大屏）64×64px48×48pxXXHdpi（超大屏）96×96px72×72px三、Android系统图标规范3.小图标Android系统的小图标系统界面或应用程序中，用于代表各种功能、操作、状态或内容的小型图形元素，一般出现在App的行列表中。按照不同Android系统手机的屏幕像素密度，对Android系统的小图标进行缩放，得出相应小图标的设计尺寸和焦点区域（视觉中心安全区域）尺寸。屏幕像素密度小图标设计尺寸小图标焦点区域尺寸Ldpi（小屏）12×12px9×9pxMdpi（中屏）16×16px12×12pxHdpi（大屏）24×24px18×18pxXHdpi（特大屏）32×32px24×24pxXXHdpi（超大屏）48×48px36×36px图标设计流程03一

、寻找隐喻隐喻是将抽象的功能或概念转化为用户熟悉的视觉符号。隐喻分为直接隐喻，间接隐喻，功能性隐喻三种类型。直接隐喻是指用真实世界中的物体代表功能，例如垃圾桶代表“删除”，信封代表“邮件”；间接隐喻是借助文化符号来表达隐喻，例如心形表示“喜欢”或“收藏”；功能性隐喻是基于用户交互习惯，比如放大镜代表“搜索”，齿轮代表“设置”。在进行UI图标设计时，应先将抽象的概念实体化，再通过产品属性、功能和特点提取关键词，进行头脑风暴。二、抽象图形抽象图形是指从选定的隐喻中，提取最具代表性的关键特征，运用图形设计的手法，对关键特征进行简化和抽象处理，去除不必要的细节，使图标更简洁、清晰。需要注意的是，在抽象的过程中，要确保图标仍然能够被用户轻易识别出其所代表的含义，不能过度抽象导致用户无法理解。三、竞品分析在做图标竞品分析时，要广泛收集同类产品或相关领域产品的UI图标，从形状、颜色、风格、隐喻等方面对竞品图标进行分析，找出它们的优点和不足。基于竞品分析结果，寻找自己图标设计的差异化方向，以在众多竞品中脱颖而出。例如，常用的通信类应用绝大多数使用气泡图形，为了避免在设计同质化，可以通过筛选分析市面上同类应用，调整图形设计细节，做出差异。四、确定风格在确定基础图形后，要根据产品的定位、目标用户和使用场景来确定图标风格，同时还要确保整个产品中的图标风格保持一致，包括颜色搭配、线条粗细、图形元素等方面，形成统一的视觉语言，提升用户体验。五、调整细节在初步设计完成后，还需要对图形比例、颜色层次、质感等细节进行优化，确保图标在不同环境下都能完美呈现。六、场景测试设计好的图标需要放入实际界面中测试，确保它能清晰传达信息，在不同设备和系统中都能被用户高度识别，并在各种背景、设备上都具有良好的可见性。通过以上六个步骤，可以设计出高效、直观、符合用户认知的UI图标，提高整体产品的易用性和美观度。功能图标04功能图标是一种用于表示软件或应用程序界面上各种功能的图形符号。它们通常由简单的、易于识别的图形元素组成，能够替代或辅助文字传达信息，帮助用户快速理解界面功能。在设计功能图标时，应注意以下三点：1.表意准确由于功能图标绘制简洁，要确保关键线条能准确传达核心功能，避免产生歧义。2.风格一致在绘制功能图标时，要注意线条的粗细、圆角、风格要保持一致。在一组图标中，不能有的线面结合图标以线为主、面为辅，有的却相反，导致风格不统一。3.适配性和可拓展性在不同分辨率和尺寸的屏幕上，线条的显示要清晰、流畅，不会出现模糊或变形的情况，并且在不同的应用场景和界面布局中都能保持良好的视觉效果和可识别性。一、功能图标分类1.线性图标线性图标主要由线条构成，简洁轻量，通过线条的粗细、端点、弯曲程度等属性来表达不同的视觉感受，常用于移动端的标题栏、导航栏等次要功能设计，以及后台业务类产品的设计，其优点是简洁、易识别，适合快速传达信息。一、功能图标分类2.面性图标面性图标通过面的形式表达语义，给人以重量感和力量感，通常用于主功能图标或重要位置的图标。面性图标常用于主页面中的主要功能图标，如首页入口、个人中心列表等，其优点是视觉表现力强，能够吸引用户目光。一、功能图标分类3.线面结合图标线面结合图标是线性和面性的结合体，既保留了线形的精致细腻，又增加了面的重量感和装饰效果。线面结合图标常用于首页功能入口、引导页、缺省页等，其优点是兼具线性和面性的优点，能够提升界面的视觉层次感和辨识度。装饰图标05一、功能图标分类装饰图标是UI设计中不可或缺的元素之一，通过风格一致、色彩协调、细节优化等手段，为界面增添趣味性和视觉层次感。装饰图标一般应用于金刚区、信息卡片区、用户行为反馈区、情感化场景区、数据可视化展示区等，在设计时可融入一些品牌元素，起到渲染品牌氛围和提升品牌调性的作用。在设计装饰图标时，应注意以下两点：1.装饰与功能的平衡装饰图标要在强化界面美观度的同时，明确装饰图标的功能属性，清晰的传达其功能意义，使用户一目了然，避免使用容易混淆或具备多义性的图形元素。2.简约与细节的结合装饰图标应避免过于繁杂的设计风格，一般以轻拟态风格为主，通过渐变色、微妙的纹理或装饰元素来增添细节，让界面更有吸引力。一、装饰图标分类1.轻拟物风格轻拟物风格图标是一种介于扁平风格和拟物风格之间的图标设计风格，在平面界面中使用一些真实世界物体的形态和材质作为设计灵感，结合一些阴影、渐变色和细节来表达动态和立体感，以平面化的方式呈现，突出简洁性和符号化的特点。一、装饰图标分类2.磨砂玻璃风格磨砂玻璃风格图标是一种近年来在UI设计领域逐渐流行的设计风格，其特点是通过半透明效果、高斯模糊、剪切蒙版等技术手段，营造出轻质感、若隐若现的视觉效果。这种风格介于扁平化设计和写实设计之间，既具有现代感，又带有柔和的朦胧美，非常适合用于电商、科技、金融等行业的图标设计。一、装饰图标分类3.MBE风格MBE是一种具有独特视觉特征的图标设计风格，因其多样的色彩运用和趣味的绘制手法，近年来在互联网产品中流行，广泛应用于插画、图标、品牌和UI界面设计中。其设计要点是粗线条描边、断点式处理、色块溢出以及单色系配色，具有简洁、可爱、易识别的特点。01设计目标与风格确定03采样方法与生成参数02提示词编写与解析04生成与后期优化四、课堂案例——AIGC装饰图标设计启动图标06启动图标是在操作系统界面中，用于启动应用程序或执行特定功能的图形化标识，是UI设计中非常重要的一部分。它不仅是应用的视觉入口，还承载着品牌识别和用户体验的重要功能，是用户与应用之间的第一接触点。在设计启动图标时，应注意以下两点。1