移动设计模式整理分析——导航篇摘要.pdfVIP

移动设计模式整理分析——导航篇 最近一直在整理移动设计模式 ，终于把导航部分整理好了。先跟大家分享 一部分吧 ，有遗漏的或 是有争议的欢迎大家建言~ 导航就像一部小说的章节标题。正常阅读小说时 ，你不用刻意找它 ，它也不会故意蹦跶到你面前 ； 要定位时 ，它能让你知道自己的位置 ，怎样跳页。正如 《ios7人机界面准则》提到的 ，除非和用户 期望相悖 ，否则人们不会注意到app的导航体验 ，你需要做的就是让app的导航与应用的结构和意图 相契合 ，而不让用户注意到导航本身。 我们可以把现有的导航归为三类 ，分别对应于三种不同的应用结构 ： 层级式导航 扁平式导航 内容/体验主导式导航 在层级app中 ，每一个页面进行一次选择导航直达目标页面 ，用户要到达另一个位置时 ，需原路返回 几步 （或者回到开始重新出发 ）并作出不同的选择。 1.1 列表菜单与扩展列表 列表导航通常用于二级页 ，不会默认展示任何实质内容 ，所以通常app不会在首页使用它。 种导 航结构清晰 ，易于理解 ，冷静高效 ，能够帮助用户快速的定位去到对应的页面。 列表项目可以通过间距、标题等进行分组 ，形成扩展列表。 列表菜单导航可以将重要的UI部分以列表的形式进行呈现 ，让用户可以滚动查看自己要执行的操作 或内容。 一模式还可让UI的标题和脚标能够实现更多“通用”导航 ，例如操作栏等。 列表菜单很适合用来显示较长或拥有次级内容的标题。常用作列表 ，如病人列表 ，用户列表 ，功能 列表等。 扩展列表—— “跟随式”固定导航 滚动页面时保持顶部、侧边或底部导航栏不变。在某些情况下 ，页面部分子节的标题也可在滚动时 保持固定 ，或附着到已有的固定导航栏上。 种模式可以迅速定位目标。 1.2 抽屉式导航 抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能 ，让用户更专注于核心的功能操作上去。 如果应用主要的功能和内容都在一个页面里面。只是一些用户设置和选项需要显示在其他页面里。 处于让主页面看上去干净美观的目的可以把 些辅助功能放在侧边栏里。 而如果你的应用有不同的视图 ，且他们是平级的 ，需要用户同等地对待 ，侧边栏将会浪费掉大多数 的用户对于侧边栏中入口的潜在参与度和交互程度。当各内容项不需常切换时 ，可以采用抽屉式 导航。 2、扁平式导航 在一个扁平式信息结构的app中 ，所有的主要类别都可以从主页面进入 ，用户可以直接从一个类别 调到另一个类别。 2.1 跳板式 （又称快速启动板或宫格导航 1、利用网格布局将主要入口全部聚合在页面 ，让用户做出选择 ，各项之前同等重要。 2、利用不规则的布局方式可以凸显某些项的重要性。 3、视情况使用个性化和用户自定义选项。 缺点 ：无法第一时间看到内容 ，选择压力大 当有多个内容项 （＞5个 ）时 ，可以考虑用 种导航方式。 往往用在二级页作为内容列表的一种图形化形式呈现 ，或是作为一系列工具入口的聚合。 2.2 选项卡(标签导航) 常见于屏幕底端或屏幕顶端两种 ，选用选项卡式导航则各选项之间为并列关系 ，其中常选状态为最 重要 ，操作最频繁一项。为已选择的菜单项设置不同的视觉效果 ，用户就能清晰地知道自己选择了 哪一项。使用易于识别或带有标签的图标。 缺点是会占用一定高度的空间。 如果应用需要用户频繁的在不同分页切换 ，可以采用 种导航。通常包含5个标签是比较合适的 数量。当标签过多时 ，可以将不常用标签放到通用标签下 ，或采用底部滑动选择的方式。 2.3 舵式导航 目前流行一种标签导航的变体 ，有人称之为“舵式导航” ，因为它的样式很像轮船上用来指挥的船舵 ，两侧是其他操作按钮。 当页面有处于同一层级的几大部分内容 ，同时又需要一个非常重要且频繁操作的入口 ，就可以采用 种A PP导航模式。中间项标签不紧操作最频繁 ，最重要 ，且需要引人注意 ，方便寻找。 2.4 t ab导航 用于二级页 ，本质和标签导航相同 ，当应用层级较多的情况下 ，可以采用t ab导航 ，典型场景是用 于改变的当前的视图 ，或对当前页面内容进行分类查看。 一般 ，下方t ab页的操作比上方频繁。因此可将次级重要的标签放到上方。 2.5 超级菜单式 移动设备上的超级菜单式导航与网站所用的超级菜单导航类似 ，它在一个较大的覆盖面板上分组显 示已定义好格式的菜单选项。 种模式比较少见。与抽屉式导航有异曲同工之妙 ，当内容项很多且各内容项之间切换不频繁时可 采用。 3、内容/体验主导式导航 直观的用内容或者体验来进行导航。 3.1 图片轮盘式 当你的应用信息足够扁平 ，可以尝试轮播导航 ，如果应用得当 ，能够