ios 取消按钮点击效果 iOS 12人机交互指南(七):Bars

为了发布一款能够在App Store排名中名列前茅的产品,高标准的产品质量和功能至关重要。 为了达到这个水平,我们应该做什么? 本文主要讲iOS 12界面交互设计指南中的栏目。 我们来看看吧~

1. 导航

导航栏出现在应用程序屏幕顶部的状态栏下方,并允许在一系列分层屏幕中导航。 当显示新屏幕时,通常标有前一屏幕标题的后退按钮会出现在栏的左侧。 有时,导航栏的右侧包含一个控件,例如“编辑”或“完成”按钮,用于管理活动视图中的内容。

在拆分视图中,导航栏可能会出现在拆分视图的单个窗格中。 导航栏是半透明的,可以有背景色调,并且可以配置为在键盘位于屏幕上、出现手势或调整视图大小时隐藏。

显示全屏内容时考虑暂时隐藏导航栏:

当您想专注于内容时,导航栏可能会分散您的注意力,暂时隐藏导航栏以提供更身临其境的体验。 查看全屏照片时,照片会隐藏导航栏和其他界面元素。 如果您实现此类行为,请让用户使用简单的手势(例如点击)恢复导航栏。

导航栏标题

(1)考虑在导航栏中显示当前视图的标题

在大多数情况下,标题可以帮助人们理解他们正在查看的内容。 但是,如果标题导航栏看起来多余,您可以将标题留空。 例如:Notes 没有当前注释的标题,因为第一行内容提供了所需的所有上下文。

标准名称

标题

(2) 当需要特别强调上下文时使用大标题

在某些应用程序中,大标题的大而粗体文本可以帮助人们在浏览和搜索时确定方向。 例如:在选项卡式布局中,大标题可以帮助澄清活动选项卡并在用户滚动到顶部时通知用户。 手机使用这种方法,而音乐使用大标题来区分内容区域,例如专辑、艺术家、播放列表和广播。

当用户开始滚动内容时,大标题将转换为标准标题。 大型游戏在任何应用程序中都没有意义,并且永远不应该与内容竞争。 尽管时钟应用程序具有选项卡式布局,但不需要大标题,因为每个选项卡都有独特的可识别布局。

导航栏控件

(1)避免过多的控件使导航栏拥挤

通常,导航栏应仅包含视图的当前标题、后退按钮和用于管理视图内容的控件。 如果在导航栏中使用分段控件,则导航栏不应包含标题或除分段控件之外的任何控件。

(2) 使用标准后退按钮

人们知道标准后退按钮允许他们在信息层次结构中后退。 但是,如果您实现自定义后退按钮,请确保它看起来仍然像后退按钮、行为直观、与界面的其余部分匹配,并且在整个应用程序中一致实现。 如果您将系统提供的后退按钮 V 形图标替换为自定义图像,您还可以提供自定义遮罩图像。 iOS 使用此蒙版在转换期间为按钮标题设置动画。

(3) 不包含多个面包屑路径

后退按钮始终执行单个操作,返回到上一个屏幕,如果您认为人们可能会在没有当前屏幕的完整路径的情况下迷路,请考虑展平应用程序的层次结构。

(4)给文字标题按钮足够的空间

如果导航栏包含多个文本按钮,则这些按钮的文本可能会连在一起,从而使按钮难以区分。 通过在按钮之间插入固定空间项目来添加分隔。

(5)考虑在导航栏中使用分段控件来扁平化应用程序的信息层次结构

如果在导航栏中使用分段控件,则仅在层次结构的顶层执行此操作,并确保在较低级别选择准确的后退按钮标题。

2. 搜索栏

搜索栏允许人们通过在字段中输入文本来搜索大量值。 搜索栏可以单独显示在导航栏或内容视图中。 当显示在导航栏中时,搜索栏可以固定到导航栏,以便始终可以访问它,也可以将其折叠起来,直到用户向下滑动以显示它。

搜索是使用搜索栏而不是文本字段来实现的,文本字段没有人们期望的标准搜索栏外观。

