该系列是iOS12人机交互指南的翻译,翻译的过程中加深自己的理解。

导航栏出现在应用屏幕的顶部,在状态栏下方,并允许在多个层级的界面中导航。当显示新屏幕时,会在导航栏的左侧出现一个返回按钮,该按钮通常标记为前一个屏幕的标题。有时,导航栏的右侧包含一个控件,如“编辑”或“完成”按钮,用于管理目前活动视图中的内容。在分屏视图中,导航栏可能出现在分屏视图的单个窗格中。导航栏是半透明的,可能带有背景色,可以配置为在键盘显示在屏幕上、出现手势或视图调整大小时隐藏。

在显示全屏内容时可以考虑暂时隐藏导航栏。当你想专注于内容时,导航栏会让用户分心,暂时隐藏导航栏可以提供更身临其境的体验。在查看全屏照片时,照片应用就隐藏了导航栏和其他界面元素。如果你实现了这种类型的行为,那么让用户通过一个简单的手势(如轻击)来恢复导航栏。

(提示:当不需要导航或需要多个控件来管理内容时,请使用工具栏。)

导航栏标题

考虑在导航栏中显示当前视图的标题。在大多数情况下,标题帮助人们理解他们在看什么。但是,如果标题栏看起来是多余的,可以将标题空着。例如,Notes不为当前页面标题,因为第一行内容提供了所需的所有上下文。

当需要特别强调上下文时,使用大标题。在一些应用程序中,大标题的粗体大字可以帮助用户在浏览和搜索时定位。例如,在选项卡布局中,大标题可以帮助用户弄清楚目前的选项卡,并告知用户何时滚动到顶部。通话应用就使用了这种方法,而音乐应用使用大标题来区分内容区域,如专辑、艺术家、播放列表和广播。当用户开始滚动内容时,大标题将转换为标准标题。大标题在所有应用程序中都没有具体的含义,永远不应该与内容相对抗。尽管时钟应用有一个选项卡布局,但大标题是不必要的,因为每个选项卡都有一个独特的、可识别的布局。

导航栏控件

避免在导航栏中加入过多的控件。通常,导航栏应该只包含视图的当前标题、一个后退按钮和一个管理视图内容的控件。如果在导航栏中使用分段控件,则该栏不应再包含标题或除分段控件之外的任何控件。

使用标准返回按钮。用户知道标准的后退按钮允许他们通过信息的层次结构回溯步骤。然而,如果你实现了一个自定义后退按钮,确保它看起来仍然像一个后退按钮,行为直观并和界面的其余部分相匹配,并在你的应用中始终如一地实现。如果你使用了自定义的图片来代替系统内置的返回按钮中的箭头图片,也同时提供一个蒙层图片。iOS在过渡期间使用这个蒙版来为按钮标题添加动效。

不要包含多段面包屑路径。返回按钮总是执行一个动作,即返回到前一个屏幕。如果你认为没有完整的当前屏幕路径,人们可能会迷失方向,那么考虑将应用的层次结构扁平化。

给文本标题按钮足够的空间。如果导航栏包含多个文本按钮,这些按钮的文本可能会放置在一起,使按钮无法区分。通过在按钮之间插入一个固定的空格原色来添加分隔。

考虑在导航栏中使用分段控件来使应用的信息层次结构扁平化。如果您在导航栏中使用分段控件,那么只在层次结构的顶层使用分段控件,并确保在较低的层次选择正确的返回按钮标题。

