探索 iOS 的导航设计

♪ ♪ ♪ 大家好 我叫 Sarah McClanahan 是布道团队的一名设计师 今天 我要跟大家分享关于 如何改善 iOS 的 App 导航 以及各种改良的技巧与方法 导航做得好的 App 往往 会让大家注意不到导航的存在 因为好的导航能让人把注意力 都集中在内容和体验上 导航会告诉人们 在您的 App 中 如何呈现项目 如何寻找信息 如何实现目的 导航的目的就是 帮助人们尽快熟悉界面 以轻松发现内容 并与 App 进行互动 导航做得太过不符合预期 或是跟用户的自然认知落差太大 就会让用户感到无所适从 并最终感觉这个 App 很不好用 导航要做好 需要注意很多细节 虽然我今天要讲的 一些理念已经是老生常谈 但却是重要的基础 也是一个成功的 iOS App 所必须的 因此 不论您是初学者 还是想进一步寻求 App 体验的改良方案 本讲座都适合您 今天我们要探讨的是底部导航栏 这是 iOS 上 一种常见的导航形式 接下来 我们会探讨 如何通过层级式及 以及模态式呈现 来进行屏幕间的切换 如您所见 这个讲座只能覆盖 导航这一大主题下的 部分内容 不过 这些都属于关键内容 能够反映一定的规律 而这些规律经常被误用 掌握了这些规律 能帮助您的 App 成功升级换代 或是适用于更多设备 首先我们从底部导航栏开始 底部导航栏属于全局性导航 始终位于屏幕底部 将 App 内容进行分区 可以将底部导航栏看作一种 分层展示信息的控制手段 用户控制界面本身 就应当清晰地展示出 您的 App 各区间的 类别与关系 因此 底部导航栏要反映出 您的 App 最高层次的 内容与分类 每个栏目反映的是 您的 App 上可选的菜单 而这些栏目的选择应当 意义明确 一目了然 这么听起来可能很简单 但实际操作中则往往由于各种原因 在设计中会被忽视 下面举几个例子 在不了解 App 内容的情况下 看看这些导航栏能透露出 哪些功能信息 仅仅通过一些简单的标签 我们就能从中看出 该 App 的许多功能了 “马上收听”及“收音机”两项 提示这个 App 支持的是 音频媒体的内容 App 上的“曲库”和“专辑” 暗示该 App 内容丰富 而“个人专属”则提示了 强烈的个人风格 该 App 的导航设计 十分直截了当 其功能一目了然 让我们很清楚自己在 各个分区可以干些什么 常见的操作是 App 最初展示的导航 着重于功能 要注意不同界面间导航栏的功能 分布要平衡 下面我们举些例子 帮助大家明白什么样的 导航栏设计会造成误导 或让人困惑不解 想象我手头有个 App 可以帮助人们计划 城市路线 比如用于骑行 如果您是来旅游的 或是刚搬到一个新地方 又或是刚开始玩骑行 该 App 可以帮助您 轻松保存及创建行程路线 像这样 既然这个 App 的目的是 寻找最佳骑行路线 首先展示的就是 骑行路线的筛选地图 接下来的区域可以交互 可以随着编辑内容或添加好友 而新增备选路线 再下来 是分类展示 各种不同特性的路线 您会忍不住想把 所有功能都挤进一个导航栏里 就像这样 因为这样能一览无余 也有可能随着 App 更新 您导航栏上的路线分组 已经全乱了 今天呢 我想请您 重新考虑这个问题 这样的设计 用户想要找到 自己想看的内容 就需要大量翻页 还要费力地排除各种 无关的散碎功能干扰 用户打开一个 App 在地图界面上进行筛选 与编辑一条路线时 涉及到的功能乃至思维方式 是截然不同的 像这样将不同功能结合 在一起的做法要谨慎使用 尤其不要出于担心 生怕用户不愿意 探索 App 更多界面 毕竟 如果 App 的功能 安排合理 用户才会更容易理解 一种做法 就是反思一下 别人为什么会用您的 App？ 要记住 好的 App 往往功能集中 专注于把少数几件事做好 而不是试图 用一个 App 解决所有问题 那我们再回到这个 骑行 App 的导航栏上 用这个 App 的人是 想在自己感兴趣的地方 找到适合自己的路线 这才是设计一个 App 时 最重要的考虑因素 因为这才是人们最关心的内容 带着这个认知 我们再来看看 如何设计导航栏 来帮助用户设计路线 以及如何在 App 上 进行均衡地展示 这是一条路线的内容细节 一般人会喜欢先看整体信息 如距离 海拔变化 以及全程地图及路面状况 如人行道和道路等 而上下陡坡等提醒信息 能帮助我了解该路线 是否适合我的水平 最后 知道沿途是否能 买到食物和水 也会大大有助于计划 好了那么 如何更好地组织这个 路线查询的核心功能呢？ 首先 只有知道路线在哪里 这条路线才是有用的 路线与其所属城市 是密不可分的 于是 我们需要一个城市界面 以查询该城市与骑行有关的信息 从该界面往下翻 就能看到该城市中所有的骑行路线 不过这个 App 还支持不同城市的路线 因此从单个城市往上翻 会有所有城市的列表 城市或地方 就可以 作为路线导航的 最高层级 由此可见 单单这一步操作 就涉及到大量信息 而且这些信息还是该 App 所提供的内容里非常关键的部分 这也是底部导航栏设计中 一个很好的例子 再看现在这个设计 是不是就主题分明了 这个导航界面里不应当出现 任何跟城市无关的信息 设计好的底部导航栏要做的 一个工作就是合理组织内容 尽可能按照最自然的关系 来组织不同内容 要做到这一点 可以结合 App 中的其他关键功能 例如“行程” 我可以问自己 “行程”是什么？ 大家一般如何使用“行程”？ 在我的 App 里面 把这个功能 放在哪里最合适？ 哪怕别人 对您的 App 内容并不熟悉 或者说 越是不熟悉 就越要将功能和内容的关系 表达得清楚明白 准确评估它所属的层级 以及分析人们会如何使用 只有这样 才能把一个将所有功能 塞到首页的 App 升级为 有着清晰直观导航的 App 现在 底部导航栏上展示的 核心功能就均衡多了 因为各个栏目都很直观 每个栏目相互联系 却各自有着不同的内容及操作 这样的导航要自然得多 接下来 我想讨论一个 有点关联的主题 虽然表达得不尽相同 要避免在同一个页面 反复强调一个功能 对于像这样内容丰富的 App 似乎很合适用一个“首页” 来一次性展示 App 内部的 所有功能 比如 如果用户似乎对“行程”功能 不太热衷 而您怀疑这是因为 用户没意识到 App 有这个功能

