Photoshop CC 移动UI设计案例教程（全彩慕课版）全套课件

第1章初识移动UI设计本章介绍：随着2009年6月iPhone3GS的发布，移动UI设计正式进入了设计舞台，由于移动UI有着独特的交互特点，因此想要从事移动UI设计行业的人员需要系统地学习与更新自己的知识体系。本章对移动UI设计的概念、特点、原则、常用软件、学习方法以及App的基本概念、操作平台、设计流程、基本分类进行系统讲解。通过本章的学习，读者可以对移动UI设计有一个宏观的认识，有助于高效便利地进行后续的移动UI设计工作。掌握UI设计的的相关概念掌握移动UI设计的的概念了解移动UI设计的的特点掌握移动UI设计的的原则熟练移动UI设计的的常用软件掌握移动UI设计的学习方法掌握App的的基本概念了解App的操作平台熟练App的设计流程了解App的基本分类学习目标移动UI设计属于UI设计的一个分支，想要系统全面的认识移动UI设计，需要对UI设计的相关概念以及移动UI设计的概念、特点、原则、常用软件、学习方法这几个方面进行学习。1.1认识移动UI设计UI即UserInterface（用户界面）的简称，是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观度，更要保证了交互设计（英文InteractionDesign,缩写IxD）的可用性及用户体验（UserExperience，简称UE/UX）的友好度。在设计领域，UI现在被广泛分为WUI和GUI。WUI全称WebUserInterface，即网页界面。在企业中，WUI设计师主要从事PC端网页设计的工作。GUI全称GraphicalUserInterface，即图形用户界面。因为移动端包含大量图形用户界面，因此在企业中，GUI设计师主要从事移动端App的设计工作

1.1.1UI设计的相关概念移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机系统限制。从设计范畴来看，移动UI设计主要体现在移动应用界面设计、移动端网页界面设计、微信小程序设计及H5设计等。

1.1.2移动UI设计的概念

美国设计师AndreaHock创作的App（左）微信跳一跳小程序（中）网易新闻小易游戏机H5（右）1.设计极简虽然随着iPhoneXSMax、华为Mate20系列等全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑还是较小。因此要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。纵观移动UI的设计发展亦是从拟物化到扁平化，甚至为了更好的进行信息展示，iOS11之后的设计风格都围绕着“大而粗、简而美”的原则进行界面设计。

1.1.3移动UI设计的特点

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

1.1.3移动UI设计的特点

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

1.1.3移动UI设计的特点

设计适配在进行移动UI设计时需要遵循iOS系统和Android系统，因此可以根据iOS系统下的设计原则以及Android系统下MaterialDesign语言中的设计原则进行设计。1.iOS设计原则iOS系统设计有清晰、遵从、深度三大原则。2.MaterialDesign设计原则MaterialDesign语言有材质隐喻、大胆夸张、动效表意、灵活、跨平台五大原则。

1.1.4移动UI设计的原则

1.1.5移动UI设计的常用软件

UI设计常用软件可以通过界面设计、动效设计、网页设计、3D渲染、思维导图、交互原型这6个方面进行介绍。1.界面设计类：·PhotoshopPhotoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件，截止2018年10月，已经更新到CC2019。在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。

1.1.5移动UI设计的常用软件

Photoshop工作区界面截图·SketchSketch是基于苹果电脑系统的一款收费型专业制作UI的工具。相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅对UI设计师，就连产品经理和前端开发都能够迅速掌握，减少了沟通合作的问题。

Sketch工作区界面截图1.1.5移动UI设计的常用软件·IllustratorIllustrator，简称“AI”，是由Adobe公司开发和发行的矢量图形处理软件，截止2018年10月，已经更新到CC2019。AI在UI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。

Illustrator工作区界面截图1.1.5移动UI设计的常用软件·ExperienceDesignExperienceDesign，简称“XD”，是由Adobe公司开发和发行的集原型、设计和交互于一体的软件，并于2016年3月发布了正式预览版本。XD的简洁既弥补了PS制作UI方面时的臃肿，同时它免费并兼容Windows和mac双平台的平民化又是Sketch无法比拟的。

ExperienceDesign工作区界面1.1.5移动UI设计的常用软件2.动效设计类：·AfterEffectsAfterEffects，简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截止2018年10月，已经更新到CC201。无论是经典的插件还是强大的表达式，都使得AE制作出来的动效变得细腻入微。

AfterEffects工作区界面截图1.1.5移动UI设计的常用软件·PrinciplePrinciple是基于苹果电脑系统的一款收费型专业制作动效的工具。较AE的综合及体量，它的优势更在于上手容易、操作简单，而且它还能在电脑上实时预览并在手机上进行交互，不像AE智能导出GIF动画和MP4视频，无法交互。

Principle工作区界面1.1.5移动UI设计的常用软件3.网页设计类：·DreamweaverDreamweaver，简称“DW”，开始由美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是一款集网页制作和管理网站于一身的网页代码编辑器，而且它还拥有着所见即所得的功能特点。

Dreamweaver工作区界面截图1.1.5移动UI设计的常用软件·Hype3Hype3是基于苹果电脑系统的一款收费型专业制作网页设计的工具,它主要优势体现在能帮助不会编程的设计师轻松创建HTML5和复杂的动画效果。在响应式方面Hype3有着特别优秀的表现。

