分享好友 最新资讯首页 最新资讯分类 切换频道
移动UI设计中的7种主要导航模式手机界面设计「移动UI设计中的7种主要导航模式」
2025-01-14 08:39


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


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

图1-1 主要导航模式

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


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


图1-2 Facebook 的跳板式导航和Ovi Maps 应用

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


图1-3 Trulia 和LinkedIn 的导航设计

移动UI设计中的7种主要导航模式_网格布局_04


图1-4 Palm 手机上的NewsRoom 和Nokia 手机上的Yahoo !

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


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


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

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


移动UI设计中的7种主要导航模式_网格布局_06


图1-6 跳板式导航的网格布局

移动UI设计中的7种主要导航模式_网格布局_07


图1-7 Norton Mobile 的2×2 网格布局和Masters 的不规则布局

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

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


移动UI设计中的7种主要导航模式_网格布局_08


图1-8 列表菜单:Valspar Paint 和Kayak 应用

移动UI设计中的7种主要导航模式_网格布局_09


图1-9 列表菜单:Palm 手机上的RadioTime 和Cozi 应用

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


图1-10 个性化列表:Blackboard 和Zoho CRM 应用

移动UI设计中的7种主要导航模式_选项卡_11


图1-11 增强列表:Amazon MP3 应用;分组列表:Stratus 应用

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

选项卡式

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


移动UI设计中的7种主要导航模式_选项卡_12


图1-12 不同操作系统内选项卡的位置

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


移动UI设计中的7种主要导航模式_网格布局_13


图1-13 位于屏幕底部的选项卡:Jamie Oliver Recipes 和Molome 应用

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


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

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


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


图1-15 位于屏幕底部的滚动选项卡:Starbucks 和Blue Mobile 应用

Android、Symbian 和Windows 系统都把选项卡定位在屏幕的顶端,这种形式看上去很眼熟,因为它模仿了标准的网站导航模式。Nokia 和Windows 都在屏幕顶端设计了可滚动的选项卡,用户移动选项卡后能看到更多的菜单项(见图1-16 和图1-17)。


移动UI设计中的7种主要导航模式_选项卡_16


图1-16 位于屏幕顶端的滚动选项卡:Harvest TimeTractor 应用和Nokia 上的Fring 应用

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


图1-17 位于屏幕顶端的选项卡:Foursquare 和HitPost 应用

为已选择的菜单项设置不同的视觉效果,用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。

陈列馆式

陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片、产品等,可以布局成轮盘、网格或用幻灯片演示(见图1-18 至图1-20)。


移动UI设计中的7种主要导航模式_网格布局_18


图1-18 BBC 和PULSE 应用

移动UI设计中的7种主要导航模式_选项卡_19


图1-19 Flickr 应用和Palm 手机上的PictureIt 应用

有时,对这些内容进行分组更易于用户浏览。Dwell 利用侧边选项卡把陈列馆式导航里的内容组织成了可供用户管理的内容块。


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


图1-20 Dwell 应用

陈列馆式导航能很好地应用于用户需要经常浏览,频繁更新的内容。

仪表式

仪表式导航提供了一种度量关键绩效指标(Key Performance Indicators,KPI)是否达到要求的方法。经过设计以后,每一项量度都可以显示出额外的信息。这种主要的导航模式对于商业应用、分析工具以及销售和市场应用非常有用(见图1-21)。


移动UI设计中的7种主要导航模式_选项卡_21


图1-21 Mint 和Ego 应用中的仪表式导航

不要使用过多的仪表式导航。你需要开展研究才能决定应该对哪些关键量度采用仪表式导航。

隐喻式

这种导航的特点是用页面模仿应用的隐喻对象。这种导航主要用于游戏,但在帮助导航 人们组织事物(如日记、书籍、红酒等),并对其进行分类的应用中也能看到(见图1-22 至图1-25)。


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


图1-22 Awesome Note 应用

移动UI设计中的7种主要导航模式_网格布局_23


图1-23 Cellar 应用

移动UI设计中的7种主要导航模式_选项卡_24


图1-24 DoItTomorrow 和TripJournal 应用

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


图1-25 Aldiko Book Reader 应用

