《交互界面设计》课件-2.1 .1图标的基础知识

UI设计UIdesignUI设计UIdesign2.1图标的基础知识导入随着手机更新换代的速度不断加快，手机功能不断强大，为APP带来了重要的发展契机，APP设计已经成为移动UI设计的一个重要方向，而图标又是APP的重要组成元素，本节主要详解图标的相关基础知识，包括图标的基本概念、图标的分类、图标的风格，为以后的设计之路打下坚实基础。导入在APP设计中，图标是非常重要的一部分。图标是引导用户进入应用的窗口，图标的设计最好让用户一眼便能获知应用的功能，而不需要让用户过多猜测。图标设计不仅能够有效的为设计者传播应用程序的信息与内涵，而且对APP设计有着重要的意义。导入目前图标设计已经发展成为一个巨大的产业，因为它们能给APP设计带来许多便利。图标可以为标题添加视觉引导，可以用作按钮，可以用来分隔页面，可以对页面做整体修饰，增强页面的交互性。图标的基本概念通过图标的起源、图标的含义、图标与标志的区别三个方面系统的讲解图标的基本概念2.1.1图标的基本概念图标历史久远：从上古时代的图腾，到现在具有更多含义和功能的各种图标。应用范围广泛：一个国家的图标就是国旗；一件商品的图标是注册商标；军队的图标是军旗；学校的图标是校徽；旅游景区内的引导图标。这些图标存在的价值是提供信息指引，帮助人们找到需要的信息。一、图标的起源一、图标的起源现在说起图标，一般指智能设备中代表某个含义的图形，智能设备中的图标其实就是把现实生活中的图标迁移到界面当中，在界面中图标传达信息引导用户操作，用户根据接收到的信息进行操作。图标的存在是为了快速准确地传达信息给操作的用户并且引导用户做出反馈行为。2.1.1图标的基本概念二、图标的含义1.广义上的图标指具有指代意义的图形符号，高度浓缩、快捷传达信息、便于记忆。应用范围广范，软硬件网页社交场所公共场合无所不在。2.1.1图标的基本概念二、图标的含义2.狭义上的图标指应用于计算机软件方面，包括程序标识、数据标识、命令选择、模式信号、切换开关、状态指示等。一个图标是一个小的图片或对象，代表一个文件，程序，网页，或命令。图标有助于用户快速执行命令和打开程序文件。2.1.1图标的基本概念二、图标的含义3.UI图标UI图标设计就是将一定的含义转化为图形，把文字语言“翻译”成图形语言，来达到标识数据、引导选择、切换开关、状态指示等目的。UI图标具有高度浓缩并快捷传达信息、便于记忆的特点。是用户与APP连接的桥梁。2.1.1图标的基本概念二、图标的含义公共场所图标指示Window10桌面图标2.1.1图标的基本概念APP图标网页图标二、图标的含义2.1.1图标的基本概念三、图标与标志的区别什么是标志?标志设计是将具体的事物、事件、场景和抽象的精神、理念、方向通过特殊的图形固定下来，使人们在看到标志的同时，自然地产生联想，从而对企业产生认同。标志与企业的经营紧密相关，是企业日常经营活动、广告宣传、文化建设、对外交流必不可少的元素。2.1.1图标的基本概念三、图标与标志的区别什么是图标?图标应用于计算机软件方面。图标有套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张显示相同内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。图标含有透明区域，在透明区域内可以透出图标下的桌面背景。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。2.1.1图标的基本概念图标的分类按作用分类，图标可分为功能型和桌面型两类2.1.2图标的分类一、功能型图标应用于APP界面内，分为功能图标和分类图标。

功能图标常用于页面中的标签栏和导航栏，它们参与用户的交互，是页面不可或缺的组成部分。

分类图标位于页面的内容区域，是APP分类页面的入口，尺寸更大，表现形式也更丰富，其目的是吸引用户目光，装饰页面，引导用户。导航栏分类图标标签栏2.1.2图标的分类二、桌面型图标也称系统图标、启动图标、APP图标，它位于应用商店或移动设备桌面，是APP的门面。要具有清晰的可识别性，区分于其他图标的独特性和美观性。反映APP特点，能与用户建立情感连接，给用户留下良好的第一印象。桌面型图标图标的风格图标的风格大体可以分为六种，分别是渐变风格、剪影风格、长投影风格、卡通风格、轻质感风格和拟真风格2.1.3图标的风格一、渐变风格多为单色渐变，颜色过渡清新自然，是目前的主流设计风格之一，如下图所示。除用于图标外，渐变风格可使用的场景非常多，如APP中的背景图、按钮等。2.1.3图标的风格二、长投影风格通常会以纯色作为图标主体背景，该风格色彩对比度大，视觉冲击力强，通过长投影突出主体，从而创造鲜明的层次感和空间感，常用于APP页面中的分类图标。2.1.3图标的风格三、轻质感风格层次简单，用色素雅干净，采用轻投影、轻渐变的方法设计。这类图标具有一定的立体感，能给人轻盈、简洁、精致的感觉。2.1.3图标的风格四、卡通风格特点是可爱，富有亲和力，设计简洁而精致，视觉效果突出，但风格小众，使用范围比较局限，常用于女性或二次元（二维，二次元源于日语）APP中。2.1.3图标的风格五、拟真风格

