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

《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第2章.docx》由会员分享，可在线阅读，更多相关《PhotoshopCCUI设计案例教程（全彩慕课版）教学教案第2章.docx（35页珍藏版）》请在课桌文档上搜索。

1、教案编号：2课题：第2章图标设计课时：6课时授课类型：讲授+实训教学目标： 了解图标设计的基础知识 掌握图标设计的规范 认识图标设计的风格教学重点：图标设计的规范、图标设计的风格教学难点：图标设计的风格本章技能点：扁平化风格-单色面性图标的绘制方法本章教学技巧：1 .知识讲解2 .案例实训教学过程:（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第2章图标设计项目目标： 了解图标设计的基础知识 掌握图标设计的规范 认识图标设计的风格3 .课程引入通过“绘制扁平化风格-单色面性图标”案例效果展示引入图标设计的概念（二）课程内容2.1 图标的基础知识本节介绍Ui图标设计相关的

2、基础知识,包括图标的概念、图标设计的流程以及图标设计的原则。2.1.1 图标的概念图标又称为icon,是具有明确指代含义的计算机图形。从广义上讲，图标是高度浓缩，并能快捷传达信息，便于记忆的图形符号。图标的应用范围很广，包括软件界面、硬件设备及公共场合等，如图所示。公共场所图标指示（左）和WindoWlO桌面图标（右）从狭义上讲，图标则多应用于计算机软件方面。其中，桌面图标是软件标识，界面中的图标是功能标识，如图所示。一|Sa9iuMMWe are Bakary shopAshotakaryStory界面中的图标2.1.2 图标设计的流程图标设计可以按照分析调研、寻找隐喻、设计图形、建立风格、

3、细节润色、场景测试的流程来进行,如图所示。分析调研设计图形建立风格细节润色场景涌试图标设计流程图1.分析调研图标设计是根据品牌的调性、产品的功能而进行的，不同场景的图标设计方法也会有区别。因此，设计图标之前要先分析需求，确定图标的功能，并进行相关竞品的调研，如图所示，清楚设计方向。音乐类竞品2 .寻找隐喻隐喻通常表示从一种事物能联想到另一种事物，如谈到歌曲，会联想到音乐符，如图所示。寻找隐喻是图标设计的常用思路，在明确设计方向后，应根据功能，通过头脑风暴找到相关的物品，进行相关的元素的收集。QQ音乐图标的联想过程3 .设计图形图形的设计非常考验图标设计切一系列草图，提炼设计出成型的图开口的基本

4、功。通过隐喻收集相关的元素之后，需要设计师绘制如图所示，并根据图标的规范在计算机上进行微调。公设计师4.建立风格目前的图标设计风格还是以拟由趋势。因此我们要结合前期的分析计EddieLobanovskiy的图标设计草图力化和扁平化两种为主，如图所示，其中扁平化为当今的流行5研，建立符合需求的风格。QQVinylMusicand两普5 .细节润色细节往往是区别于竞品、建立了面入手，最终完成体现产品特点的国印度尼西亚标，6 .场景测试为了让图标适用于不同场景及7的规范会在2.2图标的设计规范进行进行测试，确保图标的可用性和识另VideoFiIesManager（左）MusicTube（右）欧音乐应

5、用图标不同的设计风格工品气质的关键。细节润色一般会从颜色、质感甚至造型等方弓标设计，如图所示。技设计师YogaPerdana为图标进行质感调整F同分辨率的手机，还需要根据规范调整图标的分辨率，具体深入剖析。最后在上线前，还要将设计稿在不同的应用场景中!J度，如图麻。不同应用场景下的图标2.1.3图标设计的原则图标设计要遵循表意准确、视觉统一、简洁美观、愉悦友好四大原则。1 .设计准确图标的设计准确具体表现在表意准确和造型准确两个方面。表意准确是指在使用时，图标能够快速传达准确的信息，被用户理解而不会造成困惑，如图标H圃HRC3CesBQ通国Iq叵曲。想胆）蒯表意准确的音乐类图标为了保证图标的造

6、型准确，在绘图软件中，图标的,和y坐标应设为整数，而不是小数，并且图标的宽度和高度尺寸应设为偶数。2 .视觉统一图标设计需要在基本造型、风格表现、节奏平衡上保持统一。在基本造型上,需附艮据规范对图标各部分设计进行统一，如图所示。具体的规范会在2.2图标的设计规范进行深入剖析。OO形体造型统一的图标（左）和形体造型未统一的图标（右）在风格表现上，得益于移动互联网的发展，图标的风格非常多样化。设计师可以根据应用场景和产品情况选择合适的风格。需要注意，在进行多色图标的设计时,用色尽量不要超过3种颜色，否则会导致用户视觉混乱，如图所示。具体的风格会在2.3图标的风格类型进行深入剖析。App界面中风格统

7、一的图标BedRoom58o三1.ittlWarm、在节奏平衡上，由于图标造型的丰富，可以根据规范给出的模版达到节奏协调、视觉统一的效果，如图所示。具体的规范会在2.2图标的设计规范进行深入剖析。在规范辅助下设计出视觉平衡的图标3 .简洁美观图标的设计应尽量保持图形的简洁,去掉多余的装饰。将简洁的图形精细化设计，形成节奏，如图所示。O00口Q而3)必色(O)邦C)W夕PX简洁美观的图标口弋4 .愉悦友好赋予图标适度的情感，令用户不仅能快速实现目标，更能体验交互的喜悦。其中，为图标添加交互动效就是一种能快速赋予图标情感的表现手法。如图所示，金融APP界面中图标被赋予了细腻的动效。MVMCNTOV

