《Photoshop 移动UI设计案例教程（全彩慕课版）（第2版）》课件全套 刘军伟 第1-5章 初识移动UI设计- App界面设计实战

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

移动UI设计的相关概念UI设计的概念移动UI设计的概念App的概念用户界面（UserInterface，UI）设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。优秀的UI设计不仅要保证界面的美观，更要保证交互设计（InteractionDesign,IxD）的可用性强，用户体验（UserExperience，UE/UX）的友好度高。1.1.1UI设计的概念移动UI设计是UI设计的一个分支，主要是指针对移动设备软件的交互操作逻辑、用户情感化体验、界面元素美观的整体设计。移动UI设计因其设备的独特性，较其他类型的UI设计具有更严格的尺寸要求及手机系统限制。1.1.2移动UI设计的概念App是应用程序Application的缩写，一般指智能手机的第三方应用程序。用户主要从应用商店下载App，比较著名的应用商店有苹果的AppStore、谷歌的GooglePlayStore等。1.1.3App的概念1.2

移动UI设计的操作平台iOS系统平台Android系统平台iOS是由美国苹果公司开发，专门用于苹果移动设备中的操作系统。iOS截止到2023年已经更新到了iOS17，不管是设备的改革还是系统的更新，iOS都为用户带来了全新的体验。对于UI设计而言，需要快速进行iOS设计规范相关知识的更新。本书在规范章节深入剖析了相关知识，帮助UI设计师进行知识的升级。1.2.1iOS系统平台Android系统是最初由安迪·鲁宾（AndyRubin）开发的，2005年8月被谷歌收购，2008年10月，第一款Android系统的智能手机发布。1.2.2Android系统平台1.设计极简随着全面屏手机的发行，移动设备的屏幕较之前在尺寸上有了较大的提升，但相对于PC和笔记本电脑还是较小。因此，要在有限的空间中进行元素的设计不宜太过复杂，不然不利于信息的传递。1.3移动UI设计的特点2.交互丰富2007年1月，乔布斯在旧金山发布了第一代iPhone，开启了移动设备的智能化。智能化的移动设备较之前传统手机拥有着更加友好的用户体验，这源于它的多点触摸屏和传感器。由此造就了手势交互、语音交互、重力感应交互等一系列更加丰富的交互方式。3.设计适配由于现有的智能手机、平板电脑型号呈现多样化，设计师在进行设计时，应充分考虑文字、图标、图像甚至是界面布局等适配的问题。就移动应用来说，设计师通常会选用一款常用的、方便适配的屏幕尺寸进行设计，而后不必再大规模对其他尺寸屏幕的界面进行重新布局，只需针对不同屏幕尺寸进行切图输出，然后再交由技术端进行适配即可。1.4移动UI设计的常用软件界面设计类软件动效设计类软件网页设计类软件3D渲染类软件思维导图设计类软件交互原型设计类软件1.PhotoshopPhotoshop，简称“PS”，是由Adobe公司开发和发行的图像处理软件，截止2023年，已经更新到CC2024。在Sketch出现之前，PS是大部分UI设计师进行界面设计的首选工具。1.4.1界面设计类软件2.SketchSketch是基于苹果电脑系统的一款收费型专业制作UI的工具，如为Sketch官方网站新功能介绍截图。相较PS，它是一款可以迅速上手的轻量级矢量设计工具，不仅UI设计师常用，就连产品经理和前端开发人员都能够迅速掌握，减少了沟通合作中的问题。3.IllustratorIllustrator，简称“AI”，是由Adobe公司开发和发行的矢量图形处理软件，截止2023年，已经更新到CC2024。AI在UI设计中除了被广泛应用于插画设计，在图标制作中也显示了超凡的性能。4.ExperienceDesignExperienceDesign，简称“XD”，是由Adobe公司开发和发行的集原型、设计和交互于一体的软件，并于2016年3月发布了正式预览版本。XD的简洁弥补了PS在制作UI方面的“臃肿”，同时它免费并兼容Windows和mac双平台的平民化特点又是Sketch无法比拟的。1.AfterEffectsAfterEffects，简称“AE”，是由Adobe公司开发和发行的图形视频处理软件，截止2023年，已经更新到CC2024。无论是经典的插件还是强大的表达式，都使得AE制作出来的动效变得细腻入微。1.4.2动效设计类软件2.PrinciplePrinciple是基于苹果电脑系统的一款收费型专业制作动效的工具。相较于AE性能综合、体量较大，Principle的优势在于上手容易、操作简单，而且它还能在计算机上实时预览，并在手机上进行交互，不像AE只能导出GIF动画和MP4视频，无法与手机交互。Dreamweaver，简称“DW”，开始由美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是一款集网页制作和管理网站于一身的网页代码编辑器，拥有所见即所得的功能特点。1.4.3网页设计类软件CINEMA4D，简称“C4D”，是德国MAXON公司开发的一款能够进行顶级建模、动画和渲染的3D动画软件。其功能非常强大，更能和PS、AI、AE等各类软件进行无缝结合。1.4.43D渲染类软件1.MindjetMindManagerMindjetMindManager，俗称“脑图”，又叫“心智图”，由美国Mindjet公司开发，不仅是一款可以创造、管理和交流思想的绘图软件，还是一款项目管理软件。1.4.5思维导图设计类软件2.XMindXMind同MindjetMindManager有着一样的功能，也是一款非常实用的商业思维导图软件。思维导图类软件在UI设计方面没有太大的区别，一般根据个人喜好来选用。1.AxureRPAxureRP，通常称为“Axure”，是一款专业的快速原型设计工具，于2021年开放了10.0的下载。在10.0的更新中，Axure对设计架构进行了颠覆式的改变，令软件的使用效率及体验友好度都大大幅增加。1.4.6交互原型设计类软件2.墨刀墨刀是国内开发的一款在线型原型设计工具，于2017年6月开放了V3版本的下载。在V3中，墨刀进行了全面更新，除了品牌和组件的升级优化，还支持了Sketch文件的导入并加入了工作流的功能，这使得墨刀更加强大。1.5

