UI设计教案.docx

教案编号：1课题：第1章初识U1设计课时：4课时授课类型：讲授项目目标： 掌握U1设计的基本概念 掌握U1设计的常用软件 了解U1设计的行业发展 了解学习U1的正确姿势 掌握U1设计的制作流程项目重点： UI设计的基本概念 U1设计的常用软件 UI设计的制作流程项目难点： UI设计的制作流程项目技能点：单位、尺寸、适配、结构、间距、文字图标及图片的基础规范与规则项目教学技巧，1 .知识讲解2 .案例展示项目过程：（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第1章初识U1设计项目目标： 掌握U1设计的基本概念 掌握U1设计的常用软件 了解UI设计的行业发展 了解学习U1的正确姿势 掌握U1设计的制作流程3 .课程引入通过日常生活中的U1设计案例引入U1设计的概念16：04令QPYthonKHE分析俗的高斯髭Ii-ViKffUitriVExceIOOftf1H，业展力催粮VP会员。Q4199办公效率AXVtttt<ttt产近，课堂直播设计新H铸-用C4Dtf618大IKbMner手Ie手找你做电一个JaYdd'图戏I超级玛图大战僵尸】(二)课程内容1.1U1设计的基本概念UI即用户界面(USerInterface)的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计，如图所示。用户界面(UserInterface)12UI设计的常用软件建议先掌握Photoshop和I11ustrator,有条件的话还要掌握Sketch和Figma,如图所示。UI设计常用软件1.3UI设计的发展趋势从早期的专注于工具的技法型表现，到现在要求U1设计师参与到整个商业链条，兼顾商业目标和用户体验，可以看出国内的U1设计行业发展是跨跃式的。Ui设计从设计风格、技术实现到应用领域都发生了巨大的变化，如图所示。1 UI设计发展趋势2 .技术实现虚拟现实、增强现实及人工智能等技术的发展,使得U1设计更加高效，交互亦更为丰富。3 .设计风格U1设计的风格经历了由拟物化到扁平化设计的转变,现在扁平化风格依然为主流，但加入了Materia1Design设计语言（材料设计语言），使设计更为醒目且细腻。4 .应用领域U1设计的应用领域已由原先的PC端和移动端扩展到可穿戴设备、无人驾驶汽车、A1机器人等，更为广阔。今后无论技术如何进步，设计风格如何转变，甚至于应用领域如何不同，U1设计都将参与到产品设计的整个链条中，实现人性化、包容化、多元化的目标。14UI设计的学习方法对于Ui设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师，这样才能有针对性地学习提升。结合市场需求，我们推荐下列学习方法。1 .整体学习进行相关课程学习及文章学习，针对初学者建议进行课程学习,这样可以系统的学习UI的相关知识和设计应用方法。iOS设计规范Android设计规范2 .作品收集建议设计师每天拿出12小时到U1中国、站酷(ZCOO1追波(Diibbb1e)等网站，如图站酷所示，浏览最新的作品，并加入收藏，形成自己的资料库，。!中国追波U1中国3 .项目临摹首先推崇的是从应用中心下载优秀的App,如图所示，截图保存进行临摹。临摹一定要保证完全一样并且要多临摹。16：03fAHBOO资iR箱选三斗分小O0-7i*ffRWWExce1iSHnts9办公依MiStIWtftifttr&»1依计0丹南C4OM618大GE1r手把学h你«!一个gm小If1tt4 .项目实战经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Dem0。5 .5U1设计的项目流程针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个产品从启动到上线，会经历6 多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节，如图所示。7 .6U1设计规范与规则U1设计的基础规范与规则可以令设计师在进行设计时更加事半功倍。下面主要介绍单位、尺寸、适配、结构、间距、文字图标以及图片的基础规范与规则。1 .单位介绍(I)DP1和PPIPPI：像素密度.是屏幕分辨率，表示的是每英寸所拥有的像素数量,通常代表苹果手机。DP1：网点密度，是打印分辨率，表示每英寸打印的点数,通常代表安卓手机。DPI=PPIDP1等同于PP1(2)px、pt、dp、sppx:物理像素，是相对单位，运用PhotoShoP软件进行UI设计时使用的单位，运用此单位需要兼容不同分辨率的界面。Pt：逻辑像素，是绝对单位，不会因为屏幕像素密度变化而变化。iOS开发及运用Sketch软件进行U1设计使用的单位。dp：独立密度像素，是安卓设备上的基本单位，用于非文字单位，等同于苹果设备上的PtoSP：独立缩放像素,是Android设备上的字体单位。用户可以根据自己需求调整字体尺寸，当文字尺寸是“正常”状态时，Isp=IdpeWMdpi24>PX侯）加不同单位的换算年3XXMpi53%2rt咐2”pt咐2*侯）即图标在不同屏幕分辨率的尺寸2 .设计尺寸iOS常见的设备尺寸如图所示。在进行界面设计时，为了适配大部分尺寸，推荐以iPhoneX/Xs/11pro为基准。如果使用PhotoShOP就创建750px×1624px尺寸的画布，如果使用Sketch就建立375pt×812pt尺寸的画布。寸EAaMf>S“"Wa14Mm0hMM,GM«MHWMmM.M1HpMMn46Bm.gV0aMXB,.<01一M1<fMM<3m.0?P.3rHniwIU4"tC40Wvm*»<nRwm4.MtiJWmJ0O4MMMD*wXHMB¼fM4OTv<B4>tJBBmrrv<1BHMbOMmtMtmM4<MmeTA3013*a3Mb3MeuiOS常见设备尺寸Android常见的设备尺寸，如图所示。在进行界面设计时，如果想要一稿适配Android和iOS,就使用Photoshop新建720px×1280px尺寸的画布。如果根据Materia1Design新规范单独设计Android设计稿，就使用Photoshop新建1080px×1920px尺寸的画布。无论哪种需求，使用Sketch只建立360dp×640dp尺寸的画布即可。¼N9p>0p*tt方内索2WO31M0<u4MpIeaKMMhc>IOeOBmo*?30Riseo320<>4Mpahi4uIO：MO<M>VAndroid常见设备尺寸3 .适配方案一套App界面设计数量通常在80150页。由于Photoshop是使用px单位进行UI设计，因此在适配时需要设计出其他机型的页面。而SketCh、XD、Figma等软件是使用Pt单位进行U1设计，因此在适配时无须额外设计,如图所示。1x*WkjXAS37StitXei>PhoX×S<*xwX/XSXTSt2Pt3TSa制2ptMacOSXMcO6XMecO6XWindows0WiMOWS10由于适配，在设计U1界面时通常使用上图软件4 .设计结构在iOS中，界面通常由状态栏、导航栏、安全涉及区以及标签栏组成,自全面屏上市，界面较之前还多了虚拟主页键，如图所示。iOS界面结构Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成，如图所示。5 iOS和Android界面结构对比6 .间距规范在APP间距中，8倍数和IO倍数常被使用，如图所示。例如在iOS中以2X为基准,常见的边距有20px、24pxx30pxx32px、40px及50px0而4倍数则可以用于较亲密的元素之间。7 APP常用间距8 .文字规范(1)系统字体 iOS系统旧金山字体：旧金山字体是非衬线字体，如图1-所示，其中SF字体有SFUIText(文本模式)和SFUIDisp1ay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisp1ay适用于大于20pt的文字。Thequickbrownfoxjumpedoverthe1azydog.旧金山字体纽约字体：纽约字体是衬线字体，如图所示，旨在补充旧金山字体。对于小于2Opt的文本使用小号，对于20p1到35p1之间的文本使用中号，对于36pi到53pt之间的文本使用大号，对于54pi点或更大的文本使用特大号。Thequickbrownfoxjumpedoverthe1azydog.纽约字体苹方：iOS中文使用的是苹方，共有6个字重，如图所示。极细纤细细体正常中黑中粗UI1iThin1ightRegMedSmBd苹方字体 Android系统Roboto：Android英文使用的字体,共有6个字重，如图所示。思源黑体：Android中文使用的字体，又称为"SourceHanSansw或"Noto”，共有7个字重,如图所示。RobotoTiRoboto1ightRobotoRegu1arRobotoMediumRobotoBo1dRobotoB1ackRobotoThinIta1icRoboto1ightIta1icRobotoIta1icRobotoMediumIta1i'RobotoBo1dIta1icRobotoB1ackIta1ic话话话话话话话吴吴吴吴吴吴吴&衬牡牡牡首批批Roboto字体和思源黑体(2)字体尺寸苹果和Materia1DeSign提供的字号参考并不完全适用于中文，因为相同字号下，中文比西文大。如iOS官方规范正文为17pi,如图所示。但使用中文时14p1和12p1更加合适。为了区分标题和正文,字体大小差异至少保持在2pt及以上。行高西文通常为1.31.5倍，中文采用1.52倍。安时于守的大小S口C1,0WM»标题一一xwn-U标题二一va标题三19M*标就四wv一twa<JB除石MMb一.一tMF六AWaiOM0-MJt9BMUBtmrWMBIMUnrzWtWi