APP产品设计:常见导航设计总结

    导航设计在产品设计中占有重要的位置,一个好的导航设计,就像你置身于人员嘈杂、纷乱的火车站,能够快速的找到你要乘车的候车点一样,令人心情愉悦。快速的到达目的地和其中过程的心情愉悦就是我们做导航设计所要追求的。

    首先,如何快速的到达目的地?结合自身产品业务,做好导航层级,重要的流量入口,显示在主页面,次要辅助的内容可以隐藏或放到二级导航。

    其次,如何让用户感到心情愉悦?那就是在用户到达目的地前的这个过程,增加良好的交互效果或动画效果,入口还是那个入口,却变的生动有趣,让你乐于点击。

    常见的导航设计,我给它们分成了两类:单层级互斥型导航、多层级包含式导航。

    单层级互斥型导航如下:

    1. 列表式导航:列表式导航可分为标题式列表内容式列表、卡片式列表。是现在大多数APP都有的一种导航方式。

列表式导航

        标题式列表:一般只显示一个标题或和图片相结合,进入后,可能还存在二级列表式导航。

        内容式列表:除了标题以外,还有部分内容展示,进入后,即为内容详情,无其他导航。

        卡片式列表:采用卡片式设计,包括图片、标题、内容简介,进入后,即为内容详情。

    列表式导航方便、快捷,但要注意分类,可采用格式塔就近原则进行分类,也可以通过增加标题进行分类。使导航更清晰。

    2. 宫格式导航:一打开APP主页面导航采用宫格式的APP越来越少见了,市面上我知道的就美图秀秀还采用这种方式,在我自己开发的APP中也采用过,一方面这种大入口,一目了然,用户的可操作性好,另一方面,也不得不承认,采用这种导航方式,也是由于功能少,这种方式自然是最合适的。

宫格式导航

    越来越多的宫格式导航,作为二级图形化的形式展示。值得注意的是,由于各个宫格间内容的互斥性,需要完成一个宫格,退出后,再操作其他宫格,所以在产品设计时,尽量做到各个宫格间,关联性不大。拿我做过的APP为例,当时两个宫格都跟客户有关系,但是最初设计的时候,只想着一个是跟进客户,另一个是完善客户资料,放在两个宫格里,分类清楚,却不知道,用户需要在两个宫格里跑来跑去,关联度还是很高的,也就造成了用户反馈体验不好,果断在后续迭代过程中,改进了这点。

    3. 抽屉式导航:基本都在APP的左侧滑出,像抽屉一样可推拉。一般辅助性、需求频次不是很高的功能会选择采用抽屉式导航设计。符合了设计原则里的隐藏原则,在展示上也更加凸显主页面功能。

抽屉式导航

    由于抽屉式导航入口一般都放在左上角,用户手指不易触达,所以抽屉内的内容应是不需要用户参与度过高的功能。

    4. 顶部标签式导航:对于内容型的产品,标签式导航用的比较多,主要是关于内容的分类过多,选用顶部标签导航配上左右滑动切换,用户可以很方便的查看到内容,对于标签过多的情况,现在大多APP也都提供了标签管理、排序的功能,用户可根据自己的偏好,设置显示顺序。

顶部标签式导航

    顶部标签导航作为第一层级的导航,常见于音乐类APP,顶部为了方便用户播放歌曲。大多数都是底部导航和顶部导航配合,顶部标签式导航作为第二层级,对第一层级导航,做更精确的内容分类,在产品设计时,也要注意内容分类的互斥性。

    5. 底部全站式导航:底部导航是最常见的导航,一般不超过5个,再多,用户视觉会有负担。对于产品特别希望用户使用(特别是对于那种需要用户产生内容的产品)或用户自身需要高频词操作的导航,为了便于查找,底部导航的个数会设计成3个或5个,然后突出中间导航的设计,也称为舵式导航

底部全站式导航

多层级包含式导航如下(以下完全属于个人总结):

    6. 下拉式导航: 展现形式其实就是两个或两个以上的下拉筛选,但是,不是没什么关系的下拉框,后面的下拉框跟之前的下拉框存在包含关系,在技术上也叫二/三/...级联动。

下拉式导航

    下拉式导航可以包含多个层级,不过最多也不要超过4个,对于包含关系层级多的导航,采用这种方式是比较好的。

    7. 列表折叠式导航:一般两个层级可以考虑这种导航,简单方便。

列表折叠式导航

    8. 目录式导航:适用于二级包含关系的导航,左图是现在大多数电商采用的导航方式,右图是我在自己产品中的应用,于下拉筛选结合,实现三层级的展示。

目录式导航

    9. 悬浮icon导航:这种导航比较特殊,在每个主页面都存在,目的是为了方便用户无论在哪个页面随时都能去到其他页面。这种导航的弊端是会遮挡部分页面内容,如果应用这种导航,要考虑到对底层页面内容的展示影响大不大,权衡利弊。

    最后要说说让用户感到舒服愉悦这个事,现在越来越多的导航入口通过UI独特创意或简单小动画,让人感到好玩且乐于点击。比如QQ底部导航小人儿的左右张望、淘宝底部导航的UI设计、36Kr在顶部导航切换时,良好的交互体验。

趣味性导航

    在一个APP中也不能所有的导航都做的太吸引用户注意力,过度设计也会造成用户注意力分散,从而形成视觉负担。

    以上就是我个人的一些总结,如有不妥之处,不吝赐教。

    - E N D -

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

推荐阅读更多精彩内容

  • 当确定了APP的设计需求和产品的整体结构之后,要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好,很...
    设计思考阅读 45,925评论 7 117
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,967评论 3 119
  • 之前的几篇文章谈了谈APP设计中的启动页、引导页、注册【登录】和搜索,本篇文章谈谈导航部分。 同样,我们先来看看导...
    岳山丘阅读 3,991评论 4 87
  • 古之成大事者,不惟有治世之才,亦有坚韧不拔之志。 毕业照拍完已经好几天了,某种意义上来说,已经毕业好几天了。这几天...
    理工往事阅读 490评论 0 2
  • 图文|凡缕 2018年2月7日 星期三阵雪 赶集回来,院子里开始飘雪。 单薄的雪花,随风飘得稀稀落落。乍一看,还以...
    凡缕阅读 406评论 8 12