移动UI设计中的7种主要导航模式.pdfVIP

移动U I设计中的7种主要导航模式 正如精良的设计一样 ，优秀的导航也大象无形。不管是 览好友信息 ，还是租赁汽车 ，完美的导航 设计能让用户根据直觉使用应用程序 ，也能让用户非常容易地完成 所有任务。一款应用的导航可以 被设计成各种样式 ，但我想着重介绍 ６种主要的导航模式 ，也就是主菜单的导航模式 （见图1- 1 ）。 图1- 1 主要导航模式 跳板式 跳板式导航对操作系统并没有特殊要求 ，在各种设备上都有良好表现。它有时也被称为“快 速启动板” （Launchpad ）。跳板式导航的特征是 ，登录界面中 的菜单选项就是进入各个应用的 起点。Faceboo k 应用沿用了iO S 主界面上的跳板式设计 ，其他应用随之跟风 （见图1-2 至图1-4 ） 。 图1-2 Faceboo k 的跳板式导航和Ovi Maps 应用 、 图1-3 T ulia 和LinkedIn 的导航设计 图1-4 Palm 手机上的NewsRoo m 和No kia 手机上的Yahoo ！ 个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能 ，允许用 户改变跳板式导航的布局 （见图1-5 ） 图1-5 PayPal 用户个性化的跳板式导航和Gowalla 应用的早期版本 常见的布局形式是3×3、2×3、2×2 和1×2 的网格 （见图1-6 ）。但跳板式导航不一定非要拘泥于网 格布局 ，你可以成比例地放大某些选项 ，以彰显其重要性。在iPho ne的应用Mast e s 中 ，V IDEO 选项就是其他菜单选项的2 ～ 3 倍大 （见图1-7 ） 图1-6 跳板式导航的网格布局 图1-7 No t o n Mo bile 的2×2 网格布局和Mast e s 的 规则布局 为同等重要的内容项使用网格布局 ，为相比之下更为重要的内容项使用不规则布局形式 。视情况使用个性化设置和自定义选项。 列表菜单式 列表菜单式导航与跳板式导航的共同点在于 ，每个菜单项都是进入应用各项功能的入 口点。这种导航有很多种变化形式 ，包括个性化列表菜单 （Pe so nalized List Menu ）、分组列 表 （G o uped List ）和增强列表 （Enhanced List ）等。增强列表是在简单的列表菜单之上增加搜索 、 览或过滤之类的功能后形成的 （见图1-8 至图1- 11 ）。 图1-8 列表菜单 ：Valspa Paint 和Kayak 应用 图1-9 列表菜单 ：Palm 手机上的RadioT ime 和Coz i 应用 图1- 10 个性化列表 ：Blackboa d 和Z o ho CRM 应用 图1- 11 增强列表 ：A mazo n MP3 应用 ；分组列表 ：St at us 应用 列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所 有次级屏幕内提供一个选项 ，用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图 标或“菜单”字样的按钮。 选项卡式 选项卡式导航在不同的操作系统上有不同表现 ，对于选项卡的定位和设计 ，不同操作系统有不同的 规则 （见图1- 12 ）。如果要为你的应用选择这种导航模式 ，就要为不同的操作系统专门定义选项卡 的位置。 图1- 12 同操作系统内选项卡的位置 iO S、WebO S 和BlackBe y 系统都把选项卡放在了屏幕底端 ，这样用户就可以用拇指进行操作 （见 图1- 13 和图1- 14 ）。 图1- 13 位于屏幕底部的选项卡 ：Jamie O live Recipes 和Mo lo me 应用 图1- 14 位于屏幕底部的选项卡 ：BlackBe y 系统的应用Wo ld 和Wo ldMat e 屏幕底部水平滚动的选项卡是个非常不错的设计 ，如图1- 15 中的St a bucks 和Blue Mo bile 应用 ， 它可以在同一屏内提供更多的操作选项。 图1- 15 位于屏幕底部的滚动选项卡 ：St a bucks 和Blue Mo bile 应用 A nd o id、Symbian 和W indows 系统都把选项卡定位在屏幕的顶端 ，这种形式看上去很眼熟 ，因为 它模仿了标准的网站导航模式。No kia 和W indows 都在屏幕顶端设计了可滚动的选项卡 ，用户移动 选项卡后能看到更多的菜单项 （见图1- 16 和图1- 17 ）。 图1- 16 位于屏幕顶端的滚动选项卡 ：Ha vest T imeT act o 应用和No kia 上的F i