Hype3工作区界面1.1.5移动UI设计的常用软件4.3D渲染类：·CINEMA4DCINEMA4D,简称“C4D”，是德国MAXON开发的一款能够进行顶级的建模、动画和渲染的3D动画软件。其功能非常强大更能和PS、AI、AE等各类软件进行无缝结合。近些年被UI设计师大量追捧，通过C4D设计出来的作品被广泛运用到Banner、专题页以及活动页等。

CINEMA4D工作区界面1.1.5移动UI设计的常用软件5.思维导图类：·MindjetMindManagerMindjetMindManager，俗称“脑图”，又叫“心智图”，由美国Mindjet公司开发的一款不仅可以创造、管理和交流思想的绘图软件，更能方便使用的项目管理软件。

MindjetMindManager工作区界面1.1.5移动UI设计的常用软件·XMindXMind,同MindjetMindManager有着一样的功能，也是一款常实用的商业思维导图软件。思维导图类软件对于UI设计方面没有太大区分，很多时候选择哪款软件的使用都是根据个人喜好。

Xmind工作区界面1.1.5移动UI设计的常用软件6.交互原型类：·AxureRPAxureRP,通常称为“Axure”,是一款专业的快速原型设计工具,于2018年9月开放了9.0Beta的下载。在9.0的更新中Axure进行了颠覆式的设计架构，令软件的使用效率及体验友好度都大大幅增加。

Axure9.0工作区界面1.1.5移动UI设计的常用软件·墨刀墨刀是国内开发的一款在线型原型设计工具，于2017年6月开放了V3版本的下载。在V3中，墨刀进行了全面更新，除了品牌和组件的升级优化，还支持了sketch的导入及加入了工作流的功能，这使得墨刀更加强大。

墨刀工作区界面1.1.5移动UI设计的常用软件对于UI设计的初学者来讲，首先要明确市场现在到底需要什么样的设计师，这样才能有针对性的地学习提升。结合市场需求，我们推荐下列学习方法：1.软件学习 软件的学习是UI设计的刚需和基础，设计师即使有再好的想法，但不能通过软件制作出来也是徒劳。要我们主要需要掌握的软件有Photoshop、Illustrator、AfterEffects、AxureRP和墨刀，有条件的设计师还可以学习Sketch和Principle。

1.1.6移动UI设计学习方法

UI设计需掌握的主流软件

1.1.6移动UI设计学习方法

2.开拓眼界眼界的开拓至关重要，许多UI设计师无法做出美观的界面就是没有看到太多优秀的设计。这里推荐3种方法助力设计师开拓眼界。第1种:阅读优秀设计师的文章，吸收优秀设计师的经验。当然针对初学者而言首先要学习规范类的文章，如iOS设计规范和Android设计规范，二者都可以在网上查到官方的设计指南。本书亦在第3章iOS系统界面设计和第4章Android系统界面设计对其进行了深入剖析帮助设计师理解。

1.1.6移动UI设计学习方法

iOS设计规范（左）Android设计规范（右）第2种:阅读优秀书籍，系统的学习UI设计的相关知识和设计应用方法。大家可以通过网上输入关键词查找到所需书籍。通过阅读图书的内容提要和目录了解书籍的内容和特色，并通过购买所需书籍来进行全面的学习。第3种:欣赏优秀的作品，建议设计师每天拿出1-2小时到UI中国、站酷（ZCOOL）、追波(Dribbble)这些网站浏览最新的作品，并加入收藏，形成自己的资料库。

1.1.6移动UI设计学习方法

网站推荐

1.1.6移动UI设计学习方法

3.临摹学习眼界开拓后，需要进行相关的设计临摹。临摹的来源首先推崇的是从应用中心下载优秀的APP，截图保存进行临摹，其次可以从第2步开拓眼界中的优秀案例进行临摹。临摹一定要保证完全一样并且要多临摹。

1.1.6移动UI设计学习方法

4.项目实战经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Demo。一整套项目的实战，会让我们在设计能力上有质的提升。App的基本概念App的操作平台App的设计流程App的基本分类1.2认识AppApp是应用程序Application的缩写，一般指智能手机的第三方应用程序。用户下载App主要从应用商店，比较著名的应用商店有苹果的AppStore，谷歌的GooglePlayStore。应用程序的运行与系统密不可分，目前市场上，主要的智能手机操作系统有苹果公司的iOS系统和谷歌公司的Android系统。对于UI设计师而言，要进行移动界面设计工作，需要分别学习两大系统的界面设计知识。

1.2.1App的基本概念由美国设计团队RonDesignAgency创作App的操作平台可以分为iOS和Android两大平台。1.iOS系统平台1.2.2App的操作平台iOS是由美国苹果公司开发，专门用于苹果移动设备下的操作系统。iOS截止到2019年已经更新到了iOS12，不管是设备的改革还是系统的更新，iOS都为用户带来了全新的体验。对于UI设计来言，需要快速进行iOS设计规范相关知识的更新。本书在规范章节深入剖析了相关知识，帮助UI设计师进行知识的升级。iOS系统平台2.Android系统平台Android系统是最初由安迪·鲁宾（AndyRubin）开发，2005年8月被谷歌收购，2008年10月，第一款Android系统的智能手机发布。在2014年的GoogleI/O大会上，谷歌公司推出的全新的设计语言—MaterialDesign，旨在规范Android系统的设备、媲美苹果的设计。截止到2019年，Android系统已经发布了Android9.0操作系统，而2018年的GoogleI/O大会MaterialDesign也有了重大更新，这些都使得Android系统手机的使用愈发的流畅、统一及美观。对UI设计师则面临着知识的更新及现有UI界面的再设计等挑战。本书将在Android系统界面设计章节深入剖析，帮助UI设计师顺利解决。1.2.2App的操作平台App设计的流程可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行。1.2.3App的设计流程App设计流程图1.分析调研App的设计是根据品牌的调性、产品的定位而进行，不同方向的App，设计风格也会有区别。因此先分析需求，了解用户特征，并进行相关竞品的调研，明确设计方向。1.2.3App的设计流程

