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

移动UI设计中的7种主要导航模式正如精良的设计一样，优秀的导航也大象无形。不管是浏览好友信息，还是租赁汽车，完美的导航设计能让用户根据直觉使用应用程序，也能让用户非常容易地完成所有任务。一款应用的导航可以被设计成各种样式，但我想着重介绍６种主要的导航模式，也就是主菜单的导航模式（见图1-1）。图1-1主要导航模式跳板式跳板式导航对操作系统并没有特殊要求，在各种设备上都有良好表现。它有时也被称为“快速启动板”（Launchpad）。跳板式导航的特征是，登录界面中的菜单选项就是进入各个应用的起点。Facebook应用沿用了iOS主界面上的跳板式设计，其他应用随之跟风（见图1-2至图1-4）。图1-2Facebook的跳板式导航和OviMaps应用、图1-3Trulia和LinkedIn的导航设计图1-4Palm手机上的NewsRoom和Nokia手机上的Yahoo！个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能，允许用户改变跳板式导航的布局（见图1-5）图1-5PayPal用户个性化的跳板式导航和Gowalla应用的早期版本常见的布局形式是3×3、2×3、2×2和1×2的网格（见图1-6）。但跳板式导航不一定非要拘泥于网格布局，你可以成比例地放大某些选项，以彰显其重要性。在iPhone的应用Masters中，VIDEO选项就是其他菜单选项的2～3倍大（见图1-7）图1-6跳板式导航的网格布局图1-7NortonMobile的2×2网格布局和Masters的不规则布局为同等重要的内容项使用网格布局，为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。列表菜单式列表菜单式导航与跳板式导航的共同点在于，每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式，包括个性化列表菜单（PersonalizedListMenu）、分组列表（GroupedList）和增强列表（EnhancedList）等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的（见图1-8至图1-11）。图1-8列表菜单：ValsparPaint和Kayak应用图1-9列表菜单：Palm手机上的RadioTime和Cozi应用图1-10个性化列表：Blackboard和ZohoCRM应用图1-11增强列表：AmazonMP3应用；分组列表：Stratus应用列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项，用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图标或“菜单”字样的按钮。选项卡式选项卡式导航在不同的操作系统上有不同表现，对于选项卡的定位和设计，不同操作系统有不同的规则（见图1-12）。如果要为你的应用选择这种导航模式，就要为不同的操作系统专门定义选项卡的位置。图1-12不同操作系统内选项卡的位置iOS、WebOS和BlackBerry系统都把选项卡放在了屏幕底端，这样用户就可以用拇指进行操作（见图1-13和图1-14）。图1-13位于屏幕底部的选项卡：JamieOliverRecipes和Molome应用图1-14位于屏幕底部的选项卡：BlackBerry系统的应用World和WorldMate屏幕底部水平滚动的选项卡是个非常不错的设计，如图1-15中的Starbucks和BlueMobile应用，它可以在同一屏内提供更多的操作选项。图1-15位于屏幕底部的滚动选项卡：Starbucks和BlueMobile应用Android、Symbian和Windows系统都把选项卡定位在屏幕的顶端，这种形式看上去很眼熟，因为它模仿了标准的网站导航模式。Nokia和Windows都在屏幕顶端设计了可滚动的选项卡，用户移动选项卡后能看到更多的菜单项（见图1-16和图1-17）。图1-16位于屏幕顶端的滚动选项卡：HarvestTimeTractor应用和Nokia上的Fring应用图1-17位于屏幕顶端的选项卡：Foursquare和HitPost应用为已选择的菜单项设置不同的视觉效果，用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。陈列馆式陈列馆式的设计通过在平面上显示各个内容项来实现导航，主要用来显示一些文章、菜谱、照片、产品等，可以布局成轮盘、网格或用幻灯片演示（见图1-18至图1-20）。图1-18BBC和PULSE应用图1-19Flickr应用和Palm手机上的PictureIt应用有时，对这些内容进行分组更易于用户浏览。Dwell利用侧边选项卡把陈列馆式导航里的内容组织成了可供用户管理的内容块。图1-20Dwell应用陈列馆式导航能很好地应用于用户需要经常浏览，频繁更新的内容。仪表式仪表式导航提供了一种度量关键绩效指标（KeyPerformanceIndicators，KPI）是否达到要求的方法。经过设计以后，每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用（见图1-21）。图1-21Mint和Ego应用中的仪表式导航不要使用过多的仪表式导航。你需要开展研究才能决定应该对哪些关键量度采用仪表式导航。隐喻式这种导航的特点是用页面模仿应用的隐喻对象。这种导航主要用于游戏，但在帮助导航人们组织事物（如日记、书籍、红酒等），并对其进行分类的应用中也能看到（见图1-22至图1-25）。图1-22AwesomeNote应用图1-23Cellar应用图1-24DoItTomorrow和TripJournal应用图1-25AldikoBookReader应用一定要谨慎地使用隐喻式导航，蹩脚的模仿很可能造成10.1节出现的反模式（anti-Pattern）。超级菜单式移动设备上的超级菜单式导航与网站所用的超级菜单导航类似，它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。RipCurl网站就利用超级菜单显示服饰的次级类别（见图1-26）。图1-26RipCurlShop.comWebOS系统版本的Facebook利用超级菜单来精简导航，避免了跳板式导航中过多的选项。Walmart在它们的Android应用中也采用了超级菜单式（见图1-27）。在选择导航模式之前，首先要确定信息架构。如果要导航的对象仅仅是应用中少数主要内容，就可以使用选项卡之类的导航模式。图1-27WebOS系统下的Facebook和Android系统下的Walmart本文摘自《移动应用UI设计模式》