iOS12界面设计指南之APP架构(App Architecture)–导航(Navigation)


Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

用户通常更趋向于忽略应用的导航除非当某些操作没有达到他们预期的时候。因此我们的工作也更趋向于在不被引起注意的前提下去设计一个结构清晰,目的明确的导航。导航应该要显得自然以及熟悉,而且不应该抢走主页面的风头亦或是主导应用。对于iOS来讲,主要有三种风格的导航。

层级导航(Hierarchical navigation.)每一屏只做一个选择,直到到达你想的位置。如果想到达另外的位置,你必须原路一级级返回并且从最开始的位置再次依次做出选择。像系统原生的设置及邮件应用便是典型的层级导航模式。

 

平级导航(Flat navigation. )在不同内容类别间进行切换。像音乐和APP Store便是典型的平级导航模式。

 

内容驱动或体验驱动导航(Content-driven or experience-driven navigation.)在应用的不同内容间切换,或者由应用本身来定义导航。像游戏,书籍或者其它沉浸式应用一般都使用这种导航模式。

 

有些应用会结合采用多种导航模式。如一个采用平级导航的应用也可能同样包含用于不同类别跳转的层级导航。

永远提供一个清晰的路径(Always provide a clear path. )用户应该能随时知道他们当前所处应用位置并且知道如何能够到达下一个目标位置。所以在考虑导航风格的同时,不同内容间合理的,可预期的,容易追溯的路径也是非常必要的。一般来说,对于每一屏幕内容给予其唯一入口。如果用户需要在多种情景下看到一个屏幕内容,可以考虑使用操作列表,警告框,浮层或者特殊情景状态等形式来展示这些内容。更多内容请参考Action SheetsAlertsPopovers以及Modality

设计一个可以快速容易达到具体内容的信息结构(Design an information structure that makes it fast and easy to get to content. )组织一个能够通过最少点击,滑动以及屏幕便可以访问相应内容的信息结构。

使用手势操作提升应用的操作流畅度(Use touch gestures to create fluidity.)让用户以最小的阻力轻松在你的应用界面间进行跳转。如可以使用屏幕右滑操作去进行上一屏幕的返回。

使用标准系统导航组件(Use standard navigation components. )尽可能的使用标准导航控件,如页面控件,标签栏,分段控件,表格控件,集合视图以及拆分视图等;用户对于这类控件以及非常熟悉,这样便能够更轻松的使用你的应用。

使用导航栏联通层级数据(Use a navigation bar to traverse a hierarchy of data. )导航栏的标题通常可以展示当前位置,返回按钮则可以使用户可以很容易的返回上一位置。更多内容可参考Navigation Bars

使用标签栏来展示不同类别的内容或功能(Use a tab bar to present peer categories of content or functionality.)标签栏可以使用户可以在当前位置进行不同类别内容等的快速切换,详情请参考Tab Bars章节。

同一类型页面不同内容时可以使用页面控件(Use a page control when you have multiple pages of the same type of content.)页面控件能够清楚的展示总页面数量以及当前页面的位置。天气应用通常使用页面控件来展示不同地理位置的天气情况。更多内容请参考Page Controls。

小窍门
分段工具和工具栏并不具备导航功能,通常使用分段控件来组织将信息放入不同的类别,使用工具栏来为当前内容提供交互控件。更多相关内容请参考Segmented ControlsToolbars