iOS 10 人机交互指南 第六章 UI Bars

五种Bar, Navigation Bars, Search Bars, Status Bars, Tab Bars, ToolBars

1. Navigation Bars

展现在手机状态栏的下方,App的顶部。通常包括返回按钮,页面主题和进项下一步操作的按钮。

导航栏可以在用户进行键盘输入、特殊手势操作或者View放大时消失。

导航栏的一大作用是让用户知道当前所处的位置。考虑在导航栏上增加页面标题,注意部分情况下可能不适合加标题,比如便签应用,因为用户扫一眼第一行的内容就知道他在哪了。

如果有并列关系的页面,可以考虑增加 Segmented control. https://developer.apple.com/ios/human-interface-guidelines/ui-controls/segmented-controls/


iOS 10 人机交互指南 第六章 UI Bars_第1张图片

不要让导航栏显得太拥挤了,一般是一个返回按钮+标题+Done的组合。如果用了Segmented Control,就不要加title,返回和Done只保留一个。

用户focus在内容上是,考虑暂时隐藏掉导航栏(应用场景,阅读类应用、地图、图片)。隐藏掉的导航栏可以通过简单的操作快速恢复。

尽量使用标准的返回按钮。如果非要自己搞,请记得符合iOS的设计准则。

2. Search Bars

两种风格:prominent(由输入框和X构成,和环境区分的比较明显,联系人中的搜索栏风格)t, minimal(有输入框、X和取消搜索按钮构成。和环境高度融合,照片搜索栏的风格)


iOS 10 人机交互指南 第六章 UI Bars_第2张图片
iOS 10 人机交互指南 第六章 UI Bars_第3张图片

根据搜索功能和使用频次,来选择是用prominent还是Minimal。尽量提供圆X和取消搜索按钮。如果可能的话,提供有用的占位符文本(Placeholder text),提示用户如何使用搜索。

搜索输入到一半时,提供快速匹配功能。

3. Status Bars

人们习惯用默认样式的status bar,不要自己瞎几把改状态栏的样式。

状态栏有明、暗两种风格。可以针对App中固定某一屏来进行单独设置。遵循清晰、对比的原则。

状态栏的背景默认是透明的。注意导航栏和状态栏的关系、状态栏下面的内容使用模糊处理。

跟导航栏一样,全屏浏览时隐藏掉状态栏,增加浸入感。并且可以通过tap gesture让用户轻松恢复status bar。

iOS独有的特性,在状态栏中,如果网络通信超过特定时长,则展示Network Activity Indicators(菊花)。(给用户信心,同时另外一部分用户可能会觉得卡机嘛了)。

4. Tab Bars


iOS 10 人机交互指南 第六章 UI Bars_第4张图片
Tab Bars

展示在App底部,用来在App的不同功能区间之间进行切换。keyboard弹出时,标签栏隐藏。不同方向手持手机时,标签栏的高度相同。如果现有宽度标签无法展示完全,则最后一个标签变成more。

tab bar是用来处理App内第一级内容的切换,不要乱用。tab bar上不能出现控制元素,只能用来导航。如果是屏幕下方的控制操作,请使用toolbar。

tab栏的内容不要随意更改,要保持一致。tab栏只能用来导航。

tab的数量不要过多,3-5个之间(iPhone)。iPad可以多一些。

tab标签可以通过红点的方式提示有新内容。

5. Tool Bars


iOS 10 人机交互指南 第六章 UI Bars_第5张图片
Tool Bars

Tool Bar用来放在当前页面下需要进行的操作按钮。需要增强浸入感时也可以被隐藏(感觉这样做会让用户丧失安全感,因为对屏幕底部的操作很容易触发iOS控制中心)

如果tool bar上按钮太少,可以直接用文字来替代按钮。这样可能会更清晰(与Smartisan OS上的哲学不同,锤子是以按钮是否能够造成隐喻来判断是否使用文字。)

如果是使用文字toolbar,在文字之间请保留足够的空间。

请注意tool bar和tab bar之间的区别。

你可能感兴趣的:(iOS 10 人机交互指南 第六章 UI Bars)