xshell6左侧导航显示_【iOS12人机交互指南】7.1-导航栏相关推荐

  1. 更改应用程序图标_【iOS12人机交互指南】6.2-应用图标

    该系列是iOS12人机交互指南的翻译,翻译的过程中加深自己的理解. 每个应用都需要一个漂亮而难忘的图标,它能在应用商店中吸引注意力,并在主屏幕上脱颖而出.图标通过用户的第一眼来和用户沟通,是传递应用的 ...

  2. hid自定义report 影响键盘_【iOS12人机交互指南】10.1-自定义键盘

    该系列是iOS12人机交互指南的翻译,翻译的过程中加深自己的理解. 键盘扩展用自定义键盘替换标准键盘.在"设置"应用中,在"常规>键盘"下启用自定义键盘. ...

  3. 自定义导航页_带你回归“真”的导航页

    曾经 浏览器主页是我们流向各大网站的要道 从这里 我们可以轻而易举的去往想要去的网站 特别是在信息和专业性越来聚集的今天 传统的主页难免令人有些审美疲劳 或者说花里胡哨 hao123 2345 是这些 ...

  4. 小型无人机地面站导航显示系统设计

    小型无人机地面站导航显示系统设计 http://www.ic72.com 发布时间:2009-2-18 9:04:39 1 引 言 小型无人机(Mini-UAV)通常指最大起飞重量小于10 kg的飞行 ...

  5. 苹果人机交互指南_苹果人机界面设计指南的10个见解

    苹果人机交互指南 重点 (Top highlight) I've been developing an IOS app for the past few months and have been co ...

  6. h5 video 手机上无法显示_怎样把手机上的导航显示在汽车屏幕上

    目前安卓或者iOS都支持车载互联功能,如果车机支持相应的功能只需要通过有线或无线方式连接即可:此外,安卓还可以通过MHL线连接到车机的HDMI接口处实现投屏.具体地: 1.如果您的车机支持Androi ...

  7. 三级菜单页面布局_三级菜单的最快导航布局

    三级菜单页面布局 重点 (Top highlight) When users navigate an interface, there's a need for speed. The faster i ...

  8. ios 控件徽章_iOS 12 人机交互指南(七):栏(Bars)

    要想发布一款能够位于App Store排行榜之首的产品,产品在质量和功能上的高标准表现是必不可少的,而为了达到这种高度,我们应该如何做呢?本文主要讲述的是 iOS 12 界面交互设计指南中的栏的部分, ...

  9. 通过《iOS人机交互指南》的变化看iOS7的设计理念

    原文地址:http://www.cocoachina.com/applenews/devnews/2013/1015/7162.html iOS7在界面上最大的变化就是抛弃了苹果使用了多年的拟物化设计 ...

最新文章

  1. Retrofit 找不到 GsonConverterFactory
  2. 宏基因组实战9. 组装assembly和分箱bin结果可视化—Anvi'o
  3. c语言将ascii码存入eeprom,微机原理复习题答案+_Fixed
  4. 【 C 】动态内存分配案例分析
  5. Json工具类 - JsonUtils.java
  6. 获取另一个驱动的设备结构体_Linux 驱动开发 / 设备模型快速入门
  7. 117_PowerQuery使用ODBC访问带密码的Access
  8. 索尼印度研究院启动运营 将在应用AI和数据分析领域提供就业机会
  9. 同一个接口Jmeter取不到结果
  10. HTML5实现扫描识别二维码/生成二维码
  11. 数据推动变革 PMC创新存储方案应对挑战
  12. Maven常用命令汇总
  13. 灰度图像加性噪声污染和运动模糊图像复原
  14. 针式打印机色带选购知识要点解说
  15. 爱德泰科普 | 了解单模光纤跳线和多模光纤跳线,看着一篇就够了
  16. linux下uboot内存测试,uboot中的内存测试方法
  17. 项目结构优化设计之smv架构
  18. 微信输入就死机问题处理
  19. android 观察者模式
  20. QVector使用示例

热门文章

  1. mongoose-面向对象操作mongodb的Nodejs框架
  2. ACM常用C++模板 包括常用头文件
  3. C#LeetCode刷题之#344-反转字符串​​​​​​​(Reverse String)
  4. java中修饰符的说明
  5. bec初级第一课_在您的第一个初级开发人员工作中如何生存和发展
  6. vue 设置输入法隐藏_iPhone键盘的12种隐藏用法,超好用!可惜没几个人知道!
  7. 怎么实现两周联动加减速_行车记录仪种类繁多不知道怎么选?学会这几招,简单又有效...
  8. axure 小程序 lib_【kboneui】打通 H5/微信小程序,多端UI库
  9. Lecture_2_4 线性回归中的系数,衡量了什么?
  10. Python学习笔记之常用模块总结,持续更新...