photoshopcc移动ui设计教学课件汇总完整版电子教案

《photoshopcc移动ui设计教学课件汇总完整版电子教案》由会员分享，可在线阅读，更多相关《photoshopcc移动ui设计教学课件汇总完整版电子教案（305页珍藏版）》请在金锄头文库上搜索。

1、本章介绍：随着2009年6月iPhone 3GS的发布，移动UI设计正式进入了设计舞台，由于移动UI有着独特的交互特点，因此想要从事移动UI设计行业的人员需要系统地学习与更新自己的知识体系。本章对移动UI设计的概念、特点、原则、常用软件、学习方法以及App的基本概念、操作平台、设计流程、基本分类进行系统讲解。通过本章的学习，读者可以对移动UI设计有一个宏观的认识，有助于高效便利地进行后续的移动UI设计工作。第1章 初识移动UI设计u掌握UI设计的的相关概念u掌握移动UI设计的的概念u了解移动UI设计的的特点u掌握移动UI设计的的原则u熟练移动UI设计的的常用软件u掌握移动UI设计的学习方法u掌

2、握App的的基本概念u了解App的操作平台u熟练App的设计流程u了解App的基本分类学习目标移动UI设计属于UI设计的一个分支，想要系统全面的认识移动UI设计，需要对UI设计的相关概念以及移动UI设计的概念、特点、原则、常用软件、学习方法这几个方面进行学习。1.1 认识移动UI设计1.UI设计UI即User Interface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计（Interaction Design, IxD）的可用性及用户体验（User Experience，UE/UX）的友好度。 1.1.1 UI设计

3、的相关概念App界面展示2.UI与WUI和GUI在设计领域，UI现在被广泛分为WUI和GUI。WUI全称Web User Interface，即网页界面。在企业中，WUI设计师主要从事PC端网页设计的工作。GUI全称Graphical User Interface，即图形用户界面。因为移动端包含大量图形用户界面，因此在企业中，GUI设计师主要从事移动端App的设计工作。 1.1.1 UI设计的相关概念WUI（左）GUI（右）移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严

4、格的尺寸要求及手机系统限制。从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动端网页界面设计、微信小程序设计及H5设计等。 1.1.2 移动UI设计的概念 微信跳一跳小程序 美国设计师Andrea Hock创作的腾讯：穿越未来看看你 1.设计极简虽然随着iPhone XS Max、华为Mate 20系列等全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑还是较小。因此要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。纵观移动UI的设计发展亦是从拟物化到扁平化，甚至为了更好的进行信息展示，iOS11之后的设计风格都围绕着“大而粗、简而

5、美”的原则进行界面设计。 1.1.3 移动UI设计的特点 美国设计师Johny vino创作2.交互丰富由于现在市场中智能手机、平板电脑型号的碎片化及多样化，设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面布局等适配的问题。拿移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配。 1.1.3 移动UI设计的特点 丰富的交互方式3.设计适配由于现在市场中智能手机、平板电脑型号的碎片化及多样化，设计师在进行设计时，应充分考虑到文字、图标、图像甚至是界面布局等

6、适配的问题。拿移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，设计师只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配。 1.1.3 移动UI设计的特点 设计适配在进行移动UI设计时需要遵循iOS系统和Android系统，因此可以根据iOS系统下的设计原则以及Android系统下MaterialDesign语言中的设计原则进行设计。1.iOS下的设计原则iOS系统设计有清晰、遵从、深度三大原则。2. Android 系统下的设计原则在 Android 系统下进行移动 UI 设计的原则通常是指 Material De

7、sign 语言的设计原则，共有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。 1.1.4 移动UI设计的原则 1.1.5 移动UI设计的常用软件 移动 UI 设计的常用软件可以分为界面设计、动效设计、网页设计、3D 渲染、思维导图、交互原型 6 个领域。 1.界面设计类：PhotoshopPhotoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件，在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。 1.1.5 移动UI设计的常用软件 Photoshop工作区界面截图SketchSketch是基于苹果电脑系统的一款收费型专业制作UI的工具。相较PS，它

8、是一款可以迅速上手的轻量级矢量设计工具，不仅对UI设计师，就连产品经理和前端开发都能够迅速掌握，减少了沟通合作的问题。 Sketch工作区界面截图1.1.5 移动UI设计的常用软件IllustratorIllustrator，简称“AI”，是由Adobe公司开发和发行的矢量图形处理软件，截止2018年10月，已经更新到CC2019。AI在UI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。 Illustrator工作区界面截图1.1.5 移动UI设计的常用软件Experience DesignExperience Design，简称“XD”，是由Adobe公司开发和发行的集原型

9、、设计和交互于一体的软件，并于2016年3月发布了正式预览版本。XD的简洁既弥补了PS制作UI方面时的臃肿，同时它免费并兼容Windows和mac双平台的平民化又是Sketch无法比拟的。 Experience Design工作区界面1.1.5 移动UI设计的常用软件2.动效设计类：AfterEffectsAfterEffects，简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截止2018年10月，已经更新到CC201。无论是经典的插件还是强大的表达式，都使得AE制作出来的动效变得细腻入微。 After Effects工作区界面截图1.1.5 移动UI设计的常用软件Princi

10、plePrinciple是基于苹果电脑系统的一款收费型专业制作动效的工具。较AE的综合及体量，它的优势更在于上手容易、操作简单，而且它还能在电脑上实时预览并在手机上进行交互，不像AE智能导出GIF动画和MP4视频，无法交互。 Principle工作区界面1.1.5 移动UI设计的常用软件3.网页设计类：DreamweaverDreamweaver，简称“DW”，开始由美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是一款集网页制作和管理网站于一身的网页代码编辑器，而且它还拥有着所见即所得的功能特点。 Dreamweaver工作区界面截图1.1.5 移动UI设计的常用软件H

11、ype3Hype3是基于苹果电脑系统的一款收费型专业制作网页设计的工具,它主要优势体现在能帮助不会编程的设计师轻松创建HTML5和复杂的动画效果。在响应式方面Hype3有着特别优秀的表现。 Hype3工作区界面1.1.5 移动UI设计的常用软件4.3D渲染类：CINEMA 4DCINEMA 4D,简称“C4D”，是德国MAXON开发的一款能够进行顶级的建模、动画和渲染的3D动画软件。其功能非常强大更能和PS、AI、AE等各类软件进行无缝结合。近些年被UI设计师大量追捧，通过C4D设计出来的作品被广泛运用到Banner、专题页以及活动页等。 CINEMA 4D工作区界面1.1.5 移动UI设计的

12、常用软件5.思维导图类：Mindjet MindManagerMindjet MindManager，俗称“脑图”，又叫“心智图”， 由美国Mindjet公司开发的一款不仅可以创造、管理和交流思想的绘图软件，更能方便使用的项目管理软件。 Mindjet MindManager工作区界面1.1.5 移动UI设计的常用软件XMindXMind,同Mindjet MindManager有着一样的功能，也是一款常实用的商业思维导图软件。思维导图类软件对于UI设计方面没有太大区分，很多时候选择哪款软件的使用都是根据个人喜好。 Xmind工作区界面1.1.5 移动UI设计的常用软件6.交互原型类：Axur

13、e RPAxure RP,通常称为“Axure”,是一款专业的快速原型设计工具,于2018年9月开放了9.0Beta的下载。在9.0的更新中Axure进行了颠覆式的设计架构，令软件的使用效率及体验友好度都大大幅增加。 Axure9.0工作区界面1.1.5 移动UI设计的常用软件墨刀墨刀是国内开发的一款在线型原型设计工具，于2017年6月开放了V3版本的下载。在V3中，墨刀进行了全面更新，除了品牌和组件的升级优化，还支持了sketch的导入及加入了工作流的功能，这使得墨刀更加强大。 墨刀工作区界面1.1.5 移动UI设计的常用软件对于UI设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师

