APP框架之一导航方式

宫格导航(facebook,ios的应用页面)


登录界面中的菜单选项是进入各个模块的起点

可以成比例的放大某些选项,彰显重要性

列表导航(更多用于二级导航)


个性化列表菜单

分组列表

增强列表

列表菜单使用用来显示较长或拥有次级文字内容的标题

列表适合应用于同类的数据类型或者数据类型组(图片,文本),目标是区分多个数据类型数据或单一类型的数据特性,使得理解起来更加简单。

tab导航(微信)


不同的操作系统有不同的规则

陈列式导航(一些内容类app)


优点:

1、直观展现各项内容

2、方便浏览经常更新的内容

缺点:

1、不适合展现顶层入口框架

2、容易形成界面内容过多,显得杂乱

3、设计效果容易呆板

舵式导航(微博,path,简书,人人)


在突出一个核心功能(一般是书写,发表)的同时,显示其他辅助功能,类似安卓的fab

轮播导航墨迹天气


该导航适用于一些小而美的应用,核心显示全部的信息,辅助页面是核心页面的扩展或比较次要内容

抽屉导航(知乎)


导航方式比较隐藏,但导航方式比较隐藏需要引导,但用户还是很难记住,适合一些核心功能远高于其他辅助的app。

隐藏非核心的操作与功能,让用户更专注于核心的功能操作上去。

一般控制抽屉的把手出现在App的左上角,以按钮的形式出现,点击按钮之后抽屉被拉开,按钮被拉到App的右上角,左侧区域被拉开(抽屉)后显示出导航内容。导航的内容可以是以列表形式展示的常规2级导航,也可以将一些非常用的快捷操作入口直接放进来,如FB的搜索。

其他一些零散的如仪表式(数据),隐喻式(游戏),超级菜单式(web),点聚式导航(fab)


还有一些更多用于次级导航的方式

页面轮盘式


页面加浮点,浮点显示页面数量,最好不要超过8个,第二个页面的打开机会不多,可能被忽略

图片轮盘式(美团影院页面的影片选择)


这个可以很好的展示图片并与下方的信息进行联动,而且这种在图片之间的滑动的交互感觉也挺不错

扩展列表式


很好的逐步显示某个内容项的更多细节或选项

这种方式其实更多用于web页面和pc应用,比如说淘宝的次级菜单,word的下拉菜单,在保证导航广度的同时降低深度


一些参考文章

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

抽屉式导航的衰退及大屏下的产品设计

UI设计模式

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

推荐阅读更多精彩内容

  • 前言:14年8月分享在500UXC的文章,时间长即失去了它的时效性,今转载至此。 年正如精良的设计一样,优秀的导航...
    钴蓝阅读 2,501评论 3 15
  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    设计思考阅读 45,869评论 7 117
  • 作为PM,信息架构和页面流的设计想必烂熟于心,当确定好产品战略层和范围层即为何种目标用户提供何种服务后,就要着手搭...
    Richard_L阅读 11,496评论 1 56
  • 之前的几篇文章谈了谈APP设计中的启动页、引导页、注册【登录】和搜索,本篇文章谈谈导航部分。 同样,我们先来看看导...
    岳山丘阅读 3,979评论 4 87
  • 致力于翻译apache各个项目的IT小组。http://cwiki.apachecn.org/ X3650 配置R...
    非常强壮的蚂蚁阅读 245评论 0 0