iOS应用导航模式

原文：http://www.leiphone.com/news/201406/0726-warlial-iosnavigation.html

 

iOS应用导航模式有3种：平铺列表、标签页、树状结构，每种模式都配有不同的工具栏和控件。三种导航模式可以独立使用也可以混搭。

平铺列表：由scrollView和pageControl组合而成的展示方式。

这种方式主要用于只有一个主屏的简单应用。向左右滑动即可翻页，典型应用比如内置的天气应用。

当然，平铺列表式导航也可以根据你的需要随意的添加、删除卡片。从某种意义上讲，他的扩展性优于标签页式导航，因为标签页模式中类目与顺序都是固定的。

在平铺列表模式的页面底部都添加了页面分页控件，其表现为一排小圆点。小圆点的数量代表了平铺的页面的数量，而高亮的小点则是另外一种形式的导航，他显示了当前所在页面的位置。同时，页面分页控件也是可以操作的，点击控件的左半部分或者右半部分或者直接左右滑动可以切换上一个/下一个页面，不过，页面分页控件每次只能翻一页，而不是直接跳转到某一页去。一般而言，页面分页以不超过10个为最优，超过了20个就会溢出屏幕了….

另外，为了更好的表达”卡片堆“的隐喻，最好不要在平铺模式下设计多个不同的滑动手势。在触摸屏上大家都能在单一方向上进行滚屏，但是2个方向的滚屏需要更好的精度，这种做法有些挑战人机工程学了。

标签页：tabbar

在iOS上标签页一般依附在屏幕的底部，标签栏的高度是49像素，每个按钮都会包含一个文本标签和图标，按钮的宽度取决于放置按钮的数量，标签栏限制最多可以放5个图标，超过之后会在第5个按钮的位置出现”更多“的标签。

当然，标签栏以49像素的高度存在其实占用了不少的屏幕空间，所以在某些情况下可以适当的去掉标签栏，典型的就是图书类应用的全屏阅读模式。

树状结构：tableView

这种模式简单来说就是将层级信息分类到一棵倒置的树枝上。这种导航模式很适合列表，点击列表中的一项可以看到新的列表，列表可以再进行分拆，直到进入项目的详情。树状结构的一个变形就是表格视图，也就是我们常说的”9宫格”，这种变形更加的图形化。

当然，根据信息的不同，树状模式中的标签也可以进行分组。一个树状模式可以分为若干的组，每个组可以包含任意数量的行数。

3类导航模式的比较

导航模式	优点	缺点	代表应用
平铺列表	适于信息架构及简的浏览性页面； 内容可自定义且数量可变； 隐喻明显，手势单一； 占用页面空间少；	无法快速进行跳转翻页； 最多只能容纳20个页面； 难以包容滚屏，对长文本不利； 页面指示器不够明显，其他页面容易被忽略；	天气
标签页	点击一次即可访问应用所有的主要功能； 清楚告知用户主要功能和当前所在；	只能显示5个； 应用的大多数页面都会始终占据一定的屏幕空间；	Instagram
树状结构	处理大量的类别、功能和类目； 组织方式的隐喻容易理解； 可直接对内容进行交互，占用屏幕空间小； 适合用户自定义分类；	主功能只有在最顶层才会被显示，不能在每个页面都展现； 主功能和分类直接切换比较麻烦，必须先回到顶层；	MailFacebook

模态视图

常常被用来编辑或添加内容，当你需要的时候模态视图一般从屏幕底部滑出而后遮盖先前的页面，当你完成任务后滑出的页面也会相应的缩回去，然后可以继续之前的流程。有些控件和界面元素只在次要任务中被偶尔用到，模态视图很好的把他们暂时隐藏了，并且当需要的时候出现，有效的节约了屏幕空间。

模态视图有点像是导航中的死胡同，为了能够让用户也可以同样方便的回到正常的流程中去，模态视图除了正常的操作之外一般还有加上一个“完成”按钮，或者“取消”按钮。