移动应用导航设计模式总结

参考了四本书,结合自己的观察和思考,总结出了以下几种导航模式。


扁平式--标签导航

1.特点:

▪目前iOS系统中使用频率最高的导航形式,也是"iOS主推的导航模式"。

▪标签可以让用户直观、快速地了解当前应用的主要功能,且仅仅通过一次点击便可以在页面间进行灵活地切换。

▪由于标签栏一般情况下是始终位于屏幕底部的,且会通过标签的选中状态告知用户当前所处的页面,因此用户不易迷失。但是,这也使得每个页面的下方都会被占据一定的空间(因此可以考虑在需要时暂时隐藏标签栏)。

▪标签不能超过5个。因为屏幕空间有限,过多的标签会压缩彼此的空间从而使得用户的点击容易出错。并且,过多的标签会让用户不容易记住并快速理解当前应用的结构,从而失去了标签式导航的优点。因此,如果应用的功能繁多、结构复杂不稳定,则最好考虑其他导航。

2.适用情境:

▪"入口选项不多,且用户需要在选项间频繁切换来执行多任务"

▪"在用户选择功能、信息甚至心理状态("我不知道要吃什么,帮我选个餐馆吧")时,标签栏式切换选择操作模态▪的理想方案"

▪标签栏很适合和层级式导航搭配使用,这也是当前多数app使用的导航模式。

3.设计要点:

▪"根据应用的功能类型和信息类型进行标签分类",这样才可以保证让导航为内容服务;

▪标签的摆放需要考虑重要性、逻辑关系、屏幕的点击区域等(一般情况下,最右边的标签最不容易被点击,因此一般在此放置类似于个人信息等优先级不高的功能的标签);

▪"每个标签对应的页面都可以(且应该)有自己独特的界面风格,还有自己特定的内容和功能",这样的目的是"适应当前的功能和需求"。

4.设计细节

▪在iOS中通常位于屏幕底部(Android中唱见于顶部);

▪"使用徽标低调地传达信息";

▪"如果某个标签所代表的部分功能在当前情境下不可用了,相比移除这个标签,更好的做法是显示一个禁用的标签。"

▪标签栏的图标一定是可以清晰地表达信息且易于用户理解的,否则最好使用图标加简短的说明文字以防止用户产生疑惑;

▪标签的选中状态一般有以下两种:只有标签变为选中状态或者标签和其所在区域都呈现选中状态。

5.设计延伸

将核心功能摆放在标签栏的中央。中间的标签可以是一个单独的功能也可以是多个子功能融合在一个功能按钮里。这样不仅可以使核心功能更加突出,还可以使标签栏更有趣。

层级式导航(树形结构)

层级式导航尤其要注意信息层级的深度,因为用户往往只能通过一条路径找到目标信息,过深的层级可能会使用户丧失寻找的欲望。

列表导航

1.特点:

▪列表导航使用的层级的信息分类方式对用户来说容易理解且熟悉(PC端常用)

▪容易进行自定义和扩展,方便添加新功能

▪可以承载包括文字、图片等大量内容

2.适用情境:

▪当导航的分类项目较多时,列表导航比标签式导航更适合

▪"适合展示层次分明的等级结构"

▪"列表式导航容易扩展和分组,常用于设置、消息和承载大数据量信息的界面"

3.设计要点:

▪根据优先级、逻辑关系等控制列表的分类和排列

▪"由于列表的左右宽度较大,可以结合图标、标题说明货消息数字提示等"

▪扩展式列表:当信息的层级较多时,可以考虑使用扩展式列表对子级信息进行展开和隐藏,用户可以在当前页面进行进一步地信息浏览,从而不会打断用户的当前任务。

桌面式/跳板式/辐射式

1.特点:

▪本质上都是层级结构,只是不同的表现方式。因为分类项目之间都是互斥的,需要通过不断点击来进入下一层级再按照原先路径逐层返回。

▪结构清晰,每个格子位置固定,因此可以方便用户通过方位记忆进行快速定位

▪用户必须返回首页来切换功能,增加了操作步骤

2.适用情境:

▪"适合内容丰富的导航入口,且入口之间都是并列的项目"

▪"不适合在多任务中使用"

▪"不适合在交叉类别中使用"

▪"特别适合工具性界面"

▪可考虑作为子导航,对内容进行分类时使用

3.设计要点:

呈现方式:图标或图片(必要时结合文字说明,尤其在使用图片时)

布局方式:常见的是四宫格、六宫格、九宫格等,不需要拘泥于这种形式。使用图片时要注意防止页面的混乱。

延伸设计--图示/陈列馆式

1.特点:

▪使用变化的而不是固定的图片同时配以说明文字来作为导航入口,一般在次级导航中使用。

▪"根据页面内容的变化,可以及时地更新图片,适合以图片为主的内容。"经常变化的图片使界面更有趣,更富吸引力。

2.设计要点:

"需要配置固定的栏目或标题,防止不断更新的图片让用户找不到相应的入口。"

抽屉式

1.特点:

▪"追求核心内容的突出,弱化导航界面"

