UI必须要搞清楚的Bar设计与iOS设计原则

Haywardwang

深圳/UI设计师/5年前/625浏览

版权

Haywardwang

从iOS的主题和原则入手，来谈一谈众多Bar的设计

正文共： 3437字 15图预计阅读时间：9分钟

今天的主要目的是来谈一谈iOS中bar的设计，很有必要在此之前我们来看看iOS的主题和原则。iOS在此次的规范中提出了三大主题与六大原则，中心思想就是以人为本的设计理念。

明晰

在整个系统中，各种大小的文字都清晰易读，图标精确而清晰，装饰物微妙而恰当，对功能的高度关注激发了设计的灵感。负空间，颜色，字体，图形和界面元素巧妙地突出了重要内容并传达了交互性。

尊敬

流畅的动作和清晰美观的界面可帮助人们理解内容并与之互动，而从未与之竞争。内容通常会填满整个屏幕，而半透明和模糊通常会暗示更多内容。最少使用边框，渐变色和阴影可以保持界面明亮通风，同时确保内容至关重要。

深度

独特的视觉层和逼真的动作传达了层次感，赋予了生命力并促进了理解。触摸和可发现性增强了人们的愉悦感，使他们能够访问功能和其他内容而不会丢失上下文。当您浏览内容时，过渡会提供一种深度感。

审美完整性

审美完整性表示应用程序的外观和行为与其功能的集成程度。例如，可以帮助人们执行重要任务的应用程序可以通过使用微妙，醒目的图形，标准控件和可预测的行为来使他们专注。另一方面，沉浸式应用程序（例如游戏）可以提供引人入胜的外观，保证乐趣和刺激，同时鼓励发现。

一致性

一致的应用程序通过使用系统提供的界面元素，知名的图标，标准的文本样式和统一的术语来实现熟悉的标准和范例。该应用程序以人们期望的方式结合了功能和行为。

直接操纵

屏幕内容的直接操作可以吸引人们并促进理解。用户在旋转设备或使用手势影响屏幕上的内容时会经历直接的操作。通过直接操作，他们可以看到其操作的直接可见结果。

反馈

反馈确认行动并显示结果以使人们保持了解情况。内置的iOS应用程序可响应每个用户操作提供可感知的反馈。轻触时，交互式元素将突出显示，进度指示器传达长时间运行的操作的状态，动画和声音有助于阐明操作的结果。

隐喻

当应用程序的虚拟对象和动作是扎根于真实或数字世界的隐喻时，人们会更快地学习。隐喻在iOS中可以很好地工作，因为人们可以与屏幕进行物理交互。他们将视图移开以隐藏下面的内容。他们拖动和滑动内容。它们切换开关，移动滑块并滚动选择器值。他们甚至浏览书籍和杂志的页面。

用户控制

在整个iOS中，人们（而不是应用程序）处于控制之中。应用程序可以建议采取行动或警告危险后果，但通常由应用程序接管决策是错误的。最好的应用可以在使用户受益与避免不必要的结果之间找到适当的平衡。应用程序可以使人们熟悉和可预测的交互元素，确认破坏性的动作，并使其易于取消操作（即使他们已经在进行中），从而使人们感到自己处于控制之下。

bar的直译为栏，在UI中的栏指的是独占一行具有固定的特殊位置和尺寸标准的功能组件。我们常见的bar共有以下六种：

状态栏

状态栏出现在屏幕的上方，并显示有关设备当前状态的有用信息，例如时间，移动运营商，网络状态和电池电量。状态栏中显示的实际信息取决于设备和系统配置。

使用系统提供的状态栏。人们期望状态栏在系统范围内保持一致。不要用自定义状态栏替换它。

协调状态栏样式与您的应用程序设计。状态栏文本和指示器的视觉样式为浅色或深色，可以针对您的应用全局设置，也可以针对不同屏幕分别设置。深色状态栏比浅色内容好用，浅色状态栏比深色内容好。

