UI界面设计与制作电子教案

教案编号:1课题:第1章初识UI设计课时:4课时授课类型:讲授项目目标:●掌握UI设计的基本概念●掌握UI设计的常用软件●了解UI设计的行业发展●了解学习UI的正确姿势●掌握UI设计的制作流程项目重点:●UI设计的基本概念●UI设计的常用软件●UI设计的制作流程项目难点:●UI设计的制作流程项目技能点：单位、尺寸、适配、结构、间距、文字图标及图片的基础规范与规则项目教学技巧：1.知识讲解2.案例展示项目过程：（一）课前准备1.授课前准备准备好教学用具和教学设备2.板书课题：第1章初识UI设计项目目标:●掌握UI设计的基本概念●掌握UI设计的常用软件●了解UI设计的行业发展●了解学习UI的正确姿势●掌握UI设计的制作流程3.课程引入通过日常生活中的UI设计案例引入UI设计的概念网易云课堂App（二）课程内容UI即用户界面（UserInterface）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计，如图所示。用户界面（UserInterface）建议先掌握Photoshop和Illustrator，有条件的话还要掌握Sketch和Figma，如图所示。UI设计常用软件从早期的专注于工具的技法型表现，到现在要求UI设计师参与到整个商业链条，兼顾商业目标和用户体验，可以看出国内的UI设计行业发展是跨跃式的。UI设计从设计风格、技术实现到应用领域都发生了巨大的变化，如图所示。UI设计发展趋势1.技术实现虚拟现实、增强现实及人工智能等技术的发展，使得UI设计更加高效，交互亦更为丰富。2.设计风格UI设计的风格经历了由拟物化到扁平化设计的转变，现在扁平化风格依然为主流，但加入了MaterialDesign设计语言（材料设计语言），使设计更为醒目且细腻。3.应用领域UI设计的应用领域已由原先的PC端和移动端扩展到可穿戴设备、无人驾驶汽车、AI机器人等，更为广阔。今后无论技术如何进步，设计风格如何转变，甚至于应用领域如何不同，UI设计都将参与到产品设计的整个链条中，实现人性化、包容化、多元化的目标。对于UI设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师，这样才能有针对性地学习提升。结合市场需求，我们推荐下列学习方法。1.整体学习进行相关课程学习及文章学习，针对初学者建议进行课程学习，这样可以系统的学习UI的相关知识和设计应用方法。iOS设计规范Android设计规范2.作品收集建议设计师每天拿出1~2小时到UI中国、站酷（ZCOOL）、追波（Dribbble）等网站，如图所示，浏览最新的作品，并加入收藏，形成自己的资料库，UI中国站酷追波3.项目临摹首先推崇的是从应用中心下载优秀的App，如图所示，截图保存进行临摹。临摹一定要保证完全一样并且要多临摹。贝壳找房App网易云课堂App京东App4.项目实战经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Demo。针对整个产品的设计流程而言，UI设计仅是其中的一部分。一个产品从启动到上线，会经历多个环节、由多个角色共同协作完成。每个角色基本都会有对应的1个或多个环节，如图所示。上图为大流程，下图为展开流程，下图中的橙色为多个角色共同协作完成UI设计的基础规范与规则可以令设计师在进行设计时更加事半功倍。下面主要介绍单位、尺寸、适配、结构、间距、文字图标以及图片的基础规范与规则。1.单位介绍（1）DPI和PPIPPI：像素密度,是屏幕分辨率，表示的是每英寸所拥有的像素数量，通常代表苹果手机。DPI：网点密度，是打印分辨率，表示每英寸打印的点数，通常代表安卓手机。DPI等同于PPI（2）px、pt、dp、sppx：物理像素，是相对单位，运用Photoshop软件进行UI设计时使用的单位，运用此单位需要兼容不同分辨率的界面。pt：逻辑像素，是绝对单位，不会因为屏幕像素密度变化而变化。iOS开发及运用Sketch软件进行UI设计使用的单位。dp：独立密度像素，是安卓设备上的基本单位，用于非文字单位，等同于苹果设备上的pt。sp：独立缩放像素，是Android设备上的字体单位。用户可以根据自己需求调整字体尺寸，当文字尺寸是“正常”状态时，1sp=1dp。不同单位的换算图标在不同屏幕分辨率的尺寸2.设计尺寸iOS常见的设备尺寸如图所示。在进行界面设计时，为了适配大部分尺寸，推荐以iPhoneX/Xs/11pro为基准。如果使用Photoshop就创建750px×1624px尺寸的画布，如果使用Sketch就建立375pt×812pt尺寸的画布。iOS常见设备尺寸Android常见的设备尺寸，如图所示。在进行界面设计时，如果想要一稿适配Android和iOS，就使用Photoshop新建720px×1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android设计稿，就使用Photoshop新建1080px×1920px尺寸的画布。无论哪种需求，使用Sketch只建立360dp×640dp尺寸的画布即可。Android常见设备尺寸3.适配方案一套App界面设计数量通常在80～150页。由于Photoshop是使用px单位进行UI设计，因此在适配时需要设计出其他机型的页面。而Sketch、XD、Figma等软件是使用pt单位进行UI设计，因此在适配时无须额外设计，如图所示。由于适配，在设计UI界面时通常使用上图软件4.设计结构在iOS中，界面通常由状态栏、导航栏、安全涉及区以及标签栏组成，自全面屏上市，界面较之前还多了虚拟主页键，如图所示。iOS界面结构Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成，如图所示。iOS和Android界面结构对比5.间距规范在App间距中，8倍数和10倍数常被使用，如图所示。例如在iOS中以@2x为基准，常见的边距有20px、24px、30px、32px、40px及50px。而4倍数则可以用于较亲密的元素之间。App常用间距6.文字规范（1）系统字体iOS系统旧金山字体：旧金山字体是非衬线字体，如图1-所示，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。旧金山字体纽约字体：纽约字体是衬线字体，如图所示，旨在补充旧金山字体。对于小于20pt的文本使用小号，对于20pt到35pt之间的文本使用中号，对于36pt到53pt之间的文本使用大号，对于54pt点或更大的文本使用特大号。纽约字体苹方：iOS中文使用的是苹方，共有6个字重，如图所示。苹方字体Android系统Roboto：Android英文使用的字体，共有6个字重，如图所示。思源黑体：Android中文使用的字体，又称为“SourceHanSans”或“Noto”，共有7个字重，如图所示。Roboto字体和思源黑体（2）字体尺寸苹果和MaterialDesign提供的字号参考并不完全适用于中文，因为相同字号下，中文比西文大。如iOS官方规范正文为17pt，如图所示。但使用中文时14pt和12pt更加合适。为了区分标题和正文，字体大小差异至少保持在2pt及以上。行高西文通常为1.3～1.5倍，中文采用1.5～2倍。iOS和MaterialDesign官方规范的字号7.图标尺寸（1）应用图标概念应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上，如图所示。iOS和MaterialDesign应用图标尺寸应用图标的设计尺寸可以采用1024px，并根据iOS官方模版进行规范，如图所示。正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。iOS官方图标模版由于屏幕分辨率的差异和使用场景的不同，所以iOS官方的图标模板中，有非常多的图标尺寸。我们只需要设计1024，然后将这个图标置入到PS的智能对象，或者Sketch的Symbol中，就可以一次性生成所有尺寸，如图所示。不同尺寸的iOS官方模版（2）功能图标概念功能图标即系统图标，是通过简洁现代的图形表达一些常见功能，如图所示。主要应用于界面中的导航栏、工具栏以及标签栏等模块。功能图标尺寸创建功能图标时，可以参考Materia