启用清除按钮。 大多数搜索字段都包含一个清除按钮,用于清除字段的内容。

在适当的时候启用“取消”按钮,大多数专用搜索字段都包含一个“取消”按钮ios 取消按钮点击效果,可以立即终止搜索。

清除按钮

取消按钮

如有必要,请在搜索栏中提供提示和上下文。 搜索栏的字段可以包含占位符文本,例如“搜索服装、鞋子和配饰”或简单的“搜索”,作为搜索上下文的提醒。 带有适当标点符号的简洁单行提示也可以直接出现在搜索栏上方以提供指导。 股票使用提示让人们知道他们可以输入公司名称或股票代码。

占位符文本

介绍性文字

考虑在搜索栏下方提供有用的快捷方式和其他内容。 使用搜索栏下方的区域可以帮助人们更快地找到内容。 例如:只要您点击搜索字段,Safari 就会显示您的书签。 选择右转,无需输入任何搜索词。 当您在搜索字段中键入内容时,股票会显示结果列表。 您可以随时点击其中一个字符,而无需输入更多字符。

范围栏

可以将范围栏添加到搜索栏,以允许人们细化搜索。

帮助改进搜索结果,包括范围栏。 当需要搜索明确定义的类别时,范围栏会很有用。 但是,最好改进搜索结果,这样就不需要范围界定。

3.状态栏

状态栏出现在屏幕的顶部边缘,显示有关设备当前状态的有用信息,例如:时间、移动电话运营商、网络状态和电池电量。 状态栏中显示的实际信息因设备和系统配置而异。

(1)使用系统提供的状态栏

人们期望状态栏在系统范围内保持一致,而不是用自定义状态栏替换它。

状态栏亮灯

状态栏变暗

(2) 使用您的应用程序设计来协调状态栏样式

状态栏文本和指示器的视觉样式可以是浅色或深色,并且可以为您的应用程序全局设置或针对不同屏幕单独设置。 深色状态栏比浅色内容更有效,而明亮状态栏比深色内容更有效。

(3)状态栏下隐藏的内容

默认情况下,状态栏的背景是透明的,可以显示下面的内容。 保持状态栏可读并不意味着其背后的内容是交互式的。

有几种常见的技术可以做到这一点:

在应用程序中使用导航栏,该导航栏会自动显示状态栏背景并确保内容不会出现在状态栏下方。 在状态栏后面显示自定义图像,例如渐变或纯色。 在状态栏后面放置一个模糊视图。

(4)显示全屏媒体时,考虑暂时隐藏状态栏

当用户试图专注于媒体时,状态栏可能会分散用户的注意力,暂时隐藏这些元素以提供更身临其境的体验。 例如:当用户浏览全屏照片时,照片应用会隐藏状态栏和其他界面元素。

(5)避免永久隐藏状态栏

如果没有状态栏,用户将不得不离开您的应用程序来检查时间或查看是否有 Wi-Fi 连接。 让人们通过使用简单、可发现的手势来重新显示隐藏的状态栏。 在照片应用程序中浏览全屏照片时,只需点击一次即可显示状态栏。

(6) 使用状态栏指示网络活动

当您的应用程序使用网络时,尤其是长时间运行时,请显示网络活动状态栏指示器,以便人们知道正在发生活动。

4. 标签栏

选项卡栏出现在应用程序屏幕的底部,允许在应用程序的不同部分之间快速切换。 选项卡栏是半透明的,可以具有背景色调,在所有屏幕方向上保持相同的高度,并且在显示键盘时隐藏。 选项卡栏可以包含任意数量的选项卡,但可见选项卡的数量根据设备大小和方向而变化。

如果由于水平空间有限而无法显示某些选项卡,则最终可见的选项卡将成为“更多”选项卡,在单独的屏幕上显示列表中的其他选项卡。

(1) 使用标签栏组织应用层面的信息

选项卡栏是扁平化信息层次结构并提供同时访问多个对等信息类别或模式的好方法。

(2)严格使用标签栏进行导航