▪由于是隐藏在屏幕之外,所以

▪"导航界面空间较大,为可扩展性和个性化带来了更多可能"。

▪也可能让用户容易"迷路",因此需要告诉用户当前所处的位置(一般在页面另一侧显示原页面从而起到暗示的作用)。

2.适用情境:

▪适用于一些突出内容的"信息流产品"

▪更适用于扁平化的信息架构

3.设计要点:

▪"一般位于当前界面的后方,通过左上角的按钮或手势滑动呼出。"

▪"对于性能较差的手机,可以使用点击图标的方式来做设计的降级处理。"

▪该导航的呼出按钮一般表示为三条平行线或带有三条平行线的图标

菜单式

1.特点:

▪"以突出内容为主的导航方式"

▪"与界面的连贯性较好,展开和收起菜单对当前界面没有影响"

▪与抽屉式菜单相比其可扩展性和个性化程度相对较低

2.适用情境:

▪适用于一些突出内容的"信息流产品"

▪"由于导航菜单位于屏幕顶部,难以结合手势,所以不适合需要频繁切换的功能"

▪常用此导航对当前界面内容进行分类浏览

3.设计要点:

▪"一般位于产品顶部,通过点击呼出"

▪呈现的方式通常为列表+模态视图,"导航菜单位于界面上层,用户可点击导航以外的区域来收起菜单"

抽屉式导航vs菜单式导航

共同点:

▪将层级框架中的分类内容进行隐藏

▪适合需要弱化导航界面、突出内容的应用

▪不适合承载需要频繁切换的功能

不同点:

▪抽屉式导航页面空间较大,可承载更多内容;菜单式导航所能承载的内容则相对较少,因此要更为精简。

▪"抽屉式导航可以很好地兼容各种分类方式,而不影响应用的界面效果";菜单式导航则往往更适合以精炼的列表形式展现。

▪抽屉式导航在结合手势的情况下要比菜单式导航更容易呼出,尤其对于大屏手机,左上角和中央的最上方都不是容易点击的地方。

▪菜单式导航与界面连贯性更好,因此可能对用户当前任务造成的影响更小。

分段选项卡

1.特点:

▪"对主导航内容的再次分类"

▪与主导航相结合可以让用户明确自己的当前位置

▪不需要在页面间进行跳转找到目标信息,一般在当前页面就可以完成

2.适用情境:

内容复杂,需要层级分类以帮助用户快速找到目标信息时,分段选项卡是一个可以考虑的分类工具

3.设计要点:

▪"位于界面顶部,视觉上会突出当前所在位置",从而保证用户不会迷路

▪"一般位于导航栏下方",这样可以通过位置关系暗示出其与主导航之间的逻辑关系

▪若使用iOS提供的分段控件,则选项卡数量要少于等于5个,因为要考虑用户是否能够准确点击

▪若有更多选项卡数量的需要,则可以选择"结合手势滑动界面"的控件形式

▪各个选项卡代表的应该是"紧密相关又相互排斥"的选项中


平铺式(走马灯/轮盘)

1.特点:

▪"用户通过左右手势滑动来聚焦到当前内容"

▪操作方便(手势)

▪节省空间

▪用户不能选择跳过,必须逐次浏览,因此不适合层级信息

2.适用情境:

▪"一般适合于图片或整块内容的并列展示",适合扁平化的信息而不是层级信息

▪"适用于整体性比较强的内容"且"内容之间是并列关系"

▪产品有需要用户注意的内容时,可选择此展示方式且让内容主动定时切换,从而可以有效地吸引用户的注意力(人们容易被动态的事物所吸引)

▪当页面空间有限时,可以考虑将此作为一种解决方法,因为它可以隐藏部分同一层级的信息但同时又能暗示用户更多信息的存在从而不会产生遗漏

▪横向的浏览方式适合与纵向的浏览方式(如:列表)进行结合,可以有效地节省空间/组织信息,同时还能让用户保持注意且在一定程度上防止用户操作疲劳。

▪"无法立即跳到非相邻页面,不适合较多页面的加载"

▪"对这种导航不熟悉的用户,可能会忽略后面的内容"

3.设计要点:

▪"一般来说,走马灯的内容数量不能太多,控制在5~7个以内,以避免用户操作疲劳"

▪"提供视觉暗示,例如显示下一张的部分内容,或添加分页指示器(页码控件),让用户浏览页面时保持清晰的方向感和对数量的认知。"

▪可选择的呈现方式:

页面轮盘--一般包括页码控件且自动切换,动态呈现;

图片轮盘--一般通过显示下一张的部分内容来暗示用户主动滑动浏览,静态呈现。


参考书籍:

《触动人心-设计优秀的iPhone应用》「美」Josh Clark著,包季真 译 .电子工业出版社.

《移动应用UI设计模式》「美」Theresa Neil著,王军锋 郭偎 武艳芳 译.人民邮电出版社.

《移动设计》傅小贞 、 胡甲超、 郑元拢 著.电子工业出版社.

《方寸指间》无线工坊 著.电子工业出版社.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容