QQ音乐网易云音乐虾米音乐2.交互设计交互设计是对整个App设计进行初步构思和制定的环节。一般需要进行纸面原型、架构设计、流程图设计、线框图设计等具体工作。1.2.3App的设计流程

乌克兰UI/UX设计师TatianaLazarenko创作3.交互自查交互设计完成之后，进行交互自查是整个App设计流程非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏缺失的细节问题。1.2.3App的设计流程

交互自查4.界面设计原型图审查通过，就可以进入界面的视觉设计阶段，这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范、图片、内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型以便后续的界面测试。1.2.3App的设计流程

乌克兰设计师StasAristov、AlyaPrigotska、ThanhDo联合创作5.界面测试界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整。1.2.3App的设计流程

越南设计师TranMauTriTam进行App细节调整6.设计验证设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化。1.2.3App的设计流程

XToken0x设计师创作1.2.4App的基本分类

常用App主要可以分为社区交友、影音娱乐、休闲娱乐、生活服务、旅游出行、电商平台、金融理财、健康医疗、学习教育、资讯阅读这10类。1.社区交友社区交友App，即通过互联网实现交际往来。常用的社交App有微信、QQ、新浪微博等。1.2.4App的基本分类

QQ（左）微信（中）新浪微博（右）APPStore中的截图2.影音娱乐影音娱乐App，即通过互联网上的电影电视、音乐MV以及小视频进行娱乐放松。常用的影音娱乐App有抖音短视频、腾讯视频、网易云音乐等。1.2.4App的基本分类

抖音短视频（左）腾讯视频（中）网易云音乐（右）APPStore中的截图3.休闲娱乐休闲娱乐App，即通过互联网进行找寻餐厅、购买影票以及制作美食等活动进行放松休闲。常用的休闲娱乐App有大众点评、猫眼电影、下厨房等。1.2.4App的基本分类

大众点评（左）猫眼电影（中）下厨房（右）APPStore中的截图4.生活服务生活服务App，主要通过互联网为用户提供外卖订菜、求职招聘以及城市出行等相关服务。常用的生活服务App有饿了么、Boss直聘、摩拜单车等。1.2.4App的基本分类

饿了么（左）Boss直聘（中）摩拜单车（右）APPStore中的截图5.旅游出行旅游出行App，即通过互联网为用户提供旅游度假的相关服务。常用的旅游出行App有途牛旅游、Airbnb爱彼迎、周末去哪儿等。1.2.4App的基本分类

途牛旅游（左）Airbnb爱彼迎（中）周末去哪儿（右）APPStore中的截图6.电商平台电商平台App，即通过互联网为用户提供网购、零售以及相关信息等服务。常用的电商App有淘宝网、京东、网易严选等。1.2.4App的基本分类

淘宝网（左）京东（中）网易严选（右）AppStore中的截图7.金融理财金融理财APP，即通过互联网为用户的财务进行管理，以实现财务的保值、增值为目的。常用的金融理财APP有支付宝、京东金融、招商银行等。1.2.4App的基本分类

支付宝（左）京东金融（中）招商银行（右）AppStore中的截图8.健康医疗健康医疗App，即通过互联网为用户提供运动健身、健康教育以及远程会诊等多种形式的健康医疗服务。常用的健康医疗App有悦动圈、轻加、微医等。1.2.4App的基本分类

悦动圈（左）轻加（中）微医（右）AppStore中的截图9.学习教育学习教育App，即通过互联网快速地为用户传播知识和学习方法。常用的学习教育App有智慧树、作业帮、腾讯课堂等。1.2.4App的基本分类

智慧树家长版（左）作业帮（中）腾讯课堂（右）AppStore中的截图10.资讯阅读资讯阅读App，即通过互联网在为用户在短时间内带来价值的信息或书籍内容。常用的旅游出行App有腾讯新闻、网易新闻、微信读书等。1.2.4App的基本分类

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

iOS系统设计规范iOS系统基础规范可以通过设计尺寸、界面结构、基本布局、图标规范及字体规范5个方面进行详尽的剖析。2.1

iOS系统设计规范1.相关单位•PPI:像素密度，英文全称“PixelsPerinch”，简称“PPI”，是屏幕分辨率单位，表示的是每英寸所拥有的像素数量，如图2-1所示。屏幕密度越大，画面越细腻。因此，iPhone4比iPhone3GS屏幕尺寸虽然相同，但实际像素大了一倍，清晰度自然变高。2.1.1

iOS设计尺寸及单位PPI的计算公式（X、Y分别为横向、纵向的像素数）•Asset:比例因子，英文全称“Asset”。标准分辨率显示器具有1：1像素密度（或@1x），其中一个像素等于一个点。高分辨率显示器具有更高的像素密度，比例因子为2.0或3.0（称为@2x和@3x）。因此，高分辨率显示器需要具有更多像素的图像。一个10px×10px的标准分辨率（@1x）图像，该图像的@2x版本为20px×20px，@3x版本为30px×30px2.1.1

