移动应用设计细节分析——导航

移动设计模式整理分析——导航篇

产品导航设计优缺点分析

8种移动APP导航设计模式大对比


1.扁平式导航

1.1 经典Tab式导航

常见于屏幕底端或屏幕顶端两种,选用选项卡式导航则各选项之间为并列关系,其中常选状态为最重要,操作最频繁一项。为已选择的菜单项设置不同的视觉效果,用户就能清晰地知道自己选择了哪一项。使用易于识别或带有标签的图标。

微信
通用布局

适应需求:

①用户需要频繁地在不同分页切换;

②主要功能/入口不太多,结构并列。

优点:

①给人感觉直观,方便用户快捷操作;

②直接展现最重要入口的内容信息;

③可以轻松在各个主要入口频繁跳转使用,减少点击次数;

④清楚当前所在的入口位置,不会迷失方向。

缺点:①占位置;(改进:上下滑动隐藏显示导航)

safari-上滑隐藏导航

②容量有限;(改进:Tab上增加Popover或Actionsheet)

③沉浸式体验较差,导航会分散用户的注意力。(改进:同①)


1.2舵式导航

样式很像轮船上用来指挥的船舵,两侧是其他操作按钮。常用与UGC产品,将发布按钮突出强调,目的在于鼓励用户进行原创发布。

新浪微博

适应需求:当页有同级的几大部分内容,又需要一个非常重要且频繁的操作入口;

优点:优点类似Tab导航,且最重要的功能突出,引人注意,不需寻找。

缺点:同Tab;更影响沉浸感。


1.3宫格导航 / 跳板式导航 / 快速启动板(Springborad)

往往用在二级页作为内容列表的一种图形化形式呈现,或是作为一系列工具入口的聚合。

适应需求:多个同等重要的内容项(>5个)

优点:选项清晰明显,易点击。

缺点:①无法在多入口间灵活跳转,不适合多任务操作;

②容易形成更深的路径;

③不能直接展现入口内容;

④选择多、外形相近,用户认知压力大,选择效率低。(改进:利用不规则的布局方式凸显某些项的重要性,或让用户自定义。)

不规则的宫格导航

注意:不要过度使用色彩,可能会让用户不知所措和产生疲倦感。

1.4超级菜单式(略)


2.层级式导航

2.1列表菜单(List Menu)

通常用于二级页,不会默认展示任何实质内容,所以通常app不会在首页使用它。

适应需求:

①项目标题较长或含有次级内容;

②二级以下页面;

③项目间需要分组(通过间距、标题等进行分组,形成扩展列表)。

优点:结构清晰,易于理解,冷静高效;

缺点:层级深,用户容易感到迷茫,不知道在哪。(改进:结合其他导航方式,如如“跟随式”固定导航,帮助用户定位目标)

“跟随式”固定导航


2.2抽屉式导航(Drawer)

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去。

老知乎

适应需求:

①核心功能突出且较为单一;

②需要对多个视图统一操作;

③内容展示需要足够空间,要求高沉浸感体验;

④App信息层级较多,需要节省空间。

优点:

①界面简洁,焦点集中。核心功能和内容信息最大限度展现在用户眼前,有效保护了用户对核心功能的体验;

②兼容性好;

③导航扩展性好;

缺点:

①不直观,点击较多、路径较深,切换麻烦;

②右手操作不便;(改进:边缘交互,屏幕左侧边缘拉出菜单)

③隐藏性高,学习成本高;

④顶部导航栏信息过载。


2.3点聚式

Naver-幽灵小绿点

优点:①灵活,有趣;②使界面更开阔。

缺点:类似抽屉,;对入口交互的可供性(affordance)要求高


3.内容/体验主导式导航

3.1 图片轮盘式

当你的应用信息足够扁平,可以尝试轮播导航。

适应需求:

①信息足够扁平,结构并列;

②需要高沉浸感与流畅体验感。

优点:

①最大程度的保证应用的页面简洁性,高流畅性,操作与浏览无缝过渡;

②单页面内容整体性强,对展示类App有奇效(如探探、商品展示App……)。

缺点:

①第一眼无法掌控所有内容;

②控制感弱,定位难;

③由于各页面内容结构相似,容易忽略后面的内容


3.2 陈列馆式(Gallery)

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


适应需求:

①信息足够扁平,结构并列;

②内容常浏览、更新频繁。

优点:

①直观,简洁,便于浏览,体验流畅;

②承载内容丰富,沉浸感好。

缺点:①容易发生空间位置迷失;②浏览一段时间后,容易产生疲劳感。

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

推荐阅读更多精彩内容