8、KW1IVfBtntmiaaw*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设计师使用的

9、单位都是px,使用Sketch软件设计界面的UI设计师使用的单位都是3。iOS系统的单位,本书亦在321iOS系统设计规范中进行了深入剖析，帮助设计师理解。(1)应用图标应用图标是应用程序的图标，如图所示。应用图标主要应用于主屏幕、AppStorexSPOHight以及设置中。&西0*LOiOS系统中各类应用图标应用图标的设计尺寸可以采用1024px,并根据iOS官方模板进行规范，如图所示。正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。应用图标会以不同的分辨率出现在主屏幕、AppStore.Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率

10、进行适配，如下所示。iOS中不同设备应用图标的尺寸名IFAppStor*SpotSgh*iPhoneX,8.7*.6s,65180x180px1024X1024px120x120px87x87piPhoneX,8,7,6$,6.SE,5,5c,5.4s,4120x120p1024x1024px8080px58x58piPhone1,3G3GS57x57x1024x1024px2929P29x29PXiPadPro12.9.10.5167x167PX1024x1024px8080px58x58pxiPadAir1&2.Mini2&4,3&41S2x1S2PX1024x1024px8080pS8x

11、58piPad1.2.MttV176x76PXPX1024x1024px40x40px2929px(2)系统图标系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，Ul设计师可以设计自定义图标，如图所示。澳大利亚Prospa产品设计负责人AndrewMcKay创作针对iPhoneSE66s78XR导航栏和工具栏上的图标尺寸T殳是44px,标签栏上的图标尺寸一般是50px0系统图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配，如下所示。iOS中不同设备系统图标的尺寸坦名称号ft栏和工Jl栏W尺寸iPho

12、ne8*,7*,66$*6666P75X75px最大144X96pxiPhone&7,6*6.SE4444p50x50px最大96x64PXiPadPro,iPad,iPadmini4444p50x50px最大96x64px2. Android系统中的图标尺寸及单位在AndrOid系统中，图标主要分为应用图标和系统图标两种,单位是dp。dp是安卓设备上的基本单位,等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将PX转化成dp,公式为dp=x160/ppi(ppi为屏幕像素密度本书亦在3.2.2Android系统设计规范对其进行了深入剖析，帮助设计币

13、理解。(1)应用图标应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上，如图2-21所示。MEl0Android系统中各类应用图标创建应用图标时，应以320dpi(dpi表示的是安卓设备每英寸所拥有的像素数量)分辨率中的48dp尺寸为基准。应用图标的尺寸应根据不同设备的分辨率进行适配，如图下所示。当应用图标应用于GooglePlay中时，其尺寸是512px512pxAndroid系统中不同设备应用图标的尺寸BE标单位mdpi(160dpl)bdpl(240dl)xhdpl(320dpl)xxhdpl(480dpl)xxhdpl(640dpl)dp24X24dp36x36dp48x4

14、8dp72x72dp96x96dpPX48x48px72x72p96x96px144x144px192192px(2)系统图标系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaIeriaIDeSign提供了一套完整的系统图标，如图所示，同时设计师也可以根据产品的调性进行自定义设计。、dU.srw*v个wJf*wXBWTIB0W.t*MTtfCMcat人71cta*pJMnd.rofcvjawMKwatMt变换水平翻转命令，效果如图所示。(14)在“图层”控制面板中,单击“圆角矩形,图层，将其拖曳到圆角矩形4图层的下方，调整图层顺序，如图所示。单击“圆角矩形4拷贝.图层，按住S

15、hifl键的同时，单击圆角矩形2”图层，将需要的图层同时选取，按Ctrl+E组合键合并图层，如图所示。ESSS=PSSl U 向 0 T 口 国 正京_*硝明良：3%;艇 二 4 Ci 制就：100% Vr 9 0 Q ffi(15)单击,背景.图层左侧的眼睛图标。，将图层隐藏，效果如图所示，扁平化风格-单色面性图标制作完成。2.5 课堂练习2.5.4 课堂练习一绘制扁平化风格-不透明色块面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用椭圆形工具绘制灯泡主体，使用圆角矩形工具和多边形工具绘制其他部分，效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效

16、果所在位置】云盘/Ch02效果/绘制扁平化风格-不透明色块面性图标.psd.效果fl 网 H环境展示效果2.5 .2课堂练习一绘制扁平化风粕微渐变面性图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用多边形工具、圆角矩形工具、矩形工具、椭圆形工具和合并形状命令、减去顶层形状命令绘制其他部分。使用添加图层蒙版命令和画笔工具擦除不需要的部分。效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/ChO2效果/绘制扁平化风格-微渐变面性图标.psd.让我们可以自由自在到处玩！(0 M* E)环境展示效果OOO02.6 课后

17、习题2.6.1 课后习题一绘制扁平化风格-光影效果图标图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用圆角矩形工具、矩形工具、椭圆形工具和合并形状命令、减去顶层形状命令绘制其他部分。使用剪切蒙版命令置入渐变效果，如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/ChO2效果/绘制扁平化风格-光影效果图标图标.psd.初色产金昆，效果环境展示效果2.6,2课后习题一绘制扁平化风格-折纸投影图标【案例学习目标】学习使用不同的图形工具绘制图标。【案例知识要点】使用渐变叠加命令绘制背景，使用圆角矩形工具、矩形工具、椭圆形工具和减去顶层形状命令绘制其他部分,使用剪切蒙版命令置入渐变效果。效果如图所示。【案例环境展示】实际应用中案例展示效果如图所示。【效果所在位置】云盘/Ch()2效果/绘制扁平化风格-折纸投影图标psd.效果环境展示效果