福州摩多网络有限公司

移动产品UI中的六种常见导航模式

2020-09-04 13:12


  作为一本简易的UI模式参考书,《移动应用模式》非常适合移动应用开发人员、师阅读,还没买的同学们可以看看这本书关于移动UI设计中导航模式的经验分享。

  正如精良的设计一样,优秀的导航也大象无形。不管是浏览好友信息,还是租赁汽车,完美的导航设计能让用户根据直觉使用应用程序,也能让用户非常容易地完成 所有任务。一款应用的导航可以被设计成各种样式,但我想着重介绍6种主要的导航模式,也就是主菜单的导航模式。

  navigations

  跳板式 跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被称为“快速启动板”(Launchpad)。跳板式导航的特征是,登录界面中 的菜单选项就是进入各个应用的起点。Facebook 应用沿用了iOS 主界面上的跳板式设计,其他应用随之跟风。

  navigations

  Facebook 的跳板式导航和Ovi Maps 应用

  navigations

  Trulia 和LinkedIn 的导航设计

  navigations

  Palm 手机上的NewsRoom 和Nokia 手机上的Yahoo !

  个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料。通常会提供自定义功能,允许用户改变跳板式导航的布局(见图1-5)

  navigations

  PayPal 用户个性化的跳板式导航和Gowalla 应用的早期版本

  常见的布局形式是3×3、2×3、2×2 和1×2 的网格(见图1-6)。但跳板式导航不一定非要拘泥于网格布局,你可以成比例地放大某些选项,以彰显其重要性。在iPhone的应用Masters 中,VIDEO 选项就是其他菜单选项的2 ~ 3 倍大。

  navigations

  跳板式导航的网格布局

  navigations

  Norton Mobile 的2×2 网格布局和Masters 的不规则布局。

  为同等重要的内容项使用网格布局,为相比之下更为重要的内容项使用不规则布局形式。视情况使用个性化设置和自定义选项。

  列表菜单式 列表菜单式导航与跳板式导航的共同点在于,每个菜单项都是进入应用各项功能的入口点。这种导航有很多种变化形式,包括个性化列表菜单 (Personalized List Menu)、分组列表(Grouped List)和增强列表(Enhanced List)等。增强列表是在简单的列表菜单之上增加搜索、浏览或过滤之类的功能后形成的。

  navigations

  列表菜单:Valspar Paint 和Kayak 应用

  navigations

  列表菜单:Palm 手机上的RadioTime 和Cozi 应用

  navigations

  个性化列表:Blackboard 和Zoho CRM 应用

  navigations

  增强列表:Amazon MP3 应用;分组列表:Stratus 应用

  列表菜单很适合用来显示较长或拥有次级文字内容的标题。使用列表菜单的应用要在所有次级屏幕内提供一个选项,用来返回菜单列表。通常的做法是在标题栏上显示一个带有列表图标或“菜单”字样的按钮。

  选项卡式

  选项卡式导航在不同的操作系统上有不同表现,对于选项卡的定位和设计,不同操作系统有不同的规则(见图1-12)。如果要为你的应用选择这种导航模式,就要为不同的操作系统专门定义选项卡的位置。

  navigations

  不同操作系统内选项卡的位置

  iOS、WebOS 和BlackBerry 系统都把选项卡放在了屏幕底端,这样用户就可以用拇指进行操作。

  navigations

  位于屏幕底部的选项卡:Jamie Oliver Recipes 和Molome 应

  navigations

  位于屏幕底部的选项卡:BlackBerry 系统的应用World 和WorldMate

  屏幕底部水平滚动的选项卡是个非常不错的设计,如图1-15 中的Starbucks 和Blue Mobile 应用,它可以在同一屏内提供更多的操作选项。

  navigations

服务支持

我们珍惜您每一次在线询盘,有问必答,用专业的态度,贴心的服务。

让您真正感受到我们的与众不同!