iOS设计尺寸及单位•逻辑像素和物理像素：逻辑像素，英文全称“LogicPoint”，单位“点”，即“pt”，是根据内容尺寸计算的单位。如iPhone4逻辑像素是480x320pt，但由于每个逻辑的点因为视网膜屏密度增加了1倍，所以一个点等于两个像素，因此iPhone4的物理像素是960x640px。iOS开发工程师和使用Sketch软件设计界面的UI设计师使用的单位都是pt。逻辑像素与物理像素的转换2.1.1

iOS设计尺寸及单位2.设计尺寸iOS常见的设备尺寸。在进行界面设计稿时，为了一稿适配，都是以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界面主要由状态栏、导航栏、标签栏组成。iOSiPad界面结构图2.1.2

iOS界面结构1.网格系统网格系统（GridSystems），又称为栅格系统，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面布局设计的方式，能使布局规范、简洁、有秩序。2.1.3

iOS基本布局网格系统2.组成元素网格系统由列、水槽以及边距3个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。组成元素（①列、②水槽、③边距）2.1.3

iOS基本布局3.网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。单元格2.1.3

iOS基本布局•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。

列的使用2.1.3

iOS基本布局•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。

水槽2.1.3

iOS基本布局•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。

iOS中的设置及通用页面都采用了30px的边距2.1.4

iOS图标规范在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标是应用程序的图标。应用图标主要应用于主屏幕、APPStore、Spotlight以及设置中。

iOS系统中各类应用图标2.1.4

iOS图标规范•应用图标的设计：应用图标在设计时尺寸可以采用1024px，并根据iOS官方模版进行规范。正确的图标设计稿应是直角矩形不带圆角，iOS会自动应用一个圆角折罩将图标的4个角遮住。

iOS官方模版2.1.4

iOS图标规范•应用图标的适配：应用图标会以不同的分辨率出现在主屏幕、AppStore、Spotlight以及设置场景中，尺寸也应根据不同设备的分辨率进行适配。

iOS系统中不同设备应用图标的尺寸2.1.4

iOS图标规范2.系统图标•系统图标的概念：系统图标即界面中的功能图标，系统图标主要应用于导航栏、工具栏以及标签栏。当未找到符合需求的系统图标，UI设计师可以设计自定义图标。

澳大利亚Prospa产品设计负责人AndrewMcKay创作2.1.4

iOS图标规范•系统图标的设计：在导航栏和工具栏上的图标一般是44px(22pt@2x),在标签栏上的图标一般是50px（25pt@2x）。苹果官方提供了四种不同形状的标签栏图标尺寸供UI设计师参考。其意义是让不同外形的图标在同一个标签栏时，保证视觉平衡。

标签栏图标尺寸2.1.4

iOS图标规范•系统图标的适配：自定义图标会以不同的分辨率出现在导航栏、工具栏以及标签栏场景中，尺寸也应根据不同设备的分辨率进行适配。

iOS系统中不同设备系统图标的尺寸2.1.4

iOS图标规范1.系统字体：iOS英文使用的是SanFrancisco(SF)字体，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText适用与小于19pt的文字，SFUIDisplay适用于大于20pt的文字。中文使用的是苹方，共有6个字重。2.1.5

iOS文字规范

iOS系统字体2.字号大小：iOS设计时要注意字号的大小。一般为了区分标题和正文，字体大小差异至少保持在4px(2pt@2x),正文的合适行间距在1.5～2倍之间。

iOS系统APP的字体建议2.1.5

iOS文字规范Android系统基础规范可以通过设计尺寸、界面结构、基本布局、字体规范及图标规范5个方面进行详尽的剖析。2.2

Android系统设计规范1.相关单位•DPI:网点密度，英文全称“DotPerinch”，简称“DPI”，是打印分辨率单位,表示每英寸打印的点。在移动设备上等同于PPI，表示的是每英寸所拥有的像素数量。通常PPI代表苹果手机，DPI代表安卓手机。2.2.1

Android设计尺寸及单位

DPI等同于PPI•独立密度像素与独立缩放像素：独立密度像素,英文全称“Density-independentpixels”，简称“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-independentPixel”，简称“sp”，是Android设备上的字体单位。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是“正常”状态时，1sp=1dp，如图2-XX。而当文字尺寸是“大”或“超大”时，1sp>1dp。UI设计师进行Android界面的设计时，标记字体的单位选用sp。

sp等同于dp2.2.1

Android设计尺寸及单位2.设计尺寸Android常见的设备尺寸。在进行界面设计稿时，如果要一想一稿适配iOS，那就使用Photoshop新建720x1280px尺寸的画布。如果根据MaterialDesign新规范单独设计Android，那就使用Photoshop新建1080x1920px尺寸的画布。无论哪种需求，使用Sketch只建立360x640dp即可。

Android常见的设备尺寸(上)

Android设计标准尺寸（下）2.2.1

Android设计尺寸及单位iOS界面主要由状态栏、导航栏、顶部应用栏组成。2.2.2

Android界面结构

Android界面结构在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。•单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3

Android基本布局

移动设备的8dp网格所有组件都与移动设备的8dp网格对齐图标、排版和组件中的某些元素可以与4dp网格对齐。•列：列的数量在手机设备上推荐4列，-平板电脑上推荐8列。

列的数量，手机设备（左）平板电脑（右）与4dp网格对齐2.2.3

Android基本布局水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。

手机设备、平板电脑水槽和边距的宽度2.2.3

Android基本布局边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。

边距的宽度2.2.3