移动UI设计的项目流程分析调研交互设计交互自查界面设计界面测试设计验证移动设计的流程可以按照分析调研、交互设计、交互自查、界面设计、界面测试、设计验证的步骤来进行。1.5

移动UI设计的项目流程App的设计是根据品牌的调性、产品的定位而进行的，不同定位的App，设计风格也会有区别。因此要先分析需求，了解用户特征，并进行相关竞品的调研，明确设计方向。1.5.1分析调研交互设计是对整个App设计进行初步构思和制定的环节。一般需要进行纸面原型设计、架构设计、流程图设计、线框图设计等具体工作。1.5.2交互设计交互设计完成之后，进行交互自查是整个App设计流程中非常重要的一个阶段。可以在执行界面设计之前检查出是否有遗漏的细节问题。1.5.3交互自查原型图审查通过后，就可以进入界面的视觉设计阶段了，这个阶段的设计图即产品最终呈现给用户的界面。界面设计要求设计规范，图片、内容真实，并运用墨刀、principle等软件制作成可交互的高保真原型以便后续的界面测试。1.5.4界面设计界面测试阶段是让具有代表性的用户进行典型操作，设计人员和开发人员在此阶段共同观察、记录。在测试中可以对设计的细节进行相关的调整。1.5.5界面测试设计验证是最后一个阶段，是为App进行优化的重要支撑。在产品正式上线后，通过用户的数据反馈进行记录，验证前期的设计，并继续优化。1.5.6设计验证1.6