标签栏按钮不应用于执行操作; 如果您需要提供作用于当前视图中的元素的控件,请改用工具栏。

(3)避免使用过多的标签

每个附加选项卡都会缩小用于选择选项卡的可单击区域,并增加应用程序的复杂性,从而使查找信息变得更加困难。 虽然“更多”选项卡可以显示其他选项卡,但这需要额外的单击并且占用很少的空间。 仅包含基本选项卡并使用信息层次结构所需的最少数量的选项卡。

选项卡太少也可能是一个问题ios 取消按钮点击效果,因为它会使您的界面显得断开连接。 通常,iPhone 上会使用三到五个选项卡。 也有一些在 iPad 上可以接受。

(4) 当功能不可用时,不要删除或禁用选项卡

如果选项卡在某些情况下可用但在其他情况下不可用,则应用程序的界面将变得不稳定且不可预测。 确保所有选项卡始终处于启用状态,并解释为什么选项卡内容不可用。 例如:如果您的 iOS 设备上没有歌曲,“音乐”应用程序中的“我的音乐”选项卡会说明如何下载该歌曲。

(5) 始终在附加视图中切换上下文

为了保持界面的可预测性,选择选项卡应始终影响直接连接到选项卡栏的视图,而不是影响屏幕上其他位置的其他视图。 例如:选择拆分视图左侧的选项卡不应导致拆分视图右侧突然发生变化,选择弹出窗口中的选项卡不应导致弹出窗口后面的视图发生变化。

(6) 确保标签栏图标视觉上一致且平衡

系统为常见用例提供了一系列预定义图标。

(7) 使用徽章进行不显眼的沟通

您可以在选项卡上显示徽章、包含白色文本和数字的红色椭圆形或感叹号,以指示新信息与该视图或模式关联。

暗示

了解选项卡栏和工具栏之间的区别非常重要,因为这两种类型的栏都出现在应用程序屏幕的底部。 选项卡栏允许用户在应用程序的不同部分之间快速切换,例如“时钟”应用程序中的“闹钟”、“秒表”和“定时器”选项卡。 工具栏包含用于执行与当前上下文相关的操作的按钮,例如:创建项目、删除项目、添加注释或拍照。 选项卡栏和工具栏永远不会出现在同一视图中。

5. 工具栏

工具栏显示在应用程序屏幕的底部,包含用于执行与当前视图或其内容相关的操作的按钮。 工具栏是半透明的,可能有背景色调,并且当人们不太可能需要它们时通常会隐藏起来。 例如:在 Safari 中,当您开始滚动时,工具栏会隐藏,因为您可能正在阅读。 您可以通过点击屏幕底部再次显示它。 当键盘在屏幕上时,工具栏也会隐藏。

(1)提供相关的工具栏按钮

工具栏应包含在当前上下文中有意义的常用命令。

(2) 考虑图标或文本标题按钮是否适合您的应用

当您需要三个以上的工具栏按钮时,图标效果很好。 如果您有三个或更少的按钮,文本有时会更清晰。 例如:在日历中,使用文本是因为图标可能会造成混淆,并且使用文本还允许“收件箱”按钮显示日历和活动邀请的计数。

(3)避免在工具栏中使用分段控件

分段控件允许人们切换上下文,而工具栏特定于当前屏幕。 如果您需要提供切换上下文的方法,请考虑使用选项卡栏。

(4)给文字标题按钮足够的空间

如果您的工具栏包含多个按钮,则这些按钮的文本可能会排列在一起,从而使按钮难以区分。 通过在按钮之间插入固定空间来添加分隔。

暗示

了解工具栏和选项卡栏之间的区别非常重要,因为这两种类型的栏都出现在应用程序屏幕的底部。 工具栏包含用于执行与当前上下文相关的操作的按钮,例如创建项目、删除项目、添加注释或拍照。

选项卡栏允许用户在应用程序的不同部分之间快速切换,例如:时钟应用程序中的闹钟、秒表和计时器选项卡。 工具栏和选项卡栏永远不会出现在同一视图中。

© 版权声明
THE END
喜欢就支持一下吧
点赞39赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容