Android基本布局在Android中，图标规范可以根据MaterialDesign设计语言，从应用图标和系统图标两个方面进行详尽的剖析。1.应用图标•应用图标的概念：应用图标即产品图标，是品牌和产品的视觉表达，主要出现在主屏幕上。2.2.4

Android图标规范

Android系统中各类应用图标•应用图标的设计：创建应用图标时，应以320dpi分辨率中的48dp尺寸为基准。MaterialDesign提供了四种不同形状的应用图标尺寸供UI设计师参考，以保持一致的视觉平衡。

不同形状的应用图标尺寸2.2.4

Android图标规范•应用图标的适配：应用图标的尺寸应根据不同设备的分辨率进行适配。当应用图标应用于GooglePlay中，其尺寸是512x512px。

Android系统中不同设备应用图标的尺寸2.2.4

Android图标规范2.系统图标•系统图标的概念：系统图标即界面中的功能图标，通过简洁现代的图形表达一些常见功能。MaterialDesign提供了一套完整的系统图标，同时设计师也可以根据产品的调性进行自定义设计。

MaterialDesign官网提供的完整系统图标2.2.4

Android图标规范•系统图标的设计：创建系统图标时，以320dpi分辨率中的24dp尺寸为基准。图标应该留出一定的边距，保证不同面积的图标有协调一致的视觉效果。

系统图标的设计2.2.4

Android图标规范MaterialDesign语言提供了4种不同的图标形状供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的图标解析图2.2.4

Android图标规范描边末端：描边末端应该是直线并带有角度，留白区域的描边粗细也应该是2dp。描边如果是倾斜45度，那么末端应该也是倾斜45度为结束。

描边末端为2dp的图标解析图2.2.4

Android图标规范视觉校正：如果系统图标需要设计复杂的细节，则可以进行细微的调整以提高其清晰度。

•系统图标的适配：系统图标的尺寸应根据不同设备的分辨率进行适配。

系统图标的适配复杂图标的视觉校正解析图2.2.4

Android图标规范1.系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSans”或“Noto”，共有7个字重。

思源黑体2.2.5

Android字体规范2.字号大小Android设计时要注意字号的大小。Android各元素以720x1280px为基准设计，可以与iOS对应，其常见的字号大小：24px、26px、28px、30px、32px、34px，36px等，最小字号为20px。

Android系统APP的字体建议2.2.5

Android字体规范第3章iOS系统界面设计本章介绍：iOS系统界面是移动UI设计中最重要的部分之一，它直接影响着用户使用App的体验。本章对iOS系统界面设计中的栏、视图以及控件进行系统讲解与演练。通过本章的学习，读者可以对iOS系统界面设计有一个基本的认识，并快速掌握绘制iOS系统界面的规范和方法。掌握iOS界面设计中的栏掌握iOS界面设计中的视图掌握iOS界面设计中的控件学习目标掌握旅游类App首页的绘制方法掌握旅游类App相册页的绘制方法掌握旅游类App酒店列表页的绘制方法掌握旅游类App美食筛选页的绘制方法技能目标课堂案例——制作旅游类APP首页状态栏导航栏搜索栏标签栏工具栏3.1栏使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字，使用矩形工具和圆角矩形工具绘制基本形状。3.1.1课堂案例——制作旅游类APP首页效果图3.1.2状态栏状态栏（StatusBars）是iPhone最上方用来显示时间、运营商信息、电池电量的区域。状态栏是背景完全透明的，在@2x下，状态栏的高度为40像素iPhone6/7/8的状态栏尺寸白色状态栏（左）黑色状态栏（右）iPhone6/7/8导航栏（上）iPhoneX（下）3.1.3导航栏导航栏（NavigationBars）位于状态栏下方，是半透明的（70%）。通常导航栏的中间是页面标题，左右放置功能图标。正常标题(左)大标题（右）3.1.3导航栏1.导航栏标题：标题主要用于标明当前页面，当需要特别强调内容时，建议使用大型标题大标题导航栏的尺寸大标题导航栏的尺寸。大标题由于太占空间，并不能像传统导航一样固定在页面顶部。因此在滑动页面时大标题会变成正常导航栏的64pt（@2x是128像素）的高度。3.1.3导航栏界面中的导航栏2.导航栏控件：导航栏通常应该只包含视图的当前标题，返回按钮和诸如搜索、添加或更多等一个管理视图内容的控件。如果在导航栏中使用分段控件，则不应包含标题或除分段控件之外的任何控件。

导航栏控件尺寸3.1.3导航栏搜索栏（SearchBars）通过在字段中输入文本来进行相关查找，在默认状态下，分别有大和小两种模式。搜索栏通常都包含一个删除该内容的“清除”按钮，同时大多数搜索栏包含一个“取消”搜索的按钮。搜索栏尺寸搜索栏中的清除按钮和取消按钮3.1.4搜索栏

1.范围栏当有明确定义的类别可供搜索时，将范围栏添加到搜索栏可以优化搜索范围。范围栏

3.1.4搜索栏标签栏（TabBars）位于应用程序屏幕底部，用于组织整个应用层面的信息结构，是半透明的（70%）。标签栏一次最多承载5个标签。多于5个的图标以列表形式收纳到“更多”里。标签栏的设计尺寸。界面中的标签栏标签栏的设计尺寸3.1.5标签栏

标签栏图标的选中态应该是一个彩色，来区别于非选中状态。在视觉上，标签栏图标一致且平衡，其设计规范在规范章节已经进行了详尽的剖析，这里就不再赘述。选中标签栏图标的显示状态