隐藏状态栏下的内容。默认情况下，状态栏的背景是透明的，允许下面的内容显示出来。使状态栏保持可读性，不要暗示其后面的内容是交互式的。有以下的几种方法可以采取：

在应用中使用导航栏，该导航栏会自动显示状态栏背景，并确保内容不会出现在状态栏下方。
在状态栏后面显示自定义图像，例如渐变色或纯色。
将模糊的视图放在状态栏后面。
显示全屏媒体时，请考虑暂时隐藏状态栏。当用户尝试关注媒体时，状态栏可能会分散注意力。暂时隐藏这些元素以提供更身临其境的体验。

避免永久隐藏状态栏。如果没有状态栏，人们必须离开您的应用以查看时间或查看他们是否具有Wi-Fi连接。人们可以使用简单的可发现手势重新显示隐藏的状态栏。在“照片”应用中浏览全屏照片时，只需轻按一次即可再次显示状态栏。

使用状态栏表示网络活动。当您的应用使用网络时，尤其是对于长时间的操作，请显示网络活动状态栏指示器，以便人们知道活动正在发生。

导航栏

导航栏显示在应用程序屏幕的顶部，状态栏下方，并允许在一系列分层屏幕中进行导航。当显示一个新屏幕时，该栏的左侧会出现一个后退按钮，通常标有上一个屏幕的标题。

显示全屏内容时，考虑暂时隐藏导航栏。当您要关注内容时，导航栏可能会分散您的注意力。暂时隐藏导航栏，以提供更身临其境的体验。在查看全屏照片时，照片会隐藏导航栏和其他界面元素。如果您实现这种行为，则人们可以用简单的手势（如轻按）来还原导航栏。
考虑在导航栏中显示当前视图的标题。在大多数情况下，标题可以帮助人们了解他们在看什么。但是，如果在导航栏中添加标题似乎多余，则可以将标题留为空白。
当您要特别强调上下文时，请使用大标题。大标题永远不会与内容竞争，但在某些应用中，大标题的粗体会帮助人们浏览和搜索时进行定向。
避免在导航栏上挤满太多控件。通常，导航栏最多只能包含视图的当前标题，后退按钮以及一个用于管理视图内容的控件。如果在导航栏中使用分段控件，则该栏不应包含标题或分段控件以外的任何控件。

搜索栏

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

使用搜索栏而不是文本字段来实现搜索。文本字段没有人们期望的标准搜索栏外观。
启用清除按钮。大多数搜索栏都包含一个清除按钮，可清除该字段的内容。
适当时启用“取消”按钮。大多数专用搜索栏都包含一个“取消”按钮，该按钮可立即终止搜索。

如有必要，请在搜索栏中提供提示和上下文。搜索栏的字段可以包含占位符文本，例如“搜索服装，鞋子和配饰”或仅“搜索”，以提醒要搜索的上下文。

考虑在搜索栏下方提供有用的快捷方式和其他内容。使用搜索栏下方的区域可帮助人们更快地获取内容。

可以将范围栏添加到搜索栏，以使人们可以缩小搜索范围。

与包含范围栏相比，倾向于改善搜索结果。当有明确定义的搜索类别时，范围栏会很有用。但是，最好是改善搜索结果，因此没有必要进行范围界定。

标签栏

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

通常，使用标签栏在应用程序级别组织信息。标签栏是拉平信息层次结构并提供一次访问多个对等信息类别或模式的好方法。
严格使用标签栏进行导航。标签栏按钮不应用于执行操作。
避免标签过多。每个其他选项卡都减少了用于选择选项卡的可点击区域，并增加了应用程序的复杂性，使查找信息更加困难。通常，在iPhone上使用三个到五个标签。
选项卡功能不可用时，请勿删除或禁用该选项卡。如果在某些情况下提供选项卡，而在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。
始终在附加视图中切换上下文。为了使您的界面具有可预测性，选择一个选项卡应始终影响直接连接到选项卡栏的视图，而不影响屏幕上其他位置的视图。
确保标签栏图标在视觉上保持一致和平衡。