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

本章介绍：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在载入内容或执行长时间操作时未卡死。进度条的轨道默认包括已填充和未填充两部分。在导航栏或工具栏中使用进度条时，例如显示页面载入，请将其配