3.1.5标签栏工具栏（Toolbars）位于应用程序屏幕底部，包含用于执行与当前视图或其中内容相关的操作的按钮，是半透明的（70%）。工具栏高度略窄，它的高度是44pt（@2x是88像素）。当需要三个以上的工具栏按钮时，建议使用图标。工具栏3.1.6工具栏课堂案例——制作旅游类APP相册页操作列表活动视图警告窗集合视图图像视图地图视图页面浏览控制器3.2视图课堂案例——制作旅游类APP登机牌页弹出框滚动视图分屏视图表单视图文字视图网络视图使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字，使用矩形工具绘制基本形状效果图3.2.1课堂案例——制作旅游类APP相册页操作列表3.2.2操作列表操作列表（Actionsheets）是一种特殊的弹窗形式，来反馈特定交互动作，通常包含两个或更多的选项。使用操作列表是为了让用户启动任务，或者确认不可撤销的交互动作。在小屏设备上，操作列表内容由下向上滑动显示；而在大屏设备上，操作列表内容作为弹窗全部显示。活动视图3.2.3活动视图活动视图（Activityviews）是用于执行应用中特定任务的视图，例如复制、收藏、查找。一旦启动，可以立即执行任务，或者逐步完成多步任务。活动都由活动视图管理，采用表单样式或展开显示取决于设备屏幕大小和方向。警告窗（Alerts）传达反馈应用程序或设备状态相关的重要信息，由标题、可选消息、一个或多个按钮，以及解释说明文字字段组成。除了这些可配置的元素，弹窗的视觉样式是不可自定义的。警告窗3.2.4警告窗集合视图（Collections）是一组有序内容，例如一组照片，布局形式可自定义并高度可视化。通常，集合视图非常适合展示图像内容。可以自定义背景和其他装饰视图，从视觉上区分图片子集。集合视图3.2.5集合视图图像视图（ImageViews）在透明或不透明背景上显示单个图片或图片序列。在图像视图中，图像可以被拉伸、缩放或固定到特定位置。默认情况下，图像视图没有交互。图像视图3.2.6图像视图地图视图（Maps），能够在应用中显示地理数据，并支持内置地图应用提供的大部分功能。地图视图可以配置为显示标准地图、卫星图像或两者兼备。它包括图钉和覆盖物，并支持缩放和平移。通常，保持地图互动性。使用用户预期的图钉颜色。3.2.7地图视图页面浏览控制器（Pages）提供了一种在文档、书籍、记事本或日历之间的内容页线性导航方式，它使用滚动，卷动管理页面之间的转换。滚动过渡没有特定的外观，页面可以流畅地从一个滚动到下一个；当用户在屏幕上滑动时，卷曲转换会是页面卷曲，就像现实世界中的书一样。滚动过渡（左）卷曲转换（右）3.2.8页面浏览控制器使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具、椭圆工具、直线工具绘制基本形状，使用减去顶层形状命令调整形状，使用横排文字工具输入文字。效果图3.2.9课堂案例——制作旅游类APP登机牌页弹出框（Popover）是一种临时视图，当用户点击控件或区域时，它会显示在屏幕上的其他内容上方。通常，弹出框应在iPad应用中使用。在iPhone应用中，建议在全屏模式视图中呈现信息，而不是在弹出框中。弹出框在iPad中的应用3.2.10弹出框滚动视图（ScrollViews）允许用户浏览大于可见区域的内容，例如文档中的文本或图像集合。当用户滑动、轻拂、拖动、点按和捏住时，滚动视图会跟随手势，以自然的方式显示或缩放内容。滚动视图本身没有外观，但是与其用户交互时它会显示临时滚动指示器。滚动视图还可以配置为在分页模式下操作，其中滚动显示全新的内容页面，而不是移动当前页面。滚动视图3.2.11滚动视图分屏视图（SplitViews）管理两个并排的内容窗格显示，主窗格中的常驻内容及辅窗格中的相关信息。每个窗格可以包含各种元素，包括导航栏、工具栏、标签栏、表格、集合、图像、地图和自定义视图。如果应用需要，主窗格可以覆盖辅窗格，并且在可以不使用时隐藏屏幕。分屏视图3.2.12分屏视图表单视图（Tables）以一个可滚动的单列多行的形式来展示一段或一组数据。将表格以列表的形式，简洁高效地显示大量或少量的信息。通常，表格最好用来展示文字内容,而且经常以导航的方式出现在分栏视图的一侧,另一侧显示相关内容。在iOS中，表单有常规和分组两种样式。表单视图3.2.13表单视图文字视图（TextViews）用于显示多行样式的文本内容。文本视图可以是任何高度，当内容扩展到视图之外时使用滚动。默认情况下，文本视图中的内容是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，在用户点击视图时会出现键盘。文字视图3.2.14文字视图网络视图（WebViews）直接在应用中加载和显示丰富的网站内容，如嵌入式HTML和网站。典型的有，邮箱在消息中，使用网络视图显示HTML内容。网络视图3.2.15网络视图3.3控件课堂案例——制作旅游类APP酒店列表页按钮编辑菜单标签页面控件选择器进度指示器刷新分段控件课堂案例——制作旅游类APP美食筛选页滑块步进器开关文本框使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用横排文字工具输入文字，使用圆角矩形工具绘制基本形状。效果图3.3.1课堂案例——制作旅游类APP酒店列表页按钮（Buttons）适用于于应用程序的特定操作，由标题或图标组成，并支持自定义。1.系统按钮系统按钮（SystemButtons）可以在任何地方使用，但通常显示在导航栏和工具栏中。系统按钮3.3.2按钮2.详细信息按钮详细信息按钮（DetailDisclosureButtons）的触发可打开一个视图（通常是模态视图）包含附加信息或本屏内相关选项的特定功能。详细信息按钮3.3.2按钮3.信息按钮信息按钮（InfoButtons）的触发可在视图翻转后，显示有关应用程序的配置详细信息，信息有时会显示在当前视图的背面。信息按钮有浅色和深色两种风格。信息按钮3.3.2按钮4.添加联系人按钮用户可以点击添加联系人按钮（AddContactButtons）来浏览现有联系人列表，并选择一个用于插入文本字段或其他视图，例如，在邮件中，可以点击邮件收件人字段中的添加联系人按钮，从联系人列表中选择收件人。添加联系人按钮3.3.2按钮编辑菜单（EditMenus），用户可以双击或触摸并按住文本字段、文本视图，Web视图或图像视图中的元素以选择内容并显示编辑选项，例如复制和粘贴。编辑菜单3.3.3编辑菜单标签（Labels）描述屏幕界面元素或提供短消息。虽然用户无法编辑标签，但有时候可以复制标签里的内容。标签可以显示任意数量的静态文本，但最好保持简短。标签3.3.4标签页面控件（PageControls）页面控件显示当前页面在平面页面列表中的位置。它以一系列小指示点的形式出现，表示可用页面的打开顺序，其中实心点表示当前页面。页面控件3.3.5页面控件选择器（Pickers）由一个或多个不同值的可滚动列表组成，每个值都具有单个选定值。选择器出现时，页面都有深色遮罩，通常显示在屏幕底部或弹出窗口中。选择器的高度通常是是五行列表值的高度，宽度可以是屏幕的宽度或其封闭视图，具体视页面情况而定。选择器3.3.6选择器1.日期选择器日期选择器（DatePickers）是一个有效的接口，用于选择特定的日期、时间或两者兼而有之。它还提供了一个显示倒计时计时器的接口。选择器3.3.6选择器3.3.7进度指示器进度指示器（ProgressIndicators），主要不让用户坐在那里盯着静态屏幕，等待应用程序加载内容或执行冗长的数据处理操作。使用活动指示器和进度条让用户知道应用程序没有停顿，并让用户清楚还要等待多长时间。1.活动指示器活动指示器（ActivityIndicators）随着无法量化的任务旋转，如随着加载或同步复杂的数据进行。任务完成时它就会消失。活动指示器不具备交互。活动指示器3.3.7进度指示器2.进度条活动指示器（ProgressBars）通过从左到右填充轨迹显示任务已持续时间。进度条是虽然可以伴有用于取消相应操作的按钮，但本身也不具备交互。进度条3.3.7进度指示器3.网络活动指示器在没有边缘到边缘显示的设备上，当联网时，网络活动指示器（NetworkActivityIndicators）会在屏幕顶部的状态栏中旋转，网络完成后会消失。该指示器看起来就像一个活动指示器，并且不具备交互。进度条3.3.7进度指示器手动启动刷新控件（RefreshContentControls）就会立即重新加载内容，通常在表视图中，而无需等待就会自动完成下一次内容更新。刷新控件是一种特殊类型的活动指示器，默认情况下是隐藏的，拖动列表页时自动变可见并且重新加载内容。例如，在邮件中，用户可以向下拖动收件箱邮件列表以检查新邮件。刷新控件3.3.8刷新分段控制（SegmentedControls）是两个或多个段的线性集合，每个分段卡都是独立的按钮。在控件内，所有段的宽度相等。像按钮一样，分段卡可以包含文本或图像。分段控件通常用于显示不同的视图。例如，在地图中，分段控件可让用户在地图，公交和卫星视图之间切换。分段控件3.3.9分段控件使用移动工具移动素材，使用横排文字工具输入文字，使用椭圆工具、矩形工具、圆角矩形工具、直线工具绘制基本形状。效果图3.3.10课堂案例——制作旅游类APP美食筛选页滑块（Sliders）是具有水平轴通过拇指滑动的交互控件，用户可以用手指滑动在最小和最大值之间移动，例如调整屏幕亮度级别或媒体播放期间的位置。当滑块的值改变时，最小值和拇指之间的轨迹部分用颜色填充。滑块可以选择性地显示左右图标，说明最小值和最大值的含义。滑块3.3.11滑块步进器（Steppers）是用于增加或减少增量值的两段控制。默认情况下，步进器的一段显示加号，另一段显示减号。如果需要，可以用自定义图像替换这些符号。进步器3.3.12步进器开关（Switch）允许用户切换“打开”和“关闭”两种相互排斥的状态。开关3.3.13开关文本框（TextFields）是单行，有固定高度，通常带有圆角，当用户点击它时会自动调出键盘。使用文本框来可获得少量信息，例如电子邮件地址。文本框3.3.14文本框使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、圆角矩形工具、直线工具绘制基本形状。效果图3.4课堂练习——制作旅游类APP酒店详情页使用移动工具移动素材，使用横排文字工具输入文字，矩形工具、直线工具绘制基本形状。效果图3.5课后习题——制作旅游类APP预约美食页第4章Android系统界面设计本章介绍：Android系统界面是移动UI设计中最重要的部分之一，它直接影响着用户使用App的体验。本章对Android系统界面设计中的栏和组件进行系统讲解与演练。通过本章的学习，读者可以对Android系统界面设计有一个基本的认识，并快速掌握绘制Android系统界面的规范和方法。掌握Android界面设计中的栏掌握Android界面设计中的组件学习目标掌握医疗类APP闪屏页的绘制方法掌握医疗类APP首页的绘制方法掌握医疗类APP医生列表页的绘制方法掌握医疗类App医生介绍页的绘制方法掌握医疗类App医生筛选页的绘制方法掌握医疗类App预约页的绘制方法技能目标课堂案例——制作医疗类APP闪屏页状态栏系统导航栏4.1栏使用移动工具移动素材，使用矩形工具、椭圆工具和多边形工具绘制基本形状，使用横排文字工具输入文字。效果图4.1.1课堂案例——制作医疗类APP闪屏页Android状态栏（上）应用栏顶部的Android状态栏（下）4.1.2状态栏状态栏（Statusbar）位于手机界面的顶部，高度是24dp。在Android中，状态栏包含通知图标和系统图标。

