《Photoshop 移动UI设计案例教程（全彩慕课版）（第2版）》课件 第3、4章 iOS系统界面设计、Android系统界面设计

本章介绍：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购物车页复选框纸片菜单单选按钮滑块开关使用矩形工具和