UI设计教案.docx

《UI设计教案.docx》由会员分享，可在线阅读，更多相关《UI设计教案.docx（30页珍藏版）》请在第一文库网上搜索。

1、教案编号：1课题：第1章初识U1设计课时：4课时授课类型：讲授项目目标： 掌握U1设计的基本概念 掌握U1设计的常用软件 了解U1设计的行业发展 了解学习U1的正确姿势 掌握U1设计的制作流程项目重点： UI设计的基本概念 U1设计的常用软件 UI设计的制作流程项目难点： UI设计的制作流程项目技能点：单位、尺寸、适配、结构、间距、文字图标及图片的基础规范与规则项目教学技巧，1 .知识讲解2 .案例展示项目过程：（一）课前准备1 .授课前准备准备好教学用具和教学设备2 .板书课题：第1章初识U1设计项目目标： 掌握U1设计的基本概念 掌握U1设计的常用软件 了解UI设计的行业发展 了解学习U1

2、的正确姿势 掌握U1设计的制作流程3 .课程引入通过日常生活中的U1设计案例引入U1设计的概念16：04令QPYthonKHE分析俗的高斯髭Ii-ViKffUitriVExceIOOftf1H，业展力催粮VP会员。Q4199办公效率AXVttttPX侯）加不同单位的换算年3XXMpi53%2rt咐2”pt咐2*侯）即图标在不同屏幕分辨率的尺寸2 .设计尺寸iOS常见的设备尺寸如图所示。在进行界面设计时，为了适配大部分尺寸，推荐以iPhoneX/Xs/11pro为基准。如果使用PhotoShOP就创建750px1624px尺寸的画布，如果使用Sketch就建立375pt812pt尺寸的画布。寸E

3、AaMfS“Wa14Mm0hMM,GMMHWMmM.M1HpMMn46Bm.gV0aMXB,.01一M1fMM3m.0?P.3rHniwIU4tC40Wvm*nRwm4.MtiJWmJ0O4MMMD*wXHMBfM4OTvtJBBmrrv1BHMbOMmtMtmM40p*tt方内索2WO31M0IOeOBmo*?30Riseo3204Mpahi4uIO：MOVAndroid常见设备尺寸3 .适配方案一套App界面设计数量通常在80150页。由于Photoshop是使用px单位进行UI设计，因此在适配时需要设计出其他机型的页面。而SketCh、XD、Figma等软件是使用Pt单位进行U1设计，因

4、此在适配时无须额外设计,如图所示。1x*WkjXAS37StitXeiPhoXS*xwX/XSXTSt2Pt3TSa制2ptMacOSXMcO6XMecO6XWindows0WiMOWS10由于适配，在设计U1界面时通常使用上图软件4 .设计结构在iOS中，界面通常由状态栏、导航栏、安全涉及区以及标签栏组成,自全面屏上市，界面较之前还多了虚拟主页键，如图所示。iOS界面结构Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成，如图所示。5 iOS和Android界面结构对比6 .间距规范在APP间距中，8倍数和IO

5、倍数常被使用，如图所示。例如在iOS中以2X为基准,常见的边距有20px、24pxx30pxx32px、40px及50px0而4倍数则可以用于较亲密的元素之间。7 APP常用间距8 .文字规范(1)系统字体 iOS系统旧金山字体：旧金山字体是非衬线字体，如图1-所示，其中SF字体有SFUIText(文本模式)和SFUIDisp1ay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisp1ay适用于大于20pt的文字。Thequickbrownfoxjumpedoverthe1azydog.旧金山字体纽约字体：纽约字体是衬线字体，如图所示，旨在补充旧金山字体。对于小于2

6、Opt的文本使用小号，对于20p1到35p1之间的文本使用中号，对于36pi到53pt之间的文本使用大号，对于54pi点或更大的文本使用特大号。Thequickbrownfoxjumpedoverthe1azydog.纽约字体苹方：iOS中文使用的是苹方，共有6个字重，如图所示。极细纤细细体正常中黑中粗UI1iThin1ightRegMedSmBd苹方字体 Android系统Roboto：Android英文使用的字体,共有6个字重，如图所示。思源黑体：Android中文使用的字体，又称为SourceHanSansw或Noto”，共有7个字重,如图所示。RobotoTiRoboto1ightRo

7、botoRegu1arRobotoMediumRobotoBo1dRobotoB1ackRobotoThinIta1icRoboto1ightIta1icRobotoIta1icRobotoMediumIta1iRobotoBo1dIta1icRobotoB1ackIta1ic话话话话话话话吴吴吴吴吴吴吴&衬牡牡牡首批批Roboto字体和思源黑体(2)字体尺寸苹果和Materia1DeSign提供的字号参考并不完全适用于中文，因为相同字号下，中文比西文大。如iOS官方规范正文为17pi,如图所示。但使用中文时14p1和12p1更加合适。为了区分标题和正文,字体大小差异至少保持在2pt及以上。行高西文通常为1.31.5倍，中文采用1.52倍。安时于守的大小S口C1,0WM标题一一xwn-U标题二一va标题三19M*标就四wv一twaJB除石MMb一.一tMF六AWaiOM0-MJt9BMUBtmrWMBIMUnrzWtWi