14、，这样才能有针对性的地学习提升。结合市场需求，我们推荐下列学习方法：1.软件学习软件的学习是UI设计的刚需和基础，设计师即使有再好的想法，但不能通过软件制作出来也是徒劳。要我们主要需要掌握的软件有Photoshop、Illustrator、AfterEffects、Axure RP和墨刀，有条件的设计师还可以学习Sketch和Principle。 1.1.6 移动UI设计学习方法 UI设计需掌握的主流软件 1.1.6 移动UI设计学习方法 2.开拓眼界眼界的开拓至关重要，许多UI设计师无法做出美观的界面就是没有看到太多优秀的设计。这里推荐3种方法助力设计师开拓眼界。第1种:阅读优秀设计师的文章

15、，吸收优秀设计师的经验。当然针对初学者而言首先要学习规范类的文章，如iOS设计规范和Android设计规范，二者都可以在网上查到官方的设计指南。 1.1.6 移动UI设计学习方法 iOS设计规范Android设计规范第2种:阅读优秀书籍，系统地学习移动 UI 设计的相关知识和设计方法。通过优秀的设计书籍，设计师可以进行更全面的学习。第3种:）欣赏优秀的作品。建议设计师每天用 12 小时到一些作品网站浏览优秀的作品，并进行收藏，形成自己的资料库。 1.1.6 移动UI设计学习方法 网站推荐 3.临摹学习眼界得到开拓后，设计师需要进行相关的设计临摹。例如从应用中心下载优秀的 App，截图保存进行临

16、摹；也可以对自己收藏的优秀案例进行临摹。临摹一定要保证完全一样并且要经常临摹。1.1.6 移动UI设计学习方法 4.项目实战经过一定的积累，设计师最终应通过完整的企业项目来考查自己，从原型图到设计稿再到切图标注，甚至可以制作成动效 Demo。一整套项目的实战，会让设计师在设计能力上有质的飞跃。1.1.6 移动UI设计学习方法uApp的基本概念uApp的操作平台uApp的设计流程uApp的基本分类1.2 认识AppApp是应用程序Application的缩写，一般指智能手机的第三方应用程序。用户下载App主要从应用商店，比较著名的应用商店有苹果的App Store，谷歌的Google Play

17、Store。应用程序的运行与系统密不可分，目前市场上，主要的智能手机操作系统有苹果公司的iOS系统和谷歌公司的Android系统。对于UI设计师而言，要进行移动界面设计工作，需要分别学习两大系统的界面设计知识。 1.2.1 App的基本概念App的操作平台可以分为iOS 和Android两大平台。1.iOS系统平台1.2.2 App的操作平台iOS是由美国苹果公司开发，专门用于苹果移动设备下的操作系统。iOS截止到2019年已经更新到了iOS12，不管是设备的改革还是系统的更新，iOS都为用户带来了全新的体验。对于UI设计来言，需要快速进行iOS设计规范相关知识的更新。本书在规范章节深入剖析了

18、相关知识，帮助UI设计师进行知识的升级。iOS系统平台2.Android系统平台2008 年 10 月，第一款 Android 系统的智能手机发布。在 2014 年的 Google I/O 大会上，谷歌公司推出设计语言 Material Design，旨在规范 Android 系统的设备。1.2.2 App的操作平台Android系统平台App设计的流程可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行。1.2.3 App的设计流程App设计流程图1.分析调研App的设计是根据品牌的调性、产品的定位而进行，不同方向的App，设计风格也会有区别。因此先分析需求，了解用

19、户特征，并进行相关竞品的调研，明确设计方向。 QQ音乐 网易云音乐 虾米音乐1.2.3 App的设计流程2.交互设计交互设计是对整个App设计进行初步构思和制定的环节。一般需要进行纸面原型、架构设计、流程图设计、线框图设计等具体工作。 乌克兰UI/UX设计师Tatiana Lazarenko创作1.2.3 App的设计流程3.交互自查交互设计完成之后，进行交互自查是整个App设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题。 交互自查1.2.3 App的设计流程4.界面设计原型图审查通过，就可以进入界面的视觉设计阶段，这个阶段的设计图即产品最终呈现给用户的界面。

20、界面设计要求设计规范、图片、内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型以便后续的界面测试。 乌克兰设计师StasAristov、AlyaPrigotska、Thanh Do联合创作 1.2.3 App的设计流程5.界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整。 越南设计师Tran Mau Tri Tam进行App细节调整1.2.3 App的设计流程6.设计验证设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继

21、续优化。 XToken0x设计师创作1.2.3 App的设计流程1.2.4 App的基本分类 常见的 App 主要可以分为社区交友、影音娱乐、休闲娱乐、生活服务、旅游出行、电商平台、金融理财、学习教育、资讯阅读类。 1.社区交友App社区交友App，即通过互联网实现交际往来。常用的社交App有微信、QQ、新浪微博等。 QQ1.2.4 App的基本分类新浪微博微信2.影音娱乐影音娱乐App，即通过互联网上的电影电视、音乐MV以及小视频进行娱乐放松。常用的影音娱乐App有抖音短视频、腾讯视频、网易云音乐等。 抖音短视频1.2.4 App的基本分类网易云音乐腾讯视频3.休闲娱乐休闲娱乐App，即通过

22、互联网进行找寻餐厅、购买影票以及制作美食等活动进行放松休闲。常用的休闲娱乐App有大众点评、猫眼电影、下厨房等。 大众点评1.2.4 App的基本分类下厨房猫眼电影4.生活服务生活服务App，主要通过互联网为用户提供外卖订菜、求职招聘以及城市出行等相关服务。常用的生活服务App有饿了么、Boss直聘、摩拜单车等。 饿了么1.2.4 App的基本分类Boss直聘摩拜单车5.旅游出行旅游出行 App，主要提供与旅游度假相关的服务。常见的旅游出行 App 有途牛旅游、Airbnb爱彼迎、周末去哪儿等。 途牛旅游1.2.4 App的基本分类周末去哪儿Airbnb爱彼迎6.电商平台电商平台 App，主要

23、提供网购、零售等服务。常见的电商平台 App 有淘宝网、京东、网易严选等。 网易严选1.2.4 App的基本分类淘宝网京东7.金融理财金融理财APP，即通过互联网为用户的财务进行管理，以实现财务的保值、增值为目的。常用的金融理财APP有支付宝、京东金融、招商银行等。 支付宝1.2.4 App的基本分类招商银行京东金融8.学习教育学习教育App，即通过互联网快速地为用户传播知识和学习方法。常用的学习教育App有智慧树、作业帮、腾讯课堂等。 智慧树家长版1.2.4 App的基本分类腾讯课堂作业帮9.资讯阅读资讯阅读App，即通过互联网在为用户在短时间内带来价值的信息或书籍内容。常用的旅游出行App

24、有腾讯新闻、网易新闻、微信读书等。 腾讯新闻（左）网易新闻（中）微信读书（右）App Store中的截图1.2.4 App的基本分类本章介绍：设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习，读者可以对移动UI设计的基础规范有一个基本的认识，有助于高效便利地进行移动UI设计工作。第2章 移动UI设计规范u掌握iOS系统设计规范u掌握Android系统设计规范学习目标uiOS界面设计尺寸uiOS界面结构uiOS基本布局uiOS图标规范uiOS文字规范2.1 iOS界面设计规范1

25、.相关单位PPI:像素密度，英文全称“Pixels Per inch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。2.1.1 iOS界面设计尺寸PPI的计算公式（X、Y分别为横向、纵向的像素数）Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为2x和3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10

26、px10px的标准分辨率（1x）图像，该图像的 2x版本为20px20px， 3x版本为30px30px2.1.1 iOS界面设计尺寸逻辑像素和物理像素：逻辑像素，英文全称“Logic Point”，单位 “点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone 4的物理像素是960x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1 iOS界面设计尺寸2.设计尺寸iOS常见的设备尺寸。在进行界面设计

