《Photoshop 移动UI设计案例教程（全彩慕课版）（第2版）》课件 第4、5章 Android系统界面设计、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中输入文本，当用户需要填写联系信息或付款信息时，应使用文本域。文本域通常出现在表单和对话框中，并带给用户交互感。文本域的空白、可输入、错误等不同状态应一目了然，其通常细分为填充和轮廓两种类型。4.6.2文本域使用矩形工具和椭圆工具绘制形状，使用置入嵌入对象命令置入图片，使用横排文字工具输入文字。4.7课堂练习——制作家具类App引导页使用矩形工具和直线工具绘制形状，使用置入嵌入对象命令置入图片和图标，使用横排文字工具输入文字。4.8课后习题——制作家具类App搜索页本章介绍：App界面设计是产品用户体验里非常重要的一环。本章对App界面设计中的闪屏页、引导页、首页、个人中心页、详情页以及注册登录页系统讲解与演练。通过本章的学习，读者可以对App界面设计有一个比较深入的认识，并快速掌握绘制App界面的规范和方法。第五章App界面设计实战掌握App闪屏页的设计形式掌握App引导页的设计形式掌握App首页的设计形式掌握App详情页的设计形式掌握App个人中心页的设计形式学习目标5.1闪屏页品牌推广型活动广告型节日关怀型品牌推广型闪屏页是为表现产品品牌而设定。基本采用“产品logo+产品名称+产品”的简洁化设计形式。5.1.1

品牌推广型活动广告型闪屏页是为推广活动或广告而设定，通常将推广的内容直接设计在闪屏页内。多采用插画以及暖色的设计形式，用以营造热闹的氛围。5.1.2

活动广告型节日关怀型闪屏页是为营造节假日氛围同时凸显产品品牌而设定的。多采用“产品logo+内容插画”的设计形式，使用户感受到节日的关怀与祝福。5.1.3

节日关怀型5.2引导页功能说明型产品推广型功能说明型引导页是引导页中最基础的，主要对产品的新功能进行展示，常用于App重大版本的更新中。多采用插图的设计形式，达到短时间内吸引用户的效果。5.2.1

功能说明型产品推广型引导页是表达App的价值，让用户更了解这款App的情怀。多采用与企业形象和产品风格一致的生动化、形象化设计形式，让用户感到画面的精美。5.2.2

产品推广型5.3首页列表型网格型卡片型综合型列表型首页是在页面上将同级别的模块进行分类展示，常用于表现数据展示、文字阅读等方面。采用单一的设计形式，方便用户浏览。5.3.1

列表型

网格型首页是在页面上将重要的功能以矩形模块的形式进行展示，常用于工具类等方面。采用的统一矩形模块的设计形式，刺激用户点击。5.3.2

网格型卡片型首页是在页面上将图片、文字、控件放置于同一张卡片中，再将卡片进行分类展示，常用于表现数据展示、文字阅读、工具使用等方面。采用的统一的卡片设计形式，不仅让用户一目了然更加强内容的点击欲望。5.3.3

卡片型综合型首页是由搜索栏、Banner、金刚区、瓷片区以及标签栏等组成的页面，运用范围较广，常