UI界面设计与制作 教案 第1章教案.docx

《UI界面设计与制作 教案 第1章教案.docx》由会员分享，可在线阅读，更多相关《UI界面设计与制作 教案 第1章教案.docx（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教案编号：1课 题：第1章初识in设计课时：4课时授课类型：讲授工程目标： 掌握UI设计的基本概念 掌握UI设计的常用软件 了解UI设计的行业开展 了解学习UI的正确姿势 掌握UI设计的制作流程工程重点： UI设计的基本概念 UI设计的常用软件 UI设计的制作流程工程难点： UI设计的制作流程工程技能点：单位、尺寸、适配、结构、间距、文字图标及图片的基础规范与规那么工程教学技巧：1 .知识讲解.案例展示iOSStatus Bar状态栏Navlgaticxi Bar 导Safe Area平安设计区Tab Bars/Toolbars标签栏/_L具栏Homoindicator虚期主页键44pt 24

2、dp49pt 56dp44pt 56dp App Top Bar 项部应用栏Safe Ares平安设计区App Bottom Bar底部应用栏Navigation Bar虚拟导航栏AndroidiOS和Android界面结构比照5 .间距规范在App间距中,8倍数和10倍数常被使用，如下图。例如在iOS中以2x为基准，常见的边距有20px、24px、30px、32px、40Px及50px。而4倍数那么可以用于较亲密的元素之间。iOSStatus Bar状态栏Navigation Bar 导航栏Safe Area平安设计区Homelndlostor 虚拟主页atTab Bars/Toolbara

3、 标签栏/工具栏44pt44pt49pt34ptApp常用间距6 .文字规范(1 )系统字体 iOS系统旧金山字体：旧金山字体是非衬线字体，如图1 所示，其中SF字体有SF UI Text(文本模式) 和SF UI Display （展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。The quick brown foxjumped over the lazy dog.旧金山字体纽约字体：纽约字体是衬线字体，如下图，旨在补充旧金山字体。对于小于20Pt的文本使 用小号，对于20pt到35pt之间的文本使用中号，对于36pt到5

4、3pt之间的文本使用大号，对于54pt 点或更大的文本使用特大号。The quick brown fox纽约字体苹方：iOS中文使用的是苹方，共有6个字重，如下图。极细纤细细体正常中黑中粗 ULiThinLightRegMedSmBd苹方字体 Android 系统Roboto ： Android英文使用的字体，共有6个字重，如下图。思源黑体：Android中文使用的字体，又称为Source Han Sans或Noto,共有7个字重, 如下图。Roboto ThinRoboto LightRoboto RegularRoboto MediumRoboto BoldRoboto BlackRobo

5、to Thin ItalicRoboto Light ItalicRoboto ItalicRoboto Medium ItalicRoboto Bold Italic Roboto Black ItalicSIMPLIFIED CTRADITIONAL CHINESEKOREANRoboto字体和思源黑体（2 ）字体尺寸苹果和Material Design提供的字号参考并不完全适用于中文,因为相同字号下,中文比西文 大。如iOS官方规范正文为17pt ,如下图。但使用中文时14Pt和12Pt更加合适。为了区分标题 和正文，字体大小差异至少保持在2pt及以上。行高西文通常为L31.5倍，中文采

6、用L52倍。iOS对于字体大小的建议位置字体字重字号（逻辑像素）字号（实际像素）行距字间距大标题SanFrendsco （际七）Regular34Pt68Px4111标题一San Francisco （简称SF）Regular28pt56px34+13标题二SanFrandscoRegular22Pt44px28+16标题三San Francisco （简称SF）Regular2Opt40px25+19头条San Frandsco （筒将SF）Seml-BoH17pt34px22-24正文San Francisco （简称SF）Regular17pt34px22-24标注SanFrandsm

7、（茴常*SF）Regular16pt32px21-20副标题San Francisco （简称SF，）Regular15pt30px20-16注解San Frandsco德赤Regular13pt26Px18-6注释一San Francisco （简称*SF）Regular12pt24px160防二San FrandsenRegularllpt22px136安卓对于字体大小的议位置字体字重字号使用情况字间距标题一 -1-一KuDOrD3正标题二RobotoLight60sp正常情况-0.5标题三AobctoRtgiiar4asp正柿况0标题四RobotoRegular34sp正常情况0.25标

8、即五Regder2p正常况0标题六RobotoMedium208P正常情况0.15MM-RobotoRtgutar如正常况0.15副标期二HobotoMedium14sp正常情况0.1JEX-RcfaotoRtgutar3正柿况6B正文二RobotoRegular14 sp正常情况0.25IttMJtDIMun3G.7S标题RobotoRegular14 Sp正常情况0.4Rogdarwcpg号大耳1iOS和Material Design官方规范的字号7.图标尺寸(1 )应用图标 概念i OS 和 Mater i a I Des ign 应用图标 尺寸应用图标的设计尺寸可以采用1024px ,

9、并根据iOS官方模版进行规范，如下图。正确的图标设计稿应是直角矩形不带圆角的，iOS会自动应用一个圆角遮罩将图标的4个角遮住。iOS官方图标模版由于屏幕分辨率的差异和使用场景的不同，所以iOS官方的图标模板中，有非常多的图标尺 寸。我们只需要设计1024 ,然后将这个图标置入到PS的智能对象,或者Sketch的Symbol中， 就可以一次性生成所有尺寸，如下图。不同尺寸的iOS官方模版(2 )功能图标 概念功能图标即系统图标，是通过简洁现代的图形表达一些常见功能，如下图。主要应用于界 面中的导航栏、工具栏以及标签栏等模块。 appsarrow.backarrow_backjo arrow.downwar.Oarrow.drop.do.arrowjorwardarrow.forward.arrow-leflarrow .rightarrow.upwardcancelcheckchevroneftchevron_rightcloseexpand_lessexpand-rrx)refirsvpagefullscreenfullscreen_ex.last-pagemenumore_hofizmt/20pt.电竺聃史匚号航栏44ptiOS界面结构Android和iOS 一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、平安设计区、底部应用栏以及虚拟导航栏组成，如下图。