前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Human Interface Guidelines — Navigation

Human Interface Guidelines — Navigation

作者头像
霖酱
发布2018-06-06 14:27:17
9260
发布2018-06-06 14:27:17
举报

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Navigation(导航)

Human Interface Guidelines链接:Navigation

用户只有当期望不能被满足时才想到 app 的导航,直到它不能满足他们的期望。导航的工作是以支持 app 的结构,但不需要引起注意。导航应该让用户感觉自然和熟悉,且不应该主导界面或让用户把焦点从内容上引开。在iOS中,有三种主要的导航方式。

Hierarchical Navigation

在每个屏幕上做一个选择,直到到达目的地。要到达另一个目的地,你必须按照之前的步骤返回,或者从头开始,做出与之前不同的选择。“设置”和“邮件”使用的是这个导航样式。

Hierarchical Navigation

设置与邮箱

Flat Navigation

在多个内容类别之间切换。“音乐”和“应用商店”使用这种导航风格。

Flat Navigation

音乐与应用商店

Content-Driven or Experience-Driven Navigation

在内容中自由移动,或者内容本身定义了导航。游戏、书籍和其他沉浸式 app 通常使用这种导航方式。

Content-Driven or Experience-Driven Navigation

使用时注意

一些 app 结合了多种导航风格。例如,使用 Flat Navigation 的 app 可以在每个类别中实现 Hierarchical Navigation。

·始终提供一个清晰的路径

人们应该知道他们在 app 中的位置以及如何到达他们的下一个目的地。不管导航样式如何,通过内容的路径是符合逻辑的、可预测的、易于遵循的,这是非常重要的。一般来说,给每个屏幕一个路径。如果他们需要在多个上下文中看到屏幕,可以考虑使用 action sheet、alert、popover 或 modal view。

·设计一个信息架构,使其能快速和容易地得到内容

以一种需要最少次数的点击 、轻扫和屏幕的方式组织您的信息架构。

·使用触摸手势创造流动性

让你的界面更容易移动且摩擦最小。例如,您可以让用户从屏幕边缘轻扫,返回到前一个屏幕。

·使用标准导航组件

只要有可能,使用标准的导航控件,比如 page controls,tab bars, segmented controls,table views,collection views,和 split views。用户已经熟悉这些控件,并且能很快知道如何在 app 中闲逛。

·使用Navigation bar来遍历数据层次结构

Navigation bar 的标题可以显示层次结构中的当前位置,后退按钮可以很容易地返回到以前的位置。

·使用Tab bar来显示内容或功能的每个分类

无论当前位置如何, tab bar 可以让人们快速方便地在不同类别之间切换。

·当您有多个相同类型内容的页面时,请使用page control

Page control 可以清楚地显示可用页面的数量,以及当前激活的页面。天气 app 使用 page control 来显示特定位置的天气页面。

TIP:Segmented controls 和 toolbars 不能用作导航。使用 segmented control 将信息组织到不同的类别中。使用 toolbar 提供与当前上下文交互的控件。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.06.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Navigation(导航)
    • Hierarchical Navigation
      • Flat Navigation
        • Content-Driven or Experience-Driven Navigation
          • 使用时注意
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档