恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
App Architecture_Navigation
0.0°
2020-05-21 自译外文 经验/观点 原作者: 苹果公司 举报 879 2 1 0

这是 iOS 系统设计规范翻译第 08 篇,热烈欢迎理性讨论,如有翻译不到位之处请批评指正。

网址:https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/

作者:苹果公司

译者:泽泽先生 


People tend to be unaware of an app’s navigation until it doesn’t meet their expectations. Your job is to implement navigation in a way that supports the structure and purpose of your app without calling attention to itself. Navigation should feel natural and familiar, and shouldn’t dominate the interface or draw focus away from content. In iOS, there are three main styles of navigation.

在用户未达到自己预期之前用户倾向于忽略应用程序中导航的存在。你的工作在于通过一种支持应用程序组织架构与应用程序目的的方式来完成导航而不将(用户)注意力转移至导航。导航需要看起来自然和亲切,不能让导航在界面中占据主导位置或者(因为导航的存在)让用户忽视内容。在 iOS 系统之中,导航有三种风格。

Hierarchical Navigation  

层级导航

Make one choice per screen until you reach a destination. To go to another destination, you must retrace your steps or start over from the beginning and make different choices. Settings and Mail use this navigation style.

在一个界面中做出一个决定直到你达到目的地。为了能够到达其他目的地,你必须原路折返或者从头开始做出不同决定。设置应用程序和邮箱应用程序使用的是这种方式的导航。

Flat Navigation

扁平导航

Switch between multiple content categories. Music and App Store use this navigation style.

在多样的内容类别之间转换。音乐应用程序和 APP store 经常使用这种类型的导航。

Content-Driven or Experience-Driven Navigation

内容驱动或体验驱动导航

Move freely through content, or the content itself defines the navigation. Games, books, and other immersive apps generally use this navigation style.

在内容中自由移动,或者内容本身决定了导航形式。Game、Books 和其他注重沉浸感的应用程序通常使用这种导航风格。

Some apps combine multiple navigation styles. For example, an app that uses flat navigation may implement hierarchical navigation within each category.

一些应用程序结合了多种导航形式。例如,使用扁平导航的应用程序可能在每个类别中实现了层级导航。

Always provide a clear path. People should always know where they are in your app and how to get to their next destination. Regardless of navigation style, it’s essential that the path through content is logical, predictable, and easy to follow. In general, give people one path to each screen. If they need to see a screen in multiple contexts, consider using an action sheet, alert, popover, or modal view. To learn more, see Action Sheets, Alerts, Popovers, and Modality.

始终提供清晰路径。用户应该知道自己在应用程序中的位置及如何到达下一个目的地。不管什么样的导航风格,贯穿内容的导航路径需要符合逻辑、可预测且容易遵循。一般来说,在一个界面上给用户一个路径。如果他们需要在一屏中看到多个文本内容,考虑使用动作列表、警示框、弹出框或其他模态视图。

Design an information structure that makes it fast and easy to get to content.Organize your information structure in a way that requires a minimum number of taps, swipes, and screens.

设计一个信息结构使其能够快速和简单的访问内容。组织你的信息结构以一种要求最少点击、滑动和界面(转换)数的方式来实现。

Use touch gestures to create fluidity. Make it easy to move through your interface with minimum friction. For example, you could let people swipe from the side of the screen to return to the previous screen.

使用触摸手势去创造流动。以与屏幕最少的触摸去实现界面的转换。例如,你可以让用户通过滑动屏幕一侧从而回到上一个界面。

Use standard navigation components. Whenever possible, use standard navigation controls such as page controls, tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls, and will intuitively know how to get around your app.

使用标准导航组件。任何时候只要有可能,使用标准的导航控件类似于页面指示器、标签栏、分段控件、列表视图、集合视图和分屏视图。用户已经熟悉了这些控件,能够直观清楚地知道如何在你的应用程序中“游走”。

Use a navigation bar to traverse a hierarchy of data. The navigation bar’s title can show the current position in the hierarchy, and the back button makes it easy to return to the previous location. For specific guidance, see Navigation Bars.

使用导航栏连接(应用程序数据)之间的层级。导航栏的标题可以展示当前的位置,返回按钮使回到之前页面变得简单。

Use a tab bar to present peer categories of content or functionality. A tab bar lets people quickly and easily switch between categories, regardless of the current location. For specific guidance, see Tab Bars.

使用标签栏去代表每个种类的内容或层级。无论现在位置在哪,标签栏都可以让人们快速简单的在不同类别中切换。

Use a page control when you have multiple pages of the same type of content. A page control clearly communicates the number of pages available and which one is currently active. The Weather app uses a page control to show location-specific weather pages. For specific guidance, see Page Controls.

当你在同一类型内容中有多个页面时。页面指示器能够清晰显示有多少个页面可用,哪一个是被激活的。天气应用程序使用页面指示器展示特定位置天气页面。

TIP:Segmented controls and toolbars don’t enable navigation. Use a segmented control to organize information into different categories. Use a toolbar to provide controls for interacting with the current context. For additional information on these types of elements, see Segmented Controls and Toolbars.

提示:分段控件和工具栏不能够进行导航。使用分段控件将信息组织进不同类别中,使用工具栏去提供与当前内容的交互。

片尾总结:

  • 导航需要是个安静的存在,在需要的时候能够立刻投用,在不需要的时候安静的待在角落。
  • 根据应用程序的类别或者功能性选择导航形式。
  • 使用用户熟悉的标准控件。
  • 通过导航栏来连接应用程序不同的层级。

未完待续,下一篇《App Architecture_Requesting Permission》,敬请期待。

Powered by Froala Editor

更新:2020-05-21

收藏

2人已收藏

  • 28

    作品

  • 637

    粉丝

  • 12

    关注

  • 个人作品集_泽泽先生
  • 要找到好工作,简历和作品集得这样设计。
  • 深色模式真的有那么好吗?
  • Requesting Permission

    猜你喜欢

      2020-05-21 自译外文 经验/观点 原作者: 苹果公司 举报 879 2 1 0

      App Architecture_Navigation

      0.0°

      你确定要举报App Architecture_Navigation

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录