移动UI设计的学习方法软件学习开拓眼界临摹学习项目实战软件的学习是UI设计的刚需和基础，设计师即使有再好的想法，但不能通过软件制作出来也是徒劳。我们主要需要掌握的软件有Photoshop、Illustrator和AfterEffects，有条件的设计师还可以学习Sketch和Principle。1.6.1软件学习眼界的开拓至关重要，许多UI设计师无法做出美观的界面就是没有看到太多优秀的设计。第1种：阅读优秀设计师的文章，吸收优秀设计师的经验。第2种：阅读优秀书籍，系统的学习UI设计的相关知识和设计应用方法。第3种：欣赏优秀的作品。1.6.2开拓眼界眼界开拓后，需要进行相关的设计临摹。临摹的来源首先推崇的是从应用中心下载优秀的App，截图保存进行临摹。其次可以寻找文章、书籍、网站中的优秀案例进行临摹。临摹一定要保证完全一样并且要多临摹。1.6.3临摹学习经过一定的积累，最好通过一套完整的企业项目来提升。从原型图到设计稿再到切图标注，甚至可以制作成动效Demo。一整套项目的实战，会让我们在设计能力上有质的提升。1.6.4项目实战本章介绍：设计规范在移动UI设计的工作中有着保证视觉统一性、提升项目工作效率、提升设计细节等诸多好处。本章对iOS系统以及Android系统的基础设计规范进行讲解。通过本章的学习，读者可以对移动UI设计的基础规范有一个基本的认识，有助于高效便利地进行移动UI设计工作。第二章移动UI设计规范了解移动UI设计的设计单位掌握移动UI设计的基本布局掌握移动UI设计的文字规范掌握移动UI设计的图标规范掌握移动UI的设计尺寸熟练搭建移动UI的网格系统熟练设置动移UI的字号掌握适配移动UI的不同设备学习目标2.1iOS系统设计规范iOS设计单位及尺寸iOS界面结构iOS基本布局iOS字体规范iOS图标规范1.相关单位•PPI：像素密度（PixelsPerInch，PPI）。•Asset：比例因子。•物理像素、渲染像素和逻辑像素2.1.1iOS设计单位及尺寸2.设计尺寸iOS常见的设备尺寸如图。在进行界面设计时，为了适配大部分尺寸，推荐以iPhone14Pro/15/15Pro为基准。如果使用Photoshop就创建786px×1704px尺寸的画布，如果使用Sketch就建立393pt×852pt尺寸的画布。在iOS系统中，界面通常由状态栏、导航栏、安全设计区以及标签栏组成。自全面屏上市，界面较之前还多了虚拟主页键。2.1.2iOS界面结构1.网格系统网格系统，英文名称“GridSystems”，又称为“栅格系统”。在APP中，是利用一系列垂直和水平的参考线，将页面分割成若干个有规律的列或格子，再以这些格子为基准，进行页面的布局设计，使布局规范简洁有秩序。2.1.3iOS基本布局2.组成元素网格系统由①列、②水槽以及③边距三个元素组成。列是内容放置的区域。水槽是列与列之间的距离，有助于分离内容。边距是内容与屏幕左右边缘之间的距离。3.网格运用•单元格：iOS的最小点击区域是44pt，即88px（@2x）。因此，在适用性方面，能被整除的偶数4和8作为iOS最小单元格比较合适。其中4px容易将页面切割细碎，所以比较推荐使用8px。•列：列的数量有4、6、8、10、12、24这几种情况。其中4列通常在2等分的简洁页面时使用，6、12和24基本满足所有等分情况，然而24列将页面切割太碎，因此实际使用还是以12列和6列为主。•水槽：水槽、边距以及横向间距的宽度可以依照最小单元格8px为增量进行统一设置，如24、32、40。其中32px（16pt@2x）最为常用。•边距：边距的宽度也可以与水槽有所区别。在iOS中以@2x为基准,常见的边距有20px、24px、30px、32px、40px以及50px。边距的选择应结合产品本身的气质，其中30px是最为舒适的边距，也是绝大多数APP首选的边距。iOS中的设置及通用页面都采用了30px的边距。1.系统字体旧金山字体：旧金山字体是非衬线字体，如图2-13所示，其中SF字体有SFUIText（文本模式）和SFUIDisplay（展示模式）两种尺寸。SFUIText（文本模式）适用与小于19pt的文字，SFUIDisplay（展示模式）适用于大于20pt的文字。2.1.4iOS字体规范纽约字体：纽约字体是衬线字体，旨在补充旧金山字体。对于小于20pt的文本使用小号，对于20到35pt之间的文本使用中号，对于36到53pt之间的文本使用大号，对于54pt或更大的文本使用特大号。苹方：在iOS系统中，中文使用的是苹方字体，该字体共有6个字重。2.字号大小iOS设计时要注意字号的大小。苹果官网的建议全部是针对英文SF字体而言的，中文字体需要UI设计师灵活运用，以最终呈现效果的实用性和美观度为基准进行调整。在iOS中，图标规范可以从应用图标和系统图标两个方面进行详尽的剖析。2.1.5iOS图标规范2.2Android系统设计规范Android设计单位及尺寸Android界面结构Android基本布局Android字体规范Android图标规范1.相关单位•DPI：网点密度（DotPerinch，DPI）•独立密度像素与独立缩放像素2.2.1Android设计单位及尺寸2.设计尺寸Android常见的设备尺寸可以分成大小两类。Android和iOS一样，只是叫法不同。在Android中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成。2.2.2Android界面结构在iOS中已经剖析了网格系统及其组成元素，因此在Android布局中不再赘述，直接进行Android中网格的布局。•单元格：Android的最小点击区域是48dp，因此能被整除的偶数4和8作为Android最小单元格比较合适。2.2.3Android基本布局•列：列的数量在手机设备上推荐4列，平板电脑上推荐8列。右侧为平板电脑列的数量。•水槽：水槽和边距的宽度在手机设备上推荐16dp，平板电脑上推荐24dp。•边距：边距的宽度可以和水槽统一，也可以根据产品和水槽不同。当Android中边距的宽度和水槽不同时，其宽度的设置具体可以参考iOS布局中边距的宽度。1.系统字体Android英文使用的是Roboto字体，共有6个字重。中文使用的是思源黑体，又称为“SourceHanSans”或“Noto”，共有7个字重。2.2.4Android字体规范2.字号大小Android设计时要注意字号的大小。Android各元素以720x1280px为基准设计，可以与iOS对应，其常见的字号大小：24px、26px、28px、30px、32px、34px，36px等，最小字号为20px。在Android中，图标规范可以根据MaterialDesign设计语言，从应用图标和系统图标两个方面进行详尽的剖析。2.2.5Android图标规范本章介绍：iOS系统界面设计是移动UI设计中最重要的部分之一，它直接影响着用户使用App的体验。本章对iOS系统界面设计中的内容、布局和组织、菜单和操作、导航和搜索、展示、选择和输入以及状态进行系统讲解与演练。通过本章的学习，读者可以对iOS系统界面设计有一个基本的认识，并快速掌握绘制iOS系统界面的规范和方法。第三章iOS系统界面设计掌握iOS系统界面设计中的内容掌握iOS系统界面设计中的布局和组织掌握iOS系统界面设计中的菜单和操作掌握iOS系统界面设计中的导航和搜索掌握iOS系统界面设计中的呈现方式掌握iOS系统界面设计中的选择和输入掌握iOS系统界面设计中的状态学习目标3.1内容课堂案例——制作旅游类App闪屏页图表图像视图文本视图网页视图使用置入嵌入对象命令置入图像，使用颜色叠加命令添加效果。3.1.1课堂案例——制作旅游类App闪屏页以图表形式组织数据可让信息传达更清晰并更具视觉吸引力。图表由多个图形元素组成，这些元素描绘数据集中的值并传达这些值的相关信息。3.1.2图表图像视图在透明或不透明背景上显示单张图像（某些情况下显示图像的动态序列）。在图像视图内，可以拉伸、缩放图像，调整图像大小以适合，或者将图像固定到特定位置。图像视图通常不可交互。3.1.3图像视图文本视图会显示样式化的多行文本内容，这些内容可否编辑是可选的。文本视图可以是任意高度，并在内容扩展到视图之外时允许滚动。文本视图中的内容默认与前缘对齐，并使用系统标签颜色。在iOS中，如果文本视图可编辑，键盘会在用户选择该视图时出现。3.1.4文本视图网页视图可直接在你的App内加载和显示丰富的网页内容，例如嵌入的HTM和网站。3.1.5网页视图3.2布局和组织课堂案例——制作旅游类App酒店详情页方框集合显示控件标签列表和表格使用矩形工具、椭圆工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作弥散投影，使用横排文字工具输入文字。3.2.1课堂案例——制作旅游类App酒店详情页方框为在逻辑上相关的信息和组件创建了具有独特视觉特征的分组。方框默认使用可见边框或背景颜色将其内容与界面的其他部分分开。方框也可以包括标题。3.2.2方框集合管理一组有序的内容，并以可自定义和高度可视化的布局呈现。一般来说，集合适合于显示基于图像的内容。3.2.3集合显示控件用于显示和隐藏特定控件或视图相关的信息和功能。3.2.4显示控件标签是一段可供用户阅读的静态文本，通常可以拷贝，但不能编辑。标签用于在界面各处、按钮、菜单项和视图中显示文本，以帮助用户了解当前上下文和接下来可执行的操作。3.2.5标签列表和表格在行中的一列或多列内呈现数据。表格或列表可呈现以群组或层级结构组织的数据，还可支持选择、添加、删除和重新排序等用户交互。在iOS系统中，信息按钮显示列表项的相关详细信息；它不支持导览。显示指示符会显示层级结构中的下一级，而不会显示项目相关的详细信息。3.2.6列表和表格3.3菜单和操作课堂案例——制作旅游类App个人中心页活动视图按钮上下文菜单编辑菜单菜单弹出式按钮下拉式按钮工具栏使用矩形工具、椭圆工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用渐变叠加命令添加效果，使用属性面板制作弥散投影，使用横排文字工具输入文字。3.3.1课堂案例——制作旅游类App个人中心页活动视图通常称为共享表单，呈现用户在当前环境中可执行的一系列任务。用户习惯在选取“共享”按钮时访问系统提供的活动。避免提供另一种执行相同任务的方式，否则可能会令用户感到困惑。3.3.2活动视图按钮用于发起瞬时操作。当需要为无法立即完成的操作提供相关反馈时，配置按钮以显示活动指示符。3.3.3按钮上下文菜单可让用户访问与项目直接相关的功能，并且不会导致界面杂乱。虽然上下文菜单提供了访问常用项目的便捷方式，但它默认隐藏，因此用户可能不知道它的存在。为了显示上下文菜单，用户通常会选取视图或选择一些内容，然后使用其当前配置支持的输入模式执行操作。如：在iOS中系统定义的按住或捏住手势。3.3.4上下文菜单编辑菜单除了提供“拷贝”、“选择”、“翻译”和“查询”等相关命令，还可让用户在当前视图中对所选内容进行更改。除了文本，编辑菜单的命令还可应用到多种类型的可选择内容，如图像、文件以及联系人名片、图表或地图位置等对象。从iOS16起，系统会自动检测所选项目的数据类型，并可能随之在编辑菜单中增加相关操作。如，选择地址可在编辑菜单中增加获取路线等项目。3.3.5编辑菜单菜单会在用户与其交互时显示其选项，从而在App或游戏中以高效利用空间的方式呈现命令。菜单在整个界面中随处可见，因此大多数用户已经知道如何使用。当用户在App或游戏中以一致的方式使用菜单时，它可以帮助用户打造熟悉且易于学习的体验。3.3.6菜单弹出式按钮显示互相排斥选项的菜单。当用户从弹出式按钮的菜单中选取一个项目后，菜单会关闭，按钮可更新其内容以指示当前所选内容。3.3.7弹出式按钮下拉式按钮显示与按钮用途直接相关的项目或操作菜单。用户在下拉式按钮的菜单中选择一项后，菜单会关闭，App会执行所选操作。考虑使用“更多”下拉式按钮来呈现不需要在主界面中占据突出位置的项目。3.3.8下拉式按钮工具栏可让用户便捷访问执行当前视图相关操作的常用命令和控件。事先考虑内容位于工具栏下方时的工具栏半透明效果，左侧为工具栏后未显示内容时，背景材质不会出现。右侧为当内容出现在工具栏后面时，背景材质会发生改变以和内容区分。3.3.9工具栏3.4导航和搜索课堂案例——制作旅游类App首页导航栏搜索栏边栏标签栏使用矩形工具、椭圆工具和钢笔工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用渐变叠加命令添加效果，使用属性面板制作弥散投影，使用横排文字工具输入文字。3.4.1课堂案例——制作旅游类App首页导航栏显示在窗口或屏幕顶部，帮助用户导航内容层级结构。使用大标题帮助用户在导航和滚动时始终清楚其所在位置。当用户开始滚动内容时，大标题会默认转换为标准标题，并在用户滚动到顶部时变回大标题，从而提醒当前的所在位置，左侧为标准标题，右侧为大标题。3.4.2导航栏搜索栏可让用户按输入的特定词来搜索一系列内容。在iOS系统中中，可以使用范围栏帮助用户细化搜索的范围。3.4.3搜索栏边栏提供了对顶层内容集合的快速访问，可帮助用户导航App或游戏。在App中，边栏指的是顶层区域和集合的列表，几乎始终显示在拆分视图的主要面板中。3.4.4边栏标签栏可帮助用户理解视图提供的不同类型信息或功能，还可让用户在视图的不同部分之间快速切换，同时保留各个部分中的当前导览状态。标签栏可以是常规型或紧凑型，具体取决于当前的设备和方向。3.4.5标签栏3.5呈现方式课堂案例——制作旅游类App引导页操作表单提醒页面控件弹窗滚动视图表单窗口使用置入嵌入对象命令置入图像和图标，使用渐变叠加命令和颜色叠加命令添加效果，使用横排文字工具输入文字，使用矩形工具绘制按钮。3.5.1课堂案例——制作旅游类App引导页操作表单是一种模态视图，呈现与用户所发起操作相关的选项。3.5.2操作表单提醒会为用户提供其立即所需的关键信息。3.5.3提醒页面控件显示一行指示符图像，其中每个都代表扁平列表中的一个页面。避免在一个页面控件中使用两个以上不同指示符图像，左侧仅使用两个不同的指示符看上去井然有序，并提供了一致的使用体验，使用几个不同的指示符可能会使页面控件看起来眼花缭乱，且不易使用。3.5.4页面控件弹出窗口是一种瞬态视图，当用户点按或轻点控件或交互区域时，它会显示在其他内容之上。3.5.5弹窗滚动视图让用户通过垂直或水平移动内容来查看超出视图边框的内容。滚动视图本身没有外观，但是，通常在用户开始滚动视图内容后，它可以显示出半透明滚动指示符。虽然滚动指示符的外观和行为可能会因各个平台而异，但所有指示符都会提供有关滚动操作的视觉反馈。如在iOS中，指示符会显示当前可见内容是位于视图的开头、中间还是结尾附近。3.5.6滚动视图表单可帮助用户执行与其当前环境密切相关的小范围任务。表单默认是模态表单，呈现一种有针对性的体验，让用户在关闭表单前无法与父视图交互。在向用户请求特定信息或呈现用户可在返回父视图前完成的简单任务时，模态表单非常有用。3.5.7表单窗口包含呈现App或游戏用户界面的视图和组件。窗口（或场景）可能无法被用户察觉，具体取决于平台、设备和环境。如在iOS平台中，全屏幕是默认的使用体验。用户查看窗口中的内容并与之交互，而不是查看或与窗口本身交互。在这些情况下，你无需在App或游戏中设计窗口或场景本身的外观。3.5.8窗口3.6选择和输入课堂案例——制作旅游类App登录页颜色池选择器分段控件滑块步进器文本栏切换虚拟键盘使用矩形工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用颜色叠加命令添加效果，使用横排文字工具输入文字。3.6.1课堂案例——制作旅游类App登录页颜色池可让用户调整文本、形状、参考线和其他屏幕元素的颜色。3.6.2颜色池选择器显示包含不同值的一个或多个可滚动列表供用户从中选择。系统提供了多种样式的选择器，每种选择器又提供了不同类型的可选择值且外观各异。选择器中所显示的确切值及其顺序取决于设备语言。3.6.3选择器分段控件是两个或多个分段组成的线性集，每个分段用作一个按钮。分段控件中所有分段的宽度通常都相等。分段与按钮类似，也可以包含文本或图像。分段下方（或整个控件下方）也可以有文本标签。3.6.4分段控件滑块是一个包含称为“滚动块”的控件的水平轨道，可让用户在最小值和最大值之间进行调整。随着滑块值的变化，最小值和滚动块之间的轨道部分会用颜色填充。你可以选择为滑块显示分别表示最小值和最大值含义的左右图标。3.6.5滑块步进器是一个两段式控件，可用于增加或减少增量值。步进器位于显示当前值的栏位旁边，因为步进器本身不显示值。3.6.6步进器文本栏是一个矩形区域，用户可以在其中输入或编辑特定的小段文本。3.6.7文本栏切换可以让用户在一对相反的状态（比如开和关）之间进行选择，它会使用不同的外观来指示每个状态。在大多数情况下，默认的绿色往往效果最好，但也可以使用App的强调色代替。3.6.8切换在iOS中，系统提供各种类型的虚拟键盘，供用户用于输入数据，使用布局指南还有助于在屏幕上显示虚拟键盘时仍保持界面的重要部分可见。3.6.9虚拟键盘3.7状态课堂案例——制作旅游类App消息页仪表进度指示符使用圆矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用渐变叠加命令添加效果，使用属性面板制作弥散投影，使用横排文字工具输入文字。3.7.1课堂案例——制作旅游类App消息页仪表显示某个值范围内的特定数值。除了指示范围内的当前值，仪表还可提供关于范围本身的更多上下文。例如，温度仪表可使用文本来标识范围内的最高温和最低温，并显示色谱来从视觉上凸显变动的值。3.7.2仪表进度指示符告知用户App在载入内容或执行长时间操作时未卡死。进度条的轨道默认包括已填充和未填充两部分。在导航栏或工具栏中使用进度条时，例如显示页面载入，请将其配置为隐藏轨道的未填充部分。刷新控件可让用户立即重新载入内容（通常在表格视图中），无需等待内容下次自动更新。3.7.3进度指示符使用矩形工具、椭圆工具和直线工具绘制形状，使用置入嵌入对象命令置入图标，使用属性面板制作弥散投影，使用横排文字工具输入文字。3.8课堂练习——制作旅游类App订购房型页使用矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作弥散投影，使用横排文字工具输入文字。3.9课后习题——制作旅游类App定制路线页本章介绍：Android系统界面设计是移动UI设计中最重要的部分之一，它直接影响着用户使用App的体验。本章对Android系统界面设计中多种组件进行系统讲解与演练。通过本章的学习，读者可以对Android系统界面设计有一个基本的认识，并快速掌握绘制Android系统界面的规范和方法。第四章Android系统界面设计掌握Android系统界面设计中的操作组件掌握Android系统界面设计中的反馈组件Android系统界面设计中的容器组件掌握Android系统界面设计中的导航组件掌握Android系统界面设计中的选择组件掌握Android系统界面设计中的文本输入组件学习目标4.1操作组件课堂案例——制作家具类App详情页常规按钮扩展悬浮操作按钮悬浮操作按钮图标按钮分段按钮使用矩形工具、椭圆工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作弥散投影，使用横排文字工具输入文字，使用图案叠加命令制作背景。4.1.1课堂案例——制作家具类App详情页常规按钮用于提示UI中的大多数操作，传达用户可以采取的操作。它们通常放置对话框、模态窗口、表单、卡片、工具栏等移动UI界面中的组件中。它可以包含前置图标，通常细分为漂浮按钮、填充按钮、色调填充按钮、轮廓按钮和文本按钮五种类型。4.1.2常规按钮使用常规的悬浮操作按钮可能会不够清晰，因此可以使用扩展悬浮操作按钮。扩展悬浮操作按钮是最突出的按钮，用于执行屏幕上最常见或最重要的操作。在具有长滚动视图且需要持续访问操作的屏幕（例如结账屏幕）上使用扩展悬浮操作按钮。不要在无法滚动的视图中使用扩展悬浮操作按钮。其可以同时包含图标和标签文本。4.1.3扩展悬浮操作按钮悬浮操作按钮用于执行屏幕上最常见或最重要的操作，其图标必须清晰易懂，当内容滚动时扩展悬浮操作按钮始终保留在屏幕上。4.1.4悬浮操作按钮图标按钮用于帮助人们执行一些小动作，其图标必须使用含义明确的系统图标。悬停时，会显示按钮的操作提示。图标按钮可以代表“打开操作”，也可以代表“打开”和“关闭”的双重操作。图标按钮可以组合在一起，也可以单独存在。它通常细分为标准和包含两种类型。使用轮廓样式图标代表未选择状态，使用填充样式图标代表选择状态的图标。使用图标按钮需要以紧凑的布局显示操作。4.1.5图标按钮分段按钮用于帮助人们选择选项、切换视图或排序元素。分段按钮可以包含图标、标签文本或同时包含二者，通常细分为单选和多选两种类型，多用于两到五个项目之间的简单选择。4.1.6分段按钮4.2反馈组件课堂案例——制作家具类App分类页角标进度指示器底部提示栏工具提示使用矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用横排文字工具输入文字。4.2.1课堂案例——制作家具类App分类页角标用于显示导航项和图标上的通知、计数或状态信息。其包含标签或数字，通常细分为小型和大型两种类型。小角标是一个简单的圆圈，用于指示未读通知。大角标包含传达物品计数信息的标签文本。角标位于图标边框内，位于图标的右上方。包括“+”，将其内容限制为四个字符，并且保留默认颜色。4.2.2角标进度指示器用于实时显示进程状况，对所有的流程实例使用相同的进度指示器。它们传达应用程序的状态并指示可用的操作，如用户是否可以离开当前屏幕。当显示一系列流程的进度时，应指示整体进度而不是每个活动的进度。其通常可以细分为线性和圆形两种类型。同时切勿将它们用于装饰，它们通过运动吸引用户注意力。4.2.3进度指示器底部提示栏通常出现在屏幕底部，显示简短的应用程序流程更新，其可以自行消失或保留在屏幕上，直到用户采取操作，并且一次只能显示一个底部提示栏。底部提示栏可以包含单个操作。其中“关闭”或“取消”操作是可选的。底部提示栏传达的消息干扰性最小，并且不需要用户操作。底部提示栏不应中断用户的体验。4.2.4底部提示栏工具提示显示简短的标签或消息，使用工具提示向按钮或其他移动UI元素提供了附加的上下文。其通常细分为简单的工具提示和丰富的工具提示两种类型，丰富工具提示可以包括可选标题、链接和按钮。使用简单的工具提示来描述图标按钮的元素或操作，使用丰富的工具提示提供更多详细信息，例如描述功能的价值。4.2.5工具提示4.3容器组件课堂案例——制作家具类App个人中心页卡片走马灯对话框分隔线列表使用矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用属性面板制作弥散投影，使用横排文字工具输入文字。4.3.1课堂案例——制作家具类App个人中心页卡片是单个主题内容和操作的集合，使用卡片时会包含相关主题的元素，其内容可以包括图像、标题、文本、按钮和列表的任何内容，还可以包含其他组件。卡片应该易于扫描以获取相关且可操作的信息。放置在卡片上的文本和图像等元素应清晰指示层次结构。它通常细分为漂浮式、填充式、轮廓式三种类型。卡片根据其内容具有灵活的布局和尺寸。4.3.2卡片走马灯展示了一组可以在屏幕上滚动的视觉项目，包含图像或视频以及可选的标签文本。其通常可以细分为多浏览、无限制、游戏和全屏四种布局，可以开始对齐或中心对齐。4.3.3走马灯对话框在用户流中提供重要提示，使用对话框可以确保用户根据信息采取行动，多用于确认删除等高风险操作。其出现在应用程序内容前面的模式窗口，用于提供关键信息或要求做出决定。对话框出现时会禁用所有应用程序功能，并保留在屏幕上，直到确认、取消或采取所需操作。对话框是有意中断的，因此应谨慎使用。通常细分为基本和全屏两种类型。对话框应只完成单个任务，同时可以显示与任务相关的信息。4.3.4对话框分隔线是在列表或其他容器中将内容分组的细线条，分隔线可见但不能过粗。仅当无法用开放空间对项目进行分组时才使用分隔线，使用分隔线对项目组进行分组，而不是分割单个项目。其通常可以细分为全宽式和插入式两种类型。4.3.5分隔线列表是连续的、垂直的文本和图像索引，通常以数字等逻辑方式对列表项目进行排序。使用列表可以帮助用户找到特定项目并对其进行操作。其根据尺寸可以细分为一行、两行和三行三种类型。项目内容应简短且易于扫描，图标应和文本、操作格式一致。4.3.6列表4.4导航组件课堂案例——制作家具类App首页底部应用栏导航栏抽屉式导航导航轨道搜索选项卡顶部应用栏使用矩形工具、椭圆工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用渐变叠加命令添加效果，使用属性面板制作弥散投影，使用横排文字工具输入文字。4.4.1课堂案例——制作家具类App首页底部应用栏显示移动和平板电脑屏幕底部的导航和关键动作，使用底部应用栏可以引起用户对重要操作的注意。其最多可包含四个图标按钮和一个悬浮操作按钮。底部应用程序栏底部应用栏布局和内容可以在应用程序的不同屏幕上发生变化，同时在移动设备上更加便于访问。4.4.2底部应用栏导航栏曾经被命名为底部导航栏，允许用户在移动设备上切换用户界面视图。在紧凑的布局中使用导航栏，可以包含3-5个同等重要的导航，这些导航在应用程序屏幕上的设计风格应保持一致，不应发生改变。每个导航都由一个图标和可选的文本标签表示。当点击或聚焦导航栏图标时，用户将被带到与该图标关联的导航目的地。4.4.3导航栏抽屉式导航让用户在移动UI的设备上切换用户界面视图，可以提供对目的地和应用程序功能的访问，如切换帐户。它们可以永久显示在屏幕上，也可以通过导航菜单图标打开和关闭。4.4.4抽屉式导航导航轨道让用户可以在不同设备上的UI视图之间切换，建议在中等布局或扩展布局中使用导航轨道。其可包含3-7个导航以及可选的悬浮操作按钮。导航轨道始终将导航栏放在同一位置，即使在应用程序的不同屏幕上也是如此。4.4.5导航轨道搜索是一种导航方法，允许用户输入关键字或短语以快速获取相关信息，用户在搜索栏或搜索视图的中输入文本查询，然后查看相关结果。搜索栏可以包含前导的搜索图标和可选的尾随图标，在用户键入时搜索栏可以显示建议的关键字或短语，并始终在搜索视图中显示结果。4.4.6搜索选项卡跨不同屏幕和视图组织内容，使用选项卡将处于同一层次结构级别的内容进行分组。设计时应将选项卡作为对等项并排放置，选项卡可以水平滚动，因此移动UI可以根据需要拥有任意数量的选项卡。其通常可以细分为主选项卡和次选项卡两种类型。4.4.7选项卡顶部应用栏提供与当前屏幕相关的内容和操作，有时还会对关键旅程进行跨应用程序访问。顶部应用程栏与设备窗口具有相同的宽度，在滚动时，顶部应用程栏的颜色将与正文内容有所区分。其通常细分为中心对齐、小、中和大四种类型。4.4.8顶部应用栏4.5选择组件课堂案例——制作家具类App购物车页复选框纸片菜单单选按钮滑块开关使用矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用创建剪贴蒙版命令调整图片显示区域，使用属性面板制作弥散投影，使用横排文字工具输入文字。4.5.1课堂案例——制作家具类App购物车页复选框允许用户从列表中选择一项或多项，以及呈现包含子选择的列表。视觉上相似的选项应分组在一起，标签应简洁易读，选定的项目比未选定的项目更突出。4.5.2复选框纸片可以令用户输入信息、做出选择、过滤内容或触发操作，适合帮助用户更快、更轻松地完成当前任务。其通常细分为辅助、过滤、输入和建议四种类型。4.5.3纸片菜单在临时表面上显示选项列表，如顶部应用栏中的一组二级操作。它允许用户从多个选项中进行选择，占用的空间也更少。菜单在与元素（例如图标、按钮或输入字段）交互或用户执行特定操作时被打开，菜单显示的项目应简洁易读。4.5.4菜单单选按钮一次只能选择一个单选按钮，是允许用户从选项列表中进行单一选择的推荐方式。其选定的项目比未选定的项目更突出，标签应简洁易读。4.5.5单选按钮滑块允许用户沿轨迹查看和选择值或范围，它们适用于调整音量和亮度等设置，或应用图像滤镜。滑块应呈现可用的全部选择，可以使用图标或标签来表示数字或相对比例。其通常细分为连续和离散两种类型。4.5.6滑块开关可以打开或关闭项目，是让用户调整设置的最佳方式。如果列表中的项目可以独立控制，请使用开关，同时确保开关的选择一目了然。4.5.7开关4.6文本输入组件课堂案例——制作家具类App注册页文本域使用矩形工具、椭圆工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用横排文字工具输入文字。4.6.1课堂案例——制作家具类App注册页文本域允许用户在移动UI中输入文本，当用户需要填写联系信息或付款信息时，应使用文本域。文本域通常出现在表单和对话框中，并带给用户交互感。文本域的空白