Human Interface Guidelines — Navigation

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个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 提供与当前上下文交互的控件。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

QQ天气H5-前端完整解析

前言: 什么是手Q天气 手Q天气是在手Q 6.0版本以上新增的功能,页面会展现当天的气温情况,已经五天温度折线图以及24小时温度图表等。 并且为了更好的交互效果...

1.2K8
来自专栏企鹅号快讯

编写优秀 CSS 代码的 8 个策略

1qjnmmn gbhjnhbgfsjkgff 编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时...

1886
来自专栏梁源的专栏

React Native 用JavaScript开发移动应用 - 思维导图

1664
来自专栏十月梦想

字体大小单位vw和reg

vm是相对浏览器宽度,1vm浏览器1%,10vm10%,浏览器窗口大小,字体自适应,开发多用到vm作为字体单位

1305
来自专栏大史住在大前端

一统江湖的大前端(1)——PPT制作库impress.js

impress.js 是一款基于 css-3D 和 css动画 、受到高逼格PPT原型工具 prezi 启发而开发的演示文稿制作库,github上星星高达33k...

1343
来自专栏IT大咖说

听饿了么前端主管如何解析H5渲染性能

内容来源:2018 年 6 月 30 日,饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说(微信id...

2511
来自专栏Android 开发者

Android P 中的新文本特性

在 “What’s new in Android P Beta” 中我们已经谈到 Android 的两个新文本特性。现在既然 Android P Beta 3 ...

892
来自专栏BestSDK

前端修仙之路:从“路人”到大神,走对这几步很重要

HTML 与 CSS基础 前端的领域里,任何东西都离不开HTML 与 CSS。HTML与CSS基本上控制了你看到的所有东西,HTML用来定义内容而CSS负责样式...

3635
来自专栏前端桃园

尤大多伦多演讲:Vue 3.0 预览

尤大昨天在 Vue Toronto 的主题演讲中预览了 Vue 3 。通过利用现代浏览器支持的新功能,Vue 3 将成为我们已经了解和喜爱的Vue.js 的改进...

1272
来自专栏QQ会员技术团队的专栏

来看看机智的前端童鞋怎么防盗

很多开发的童鞋都是只身混江湖、夜宿城中村,如果居住的地方安保欠缺,那么出门在外难免担心屋里的财产安全。

52011

扫码关注云+社区