系统导航栏（Androidnavigationbar）位于手机的最下方，导航控件由返回、主界面、最近任务组成。暗（上）明（下）4.1.3系统导航栏

课堂案例——制作医疗类APP首页底部应用栏顶部应用栏背板横幅底部导航课堂案例——制作医疗类APP医生列表页按钮4.2组件悬浮动作按钮卡片纸片数据表课堂案例——制作医疗类APP医生介绍页对话框分割线图片组列表菜单抽屉式导航状态指引课堂案例——制作医疗类APP医生筛选页按钮选择控件底部面板侧面板4.2组件滑块底部提示栏课堂案例——制作医疗类APP预约页选项卡文字框提示使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。效果图4.2.1课堂案例——制作医疗类APP首页底部应用栏（Appbars:bottom）用于显示屏幕底部的导航抽屉和按键操作。底部应用栏4.2.2底部应用栏顶部应用栏（Appbars:top）用于顶显示与当前屏幕相关的信息和操作。顶部应用栏4.2.3顶部应用栏应用程序的某个操作，都会出现一个背板（Backdrop），显示相关信息和可操作的内容。背板4.2.4背板横幅（Banner）在这里不是指广告，而是顶部应用栏下面的第一个凸显区域，显示突出的消息和相关的可选操作。横幅4.2.5横幅底部导航（Bottomnavigation）将底部宽度等分为多个图标的点击区域，每个区域都由一个图标和一个可选的文本标签表示，用于连接应用程序中的主要架构。底部导航4.2.6底部导航使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具和椭圆工具绘制基本形状，使用横排文字工具输入文字。效果图4.2.7课堂案例——制作医疗类APP医生列表页按钮（Buttons）通过用户点击即可进行反馈并执行的组件。4.2.8按钮浮动操作按钮（Buttons:floatingactionbutton）简称“FAB”，主要执行屏幕上主要的和最常见的操作。浮动操作按钮4.2.9悬浮动作按钮卡片（Cards）是单个主题内容和操作的集合。卡片4.2.10卡片纸片（chips）是表示输入、属性或操作的紧凑元素，如邮件添加邮件人的操作。纸片4.2.11纸片数据表（Datatables）显示数据集。数据表4.2.12数据表使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。效果图4.2.13课堂案例——制作医疗类APP医生介绍页4.2.14对话框对话框（Dialogs）是一种模态对话框，出现在应用程序内容的前面，主要通知用户关于任务的信息，可以包含关键信息、命令判断或更多任务信息。分割线（Dividers）是一条细线，用于对列表和布局中的内容进行分组。分割线4.2.15分割线图片组（Dividers）是有秩序地显示图像。图片组4.2.16图片组4.2.17列表列表（Lists）是一组连续的文本或图像。列表4.2.18菜单菜单（Menus）是临时显示表面上的选项列表。菜单(下拉菜单)4.2.19抽屉式导航抽屉式导航（Navigationdrawer）可以访问应用中的目标及功能，例如切换账户。抽屉式导航状态指引（Progressindicators）表示未标明的等待时间或显示进程的长度。状态指引4.2.20状态指引使用移动工具移动素材，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。效果图4.2.21课堂案例——制作医疗类APP医生筛选页4.2.22选择控件选择控件（Selectioncontrols）允许用户选择选项。选择控件4.2.23底部面板底部面板（Sheets:bottom）是包含附加内容的表面，这些内容固定在屏幕的底部。选择控件侧面板（Sheets:side）是包含附加内容的表面，这些内容固定在屏幕的左边缘或右边缘。侧面板4.2.24侧面板4.2.25滑块滑块（Sliders）允许用户从一系列值中进行选择。滑块底部提示栏（Snackbars）是在屏幕底部提供有关应用程序进程的简短消息。底部提示栏4.2.26底部提示栏使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工具输入文字。效果图4.2.27课堂案例——制作医疗类APP预约页选项卡（Tabs）允许在相关且处于相同层次结构的内容组之间进行导航。选项卡4.2.28选项卡文字框（Textfields）允许用户输入和编辑文本。文字框4.2.29文字框提示（Tooltips）是当用户点按元素时，工具提示会显示信息性文本。提示4.2.30提示使用移动工具移动素材，使用置入命令置入图片，使用矩形工具、圆角矩形工具和钢笔工具绘制基本形状，使用横排文字工具输入文字。效果图4.3课堂练习——制作医疗类APP输入信息页使用移动工具移动素材，使用置入命令置入图片，使用剪贴蒙版命令调整图片显示区域，使用矩形工具、圆角矩形工具、椭圆工具和直线工具绘制基本形状，使用横排文字工