iOS7以前，拟真风格是UI设计的主流，这类图标的特点是通过细节和光影还原现实物品的造型和质感，能给用户极强的代入感，快速领会图标表达的意图。2.1.3图标的风格六、剪影风格特点是简约、概括，视觉识别度良好，设计感强，常被用于APP的功能型图标中。剪影图标可分为线性、面性和线面结合三种，线性为未选中状态，面性、线面结合为选中状态。2.1.3图标的风格七、剪影风格图标——线性图标1.定义线性图标即通过统一的线条进行绘制，表达图标的功能。2.应用线性图标经常用于APP界面底部的标签栏、导航栏的功能按钮以及界面中的分类。线性图标应用于APP界面底部标签栏线性图标应用于导航栏2.1.3图标的风格七、剪影风格图标——线性图标3.分类线性图标形象简练、设计轻盈，又可以细分为圆角图标、直角图标、高光式图标、断点图标、不透明度图标、双色图标、一笔画图标。线性图标应用于APP界面底部标签栏线性图标应用于导航栏2.1.3图标的风格七、剪影风格图标——线性图标3.分类圆角图标圆角图标柔和、亲切一般用于母婴、儿童以及女性等方面内容圆角图标（图片来源花瓣）直角图标直角图标明快、果断一般用于金融以及工具等方面内容直角图标（图片来源花瓣）2.1.3图标的风格七、剪影风格图标——线性图标3.分类高光式图标高光式图标较传统一般用于银行等方面内容断点图标断点图标有趣、丰富、一般用于表现年轻、可爱等方面内容高光式图标（由爱沙尼亚设计师MartV创作）断点图标（图片来源追波，由中国设计师WilburXu创作）2.1.3图标的风格七、剪影风格图标——线性图标3.分类不透明度图标不透明度图标有层次，适用范围较广双色图标双色图标由两种不同色彩的线搭配构成适用于表现可爱、活泼等方面的内容由印度设计师SarathJayaprakash创作由美国设计师JakobScott创作2.1.3图标的风格七、剪影风格图标——线性图标3.分类一笔画图标一笔画图标较文艺，同时难度系数比较高一般用于文化、艺术等方面内容图片来源Pinterest2.1.3图标的风格八、剪影风格图标——面性图标1.定义面性图标即填充图标。2.应用面性图标经常用于APP界面底部的标签栏、图标的选中状态、以及界面中的金刚区和界面中的重要分类。由印度设计师AbhinavAgrawal创作2.1.3图标的风格八、剪影风格图标——面性图标3.分类面性图标整体饱满、形象突出，又可以细分为单色面性图标、不透明色块面性图标、多色面性图标。面性图标应用于分类2.1.3图标的风格3.分类单色面性图标单色面性图标是最基本的面性图标一般用于APP界底部的标签栏以及图标的选中状态。八、剪影风格图标——面性图标由多伦多设计师DmitriLitvinov创作2.1.3图标的风格3.分类不透明色块面性图标不透明色块面性图标有层次一般用于APP界面中的金刚区起到运营效果。八、剪影风格图标——面性图标由多伦多设计师DmitriLitvinov创作2.1.3图标的风格3.分类多色面性图标多色面性图标酷炫、多彩一般用于生活等方面内容。八、剪影风格图标——面性图标图片来源追波，由设计师超创作2.1.3图标的风格九、剪影风格图标——线面结合图标1.定义线面结合图标是线性图标和面性图标的集合。2.应用线面结合图标经常用于趣味性APP界面中底部的标签栏、界面中的分类或是引导页与弹框中。图片来源CreativeMarket2.1.3图标的风格九、剪影风格图标——线面结合图标图片来源CreativeMarket3.分类线面结合图标充满活力、形象有趣，又可以细分为点缀填充、错位填充、全部填充。2.1.3图标的风格九、剪影风格图标——线面结合图标3.分类点缀填充点缀填充图标，填充的面性约占图标的30%一般用于APP界面中的底部标签栏。由多伦多设计师DmitriLitvinov创作2.1.3图标的风格九、剪影风格图标——线面结合图标3.分类错位填充错位填充图标，面与线进行错位一般用于APP界面中的底部标签栏。由中国设计师Vic创作2.1.3图标的风格九、剪影风格图标——线面结合图标3.分类全部填充全部填充图标，充实、饱满一般用于APP界面中的分类或是引导页与弹框中。由立陶宛产品设计师MantasSuktus创作2.1.3图标的风格此处加入动画：体现导图内容，从左到右分为四层，依次展现每层内容，展现过程中加入图片（图片位于前面几页PPT）UI设计UIdesign2.2图标的设计原则导入随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达。现在各种各样的图标充斥在不同的App中，那么怎样的图标才设计师应该追求的方向呢？评价一个图标设计的好坏的标准是什么呢？学习目的1.图标的设计原则2.图标的设计要点图标的设计原则表意性原则、美观性原则、视觉统一性原则、与场景协调原则、原创性原则2.2.1图标的设计原则一、表意性原则表意性原则也叫可识别原则。图标在很多时候可以代替文字，所以识别性非常重要。图标要准确快速地表达含义，否则就不能快速准确地引导用户操作。所以表意性原则是图标设计的灵魂，也是图标设计的第一原则。当我们看到一个图标时，如图所示的键盘、一些图标、房子、钥匙、电话、垃圾箱等，可识别性强、简单直观，即使不认识字，也能立即理解图标的含义。2.2.1图标的设计原则一、表意性原则象形的图标设计体现了表意性原则：图标与生活中的实物相同或相似，人们自然联想到生活中的实物，就能明白它代表的含义，这样图标就可以准确表达相应的内容。象形的图标设计2.2.1图标的设计原则二、美观性原则在UI界面中，图标是点睛之笔，一个图标的美观度决定了用户对这个图标的观感，进而影响到对整个应用的态度。帅气、美观的图标会大大增加用户点击的概率。不同类别的美观图标效果2.2.1图标的设计原则三、视觉统一性原则一套好的图标，视觉上要协调统一，有自己的风格。视觉的统一提升了设计品质，也会提升用户的满意度。怎样实现视觉统一呢？有一个思路可以供大家参考：是线条的，还是实体填充的?是平面的，还是立体的?是简约的，还是精细的?是单色的，还是多彩的?是古典的，还是现代的?是写实的，还是抽象的？......2.2.1图标的设计原则三、视觉统一性原则视觉统一需要在形体造型、风格表现、节奏平衡上进行统一。1.形体造型上，需要根据图标设计规范对图标各部分进行统一。具体的规范会在后面进行深入剖析。形体造型统一的图标形体造型未统一的图标2.2.1图标的设计原则三、视觉统一性原则视觉统一需要在形体造型、风格表现、节奏平衡上进行统一。2.风格表现上，得益于移动互联网的发展，图标的风格非常多样化。可以根据应用场景和目标而选择合适的风格。APP界面中风格统一的图标2.2.1图标的设计原则三、视觉统一性原则视觉统一需要在形体造型、风格表现、节奏平衡上进行统一。3.节奏平衡上，由于图标造型的丰富，可以使用网格规范达到节奏协调、视觉统一的效果。在规范下设计出视觉平衡的图标2.2.1图标的设计原则四、与场景协调原则图标与场景协调的原则：在UI界面制作中，图标通常是系列存在的（如手机主题界面），设计图标时要考虑到图标是否适合当前的场景。中国风风格图标设计2.2.1图标的设计原则四、与场景协调原则如中国风风格的UI界面，应当加入与中国传统文化相关的元素来制作图标，如京剧、油纸伞、月琴等等。如果放置一些不相关的元素，图标就会显得不协调。课程思政：坚定文化自信，弘扬中华优秀传统文化，建设文化强国，夯实中华民族伟大复兴之路。中国风风格图标设计2.2.1图标的设计原则四、与场景协调原则建设社会主义文化强国要弘扬中华优秀传统文化，筑牢中华民族的“根”和“魂”。我国有着悠久的历史和灿烂的文明，要深入挖掘中华优秀传统文化的内涵，把握时代需求、适应时代变化，继承中华优秀传统文化之精髓，为中华优秀传统文化在新时代绽放光彩提供不竭动力。中国风风格图标设计此处加入动画动画脚本：1.本页及上页课程思政文字