于是 您很自然会想要 通过在页面中反复展示 来强调这个功能的存在 例如在“城市”选项卡上 加上“新行程” 或是将行程面板 跟其他功能一起插入醒目的位置 例如添加好友 或是在站点列表上 加上方便的“添加”选项 如果生怕有些功能会被漏掉 这种做法无疑具有很大的诱惑力 这里要澄清一下 此处反复呈现的并非内容 很多时候 在不同的界面 用不同的方式显示同类型内容 如歌曲或照片 这种做法是合理的 但功能就不一样了 因为功能涉及到人们出于 某种目的所要采取的行动 这种时候重复将 让用户感到困惑 在实际操作中 一个“首页” 往往会破坏一个 App 的层级 如果一个 App 不同导航栏 或分区的功能 被重复添加到同一个页面上 同时缺乏足够的内容支持 会让人感到多余而且杂乱 “首页”将成为一个 让人眼花缭乱的地方 每个功能都在抢地盘 每个栏目都想得到注意 而事实却是 这种做法打断了 内容与相应操作之间的联系 如果这是您的 App 可以考虑把整个“首页”去掉 过多重复的功能将使用户无所适从 弄不清信息在哪里 又为什么被放置到那里 “首页”的另一个问题是 这种功能的重复 可能导致用户因为 在其他地方看到该功能 而直接跳过导航栏操作 像这样因为碰巧看见某个元素 而点击切换页面的做法 会导致用户晕头转向 这样迫使用户自动 换页面的做法一定要避免 接下来 导航栏导航一个最大的好处 就在于它能在多个顶层内容间切换 因此在整个导航过程中都要 保持底部导航栏的存在 保持底部导航栏的存在能帮助用户 在不同层次的信息间 轻松切换 同时各层级间的关系还能保持清晰 比如 我可以在“城市”页面 查看一条新路线 并与我“行程”页面上 正在创建的一条行程中 已储存的路线作比较 后者在我的层级中要低两层 要实现这种比较 不同页面就必须目的明确 内容的区分也要细致 最后 您下了这么多工夫 整理出这么扎实的信息结构 要配以简明的标签 我们参考一个今年在 Apple 设计大奖 “优越互动”类别获奖的 这个 App “Slopes” 它最让我欣赏的一点就是 这个 App 一打开 默认打开的是中间栏 即您的日志栏 上面有季节数据 其他页面的功能更加集中 全部都很直观 一看就知道 这个 App 是干什么的 怎么用 概括地说 这是因为标签的设计 能直观地反映内容 记录滑雪日 浏览场地 与朋友交换数据等 都是用寥寥数语 就把核心功能讲清楚了 底部导航栏是一个强大的导航工具 现在 我们把前面的内容回顾一遍 利用导航栏来反映您的信息层级 在导航栏间将不同功能以均衡的方式 组织起来 避免在同一个页面出现功能的重复 在整个 App 中 始终保持底部导航栏的存在 最后 导航栏的标签要简洁明了 好了 下面我们来讲交互xing 一个 App 在不同屏幕间的 切换方式 主要有两种 一种是在不同层级间切换 我们有时称为 “推送 (push)” 例如推送更多细节 另一种切换则称为 “模态窗 (modal)” 这两种方式我们都很熟悉 可以帮助我们自然地在一个 App 的不同层级或界面间跳跃 下面我给大家举例 在不同层级间切换时 出现“推送”页面 就意味着用户 点击了某个元素 而接下来的页面 会从右往左滑入 “推送”界面默认出现于 由上层往下层信息深入的时候 这种交互方式很方便 因为它能直观体现 信息的层级 能直接告诉用户 您所看到的内容 是从一个较高层级 向下深入所得的细节 另一方面 模态窗则专门用于 展示某个界面中的独立任务 模态窗用于独立操作很方便 它意味着该界面下 要进行某种操作所需的 全部信息都已齐备 模态窗是一种独特的交互方式 因为它能隔绝其余层级的信息 从而帮助用户集中注意 比如 创建新行程 就是通过模态窗来呈现的 用户可以在模态窗里选择 或输入数据 例如标题 城市 日期甚至邀请好友 用模态窗实现这种功能很合适 因为 UI 的设计要求页面在 关闭或切换到其他页面前 完成编辑 因为信息都是由用户输入 并不需要参考 其他页面的信息 现在 熟悉了两种交互方式以后 我们再来分别进行进一步探讨 先从分层导航开始 下面是几条要考虑的操作指南 使用推送 来在 App 的不同层级结构中 进行切换 分层导航能够加强 顶级和下级内容间的关系 顶级内容具有更高等级 想要更多的细节时才需要深入下层 去访问补充界面 这样在做选择时 范围就小了很多 且无需访问其他的无关层级 这就是理想的效果 内容应当越来越具体 且随着细节的推进 选择应当越来越少 使用推送进行切换时 要注意导航栏 必须始终位于屏幕底部 如之前所说 这是导航栏导航 最大的好处 这样才能保持一致性 让用户始终能访问 App 的核心区域 因为从头到尾都能看见 这意味着用户能够探索 不同层级的内容 随着页面的推进 用户想要返回原来页面 很自然地会从左往右扫 同时还不会打乱其他 已保存了状态的页面 及其层级结构 接下来 还可以使用适当的标签 通过屏幕的顶部导航栏 引导用户在层级间切换 举个例子 注意 随着我步步深入 不同层次的信息 返回按钮在导航栏中出现了变化 这些变化反映了上一个页面的标题 这种设计 能帮助我在滚动屏幕 深入 App 内部层级的同时 不发生混乱 让我不用记住自己是从哪里过来的 要怎么回去 因为返回按钮 直接告诉我上一个层级的内容 另一个可以利用分层导航的地方 是当有用到展示指示器的时候 展示指示器 也被称为山形符号 它会指向您要去的地方 山形符号所引发的不同切换 在 UI 表示的内容及相应交互间 存在分离 推送符合我们的认知模式 在西方文化中 阅读习惯是从左往右 因此这个方向表示下一步 然而在从右到左的语言中 如阿拉伯语和希伯来语 表示下一步的方向正好相反 如果您的 App 支持 从右往左的语言 则推送的方向必须相反 才能使内容间自然联动 何时应当使用分层导航 要考虑的最后一条 是操作的背景 比如 当用户频繁地 在内容之间切换时 如果某种操作需要用户 频繁交互 反复切换页面 操作中需要频繁换 App 或是要花大量时间停留在某个页面 则应当使用推送 一个熟悉的例子 就是“信息”App 虽然该 App 的层级相对扁平 但我可以在短信间通过推送 轻松进出 如果不用推送 而用模态窗 在不同的聊天窗间无缝切换 就很难了 聊天要保持连续性 但关闭一个无关的模态窗时 用户会忍不住犹豫 是否要离开该页面 这就增加了没必要的负担 推送则能让用户实现 App 核心区域之间的平滑转换 以上就是分层导航的简单概述 我们复习一下 首先 推送的切换方式 可以用于 App 层级间的转换 底部导航栏应当始终 保持在屏幕底部 每个页面的导航栏 都应当有清晰的标题 和返回标签 以帮助用户 清楚自己所在的层级 有展示指示器存在的时候要用推送 当操作需要在内容间频繁切换时 也要用推送 分层导航是一种非常常见 以及相对简单的交互方式 因此您的 App 中 也可能经常用到 而模态窗则更多用在 存在背景转换的情况下 这种方式重在帮助用户 专心进行某种单一的操作 或是独立任务 在 iOS 上使用模态窗时 应当始终从屏幕底部呈现 因为模态窗会打断信息的层级 从屏幕底部出现 可以盖住底部导航栏 这样用户就无法进一步深入 这种打断操作是故意的 就为了强化注意力 现在您可能会想 那什么叫独立任务？ 我们举三个宽泛的例子 模态窗可以用于简单任务 多步骤任务 或者用于全屏内容 下面我会分别举例 第一个 使用模态窗 来完成一项简单的任务 例如创建活动 或设置提醒 创建提醒要求 对输入信息进行编辑和修改 在此过程中锁定注意力可以帮助用户 心无旁骛地完成任务 还可以减少因为不小心点到 其他元素或菜单而报废操作的情况 第二 使用模态窗来辅助进行 复杂任务的操作 这种操作一般涉及多个步骤 比如在“钱包”App 里 添加银行卡 在复杂任务中使用模态窗 似乎违背我们的直觉 但请记住 我们的目的是通过隐藏底部导航栏 来集中注意 并在任务完成或取消前 防止人们在 App 中移动 第三 使用模态窗来 阅读文章 观看视频 或全屏内容这类 无需太多页面切换的操作 一个很好的例子 就是在“健身”App 中 通过打开一个健身视频 来开始锻炼 在层级交互部分 我们谈到了 用导航栏来帮助用户定位的重要性 在模态窗中 这一点同样重要 剖析模态窗的结构时 要想想导航栏是如何帮助定位的 使用标签和交互操作能帮助用户 对于自身位置以及如何访问其他位置 产生信心 标题可以帮助用户 找到页面中的内容 例如如“新行程” 右侧的标签则一般用于首选操作 因此通常用粗体显示以强调重要性 用简单的动词来作标签 可以告诉我点击后会发生什么 首选操作可以关闭模态窗 同时保存上一步的状态 如果模态窗上还没有 输入信息或交互 则首选操作不会激活 这样可以让用户明白 要输入信息才可保存或继续 如果已经作了首选操作 则用左边的“取消”按钮 来关闭模态窗 可以清楚地表明我要放弃操作了 如果在点击取消之前 我输入过信息 这时候就可以出现一个警告 或一个 Action sheet 以提示用户继续取消的话 就会丢失数据 不过 如果我还没有与 UI 交互 点击取消就会直接关闭模态窗 尽量少用“关闭”符号 仅当模态窗 所需的交互很少 无需文本输入时使用 有时候可以在模态窗中 看到一个“X” 作为关闭窗口的首要方式 例如这篇 在 App Store “Today”标签页的文章 “关闭”符号可以用在这里 是因为这里无需用户输入 因此简单的关闭动作 可以帮助用户 把注意力集中在内容上 下面举个例子 说明“关闭”符号 在需要输入和交互的模态窗里 为何会出问题 当我选择完一个筛选器后 如果我点“关闭” 我刚才的选择会被提交还是取消？ 没有一个明确的标签提示 用户就会不确定 “如果我点了‘关闭’会怎样？” 所以要记住 使用导航栏中的标签 通常是首选 因为这样更明确 操作上更明白 最后 要避免模态窗上 再叠加模态窗 因为这样很累赘 且过于复杂 这里我要提醒大家 模态窗界面本身 是支持子视图以及切换相关页面的 我之前提到过 这是一个编辑界面 其文本字段和表格单元格 可以进行选择和输入 因此是可以交互 而不仅仅是阅读的 例如 我可以点击某个 添加在行程上的 好友单元格 点击后会出现一个推送窗 因为这里有山形标记 对吧？ 点进去后 这个界面可能 会展示 Kate 的信息 并允许我将她从行程上移除 不过 “加好友” 和“上传照片”的标签 此时都是绿色显示 表示这些操作都允许 这几种情况 都属于操作中的操作 首先我要添加一份行程表 然后要在行程表上的添加照片 上传照片的操作涉及到 相当多的互动 比如要在相册中滚动 并选择一张新照片 这样的操作也属于独立任务 选择好照片后 该模态窗就可以关闭 我又回到了新建行程中 刚开始的模态窗里 要尽量减少多个模态窗的叠加 不过有时候 这也是必要的 可以帮助在子视图中 保持一致性和注意力 以上 就是对 iOS 模态窗展示的概述 模态窗应从屏幕底部呈现 可以用于三种类型的任务： 简单任务 多步骤任务及全屏任务 在导航栏中呈现首选和取消操作 只在交互很少的内容中 使用“关闭”符号 并尽量减少多个模态窗的叠加 希望这次深入剖析对您有帮助 当您为自己的 iOS App 设计导航时 要考虑如何组织内容 思考用户与您的功能如何交互 以及如何将其与您的层级 完美结合 展示出来 这样 用户就可以轻松访问 您的 App 上所有出色的功能 并享受使用的过程了 感谢您的收看 ♪