移动UI设计模式之导航设计


导航–我理解为APP中的地图,好的导航能够快捷的指引用户达到目的,也能提高用户体验。

跳板式导航

跳板式导航又称为快速启动板或宫格导航,其特征为界面中的菜单选项就是进入各个应用的起点。当有多个内容项(>5)时,可以用这种导航模式,往往用在二级页面作为内容列表的一种图形形式呈现,或作为一系列工具入口的聚合。

其表现方式有:①利用网格布局将主要入口全部聚合在页面,让用户做出选择,各项之间同等重要。②利用不规则的布局方式可以凸显某些项的重要性。③视情况使用个性化和用户自定义选项,个性化的跳板式导航可在显示菜单选项的同时显示用户个人资料,通常会提供自定义功能,允许用户改变跳板式导航的布局。

跳板式导航的缺点为:无法第一时间看到内容,选择压力大。

列表菜单式导航

与跳板式的特征相同,列表菜单式导航的每个菜单项都是进入应用各项功能的入口点。

其表现形式有:个性化列表菜单,分组菜单和增强列表,分组菜单可将内容划分区域,增强列表是在简单的列表菜单上增加搜索,浏览或过滤之类的功能后形成。

列表菜单很适合用来显示较长或拥有次级内容的标题,通常用在二级页面,不会默认展示任何内容。其缺点是会占用一定高度。

选项卡式导航

选项卡式导航在不同操作系统上有不同表现。位于屏幕底端的选项卡可以方便用户用拇指进行操作,适用于需要经常切换的标签。选项卡上的标签采用7+-2原则不超过5个,如有更多可以用水平滑动来设计。位于屏幕顶端的选项卡看上去让人眼熟,因为它模仿了标准的网站导航模式。

为已选择的菜单项设置不同的视觉效果,用户就能清晰的知道自己选择了哪一项。

当下所流行的tab导航,舵式导航,抽屉式导航都属于选项卡的变种。

陈列馆式导航

陈列馆式导航通过在平面上显示各个内容项来实现导航。主要用来显示一些文章,菜谱,照片,产品等。

表现形式可以布局成轮盘,网格或用幻灯片演示。

陈列馆式与宫格式的区别在于陈列馆式可以看得到内容,用来展示,而宫格大多运用图标来表现。陈列馆式导航能很好的应用于用户需要经常浏览,频繁更新的内容。

仪表式导航

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

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

隐喻式导航

隐喻式导航的特点是用页面模仿应用的隐喻对象,这种导航主要用于游戏,但在帮助人们组织事物(比如日记,书籍,红酒等),并对其进行分类的应用中也能看到。阅读类APP很多采取隐喻式。

超级菜单式导航

这种导航模式在现在的设计中使用的比较少,而且一般会用做分类检索的次级导航使用。个人理解超级菜单即为一个界面中拥有多个菜单导航,当有多种分类选项时适合应用超级菜单式导航。

页面轮盘式导航

通过这种导航模式,用户可利用滑动操作快速浏览一系列离散的页面,页面指示器可显示出导航中的页面数量,用户滑动可显示下一页。

页面轮盘式可以很好的实现少量页面,用直观的指示器来表明总屏数和当前所在位置。

图片轮盘式导航

图片轮盘式能很好的显示清新悦目的内容,如艺术品,产品或照片等。无论是使用箭头,部分图片内容或是页面指示器,它都能提供良好的视觉化功能可见性,也便于告知用户有更多的内容可以访问。

扩展列表式导航

扩展列表式导航通过下拉屏幕显示更多的信息,它能够很好的逐步显示某个内容项的更多细节或选项。

在选择导航模式之前,首先要确定信息架构,再根据信息内容选择合适的导航。


                                                     

                                                   

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

推荐阅读更多精彩内容

  • 前言:14年8月分享在500UXC的文章,时间长即失去了它的时效性,今转载至此。 年正如精良的设计一样,优秀的导航...
    钴蓝阅读 2,532评论 3 15
  • 读后感:基础性知识,很多适合新手的干货,读起来很轻松。书内提供的案例有一定年代感,拟物化确实比扁平化的认知难度要高...
    微小宇宙阅读 1,164评论 0 5
  • 主要导航模式: 跳板式导航:跳板式导航对操作系统并没有特殊要求,在各种设备上都有良好表现。它有时也被 称为快速启动...
    2c5994723157阅读 962评论 0 2
  • 这周看了一本书——《移动应用UI设计模式》,与0-1岁产品经理分享: 其实全书就是把移动应用的表皮撕碎了来讲,从用...
    拾零阅读 1,401评论 1 9
  • 今天看了小森林的春夏两部,很喜欢女主角自给自足,认真努力生存的样子。这部电影很真实地描述了一个田园牧歌式的生活状态...
    幻想家Melon阅读 143评论 0 0