27、稿时，为了一稿适配，都是以iPhone6/6s/7/8为基准。使用Photoshop就建750x1334px尺寸的画布，如果是使用Sketch就建立375x667pt。iOS常见设备的尺寸 iOS设计标准尺寸2.1.1 iOS界面设计尺寸iOS界面主要由状态栏、导航栏、标签栏组成。2.1.2 iOS界面结构iOS手机端界面结构图iOS界面主要由状态栏、导航栏、标签栏组成。iOS手机端界面结构图2.1.2 iOS界面结构iOS界面主要由状态栏、导航栏、标签栏组成。iOS iPad界面结构图2.1.2 iOS界面结构1.网格系统网格系统（Grid Systems），又称为栅格系统，是利用一系列垂直

28、和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。2.1.3 iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（列、水槽、边距）2.1.3 iOS基本布局3.网格运用单元格：iOS的最小点击区域是44pt，即88px（2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。单元格2.1.3 iOS基本布局列：列的数量有

29、4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。 列的使用2.1.3 iOS基本布局水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt2x）最为常用。 水槽2.1.3 iOS基本布局边距：边距的宽度也可以与水槽有所区别。在iOS中以2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选

30、的边距。 iOS中的设置及通用页面都采用了30px的边距2.1.3 iOS基本布局在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。 iOS系统中各类应用图标2.1.4 iOS图标规范应用图标的设计：应用图标在设计时尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角，iOS会自动应用一个圆角折罩将图标的4个角遮住。 iOS官方模版2.1.4 iOS图标规范应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、

31、App Store、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配。 iOS系统中不同设备应用图标的尺寸2.1.4 iOS图标规范2.系统图标系统图标的概念：系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标。 澳大利亚Prospa产品设计负责人AndrewMcKay创作2.1.4 iOS图标规范系 统 图 标 的 设 计 ： 在 导 航 栏 和 工 具 栏 上 的 图 标 一 般 是44px(22pt2x),在标签栏上的图标一般是50px（25pt2x）。苹果官方提供了四种不同形状的标签栏图

