PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第2章.docx

教案编号：2课题：第2章图标设计课时：6课时授课类型：讲授+实训教学目标： 了解图标设计的基础知识 掌握图标设计的规范 认识图标设计的风格教学重点：图标设计的规范、图标设计的风格教学难点：图标设计的风格本章技能点：扁平化风格-单色面性图标的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程:（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第2章图标设计项目目标： 了解图标设计的基础知识 掌握图标设计的规范 认识图标设计的风格3 .课程引入通过“绘制扁平化风格-单色面性图标”案例效果展示引入图标设计的概念（二）课程内容2.1 图标的基础知识本节介绍Ui图标设计相关的基础知识,包括图标的概念、图标设计的流程以及图标设计的原则。2.1.1 图标的概念图标又称为icon,是具有明确指代含义的计算机图形。从广义上讲，图标是高度浓缩，并能快捷传达信息，便于记忆的图形符号。图标的应用范围很广，包括软件界面、硬件设备及公共场合等，如图所示。公共场所图标指示（左）和WindoWlO桌面图标（右）从狭义上讲，图标则多应用于计算机软件方面。其中，桌面图标是软件标识，界面中的图标是功能标识，如图所示。一|Sa9iuMMWe are Bakary shopAshotakaryStory界面中的图标2.1.2 图标设计的流程图标设计可以按照分析调研、寻找隐喻、设计图形、建立风格、细节润色、场景测试的流程来进行,如图所示。分析调研设计图形建立风格细节润色场景涌试图标设计流程图1.分析调研图标设计是根据品牌的调性、产品的功能而进行的，不同场景的图标设计方法也会有区别。因此，设计图标之前要先分析需求，确定图标的功能，并进行相关竞品的调研，如图所示，清楚设计方向。音乐类竞品2 .寻找隐喻隐喻通常表示从一种事物能联想到另一种事物，如谈到歌曲，会联想到音乐符，如图所示。寻找隐喻是图标设计的常用思路，在明确设计方向后，应根据功能，通过头脑风暴找到相关的物品，进行相关的元素的收集。QQ音乐图标的联想过程3 .设计图形图形的设计非常考验图标设计切一系列草图，提炼设计出成型的图开口的基本功。通过隐喻收集相关的元素之后，需要设计师绘制"如图所示，并根据图标的规范在计算机上进行微调。'公设计师4.建立风格目前的图标设计风格还是以拟由趋势。因此我们要结合前期的分析计EddieLobanovskiy的图标设计草图力化和扁平化两种为主，如图所示，其中扁平化为当今的流行5研，建立符合需求的风格。QQVinylMusicand两普5 .细节润色细节往往是区别于竞品、建立了面入手，最终完成体现产品特点的国印度尼西亚标，6 .场景测试为了让图标适用于不同场景及7的规范会在2.2图标的设计规范进行进行测试，确保图标的可用性和识另VideoFiIesManager（左）MusicTube（右）欧音乐应用图标不同的设计风格工品气质的关键。细节润色一般会从颜色、质感甚至造型等方弓标设计，如图所示。技设计师YogaPerdana为图标进行质感调整F同分辨率的手机，还需要根据规范调整图标的分辨率，具体深入剖析。最后在上线前，还要将设计稿在不同的应用场景中!J度，如图麻。不同应用场景下的图标2.1.3图标设计的原则图标设计要遵循表意准确、视觉统一、简洁美观、愉悦友好四大原则。1 .设计准确图标的设计准确具体表现在表意准确和造型准确两个方面。表意准确是指在使用时，图标能够快速传达准确的信息，被用户理解而不会造成困惑，如图标H圃HRC3CesBQ通国Iq叵曲。想胆）蒯表意准确的音乐类图标为了保证图标的造型准确，在绘图软件中，图标的,'和y坐标应设为整数，而不是小数，并且图标的宽度和高度尺寸应设为偶数。2 .视觉统一图标设计需要在基本造型、风格表现、节奏平衡上保持统一。在基本造型上,需附艮据规范对图标各部分设计进行统一，如图所示。具体的规范会在2.2图标的设计规范进行深入剖析。OO形体造型统一的图标（左）和形体造型未统一的图标（右）在风格表现上，得益于移动互联网的发展，图标的风格非常多样化。设计师可以根据应用场景和产品情况选择合适的风格。需要注意，在进行多色图标的设计时,用色尽量不要超过3种颜色，否则会导致用户视觉混乱，如图所示。具体的风格会在2.3图标的风格类型进行深入剖析。App界面中风格统一的图标BedRoom58o三1.ittlWarm、在节奏平衡上，由于图标造型的丰富，可以根据规范给出的模版达到节奏协调、视觉统一的效果，如图所示。具体的规范会在2.2图标的设计规范进行深入剖析。在规范辅助下设计出视觉平衡的图标3 .简洁美观图标的设计应尽量保持图形的简洁,去掉多余的装饰。将简洁的图形精细化设计，形成节奏，如图所示。<2>O00口Q而3)必色(O)邦C)W夕PX©简洁美观的图标口弋4 .愉悦友好赋予图标适度的情感，令用户不仅能快速实现目标，更能体验交互的喜悦。其中，为图标添加交互动效就是一种能快速赋予图标情感的表现手法。如图所示，金融APP界面中图标被赋予了细腻的动效。MVMCNTOVKW1IVfBtn>tmiaaw*tan*r*>¾MMMb$9.872.03-$231.98一，0O波兰设计师KamiIBachanek创作5 .2图标的设计规范图标的设计规范主要是根据App中的iOS和Android两个平台的设计规范而来的。下面从图标尺寸及单位、图标的视觉统一、图标的清晰度3个方面详细讲解图标的设计规范。2.2.1 图标的尺寸及单位1. iOS系统中的图标尺寸及单位在iOS系统中,图标主要分为应用图标和系统图标两种,单位是PX和ptpx即"像素"，是按照像素格计算的单位，也就是移动设备的实际像素。PI即"点"，是根据内容尺寸计算的单位。使用Photoshop软件设计界面的UI设计师使用的单位都是px,使用Sketch软件设计界面的UI设计师使用的单位都是3。iOS系统的单位,本书亦在321iOS系统设计规范中进行了深入剖析，帮助设计师理解。(1)应用图标应用图标是应用程序的图标，如图所示。应用图标主要应用于主屏幕、AppStorexSPOHight以及设置中。&西0*LOiOS系统中各类应用图标应用图标的设计尺寸可以采用1024px,并根据iOS官方模板进行规范，如图所示。正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。应用图标会以不同的分辨率出现在主屏幕、AppStore.Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配，如下所示。iOS中不同设备应用图标的尺寸名IFAppStor*SpotSgh*iPhoneX,8.7*.6s,65180x180px1024X1024px120x120px87x87p×iPhoneX,8,7,6$,6.SE,5«,5c,5.4s,4120x120p×1024x1024px8080px58x58p×iPhone1,3G3GS57x57x1024x1024px29×29P×29x29PXiPadPro12.9.10.5167x167PX1024x1024px80×80px58x58pxiPadAir1&2.Mini2&4,3&41S2x1S2PX1024x1024px80×80p×S8x58p×iPad1.2.MttV176x76PXPX1024x1024px40x40px29×29px(2)系统图标系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，Ul设计师可以设计自定义图标，如图所示。澳大利亚Prospa产品设计负责人AndrewMcKay创作针对iPhoneSE66s78XR导航栏和工具栏上的图标尺寸T殳是44px,标签栏上的图标尺寸一般是50px0系统图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配，如下所示。iOS中不同设备系统图标的尺寸坦名称号ft栏和工Jl栏W尺寸iPhone8*,7*,66$*66×66P×75X75px最大144X96pxiPhone&7,6*6.SE44×44p×50x50px最大96x64PXiPadPro,iPad,iPadmini44×44p×50x50px最大96x64px2. Android系统中的图标尺寸及单位在AndrOid系统中，图标主要分为应用图标和系统图标两种,单位是dp。dp是安卓设备上的基本单位,等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将PX转化成dp,公式为dp=x×160/ppi(ppi为屏幕像素密度本书亦在3.2.2Android系统设计规范对其进行了深入剖析，帮助设计币理解。(1)应用图标应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上，如图2-21所示。M®El0Android系统中各类应用图标创建应用图标时，应以320dpi(dpi表示的是安卓设备每英寸所拥有的像素数量)分辨率中的48dp尺寸为基准。应用图标的尺寸应根据不同设备的分辨率进行适配，如图下所示。当应用图标应用于GooglePlay中时，其尺寸是512px×512pxAndroid系统中不同设备应用图标的尺寸BE标单位mdpi(160dpl)bdpl(240dl)xhdpl(320dpl)xxhdpl(480dpl)xx×hdpl(640dpl)dp24X24dp36x36dp48x48dp72x72dp96x96dpPX48x48px72x72p×96x96px144x144px192×192px(2)系统图标系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaIeriaIDeSign提供了一套完整的系统图标，如图所示，同时设计师也可以根据产品的调性进行自定义设计。、<J.÷WawJ>dU.srw>*v<J-I>«个®<>wJf*wXBWTIB0W.t*MTtfCMcat×人7<：#>1cta*p<JMnd.rofcvjawMKwatMt<pa*aCd0VAAVwMMJnMateriaIDesign官网提供的完整系统图标创建系统图标时，以320点/英寸分辨率中的24dp尺寸为基准。系统图标的尺寸应根据不同设备的分辨率进行适配，如下所示。Android系统中不同设备系统图标的尺寸图标单位mdpi(160dpl)hdpi(240dpi)xhdpi(320dpi)xxhdpi(40dpl)xxxhdpi(640dpi)dp12x12dp18x18dp24x24dp36x36dp48x48dpP×24x24p×36x36px48x48px72x72p×196x196px2.2.2 图标的视觉统一MaterialDesign语言提供了4种不同的图标形状供UI设计师参考，以保持视觉平衡，如图所MaterialDesign官网提供的四类图标内部结构线边角半径默认为2dp内角应该是方形而不要使用圆形，圆角建议使用2dp,如图所示。边角半径为2dp的图标解析图描边：系统图标应使用2dp的描边以保持图标的一致性，如图所示。描边为2dp的图标解析图描边末端：描边末端应该是直线并带有角度，留白区域的描边粗细也应该是2dp.描边如果是倾斜45度,那么末端应该也是倾斜45度为结束，如图所示。描边末端为2dp的图标解析图视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调整以提高其清晰度，如图所示。复杂图标的视觉校正解析图2.2.3 图标的清晰度设计时为保证图标清晰，需将软件中X和卜坐标设为整数，而不是小数，将图标“放在像素上”，如图2-3（）所示。 p× p×24PX24px正确示例（左）和错误示例（右）2.2.4 3图标的风格类型从风格表现上，图标可以分为像素风格、扁平化风格、拟物化风格、微拟物风格以及立体风格。2.3.1 像素风格像素风格图标的本质是由多个像素点组成的插图，其本身是位图。在早期的计算机界面、久远的游戏画面中经常使用像素风格图标，因此像素风格图标常会带给用户怀旧复古的体验，如图标游戏中的像素图标2.3.2 扁平化风格扁平化风格自2013年iOS7的推出而成为了设计的主流趋势，扁平化风格的图标也成为了界面图标的主导风格。扁平化风格的图标简洁美观、功能突出，可以细分为线性图标、面性图标和线面结合图标。1 .线性图标线性图标即通过统一的线条进行绘制，表达图标的功能。线性图标经常用于APP界面底部的标签栏、导航栏的功能按钮以及界面中的分类，如图所示。线性图标应用于移动界面底部标签栏（左）和线性图标应用于导航栏（右），由Shakuro团队创作线性图标形象简洁、设计轻盈，又可以细分为圆角图标、直角图标、断点图标、高光式图标、不透明度图标、双色图标以及一笔画图标。圆角图标：圆角图标柔和、亲切，一般用于母婴、儿童以及女性等方面内容，如图所示。四口解同司合吉9圆角图标，图片来源于花瓣网直角图标：直角图标明快、果断，一般用于金融以及工具等方面内容，如图所示。三nt白甘S。直角图标，图片来源于花瓣网 断点图标：断点图标有趣、丰富，一般用于表现年轻、可爱等方面的内容，如图所示。合回囹回Q回断点图标，图片来源于追波网，由中国设计师WiIbUrXU创作 高光式图标：高光式图标较传统，一般用于银行等方面的内容，如图所示。高光式图标，由爱沙尼亚设计师MartV创作 不透明度图标：不透明度图标有层次，适用范围较广，如图所示。S©©印OE不透明度图标，由印度设计师SarathJayaPrakaSh创作 双色图标：双色图标由两种不同色彩的线搭配构成，适用于表现可爱、活泼等方面的内容，如图所示。双色图标，由美国设计师JakobScott创作 一笔画图标：一笔画图标较文艺，同时难度系数比较高，一般用于文化、艺术等方面的内容，如图所示。zJQP一笔画图标，图片来源Pinterest2 .面性图标面性图标即填充图标，经常用于APP界面底部的标签栏、图标的选中状态、以及界面中的金刚区（专指App页面Banner下方的的功能入口导航区域）和界面中的重要分类，如图所示。面性图标整体饱满、形象突出，又可以细分为单色面性图标、不透明色块面性图标、微渐变面性图标、光影效果图标、折纸投影图标以及多色面性图标。 单色面性图标：单色面性图标是最基本的面性图标，一般用于App界底部的标签栏以及图标的选中状态，如图所示。单色面性图标 不透明色块面性图标：不透明色块面性图标有层次，一般用于App界面中的金刚区，如图所不透明色块面性图标，由多伦多设计师DmitriLitVinoV创作 微渐变面性图标：微渐变面性图标有层次感，但不够分明，一般用于App界面中的金刚区，如图所示。OOOOOOOOOOOO微渐变面性图标，图片来源于花霸网 光影效果图标：光影效果图标带有微拟物效果，一般用于App界面中的金刚区，如图所示。光影效果图标，图片来源与追波网，由中国Rian设计师创作 折纸投影图标：折纸投影图标带有微拟物效果，一般用于APP界面中的金刚区或直接用于工具类图标，如图所示。IoooolOOOOI折纸投影图标，图片来源于追波网，由中国设计师AnnaZhang创作 多色面性图标：多色面性图标酷炫、多彩，一般用于生活等方面内容，如图所示。d««0/多色面性图标，图片来源于追波网，由设计师超创作3 .线面结合图标线面结合图标是线性图标和面性图标的结合。线面结合图标经常用于趣味性App界面中底部的标签栏、界面中的分类或是引导页与弹框中，如图所示。线面结合图标，图片来源于CreatiVeMarket线面结合图标充满活力、形象有趣，又可以细分为点缀填充、错位填充、全部填充3种。点缀填充：点缀填充图标，填充的面积约占图标的30%,一般用于App界面中的底部标签栏，如图所示。00SBCflo()点缀填充图标，由多伦多设计师DmitriLitVinOV创作错位填充：错位填充图标，面与线进行错位，一般用于App界面中的底部标签栏，如图所示。包AddDCart而TrunkCertified1.ikeBillffiGiftepHelp错位填充图标，图片来源于追波网，由中国设计师ViC创作全部填充：全部填充图标，充实、饱满，一般用于App界面中的分类或是引导页与弹框中，如图所示。夕R匾付（A回全部填充图标，由立陶宛产品设计师MantasSuktus创作2.3 .3拟物风格拟物风格在iOS6时代达到了流行的巅峰，拟物化风格的图标对于现实的还原度较高，其质感强烈、识别性高，但在功能表现上却不如扁平化图标更直接。拟物风格图标常用于工具类、游戏类应用，如图所示。拟物风格图标，图片来源于PintereSt2.3.4 微拟物风格微拟物风格图标减轻了拟物风格的厚重质感，带有基本的投影和阴影效果，介于拟物和扁平化风格之间。微拟物图标常用于工具类应用，如图所示。微拟物风格图标，由泰国产品设计师buatoom创作2.3.5 立体风格立体风格图标有别于传统的平面图标，其具备强烈的体积感和空间感。活动专题页、引导页、空状态经常使用立体风格的图标，如图所示。立体风格图标，由美国设计师MaSamiKUbo创作，来源追波（左），由NimaShaPerera创作（右）立体风格的图标视觉突出、层次分明，可以细分为3D图标和2.5D图标。3D图标：3D图标真实、细致，一般用于游戏以及工具等方面内容，如图所示。3D图标2.5D图标：2.5D图标现代、耐看，一般用于表现现代、有趣及文艺等方面内容，如图所示。2.4 课堂案例绘制扁平化风格-单色面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用圆角矩形工具绘制床体，使用圆角矩形工具、矩形工具和减去顶层形状命令绘制其他部分，效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/ChO2效果/绘制扁平化风格-单色面性图标.psd0效果环境展示效果(1)按Ctrl+N组合键，弹出"新建文档”对话框，将宽度设为512像素，高度设为512像素，分辨率设为72像素/英寸，背景内容设为白色，如图所示。单击“创建"按钮，完成文档新建。(2)选择“圆角矩形"工具Q,在属性栏的"选择工具模式”选项中选择"形状"，将"填充"颜色设为灰色(158、158、158),“半径”选项设置为15像素。在图像窗口中适当的位置绘制圆角矩形，如图所示，在“图层"控制面板中生成新的形状图层"圆角矩形J(3)选择"窗口属性”命令，弹出"属性"面板，在面板中进行设置，如图所示，效果如图所示。(4)选择“圆角矩形"工具Q,在属性栏中，将"半径"选项设置为40像素，在图像窗口中适当的位置绘制圆角矩形，在"图层"控制面板中生成新的形状图层"圆角矩形2"。在"属性"面板中进行其他设置，如图所示，效果如图所示。(5)选择"矩形"工具口，按住Alt键的同时，在图像窗口中适当的位置绘制矩形，如图2-64在"属性"面板中进行设置，如图所示，效果如图所示。(6)选择“圆角矩形"工具Q,在属性栏中，将“半径”选项设置为24像素。按住Alt键的同时，在图像窗口中适当的位置绘制圆角矩形，效果如图267所示。在“属性"面板中进行其他设置，如图所示，效果如图所示。(7)选择“路径选择”工具4.,按住Alt÷Shift组合键的同时，选中圆角矩形，在图像窗口中将其向右拖曳，进行复制，如图所示。在"属性"面板中进行设置，如图所示，效果如图所示。(8)选择“圆角矩形"工具Q,在属性栏中将"半径”选项设置为25像素，在图像窗口中适当的位置绘制圆角矩形，如图所示，在“图层"控制面板中生成新的形状图层"圆角矩形3"。在"属性"面板中进行其他设置，如图所示，效果如图所示。(9)选择"矩形"工具口，按住Alt键的同时，在图像窗口中适当的位置绘制矩形，效果如图所示。在"属性"面板中进行设置，如图所示，效果如图所示。(10)将"圆角矩形3”图层拖曳到“图层"控制面板下方的"创建新图层"按钮。上进行复制，生成新的图层"圆角矩形3拷贝"，如图所示。Q姐三EJOT口（Sl正常不透明18：oo¼Jessj/÷afta:oo%-阅属矩形1f×0Q限属矩形2国属矩形3拷贝了国属矩形3选择"移动”工具÷,拖曳复制的图形到适当的位置，效果如图所示。(11)选择"圆角矩形”工具O.,在"属性栏"中将"半径”选项设置为6像素，在图像窗口中适当的位置绘制圆角矩形，效果如图所示，在“图层"控制面板中生成新的形状图层"圆角在"属性"面板中进行其他设置，如图所示，效果如图所示。(12)按Ctrl÷T组合键，在图形周围出现变换框，将指针放在变换框的控制手柄右下角,指针变为旋转图标按住Shift键的同时，拖曳鼠标将图形旋转到15度，按Enter键确认操作，效果如图所示。(13)将"圆角矩形4"图层拖曳到“图层"控制面板下方的“创建新图层"按钮P上进行复制，生成新的图层"圆角矩形4拷贝"，如图所示。选择"移动”工具÷,拖曳复制的图形到适当的位置。选择"编辑>变换>水平翻转"命令，效果如图所示。(14)在“图层”控制面板中,单击“圆角矩形,图层，将其拖曳到"圆角矩形4"图层的下方，调整图层顺序，如图所示。单击“圆角矩形4拷贝.图层，按住Shifl键的同时，单击"圆角矩形2”图层，将需要的图层同时选取，按Ctrl+E组合键合并图层，如图所示。ESSS=PSSl U 向 0 T 口 国 正京_*硝明良：3%;艇 二 4 Ci 制就：100% V>r 9 0 Q ffi(15)单击,'背景.'图层左侧的眼睛图标。，将图层隐藏，效果如图所示，扁平化风格-单色面性图标制作完成。2.5 课堂练习2.5.4 课堂练习一绘制扁平化风格-不透明色块面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用椭圆形工具绘制灯泡主体，使用圆角矩形工具和多边形工具绘制其他部分，效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch02效果/绘制扁平化风格-不透明色块面性图标.psd.效果fl 网 H环境展示效果2.5 .2课堂练习一绘制扁平化风粕微渐变面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用多边形工具、圆角矩形工具、矩形工具、椭圆形工具和合并形状命令、减去顶层形状命令绘制其他部分。使用添加图层蒙版命令和画笔工具擦除不需要的部分。效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/ChO2效果/绘制扁平化风格-微渐变面性图标.psd.让我们可以自由自在到处玩！(0 M* E)环境展示效果OOO02.6 课后习题2.6.1 课后习题一绘制扁平化风格-光影效果图标图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用圆角矩形工具、矩形工具、椭圆形工具和合并形状命令、减去顶层形状命令绘制其他部分。使用剪切蒙版命令置入渐变效果，如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/ChO2效果/绘制扁平化风格-光影效果图标图标.psd.初色产金昆，效果环境展示效果2.6,2课后习题一绘制扁平化风格-折纸投影图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用圆角矩形工具、矩形工具、椭圆形工具和减去顶层形状命令绘制其他部分,使用剪切蒙版命令置入渐变效果。效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch()2效果/绘制扁平化风格-折纸投影图标psd.效果环境展示效果