移动产品设计模式之导航设计

导航设计在产品的结构层中隶属于信息架构的范围,是框架层的主要表现形式之一。好的导航设计,不仅能反映出交互设计师对信息架构的把握层次,同时也能让用户对产品有着清晰的认识。目前移动产品的设计日趋于完善,导航设计也有以下几个较为具体的分类,今天就着实例和大家分享一下。

标签导航


标签导航是目前最为流行,也最被用户所熟悉的导航模式。像我们日常使用的微信、知乎等等都是这样的设计。


标签导航的优点在于:

入口扁平化,能够在各种功能之间轻松跳转

存在的不足就是:

导航控件占了页面较大的面积,标签的个数控制在5个以内。

知乎的标签栏具有上滑消失,下拉出现的优秀交互细节,值得称道。

如果标签的数目大于5个,该怎么办?

滑动标签导航

滑动标签导航将其余标签藏在手机右侧的不可见部分,用户通过滑动来查看其它标签。


使用这种导航的时候需要注意

提示用户可以滑动,我们可以漏出一个标签的一半,提示用户可以滑动。


还有一种标签导航的变体是iOS的基本控件——分段式导航

分段式导航多用于二级导航,一般有2-3模块,尺寸较小,能够轻松地融入界面,不占空间


这里说的标签导航都是适用于一些功能重要程度相近,使用频率相近。即1:1:1:1:1模式


舵式导航

如果在几个功能相近的模块中,某个功能的重要程度要稍高一些,我们就需要在设计上突出这一功能。即1:1:1.5:1:1模式。我们称这种导航为舵式导航


抽屉式导航

简约至上-交互设计四策略 中讲到一个使设计更简约的方法就是“藏”

藏起来不太重要的功能,专注于核心的功能,能够大大减少主界面导航控件数量。


Uber


作为一款打车软件,考虑用户的使用场景,用户最主要需求就是叫车。抽屉式的导航可以把最大化的界面交给打车,用户有着足够大的空间去完成打车的交互,而不用担心其他元素的干扰。我称这种模式为1:10:1:1:1。


九宫格导航

我们有的时候会见到一些产品会将所有功能罗列出来,一个一个按照九宫格的样式摆好,整个产品结构一览无余。

我个人是不推荐这种导航模式的,尤为使用在app中作为主导航。这样显得app没有纵深感,更主要的是,在用户进入的一瞬间没有呈现有关产品的任何一丝实际内容,需要用户做出选择后才会显示相关事务。

组合导航

合适的导航才是好的导航,我们需要分析产品的功能结构与用户使用的具体环境,分析得出结论。

现在产品结构功能复杂,需要多个合适的导航相结合,常见的有:

抽屉式+标签导航

抽屉式+滑动标签

抽屉式+分段标签

标签导航+分段标签

标签+分段/滑动标签+抽屉式

等等

创意导航


创意导航1

这种导航我个人比较喜欢,应该是material design中的一个控件,切换方便,不影响页面阅读。


电信营业厅

很难找到机会去夸奖国营公司的产品,但这个转盘的设计真的有情怀,非常喜欢。

可惜缺点也很明显,可直接去点,不需要转。内容展示不直观。


有好的创意导航设计请留言,欢迎交流 :)

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

推荐阅读更多精彩内容