2.展示中国优秀传统文化（剪纸、泥塑、风筝、年画等）3.依次展示右边12个图标2.2.1图标的设计原则五、原创性原则原创性是APP长远发展的前提。一般的设计者总是热衷于素材网站中的素材标，使用它们省时省力，下载即用，但这会涉及到版权问题，还会使产品自身失去个性。图标设计要点桌面型图标设计要点和功能型图标设计要点2.2.2图标设计要点一、桌面型图标设计要点桌面型图标可以说是APP的门面，它给用户的第一印象非常重要，用户可以此初步评判APP的品质、作用和可靠性等。设计桌面型图标时应注意以下几点。2.2.2图标设计要点一、桌面型图标设计要点1.避免使用照片将照片作为主体直接出现在图标中，会给用户一种敷衍了事的感觉，也会被拒绝上架。在图标设计中，设计师可以提取照片中的纹理、细节等应用于拟物图标中。2.2.2图标设计要点一、桌面型图标设计要点2.避免运用大量文字当产品隐喻比较抽象时，可直接使用文字作为图标的主体，如右图所示。注意：图标主体文字不宜超过4个，否则会降低图标识别度。2.2.2图标设计要点一、桌面型图标设计要点3.图形应具有独特性除了要体现APP的功能外，还要保证图标是独一无二的。Pinterest和Path这两款APP有很多共同点，如主色都为红色，英文首字母相同，图标都用字母“P”作为主体，导致它们图标极为相似，新用户有时难以分辨。2.2.2图标设计要点一、桌面型图标设计要点4.表意明确图标应表意明确，让用户第一眼看到就明白它是干什么的。例如图标中出现耳机、音符，就会联想这个APP是关于音乐。2.2.2图标设计要点一、桌面型图标设计要点5.慎重用色每个颜色都有其自身的象征意义，设计师需要根据产品气质和用户群体选择合适的颜色，不可为了博人眼球在图标中加入无关杂色。2.2.2图标设计要点二、功能型图标设计要点设计功能型图标时应注意以下三点：简洁：简单易懂。功能图标的基本功能是辅助信息分类。减少不必要的设计，确保人与机器的交互过程更快速、更方便。统一：风格统一。可为图标添加相同的细节，如统一为图标作断线或圆角处理。规则：图形规则有序。2.2.2图标设计要点二、功能型图标设计要点设计功能型图标时应注意以下三点：32像素和36像素单位是App中常见的功能图标尺寸，目前的触屏手机最佳范围是44像素，但如果将图标充满44像素，会太过于饱满。常规做法是，肉眼能识别的视觉尺寸采用36像素，而肉眼看不到的切图点击范围采用44像素。UI设计UIdesign2.3图标的设计规范导入本节主要讲解图标的设计规范，包括两部分内容：尺寸相关概念、图标尺寸规范。尺寸相关概念移动设备的更新速度很快，市场上的机型越来越多，这导致同一页面往往需要适配多个不同尺寸的机型。图标是页面中的重要元素，因此了解尺寸相关概念对于图标设计来说很有必要2.3.1尺寸相关概念一、屏幕尺寸屏幕尺寸是以屏幕的对角线长度为依据，以英寸（1英寸≈2.54cm）为单位来表示的。目前市场上的手机屏幕尺寸主要有3.5英寸、4.0英寸、4.7英寸、5.0英寸、5.5英寸、6.0英寸和7.0英寸等，其中4.7英寸（iPhone6/7/8）的手机是主流机型。2.3.1尺寸相关概念二、屏幕分辨率屏幕分辨率表示显示器所能显示的像素数量，分辨率越高，画面越精细，通常用屏宽像素×屏高像素来描述屏幕分辨率。以iPhone7的屏幕尺寸为例，其屏幕宽为750像素，高为1334像素，因此其屏幕分辨率为750×1334像素，页面中图标尺寸为120×120像素，包括标签栏的图标在内，一共可容纳28个图标（7排4列）。图标尺寸规范移动智能设备图标的设计要遵循一定的尺寸规范，分别从iOS系统尺寸规范、Android系统尺寸规范、网格规范三个方面讲解。2.3.2i0S系统图标设计规范每一个应用程序需要一个应用程序图标和启动图像。随着iOS的升级，一大堆新尺寸的应用程序图标规格又出来了。除了要兼容低版本的iOS，还要兼容高版本，一个App做下来，要生成十几种不同大小的App图标。iOS上的图标可以分为：在苹果应用商店下使用图标应用程序图标主屏幕图标Spotlight搜索结果图标标签栏图标工具栏和导航栏图标2.3.2i0S系统图标设计规范一、iPhone图标设计尺寸设备AppStore应用程序主屏幕Spotlight搜索标签栏工具栏和导航栏iPhone6-6S-7Plus(@3x)1024×1024180×180152×15287×8775×7566×66iPhone6-6S-7(@2x)1024×1024120×120152×15258×5875×7544×44iPhone5-5C-5S(@2x)1024×1024120×120152×15258×5875×7544×44iPhone4-4s(@2x)1024×1024120×120114×11458×5875×7544×44iPhone3G、3GS&iPodTouch第一代、第二代、第三代1024×1024120×12057×5729×2938×3830×30iPhone图标设计尺寸（单位：像素）2.3.2i0S系统图标设计规范一、iPhone图标设计尺寸iPhone图标设计图示（单位：像素）2.3.2i0S系统图标设计规范二、iPad图标设计尺寸设备AppStore应用程序主屏幕Spotlight搜索标签栏工具栏和导航栏iPad3-4-5-6-Air-Air2-mini21024×1024180×180144×144100×10050×5044×44iPad1-21024×102490×9072×7250×5025×2522×22iPadMini1024×102490×9072×7250×5025×2522×22iPad图标设计尺寸（单位：像素）2.3.2i0S系统图标设计规范二、iPad图标设计尺寸iPad图标设计图示（单位：像素）2.3.3安卓系统图标设计规范安卓系统中的图标：表示一个应用程序的功能、内容，为未操作状态和应用提供第一印象的小幅图片。在为应用程序设计图标时，设备是多种多样的，图标在屏幕中占用的面积非常小，通过图标可以为用户和APP之间提供快速且直观的表现形式。iOS上的图标可以分为：启动图标操作栏图标上下文图标系统通知图标2.3.3安卓系统图标设计规范屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画320×48048×4832×3216×1624×24不小于2480×800、480×854、540×96072×7248×4824×2436×36不小于3720×128048×4832×3216×1624×24不小于21080×1920144×14496×9648×4872×72不小于6安卓系统的屏幕图标尺寸规范如下图所示安卓系统的屏幕图标尺寸规范(单位:像素)2.3.4图标尺寸规范课程思政：没有规矩，不成方圆党章就是党的根本大法，是全党必须遵循的总规矩。——习近平《认真学习党章严格遵守党章》（2012年11月16日），《人民日报》2012年11月20日刊登。党章是我们党的根本大法，也是党内最大的规矩、管总的规矩。只有以此为根本遵循，才能画出党的事业最大的圆。同学们作为学生，有学生的规矩；作为老师也有老师的规矩，在规矩范围内办事才能画出我们最大的圆。不仅图标设计有其尺寸规范，我们的学习生活也有特定的尺寸规范。网格规范2.3.5网格规范图标的外观取决于其功能、用广和外任环境等多种因案，我们不可能要求每个图标的宽高比例都相同，即便比例尺寸相同，不同形状的视觉大小也会有所区别，如宽高相同的正方形和圆形，正方形的视觉比例就会大于圆形。为了保证每个图林的视觉大小统一，无论是iOS系统还是Android系统中的图标，都可以使用网格规范进行制作。2.3.5网格规范在网格规范中：网格外边线是图标的实际尺寸。网格内正方形、横向矩形、纵向矩形和圆形是图形尺寸。网格边线与蓝色区域之间为安全空间。为使一组图标的视觉尺寸统一，除特殊形状外，网格中绘制的图形都应顶边制作。实际尺寸安全空间制作图标时应注意图标的实际尺寸和安全空间。2.3.5网格规范实际尺寸实际尺寸是图标输出时的尺寸，以图中的“齿轮”图标为例，其主体图形是齿轮。但实际尺寸是外国圆角矩形尺寸。通过确定图标的实际尺寸，可以规范一组图标的视觉比例，从而达到视觉统一。安全空间安全空间是实际尺寸与主体图形之间的空间，根据实际需要，该空间内可添加与主体图形呼应的装饰图形，也可不作处理。实际尺寸安全空间UI设计UIdesign实训2卡通风格图标设计实训2卡通风格图标设计知识回顾特点是可爱，富有亲和力，设计简洁而精致，视觉效果突出，但风格小众，使用范围比较局限，常用于女性或二次元（二维，二次元源于日语）APP中。卡通风格作品展示本案例通过绘制如下图所示的卡通风格定位图标，学习卡通风格图标的一般绘制流程。实训2卡通风格图标设计卡通风格定位图标本图标属于卡通MBE风格MBE风格特点1.粗线描边，且边角圆滑，描边断点2.色彩溢出，色彩鲜明，无渐变3.卡通形象，结构简单实训2卡通风格图标设计MBE风格特点1.粗线描边，且边角圆滑，描边断点2.色彩溢出，色彩鲜明，无渐变3.卡通形象，结构简单实训