一定要谨慎地使用隐喻式导航,蹩脚的模仿很可能造成10.1 节出现的反模式(anti-Pattern)。

超级菜单式

移动设备上的超级菜单式导航与网站所用的超级菜单导航类似,它在一个较大的覆盖面板上分组显示已定义好格式的菜单选项。RipCurl 网站就利用超级菜单显示服饰的次级类别(见图1-26)。


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


图1-26 RipCurlShop.com

WebOS 系统版本的Facebook 利用超级菜单来精简导航,避免了跳板式导航中过多的选项。Walmart 在它们的Android 应用中也采用了超级菜单式(见图1-27)。

在选择导航模式之前,首先要确定信息架构。如果要导航的对象仅仅是应用中少数主要内容,就可以使用选项卡之类的导航模式。


移动UI设计中的7种主要导航模式_选项卡_27


图1-27 WebOS 系统下的Facebook 和Android 系统下的Walmart

本文摘自《移动应用UI设计模式》


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

最新文章
oppo手机备忘录记录怎么转移到华为手机?手机备忘录「oppo手机备忘录记录怎么转移到华为手机?」
oppo手机备忘录记录怎么转移到华为手机?使用oppo手机已经有三四年了,因为平时习惯,在手机系统的备忘录中记录了很多重要的笔记
349元起!OPPO Reno13发布会四大新品价格汇总oppo新款手机价格「349元起!OPPO Reno13发布会四大新品价格汇总」
快科技11月25日消息,OPPO今晚召开发布会,推出了Reno13系列等四大新品,不论是设计、性能还是价格,都非常适合年轻人。具体价格
为啥苹果手机发语音没声音苹果手机打电话没有声音怎么回事「为啥苹果手机发语音没声音」
一、为啥苹果手机发语音没声音?苹果手机发语音没有声音可能是由多种原因造成的,以下是一些可能的原因和相应的解决方法:1、手
华为荣耀手机的便签或记事本在哪能找到?手机记事本在哪里「华为荣耀手机的便签或记事本在哪能找到?」
华为荣耀手机没有便签或者记事本,但是有备忘录可以用来记录事情。自带的备忘录软件还可以设置单次提醒,如果需要重复提醒的待办
家长圈流行手机管控引争议,孩子划坏爹百万豪车手机一「家长圈流行手机管控引争议,孩子划坏爹百万豪车」
  在一、二线城市,12岁以上孩子使用手机的比例已经超过80%,但孩子无节制地使用手机一直在困扰家长。最近,一款名为“袋鼠家
1分钟简单设置 把手机变万能PC遥控器手机变电脑「1分钟简单设置 把手机变万能PC遥控器」
现在很多家庭都开始使用电脑做为影音播放设备。做在沙发上欣赏电影的时候,如果要调整音量或者换个片子的话要起身去电脑旁非常不
【盘点】机圈近几年白色手机实拍 你最喜欢哪台?白色手机「【盘点】机圈近几年白色手机实拍 你最喜欢哪台?」
购买手机时大家有优先考虑的颜色吗?就个人来说,黑色、白色两大经典色永不过时,也是最优先考虑的颜色。不过手机配色往往也承载
2024年手机性能榜前十,不买贵的只买对的性能最好的手机前十位「2024年手机性能榜前十,不买贵的只买对的」
2024年手机性能榜前十,不买贵的只买对的选择手机时看重性能的原因是多方面的,性能不仅影响手机的日常使用流畅度,还关系到游戏
NBA官宣决定!勇士喜讯,老詹库里强强对话,莫兰特终结耻辱纪录nba手机搜狐「NBA官宣决定!勇士喜讯,老詹库里强强对话,莫兰特终结耻辱纪录」
NBA休赛期,绿军、快船、掘金、76人等多支强队展开军备竞赛,司马昭之心路人皆知——他们都想成为终极赢家,像勇士那样的赢家。
【potplayer播放器Tv版主要特点/potplayer有手机端的吗】potplayer安卓手机版「【potplayer播放器Tv版主要特点/potplayer有手机端的吗】」
由于无法在Windows Media Player中播放一些高清电影,所以我建议尝试其他媒体播放器,这里推荐我最近正在使用的PotPlaye播放档期