32、标尺寸供UI设计师参考。其意义是让不同外形的图标在同一个标签栏时，保证视觉平衡。 标签栏图标尺寸2.1.4 iOS图标规范系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。 iOS系统中不同设备系统图标的尺寸2.1.4 iOS图标规范1.系统字体：iOS英文使用的是San Francisco (SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SF UI Text适用与小于19pt的文字，SF UI Display适用于大于20pt的文字。中文使用的是苹方，共有6个字重。2.1

33、.5 iOS文字规范 iOS系统字体2.字号大小：iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4px(2pt2x),正文的合适行间距在1.52倍之间。 iOS系统APP的字体建议2.1.5 iOS文字规范Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。2.2 Android系统设计规范1.相关单位网点密度（Dot Per inch，DPI）是打印分辨率的单位，表示每英寸打印的点。在移动设备上等同于 PPI，表示的是每英寸所拥有的像素数量。通常 PPI 代表移动设备，DPI 代表 Android 移动设备。

34、2.2.1 Android设计尺寸及单位 DPI等同于PPI独立密度像素与独立缩放像素：独立密度像素,英文全称“Density-independent pixels”，简称“dp”，是安卓设备上的基本单位，等同于苹果设备上的pt。Android开发工程师使用的单位是dp,所以UI设计师进行标注时应将px转化成dp,公式为dp*ppi/160 = px。当设备的DPI值是320，通过公式可得出1dp=2px，如图2-23（类似iPhone6/7/8的高清屏）。 dp与px的转换2.2.1 Android设计尺寸及单位独立缩放像素，英文全称“Scale-independent Pixel”，简称“

35、sp”，是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。 sp等同于dp2.2.1 Android设计尺寸及单位2.设计尺寸Android常见的设备尺寸。在进行界面设计稿时，如果要一想一稿适配iOS，那就使用Photoshop新建720x1280px尺寸的画布。如 果 根 据 MaterialDesign新 规 范 单 独 设 计 Android， 那 就 使 用Phot

36、oshop新建1080x1920px尺寸的画布。无论哪种需求，使用Sketch只建立360x640dp即可。 Android设计标准尺寸2.2.1 Android设计尺寸及单位Android常见的设备尺寸iOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2 Android界面结构 Android界面结构在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3 Android基本布局 移动设备的8dp网格所有组件都

37、与移动设备的8dp网格对齐图标、排版和组件中的某些元素可以与4dp网格对齐。列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。 列的数量，手机设备（左） 平板电脑（右）与4dp网格对齐2.2.3 Android基本布局水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。 手机设备、平板电脑水槽和边距的宽度2.2.3 Android基本布局边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。 边距的宽度2.2.3 Android基本布局在Android中，图标规范可以根据Ma

38、terial Design设计语言，从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。2.2.4 Android图标规范 Android系统中各类应用图标应用图标的设计：创建应用图标时，应以320dpi分辨率中的48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标尺寸供UI设计师参考，以保持一致的视觉平衡。 不同形状的应用图标尺寸2.2.4 Android图标规范应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行适配。当应用图标应用于Google Play中，其尺寸是512x51

39、2px。 Android系统中不同设备应用图标的尺寸2.2.4 Android图标规范2.系统图标系统图标的概念：系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图标，同时设计师也可以根据产品的调性进行自定义设计。 MaterialDesign官网提供的完整系统图标2.2.4 Android图标规范系统图标的设计：创建系统图标时，以320dpi分辨率中的24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。 系统图标的设计2.2.4 Android图标规范MaterialDesign语言提供了4种不同

40、的图标形状供UI设计师参考，以保持视觉平衡。 MaterialDesign官网提供的四类图标内部结构线2.2.4 Android图标规范设计时为保证图标清晰，需将软件中X和Y坐标设为整数，而不是小数，将图标“放在像素上”。 正确示例2.2.4 Android图标规范错误示例系统图标由描边末端、圆角、反白区域、描边、内部角边界区域六部分组成。 系统图标2.2.4 Android图标规范边角：边角半径默认为2dp。内角应该是方形而不要使用圆形，圆角建议使用2dp。 边角半径为2dp的图标解析图2.2.4 Android图标规范描边：系统图标使用2dp的描边以保持图标的一致性。 描边为2dp的图标解

41、析图2.2.4 Android图标规范描边末端：描边末端应该是直线并带有角度，留白区域的描边粗细也应该是2dp。描边如果是倾斜45度，那么末端应该也是倾斜45度为结束。 描边末端为2dp的图标解析图2.2.4 Android图标规范视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调整以提高其清晰度。系统图标的适配：系统图标的尺寸应根据不同设备的分辨率进行适配。 系统图标的适配复杂图标的视觉校正解析图2.2.4 Android图标规范1.系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“Source Han Sans”或“Noto”，共有7

42、个字重。 思源黑体2.2.5 Android字体规范2.字号大小Android 设计时要注意字号的大小。Android各元素以720x1280px为基准设计，可以与iOS对应，其常见的字号大小：24px、26px、28px、30px、32px、34px，36px等，最小字号为20px。 Android系统APP的字体建议2.2.5 Android字体规范本章介绍：iOS 界面设计是移动 UI 设计的重要部分，它直接影响着 iOS用户使用 App 的体验。本章对 iOS 界面中的栏、视图及控件的制作进行系统讲解与演练。通过本章的学习，读者可以对 iOS 界面设计有一个基本的认识，并快速掌握设计

43、iOS 界面的规范和方法。第3章 iOS界面设计u了解 iOS 界面设计中“栏”的概念 u 了解 iOS 界面设计中“视图”的概念 u 了解 iOS 界面设计中“控件”的概念 学习目标u掌握电商类 App 导航栏的制作方法 u 掌握电商类 App 标签栏的制作方法 u 掌握电商类 App 工具栏的制作方法 u 掌握电商类 App 弹出框的制作方法 u 掌握电商类 App 按钮的制作方法 u 掌握电商类 App 页面的制作方法 u 掌握电商类 App 分段的制作方法 u 掌握电商类 App 步进器的制作方法 u 掌握电商类 App 开关及文本框的制作方法技能目标u状态栏u导航栏u课堂案例制作电商

44、类App导航栏u搜索栏u标签栏u课堂案例制作电商类App标签栏u工具栏u课堂案例制作电商类App工具栏3.1 栏3.1.1 状态栏状态栏（Status Bars）是iPhone最上方用来显示时间、运营商信息、电池电量的区域。状态栏是背景完全透明的，在2x下，状态栏的高度为40像素iPhone6/7/8的状态栏尺寸白色状态栏（左）黑色状态栏（右）iPhone6/7/8导航栏（上）iPhoneX（下）3.1.2 导航栏导航栏（Navigation Bars）位于状态栏下方，是半透明的（70%）。通常导航栏的中间是页面标题，左右放置功能图标。正常标题1.导航栏标题：标题主要用于标明当前页面，当需要特

45、别强调内容时，建议使用大型标题3.1.2 导航栏大标题大标题导航栏的尺寸大标题导航栏的尺寸。大标题由于太占空间，并不能像传统导航一样固定在页面顶部。因此在滑动页面时大标题会变成正常导航栏的64pt（2x是128像素）的高度。3.1.2 导航栏界面中的导航栏2.导航栏控件：导航栏通常应该只包含视图的当前标题，返回按钮和诸如搜索、添加或更多等一个管理视图内容的控件。如果在导航栏中使用分段控件，则不应包含标题或除分段控件之外的任何控件。 导航栏控件尺寸3.1.2 导航栏使用圆角矩形工具绘制形状，使用置入嵌入对象命令置入图标，使用横排文字工具输入文字。3.1.3 课堂案例-制作电商类App导航栏效果图

46、搜索栏（Search Bars）通过在字段中输入文本来进行相关查找，在默认状态下，分别有大和小两种模式。搜索栏通常都包含一个删除该内容的“清除”按钮，同时大多数搜索栏包含一个“取消”搜索的按钮。搜索栏尺寸 搜索栏中的清除按钮和取消按钮3.1.4 搜索栏 标签栏（Tab Bars）位于应用程序屏幕底部，用于组织整个应用层面的信息结构，是半透明的（70%）。标签栏一次最多承载5个标签。多于5个的图标以列表形式收纳到“更多”里。标签栏的设计尺寸。界面中的标签栏 标签栏的设计尺寸 3.1.5 标签栏 标签栏图标的选中状态为彩色，以区别于非选中状态。在视觉上，标签栏图标应风格一致且平衡。 选中标签栏图标

47、的显示状态 3.1.5 标签栏使用“置入嵌入对象”命令置入图标，使用“横排文字”工具输入文字，使用“椭圆”工具绘制形状。3.1.6 课堂案例-制作电商类 App 的标签栏标签栏效果展示工具栏（Toolbars）位于应用程序屏幕底部，包含用于执行与当前视图或其中内容相关的操作的按钮，是半透明的（70%）。工具栏高度略窄，它的高度是44pt（2x是88像素）。当需要三个以上的工具栏按钮时，建议使用图标。工具栏3.1.7 工具栏使用“置入嵌入对象”命令置入图标，使用“圆角矩形”工具绘制形状，使用“横排文字”工具输入文字。3.1.8 课堂案例-制作电商类 App 的工具栏标签栏效果展示u操作列表u活动

48、视图u警告窗u集合视图u图像视图u地图视图u页面浏览控制器3.2 视图u弹出框u课堂案例制作电商类App弹出框u滚动视图u分屏视图u表单视图u文字视图u网络视图操作列表3.2.1 操作列表操作列表（Action sheets）是一种特殊的弹窗形式，来反馈特定交互动作，通常包含两个或更多的选项。使用操作列表是为了让用户启动任务，或者确认不可撤销的交互动作。在小屏设备上，操作列表内容由下向上滑动显示；而在大屏设备上，操作列表内容作为弹窗全部显示。活动视图3.2.2 活动视图活动视图（Activity views）是用于执行应用中特定任务的视图，例如复制、收藏、查找。一旦启动，可以立即执行任务，或者

49、逐步完成多步任务。活动都由活动视图管理，采用表单样式或展开显示取决于设备屏幕大小和方向。警告窗（Alerts）传达反馈应用程序或设备状态相关的重要信息，由标题、可选消息、一个或多个按钮，以及解释说明文字字段组成。除了这些可配置的元素，弹窗的视觉样式是不可自定义的。警告窗3.2.3 警告窗集合视图（Collections）是一组有序内容，例如一组照片，布局形式可自定义并高度可视化。通常，集合视图非常适合展示图像内容。可以自定义背景和其他装饰视图，从视觉上区分图片子集。集合视图3.2.4 集合视图图像视图（Image Views）在透明或不透明背景上显示单个图片或图片序列。在图像视图中，图像可以被

50、拉伸、缩放或固定到特定位置。默认情况下，图像视图没有交互。图像视图3.2.5 图像视图地图视图（Maps），能够在应用中显示地理数据，并支持内置地图应用提供的大部分功能。地图视图可以配置为显示标准地图、卫星图像或两者兼备。它包括图钉和覆盖物，并支持缩放和平移。通常，保持地图互动性。使用用户预期的图钉颜色。3.2.6 地图视图页面浏览控制器（Pages）提供了一种在文档、书籍、记事本或日历之间的内容页线性导航方式，它使用滚动，卷动管理页面之间的转换。滚动过渡没有特定的外观，页面可以流畅地从一个滚动到下一个；当用户在屏幕上滑动时，卷曲转换会是页面卷曲，就像现实世界中的书一样。滚动过渡3.2.7 页

51、面浏览控制器卷曲转换弹出框（Popover）是一种临时视图，当用户点击控件或区域时，它会显示在屏幕上的其他内容上方。通常，弹出框应在iPad 应用中使用。在 iPhone 应用中，建议在全屏模式视图中呈现信息，而不是在弹出框中。弹出框在iPad 中的应用3.2.8 弹出框使用“圆角矩形”工具和“直线”工具绘制形状，使用“置入嵌入对象”命令置入图片和图标，使用“横排文字”工具输入文字。效果图3.2.9 课堂案例制作电商类 App 的弹出框滚动视图（Scroll Views）允许用户浏览大于可见区域的内容，例如文档中的文本或图像集合。当用户滑动、轻拂、拖动、点按和捏住时，滚动视图会跟随手势，以自然

52、的方式显示或缩放内容。滚动视图本身没有外观，但是与其用户交互时它会显示临时滚动指示器。滚动视图还可以配置为在分页模式下操作，其中滚动显示全新的内容页面，而不是移动当前页面。滚动视图3.2.10 滚动视图分屏视图（Split Views）管理两个并排的内容窗格显示，主窗格中的常驻内容及辅窗格中的相关信息。每个窗格可以包含各种元素，包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。如果应用需要，主窗格可以覆盖辅窗格，并且在可以不使用时隐藏屏幕。分屏视图3.2.11 分屏视图表单视图（Tables）以一个可滚动的单列多行的形式来展示一段或一组数据。将表格以列表的形式，简洁高效地显示大量

53、或少量的信息。通常，表格最好用来展示文字内容,而且经常以导航的方式出现在分栏视图的一侧,另一侧显示相关内容。在iOS中，表单有常规和分组两种样式。表单视图3.2.12 表单视图文字视图（Text Views）用于显示多行样式的文本内容。文本视图可以是任何高度，当内容扩展到视图之外时使用滚动。默认情况下，文本视图中的内容是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，在用户点击视图时会出现键盘。文字视图3.2.13 文字视图网络视图（Web Views）直接在应用中加载和显示丰富的网站内容，如嵌入式HTML和网站。典型的有，邮箱在消息中，使用网络视图显示HTML内容。网络视图3.2.14

54、网络视图3.3 控件u按钮u课堂案例制作旅游类APP美食筛选页u编辑菜单u标签u页面控件u课堂案例制作旅游类APP美食筛选页u选择器u进度指示器u刷新u分段控件u课堂案例制作旅游类APP美食筛选页u滑块u步进器u课堂案例制作旅游类APP美食筛选页u开关u文本框u课堂案例制作旅游类APP美食筛选页3.3 控件按钮（Buttons）适用于于应用程序的特定操作，由标题或图标组成，并支持自定义。1.系统按钮系统按钮（System Buttons）可以在任何地方使用，但通常显示在导航栏和工具栏中。系统按钮3.3.1 按钮2.详细信息按钮详细信息按钮（Detail Disclosure Buttons）的

55、触发可打开一个视图 （通常是模态视图）包含附加信息或本屏内相关选项的特定功能。详细信息按钮3.3.1 按钮3.信息按钮信息按钮（Info Buttons）的触发可在视图翻转后，显示有关应用程序的配置详细信息，信息有时会显示在当前视图的背面。信息按钮有浅色和深色两种风格。信息按钮3.3.1 按钮4.添加联系人按钮用户可以点击添加联系人按钮（Add Contact Buttons）来浏览现有联系人列表，并选择一个用于插入文本字段或其他视图，例如，在邮件中，可以点击邮件收件人字段中的添加联系人按钮，从联系人列表中选择收件人。添加联系人按钮3.3.1 按钮使用置入嵌入对象命令置入图标，使用椭圆工具绘制

56、形状，使用横排文字工具输入文字。效果展示图3.3.2 课堂案例制作电商类App按钮控件效果图编辑菜单（Edit Menus），用户可以双击或触摸并按住文本字段、文本视图，Web视图或图像视图中的元素以选择内容并显示编辑选项，例如复制和粘贴。编辑菜单3.3.3 编辑菜单标签（Labels）描述屏幕界面元素或提供短消息。虽然用户无法编辑标签，但有时候可以复制标签里的内容。标签可以显示任意数量的静态文本，但最好保持简短。标签3.3.4 标签页面控件（Page Controls）页面控件显示当前页面在平面页面列表中的位置。它以一系列小指示点的形式出现，表示可用页面的打开顺序，其中实心点表示当前页面。页

57、面控件3.3.5 页面使用椭圆工具绘制形状，使用置入嵌入对象命令置入图标，使用横排文字工具输入文字。效果展示图3.3.6 课堂案例-制作电商类App页面控件效果图选择器（Pickers）由一个或多个不同值的可滚动列表组成，每个值都具有单个选定值。选择器出现时，页面都有深色遮罩，通常显示在屏幕底部或弹出窗口中。选择器的高度通常是是五行列表值的高度，宽度可以是屏幕的宽度或其封闭视图，具体视页面情况而定。选择器3.3.7 选择器1.日期选择器日期选择器（Date Pickers）是一个有效的接口，用于选择特定的日期、时间或两者兼而有之。它还提供了一个显示倒计时计时器的接口。选择器3.3.7 选择器3

58、.3.8 进度指示器进度指示器（Progress Indicators），主要不让用户坐在那里盯着静态屏幕，等待应用程序加载内容或执行冗长的数据处理操作。使用活动指示器和进度条让用户知道应用程序没有停顿，并让用户清楚还要等待多长时间。1.活动指示器活动指示器（Activity Indicators）随着无法量化的任务旋转，如随着加载或同步复杂的数据进行。任务完成时它就会消失。活动指示器不具备交互。活动指示器3.3.8 进度指示器2.进度条活动指示器（Progress Bars）通过从左到右填充轨迹显示任务已持续时间。进度条是虽然可以伴有用于取消相应操作的按钮，但本身也不具备交互。进度条3.3.

59、8 进度指示器3.网络活动指示器在没有边缘到边缘显示的设备上，当联网时，网络活动指示器（Network Activity Indicators）会在屏幕顶部的状态栏中旋转，网络完成后会消失。该指示器看起来就像一个活动指示器，并且不具备交互。进度条3.3.8 进度指示器手动启动刷新控件（Refresh Content Controls）就会立即重新加载内容，通常在表视图中，而无需等待就会自动完成下一次内容更新。刷新控件是一种特殊类型的活动指示器，默认情况下是隐藏的，拖动列表页时自动变可见并且重新加载内容。例如，在邮件中，用户可以向下拖动收件箱邮件列表以检查新邮件。刷新控件3.3.9 刷新分段控制

60、（Segmented Controls）是两个或多个段的线性集合，每个分段卡都是独立的按钮。在控件内，所有段的宽度相等。像按钮一样，分段卡可以包含文本或图像。分段控件通常用于显示不同的视图。例如，在地图中，分段控件可让用户在地图，公交和卫星视图之间切换。分段控件3.3.10 分段使用“横排文字”工具输入文字，使用“圆角矩形”工具和“直线”工具绘制形状。效果图3.3.11 课堂案例制作电商类 App 的分段滑块（Sliders）是具有水平轴通过拇指滑动的交互控件，用户可以用手指滑动在最小和最大值之间移动，例如调整屏幕亮度级别或媒体播放期间的位置。当滑块的值改变时，最小值和拇指之间的轨迹部分用颜色

61、填充。滑块可以选择性地显示左右图标，说明最小值和最大值的含义。滑块3.3.12 滑块步进器（Steppers）是用于增加或减少增量值的两段控制。默认情况下，步进器的一段显示加号，另一段显示减号。如果需要，可以用自定义图像替换这些符号。进步器3.3.13 步进器使用圆角矩形工具和矩形工具绘制形状，使用横排文字工具输入文字。效果图3.3.14 课堂案例制作电商类 App 的步进器效果展示图开关（Switch）允许用户切换“打开”和“关闭”两种相互排斥的状态。开关3.3.15 开关文本框（Text Fields）是单行，有固定高度，通常带有圆角，当用户点击它时会自动调出键盘。使用文本框来可获得少量信

62、息，例如电子邮件地址。文本框3.3.16 文本框使用横排文字工具输入文字，使用置入嵌入对象命令置入图标，使用直线工具和圆角矩形工具绘制形状，使用图层控制面板调整图层不透明度。效果图3.3.17 课堂案例-制作电商类App开关及文本框控件使用移动工具移动素材，使用横排文字工具输入文字，直线工具、圆角矩形工具绘制基本形状。效果图3.4 课堂练习-制作电商类App登录页使用移动工具移动素材，使用横排文字工具输入文字，使用椭圆工具、矩形工具、直线工具绘制基本形状，使用创建剪贴蒙版命令调整图片显示区域，使用渐变叠加命令添加效果。效果图3.5 课后习题-制作电商类App详情页本章介绍：Android 界面

63、设计是移动 UI 设计的重要组成部分，它直接影响着 Android 系统用户使用 App 的体验。本章对 Android界面中的栏和组件的制作进行系统讲解与演练。通过本章的学习，读者可以对 Android 界面设计有一个基本的认识，并快速掌握设计 Android 界面的规范和方法。第4章 Android界面设计u了解 Android 界面设计中“栏”的概念 u 了解 Android 界面设计中“组件”概念学习目标u掌握家具类 App 顶部应用栏的制作方法 u掌握家具类 App 横幅的制作方法 u掌握家具类 App 底部导航的制作方法 u掌握家具类 App 按钮的制作方法 u掌握家具类 App

64、悬浮动作按钮的制作方法 u掌握家具类 App 卡片的制作方法 技能目标u掌握家具类 App 分隔线的制作方法 u 掌握家具类 App 选择控件的制作方法 u 掌握家具类 App 文本框的制作方法 u 掌握家具类 App 个人中心页的制作方法 u 掌握家具类 App 购物车页的制作方法技能目标u状态栏u系统导航栏4.1 栏应用栏顶部的Android状态栏4.1.1 状态栏状态栏（Status Bar）位于手机界面的顶部，高度是 24dip。在 Android 界面中，状态栏显示通知图标和系统图标。 Android状态栏系统导航栏（Android navigation bar）位于手机的最下方，导

65、航控件由返回、主界面、最近任务组成。明4.1.2 系统导航栏暗u底部应用栏u顶部应用栏u课堂案例制作医疗类App首页u背板u横幅u课堂案例制作医疗类App医生列表页u底部导航u课堂案例制作医疗类App医生列表页u按钮4.2 组件4.2 组件u课堂案例制作医疗类APP医生列表页u悬浮动作按钮u卡片u课堂案例制作医疗类APP医生列表页u纸片u数据表u对话框u分隔线u课堂案例制作医疗类APP医生介绍页u图片组u列表u菜单u抽屉式导航u状态指引u选择控件u课堂案例制作医疗类APP医生筛选页u底部面板u侧面板u滑块u底部提示栏u选项卡u文字框u课堂案例制作医疗类APP医生筛选页u提示4.2 组件底部应用

66、栏（Bottom Application Bar）用于显示 Android 界面底部的导航抽屉和按键操作。底部应用栏4.2.1 底部应用栏1. 用法底部应用栏上的图标应为两到五个，不应该用于底部带有导航栏的应用及没有或只有一个图标的应用栏。正确示例4.2.1 底部应用栏错误示例2. 组成底部应用栏由1容器、2导航抽屉控制、3悬浮动作按钮、4动作图标以及5更多菜单控件组成。4.2.1 底部应用栏底部应用栏的组成 3尺寸 底部应用栏的层级分别为容器（0 dp）、底部信息栏（6 dp）、底部应用栏（8 dp）、悬浮动作按钮（12 dp）和页卡（16 dp）。4.2.1 底部应用栏底部应用栏的组成 顶

67、部应用栏（App bars: top）用于顶显示与当前屏幕相关的信息和操作。顶部应用栏4.2.2 顶部应用栏1用法 （1）顶部应用栏 顶部应用栏通常用于品牌、屏幕标题、导航名称的展示和相关命令的操作。 常规顶部应用栏4.2.2 顶部应用栏（2）上下文操作栏 顶部应用栏可以转换为上下文操作栏。 顶部应用栏转换为上下文操作栏4.2.2 顶部应用栏（3）突出顶部应用栏 顶部应用栏可通过改变高度以凸显标题、容纳图像，同时这么做也可以在视觉上更加突出顶部应用栏。 常规顶部应用栏4.2.2 顶部应用栏突出标题的顶部应用栏使用“横排文字”工具输入文字，使用“置入嵌入对象”命令置入图标，使用“椭圆”工具绘制形

68、状。效果图4.2.3 课堂案例制作家具类 App 的顶部应用栏 应用程序的每个操作，都会出现一个背板（Backdrop），显示相关信息和可操作的内容。背板4.2.4 背板1. 用法背板有后层和前层两个层。背板的用法4.2.4 背板2. 组成背板由1后层、 2前层以及3可选的副标题组成。背板的组成 4.2.4 背板3. 尺寸背板的设计尺寸。后层隐藏时4.2.4 背板后层显示时横幅（Banner）在这里不是指广告，而是顶部应用栏下面的第一个凸显区域，显示突出的消息和相关的可选操作。横幅4.2.5 横幅1. 用法横幅显示重要，简洁的消息，一次只能显示一个横幅。滚动时，横幅通常随内容移动并滚动屏幕。横

69、幅应显示在屏幕顶部，顶部应用栏下方。位于顶部应用栏下方的横幅4.2.5 横幅2. 组成横幅由1辅助图形（可选）、2容器、3文本、4按钮组成。横幅的组成4.2.5 横幅3. 尺寸横幅的设计尺寸。横幅的组成4.2.5 横幅使用“横排文字”工具输入文字，使用“矩形”工具绘制形状。效果图4.2.6 课堂案例制作家具类 App 的横幅底部导航（Bottom navigation）将底部宽度等分为多个图标的点击区域，每个区域都由一个图标和一个可选的文本标签表示，用于连接应用程序中的主要架构。底部导航4.2.7 底部导航1用法 底部导航上的单击区域应该分为 35 个，不应该少于 3 个或多于 5 个。错误示

70、例4.2.7 底部导航2组成 底部导航由容器、未选中图标、未选中文本标签、选中图标及选中文本标签组成。底部导航的组成4.2.7 底部导航3. 尺寸底部导航的的设计尺寸。底部导航的的设计尺寸4.2.7 底部导航使用置入嵌入对象命令置入图标，使用椭圆工具绘制形状，使用横排文字工具输入文字。效果图4.2.8 课堂案例-制作家具类App底部导航组件效果展示图按钮（Button）是通过用户点击即可进行反馈并执行的组件。 1用法 按钮有文本按钮、线性按钮、面性按钮及切换按钮 4 种类型。 4.2.9 按钮按钮 按钮的不同类型2. 组成1文本按钮由A文本标签和C图标（可选）组成，2线性按钮由A文本标签、B容

71、器以及C图标（可选）组成，3面性按钮由A文本标签、B容器以及C图标（可选）组成，4切换按钮由A容器和C图标组成。4.2.9 按钮按钮的组成（3）尺寸按钮的设计尺寸。4.2.9 按钮按钮的设计尺寸使用圆角矩形工具绘制形状，使用横排文字工具输入文字。效果图4.2.10 课堂案例-制作家具类App按钮组件效果展示图浮动操作按钮（Buttons: floating action button）简称“FAB”，主要执行屏幕上主要的和最常见的操作。浮动操作按钮4.2.11 悬浮动作按钮1用法 悬浮动作按钮出现在所有屏幕内容的前面，通常是一个圆形，中间有一个图标。悬浮动作按钮有常规型、迷你型和扩展 3 种类

72、型。常规和迷你4.2.11 悬浮动作按钮扩展2组成 常规型和迷你型悬浮动作按钮由容器及图标组成。 扩展型悬浮动作按钮由容器、图标（可选）及文字标签组成。 常规和迷你4.2.11 悬浮动作按钮扩展（3）尺寸悬浮动作的设计尺寸。悬浮动作的设计尺寸4.2.11 悬浮动作按钮使用椭圆工具绘制形状，使用属性面板制作弥散投影，使用置入嵌入对象命令置入图标，使用横排文字工具输入文字。效果图4.2.12 课堂案例-制作家具类App悬浮动作按钮组件效果展示图卡片（Card）是单个主题内容和操作的集合。 1用法 卡片应该易于扫描以获取相关和可操作的信息。文本和图像等元素应该以一种清楚地表示层次结构的方式放在卡面上

73、面。卡片4.2.13 卡片卡片的结构2组成 卡片由容器缩略图（可选）、标题文字（可选）、子标题（可选）、媒体（可选）、辅助文字（可选）、按钮（可选）和图标（可选）组成。4.2.13 卡片卡片的结构3. 尺寸在移动设备上，卡片的默认高度为1dp，提升高度为8dp。此外，卡片可以具有0dp的静止高度，在悬停时升至8dp。4.2.13 卡片1dp的默认高度0dp的静止高度使用“横排文字”工具输入文字，使用“圆角矩形”工具绘制形状，使用“属性”面板制作弥散投影，使用“置入嵌入对象”命令置入图标，使用“创建剪贴蒙版”命令调整图片显示区域，使用“渐变叠加”命令添加效果。4.2.14 课堂案例制作家具类 A

74、pp 的卡片效果展示图1. 用法纸片（chips）是表示输入、属性或操作的紧凑元素，如邮件添加邮件人的操作。纸片4.2.15 纸片2组成 纸片由容器、缩略图（可选）、文字及删除图标（可选）组成。 纸片的组成4.2.15 纸片3尺寸 纸片的设计尺寸如图所示。纸片的组成4.2.15 纸片数据表（Data tables）显示数据集。数据表4.2.16 数据表1用法 数据表以类似网格的行列格式显示信息，并以易于扫描的方式组织信息，以便用户进行理解和查找。它可以嵌入主要内容中，如嵌入卡片中。数据表中可包含：交互式组件（如卡片、按钮或菜单）。非交互元素.（如角标）和查询与操作数据的工具。 数据表4.2.1

75、6 数据表2组成 数据表由容器、列标题、排序工具、复选框及表格内容组成。 数据表4.2.16 数据表3尺寸 数据表的设计尺寸如图所示。数据表4.2.16 数据表4.2.17 对话框对话框（Dialog）是一种，出现在应用程序内容前面，用于提供关键信息或请求用户做出决定的窗口。 1用法 （1）警告对话框 警告对话框会中断用户的紧急信息、详细信息或操作。对话框警告对话框4.2.17 对话框（2）简单对话框 简单对话框显示选中后立即生效的项目列表。 （3）确认对话框 确认对话框要求用户在提交选项之前先确认选择。 简单对话框确认对话框4.2.17 对话框（4）全屏对话框 全屏对话框填满整个屏幕，其中包

76、含需要完成一系列任务的操作。 全屏对话框4.2.17 对话框2组成 对话框由容器、标题（可选）、辅助文字、按钮及遮罩组成。 对话框的组成4.2.17 对话框3. 尺寸对话框的设计尺寸，如图所示。对话框的设计尺寸分隔线（Divider）是一条，用于对列表和布局中的内容进行分组的细线。 1用法 （1）全出血分隔线全出血分隔线将内容分成多个部分并跨越布局的整个长度。分割线4.2.18 分隔线全出血分隔线（2）插入式分隔线 插入式分隔线分隔相关内容，如电子邮件线程中的电子邮件。它们应与图标或头像等特定元素一起使用，并与应用栏标题左对齐。 4.2.18 分隔线插入式分隔线（3）居中分隔线 居中分隔线放置

77、在布局或列表的中间，它们最适合分隔相关内容。 （4）子标题分隔线 子标题分隔线可以与子标题配对以识别分组内容。将分隔线放在子标题上方以加强子标题与内容的连接。 全出血分隔线4.2.18 分隔线插入式分隔线2尺寸 分隔线的设计尺寸如图所示。 4.2.18 分隔线割线尺寸使用置入嵌入对象命令置入图标，使用直线工具绘制形状，使用横排文字工具输入文字。效果图4.2.19 课堂案例-制作家具类App分割线组件图片组（Dividers）是有秩序地显示图像。图片组4.2.20 图片组1用法 图片组有标准图片组、排版图片组、照片墙图片组及瀑布流图片组 4 种形式。标准图片组4.2.20 图片组排版图片组照片墙

78、图片组瀑布流图片组2组成 图片组由图片容器、文字标签（可选）、可交互图标（可选）、文字保护（可选）及图片列表项组成。 4.2.20 图片组对话框的组成机构（3）尺寸图片组的设计尺寸，如图所示。4.2.20 图片组尺寸4.2.21 列表列表（Lists）是一组连续的文本或图像。列表1. 用法列表有单行列表、两行列表以及三行列表3种类型。单行列表两行列表三行列表4.2.21 列表2. 组成列表由1列表容器、2行以及3列表内容组成。列表的组成4.2.21 列表3. 尺寸列表的设计尺寸，如图所示。列表的设计尺寸4.2.21 列表列表的设计尺寸4.2.21 列表4.2.22 菜单1用法 菜单（Menus

79、）是临时显示表面上的选项列表。菜单(下拉菜单)2组成 菜单弹出时会显示相关列表，具体分为以下几种。（1）文字列表。文字列表由容器、文本及分频器组成。 （2）文字和图标列表。由容器、前置图标、文本及分隔线组成。 文字列表文字和图标列表4.2.22 菜单（3）文字、图标和键盘命令列表文字、图标和键盘命令列表由容器、前置图标、文本、分隔线、命令及级联菜单指示器组成。 （4）带选择状态的文字列表 和其他列表不同的是多了选择状态，如图 所示。文字、图标和键盘命令列表带选择状态的文字列表4.2.22 菜单（3）尺寸菜单的设计尺寸，如图所示。菜单的设计尺寸4.2.22 菜单4.2.23 抽屉式导航抽屉式导航

80、（Navigation drawer）可以访问应用中的目标及功能，例如切换账户。（1）用法抽屉式导航推荐用于具有五个或更多顶级目标的应用、具有两个或更多级别导航层次结构的应用以及不相关的目标之间快速导航。抽屉式导航2组成 抽屉式导航由容器、标题（可选）、分隔线（可选）、选中状态、选中状态的文字、未激活文字、小标题及遮罩（不可交互）组成。 抽屉式导航的组成4.2.23 抽屉式导航3. 尺寸抽屉式导航的设计尺寸，如图所示。抽屉式导航的设计尺寸4.2.23 抽屉式导航状态指引（Progress indicators）表示未标明的等待时间或显示进程的长度。状态指引4.2.24 状态指引1用法 状态指引

81、向用户通知正在进行的进程的状态，如加载应用程序、提交表单或保存更新。状态指引从视觉上可以分为线性和循环状态指引，功能上可以分为明确和非明确状态指引。 4.2.24 状态指引（1）线性和循环状态指引 Material Design 语言提供两种视觉上不同类型的状态指引，分别是线性和循环状态指引。 （2）明确和未明确 明确状态指引可以显示流程需要多长时间，未明确状态指引无法检测进度还需要多长时间。 4.2.24 状态指引线性 循环 明确状态指引 未明确状态指引 2. 组成状态指引由1轨迹以及2指示器组成，如图所示。4.2.24 状态指引状态指引的组成3. 尺寸状态指引的设计尺寸，如图所示。4.2.

82、24 状态指引状态指引的设计尺寸4.2.25 选择控件选择控件（Selection controls）允许用户选择选项。选择控件4.2.25 选择控件1用法 选择控件有单选按钮、复选框及开关 3 种类型。单选按钮 复选框 开关4.2.25 选择控件（1）单选按钮 单选按钮允许用户从一组中选择一个选项。当用户需要查看所有可用选项时，可使用单选按钮。如果需要折叠可用选项，可考虑使用下拉菜单，因为它占用的空间更少。 单选按钮4.2.25 选择控件（2）复选框 复选框允许从列表中选择一个或多个项目，可用于打开或关闭选项。 （3）开关 使用开关可以打开或关闭单个选项及立即激活或停用某些内容。 复选框 开

83、关4.2.25 选择控件2尺寸 选择控件的设计尺寸如图所示。 单选按钮复选框开关使用圆角矩形工具绘制形状，使用属性面板制作弥散投影，使用置入嵌入对象命令置入图标，使用横排文字工具输入文字。效果图4.2.26 课堂案例制作家具类 App 的选择控件 4.2.27 底部面板底部面板（Sheets: bottom）是包含附加内容的表面，这些内容固定在屏幕的底部。底部面板4.2.27 底部面板1用法 底部面板有标准底部面板、模态底部面板及扩展底部面板 3 种类型。 （1）标准底部面板 标准底部面板用于显示补充屏幕的主要内容，当用户与主要内容交互时，它们仍然可见。 标准底部面板4.2.27 底部面板2.

84、 组成底部面板由1面板、2内容以及3遮罩（仅限模态）组成。底部面板组成4.2.27 底部面板3. 尺寸底部面板设计尺寸，如图所示。底部面板设计尺寸侧面板（Sheets: side）是包含附加内容的表面，这些内容固定在屏幕的左边缘或右边缘。侧面板4.2.28 侧面板1用法 侧面板有标准侧面板和模态侧面板两种类型，其中标准侧面板主要用于桌面端，模态侧面板主要用于移动设备上。 标准侧面板4.2.28 侧面板模态侧面板2. 组成侧面板由1面板、2内容以及3遮罩（仅限模态）组成。3. 尺寸模态侧面板设计尺寸，如图所示。组成 4.2.28 侧面板尺寸4.2.29 滑块滑块（Slider）允许用户从一系列值

85、中进行选择。 1用法 滑块非常适合于调整音量、亮度或应用图像中的滤镜等。它可以在条形图的两端带有反映一系列值的图标。 滑块滑块的使用方法4.2.29 滑块滑块有连续滑块和离散滑块两种类型。 （1）连续滑块。连续滑块允许用户选择主观范围内的值。 （2）离散滑块。可以通过参考指示器的值将离散滑块调整为特定值。 连续滑块离散滑块4.2.29 滑块2. 组成滑块由1轨道、2拇指部分、3标签值（可选）以及4刻度线组成。3. 尺寸滑块设计尺寸，如图所示。滑块组成连续滑块离散模块底部提示栏（Snackbars）是在屏幕底部提供有关应用程序进程的简短消息。底部提示栏4.2.30 底部提示栏1用法 底部提示栏中

86、显示的消息只是暂时出现在屏幕底部，并且一次只能显示一个。因为底部提示栏会自动消失，所以不需要用户对其进行关闭或取消操作。 2组成 底部提示栏由文字标签、容器及动作（可选）组成。 底部提示栏组成4.2.30 底部提示栏3. 尺寸底部提示栏设计尺寸，如图所示。尺寸4.2.30 底部提示栏选项卡（Tabs）允许在相关且处于相同层次结构的内容组之间进行导航。选项卡4.2.31 选项卡1用法 选项卡分为固定选项卡和滚动选项卡两种类型。 （1）固定选项卡。固定选项卡会在屏幕上显示所有标签，每个标签的宽度固定。（2）滚动选项卡。滚动选项卡是可滚动的，没有固定宽度，一些选项卡将保持在屏幕外直到滚动至屏幕内。

87、固定选项卡4.2.31 选项卡滚动选项卡2组成 选项卡由容器、选中图标（如果有文字，则为可选）、选中文本标签、选项卡指示器、未选中图标、未选中文本标签及选项卡项组成。 选项卡的组成4.2.31 选项卡3尺寸 选项卡的设计尺寸如图 所示。 选项卡最小宽度4.2.31 选项卡滚动选项卡尺寸选项卡最大宽度固定选项卡尺寸文字框（Text fields）允许用户输入和编辑文本。文字框4.2.32 文字框1用法 文本框通常用于表单和对话框中，分为填充文本框和线性文本框两种类型。 填充文本框4.2.32 文字框线性文本框2组成 文本框由容器、前置图标（可选）、标签文本、输入文本、后缀图标（可选）、选中指示器

88、和辅助文本组成。文本框的组成4.2.32 文字框3尺寸 文本框的设计尺寸如图 所示。 填充文本框 4.2.32 文字框填充文本框 填充文本框 线性文本框线性文本框线性文本框使用横排文字工具输入文字，使用直线工具绘制形状。效果图4.2.33 课堂案例-制作家具类App文字框组件效果展示图提示（Tooltip）是当用户点击元素时，工具提示会显示信息性文本。 1用法 提示会显示标识元素的文本标签，如其功能描述等。 提示4.2.34 提示提示的用法2尺寸 提示的设计尺寸如图所示。提示设计尺寸4.2.34 提示使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，

89、使用横排文字工具输入文字。效果图4.3 课堂练习-制作家具类App个人中心页使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。效果图4.4 课后习题-制作家具类App购物车页本章介绍：优秀的 App 界面设计能给用户带来更好的使用体验。本章对 App 界面中的闪屏页、引导页、首页、个人中心页、详情页及注册登录页的制作进行系统讲解与演练。通过本章的学习，读者可以对 App 界面设计过程有一个完整的体验，深入了解移动 UI 设计的内涵与精髓。第5章 App界面设计实战u 了解 App

90、闪屏页的概念 u 了解 App 引导页的概念 u 了解 App 首页的概念 u 了解 App 个人中心页的概念 u 了解 App 详情页的概念 u 了解 App 注册登录页的概念 学习目标u掌握美食类 App 闪屏页的绘制方法 u 掌握美食类 App 欢迎页的绘制方法 u 掌握美食类 App 首页的绘制方法 u 掌握美食类 App 消息列表页的绘制方法 u 掌握美食类 App 聊天页的绘制方法 u 掌握美食类 App 个人中心页的绘制方法 技能目标u品牌推广型u活动广告型u节日关怀型5.1 闪屏页品牌推广型闪屏页是为表现产品品牌而设定。基本采用“产品logo+产品名称+产品”的简洁化设计形式。

91、 1号店App 闲鱼App 蚂蚁财富App5.1.1 品牌推广型活动广告型闪屏页是为推广活动或广告而设定，通常将推广的内容直接设计在闪屏页内。多采用插画以及暖色的设计形式，用以营造热闹的氛围。 百度网盘App 百度浏览器App 知乎App 5.1.2 活动广告型节日关怀型闪屏页是为营造节假日氛围同时凸显产品品牌而设定的。多采用“产品logo+内容插画”的设计形式，使用户感受到节日的关怀与祝福。 百度钱包App QQ音乐App QQ浏览器App5.1.3 节日关怀型u功能说明型u产品推广型u搞笑卖萌型5.2 引导页引导页是用户在第一次或经过更新，打开App看到的一组图片，通常由3-5页组成。引导

92、页起到了在用户使用App之前，提前帮助用户快速了解App的主要功能和特点的作用，可以细分为功能说明型、产品推广型、搞笑卖萌型。5.2 引导页高德地图App的功能说明型引导页功能说明型引导页是引导页中最基础的，主要对产品的新功能进行展示，常用于App重大版本的更新中。多采用插图的设计形式，达到短时间内吸引用户的效果。5.2.1 功能说明型京东商城App的产品推广型引导页5.2.2 产品推广型产品推广型引导页是表达App的价值，让用户更了解这款App的情怀。多采用与企业形象和产品风格一致的生动化、形象化设计形式，让用户感到画面的精美。搞笑卖萌型引导页5.2.3 搞笑卖萌型搞笑卖萌型引导页是引导页中

93、难度较高的，主要站在用户的角度介绍App的特点。多采用拟人的夸张设计形象及丰富的交互动画，让用户身临其境。u列表型u网格型u卡片型u综合型5.3 首页首页又称为“起始页”，是用户使用App的第一页。首页承担着流量分发的作用，是展现产品气质的关键页面，可以细分为列表型、网格型、卡片型、综合型。5.3 首页列表型首页是在页面上将同级别的模块进行分类展示，常用于表现数据展示、文字阅读等方面。采用单一的设计形式，方便用户浏览。5.3.1 列表型网格型首页是在页面上将重要的功能以矩形模块的形式进行展示，常用于工具类等方面。采用的统一矩形模块的设计形式，刺激用户点击。天天P图App Word App 墨刀

94、App 5.3.2 网格型卡片型首页是在页面上将图片、文字、控件放置于同一张卡片中，再将卡片进行分类展示，常用于表现数据展示、文字阅读、工具使用等方面。采用的统一的卡片设计形式，不仅让用户一目了然更加强内容的点击欲望。 SaturnCube团队创作 微信读书App 翻译大全App5.3.3 卡片型综合型首页是由搜索栏、Banner、金刚区、瓷片区以及标签栏等组成的页面，运用范围较广，常用于电商类、教育类、旅游类等方面。采用丰富的设计形式，满足用户的需求。 1号店App 途牛旅游App 翻译大全App5.3.4 综合型5.4 个人中心页个人中心页是展示个人信息的页面，主要由头像和信息内容组成。个

95、人中心页有时也会以抽屉打开的形式出现。 淘宝App 闲鱼App 滴滴出行App5.5 详情页详情页是展示App产品详细信息，用于用户产生消费的页面。页面内容较丰富，以图文信息为主。京东商城App 途牛App 36KrApp 5.6 注册登录页注册登录页是电商类、社交类等功能丰富型App的必要页面。页面设计直观简洁，并且提供第三方账号登录，国内常见的第三方账号有微博、微信、QQ等，国外常见的第三方账号有Facebook，Twitter，Google等。 Done App 智联招聘App 36Kr App 5.7 课堂案例制作“侃侃”App 使用“椭圆”工具和“圆角矩形”工具绘制图形，使用“描边”

96、和”渐变叠加”命令为图形添加效果，使用“剪贴蒙版”命令为图片添加蒙版，使用“横排文字”工具输入文字。效果图 5.7 课堂案例制作“侃侃”App 效果图 效果图使用“移动”工具移动素材，使用“椭圆”工具和“圆角矩形”工具绘制图形，使用“投影”和“渐变叠加”命令为图形添加效果，使用“置入”命令置入图片，使用“剪贴蒙版”命令调整图片显示区域，使用“横排文字”工具输入文字。 5.8 课堂练习制作“美食来了”App效果图使用直线工具、椭圆工具和圆角矩形工具绘制图形，使用渐变叠加命令为图形添加效果，使用剪贴蒙版命令为图片添加蒙版，使用横排文字工具输入文字。5. 9 课后习题制作Circle App效果图5. 9 课后习题制作Circle App