APP推广合作
联系“鸟哥笔记小乔”
搞清楚树形结构|产品经理必学的导航栏简易设计
2021-05-25 10:15:09

树形结构是产品设计中常用的结构图,产品经理会以此来塑造产品的框架图。

  树状结构 

在维基百科解释:

树状结构(英语:Tree structure),又译树形结构,或称树状图(tree diagram)是一种将层次结构式的构造性质,以图象方式表现出来的方法。它的名称来自于以树的象征来表现出构造之间的关系,虽然在图象的呈现上,它是一个上下颠倒的树,其根部在上方,是资料的开头,而下方的资料称为叶子。

产品的框架结构由有导航栏堆积而成。

导航栏对于一款软件产品来说,则映射出了软件系统的树状结构。

同样一个导航栏也是多嵌套机构,导航栏包括二级、三级导航栏结构,每个下一级导航栏都可以回归到一级;

每个导航栏明确了背后提供的内容或价值服务是完全不同的。导航栏就像产品的血肉骨架,只有定了导航栏才能进行下一个子功能的设计.


好的导航栏会依附于树状结构,突出主要功能和次要功能;同时扁平化用户使用路径;任意一个功能都可以在导航栏找到。

在PC和APP上都有不同的导航栏设计,产品经理最希望在工作中聚焦在最简单的导航栏上:既可以开发简单、同时又是非常实用?

我整理了简易设计下的导航栏部分,主要是给那些正在纠结做什么样的导航设计的产品经理,快速、少出错、同时又极易容易开发实现的导航栏。

移动端的导航栏设计

导航栏的设计方式也是有限的;这里我依次列举下面8种

1.底部导航栏

底部Tab栏具是最常用的,如果你打算从0到1做一款产品,选择这个肯定没有错;展现形式有文字 + icon,也有纯icon形式,大部分是文字+icon,可能是减少用户记忆负担。


  app的底部导航栏设计 

优点:TAB导航栏在支持用户在不同模块之间的快速切换。

缺点:底部导航栏的数量需要严格控制,同时对于顺序要深思熟虑;比如需要用户高频操作的TAB就会放在中间;小程序的TAB不会超过4个;APP的则不能超过5个。太多后就容易引起误点操作。

TAB导航栏一定要确定产品核心功能、业务;可以考虑去突出中间的功能,把Tab单独设计,鼓励用户更多使用该功能。如下是百度、知乎、宝宝树都把核心业务作为TAB设计。

  app的导航栏 

比如在社区的提问版块、考勤打卡的TAB都是集中在中间甚至是屏幕中间,即可突出重要性也方便用户操作增加点击率;

  社区发tab 

2.顶部Tab栏

如果同一个功能有不同二级功能;或者内容版块下还有细分内容,那么顶部TAB是最简单直接的划分方式;

展示同一模块下不同类别的信息或者筛选不用模块的信息,一般二级导航支持左右滑动;在小程序里可直接点击。


优点:可以方便快速浏览二级内容,也方便用户迅速切换操作

缺点:产品经理要考虑清楚二级的顺序排列逻辑;同时超过屏幕后需要提供左右滑动交互,弥补内容被屏幕遮挡的场景。

3.侧边(矩式)导航栏

这类导航栏主要体现在沉浸式使用场景的产品。比如睡眠、天气、地图导航、阅读这类产品适合。特点是用户的主要操作场景在主屏幕;很少频率有子功能的操作需求。

  侧栏tab设计 

优点:抽屉式导航的优点在于节省页面展示空间,使主页面更加简洁美观,让用户将更多的注意力聚焦到当前页面。


缺点:在于次功能入口比较隐蔽,用户不容易发现;使用次功能需要二次点击,增加用户使用成本,转化率低。

4.列表式导航栏

如果有超过5个以上的功能分类后,同时由有大量的文本信息;可以采取列表导航;以列表的形式呈现大量的条目。突出每个导航栏的标题;展示详细的栏目给用户


优点:列表式结构可以兼容多数量的导航栏;配合搜索课大大提升它导航效率高。

缺点:内容信息过多,用户消化时间长;同时需要搭配搜索功能,增加开发了成本。

5.糖葫芦导航栏

随着产品逐渐从1.0步入到2.0的迭代,业务逐步复杂、同时又需要给用户提供多样的功能操作,为了增加使用效率,可以采取这类导航;这类导航还有细分为:九宫格、糖葫芦,都是属于这类导航蓝。


  宫格导航栏设计 

这类产品前身需要较多量的用户作为基础,其特点是:

①高频/超高频使用,用户粘性极高,应用处于市场垄断地位,几乎无可替代产品(生态庞大带来的优势);

②应用服务种类多且扁平化(使得并列式的桌面布局模式成为必选项);

③可以当做企业移动后台来使用(支付宝的服务包括衣食住行,可认为是企业个人),我称之为“行走的ERP”;

④形成了固定的多样性业务;


优点:每个导航栏没有无主次之分,每个菜单所占空间大小一致,同时方便业务流量聚合;可以划分和合并多个矩阵实现


缺点:需要考虑导航栏的排列顺序,甚至是为用户提供个性化布局能力,同时对于新用户来说感受到操作压力大,需要较多的引导提示设计

6.卡片式导航栏

卡片导航的一种延展形式,通过增加内容的可视化程度让每个条目呈现更多的信息。

利用算法和用户注册信息,让卡片导航能根据页面内容的变化及时更新图片。比如视频播放的app、或以图片为主的产品,常作为二级导航。

  App Store和P OCO摄影的卡片导航 

优点:点击量高,而且单个条目的转化率会相应的提高。


缺点:当运营量较大的时候,这种结构会降低用户寻找信息的效率。

7.toast导航

通常落地在某个子级导航上,用于筛选同一模块下多个状态下的操作。

  toast导航 

特点:能让用户在有限的屏幕空间上做更多的,同时也是一种减少导航栏设计的方式。

8.轮播(平铺)式导航

适用于只需要简答手势操作就能完成功能操作的场景。比如探探的左右滑动;以及B站上的追剧;既可以增加内容的视觉展示区域,还能让用户选择变得简单。

  追剧和探探的左右滑动 

优点:操作简单、并且用户上手容易,并且运营的成本低

缺点:用户很可能在早期点击的数据并不真实,因为极易误操作

9.FAB导航

悬浮式icon也是FAB导航的一种称呼,很多产品经理为了偷懒都会用这个按钮来做新增功能入口。

但却没有考虑到功能背后的业务、页面路径是否用重合,盲目的在屏幕上不断新增按钮。最后就产生了下方一样密密麻麻的icon。


  FAB导航 

导航栏的作用,不仅是方便用户查找到对应的内容。更重要的是将可以提高用户在产品的流量转化。

每个导航栏都除了自带的字段属性,还会有状态属性:选中、跳转、关注、热度等。

网页导航栏设计

对于web端来说,也有常用的导航栏设计。导航栏由于在WEB屏幕大,许多产品经理会将它带上动画。

web导航栏的设计主要分两类:滚动式导航分水平滚动和垂直式滚动。

1.垂直式滚动

垂直式的滚动在官网或产品介绍页中运用广泛,将一些页面交互动画特效和垂直式滚动导航相结合,页面往下滚动,就会产生切换到新的导航栏,点击导航栏可以聚焦在页面的某个区域。


  垂直导航栏设计 

这一点像一篇文章的目录导航一样,当用户下滑到某个页面、屏幕就会产生新的导航。

2.水平式滚动

水平式滚动就是导航栏的交互呈左右水平方向滚动的,当用户第一次遇到这样类型网站的时候,体验感会比较差,因为它物理和视觉运动方向与常规的纵向滚动不同。


而且当用户使用鼠标滚轮滚动的时候,它的左右水平滚动会让用户产生交互上的错位感,这样的感受其实并不是特别友好。所以这样的网站不适合做官网,反而适合做论坛、内容社区、新闻资讯,因为用户可以最大区域化的浏览内容。

  水平式滚动

3.侧边导航

侧边导航在web上因为落地在了用户主要焦点上所以成了很多官网的主流导航。和app对比,web端侧边导航不仅不会降低转化率,还会更加清晰分明的引导用户操作不同功能。


网站侧边相对于网站顶部来说,可扩展的空间也更广,当网站需要改版增加栏目内容时,侧边导航会比顶部导航更好调整。


4.动画式导航

在WEB端,酷炫的动画更能吸引用户。如果在导航上添加动画效果,更能清晰地引导用户去点击使用导航。例如当鼠标在导航悬停时,让导航的字体产生变化、背景色块产生大小变化等,这样微小而利落的差异化已经足够了。像以下这个案例属于图文导航,前景是文字,后景是图片,当鼠标移至相应导航时,静态图片就会发生轻幅度的动态变化。动画式导航不需要太花俏的展现,否则会干扰视觉



但在简易设计里,我希望你不要在意动画的导航,因为这绝对是对大部分产品经理的一场灾难,第一是需要动画设计资源,第二也是需要非常相信的前段交互操作说明,增加了开发成本。

为了给用户提供闭环路径,导航栏成了用户在产品中的路标;好的路标自然可以提高用户达到目的地的几率;

抛开付费的情况,导航栏还是用户查找内容信息的核心路径,没有做好导航栏自然用户体验也很差。

-END-

Kevin改变世界的点滴
分享到朋友圈
收藏
收藏
评分

综合评分:

我的评分
Xinstall 15天会员特权
Xinstall是专业的数据分析服务商,帮企业追踪渠道安装来源、裂变拉新统计、广告流量指导等,广泛应用于广告效果统计、APP地推与CPS/CPA归属统计等方面。
20羽毛
立即兑换
一书一课30天会员体验卡
领30天VIP会员,110+门职场大课,250+本精读好书免费学!助你提升职场力!
20羽毛
立即兑换
顺丰同城急送全国通用20元优惠券
顺丰同城急送是顺丰推出的平均1小时送全城的即时快送服务,专业安全,准时送达!
30羽毛
立即兑换
Kevin改变世界的点滴
Kevin改变世界的点滴
发表文章297
PMTalk产品经理社区发起人,《产品之光》作者。产品经理创业者的斜杠青年。
确认要消耗 0羽毛购买
搞清楚树形结构|产品经理必学的导航栏简易设计吗?
考虑一下
很遗憾,羽毛不足
我知道了

我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求,为完善跟帖评论自律管理,为了保护用户创造的内容、维护开放、真实、专业的平台氛围,我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容,同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。


一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规,对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息,主要表现为:
    1)反对宪法所确定的基本原则;
    2)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一,损害国家荣誉和利益;
    3)侮辱、滥用英烈形象,歪曲、丑化、亵渎、否定英雄烈士事迹和精神,以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉;
    4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动;
    5)煽动民族仇恨、民族歧视,破坏民族团结;
    6)破坏国家宗教政策,宣扬邪教和封建迷信;
    7)散布谣言,扰乱社会秩序,破坏社会稳定;
    8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪;
    9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序;
    10)侮辱或者诽谤他人,侵害他人名誉、隐私和其他合法权益;
    11)通过网络以文字、图片、音视频等形式,对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的;
    12)危害未成年人身心健康的;
    13)含有法律、行政法规禁止的其他内容;


2. 不友善:不尊重用户及其所贡献内容的信息或行为。主要表现为:
    1)轻蔑:贬低、轻视他人及其劳动成果;
    2)诽谤:捏造、散布虚假事实,损害他人名誉;
    3)嘲讽:以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述,以此来激怒他人;
    4)挑衅:以不友好的方式激怒他人,意图使对方对自己的言论作出回应,蓄意制造事端;
    5)羞辱:贬低他人的能力、行为、生理或身份特征,让对方难堪;
    6)谩骂:以不文明的语言对他人进行负面评价;
    7)歧视:煽动人群歧视、地域歧视等,针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击;
    8)威胁:许诺以不良的后果来迫使他人服从自己的意志;


3. 发布垃圾广告信息:以推广曝光为目的,发布影响用户体验、扰乱本网站秩序的内容,或进行相关行为。主要表现为:
    1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式:
    2)单个帐号多次发布包含垃圾广告的内容;
    3)多个广告帐号互相配合发布、传播包含垃圾广告的内容;
    4)多次发布包含欺骗性外链的内容,如未注明的淘宝客链接、跳转网站等,诱骗用户点击链接
    5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光;
    6)购买或出售帐号之间虚假地互动,发布干扰网站秩序的推广内容及相关交易。
    7)发布包含欺骗性的恶意营销内容,如通过伪造经历、冒充他人等方式进行恶意营销;
    8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。


4. 色情低俗信息,主要表现为:
    1)包含自己或他人性经验的细节描述或露骨的感受描述;
    2)涉及色情段子、两性笑话的低俗内容;
    3)配图、头图中包含庸俗或挑逗性图片的内容;
    4)带有性暗示、性挑逗等易使人产生性联想;
    5)展现血腥、惊悚、残忍等致人身心不适;
    6)炒作绯闻、丑闻、劣迹等;
    7)宣扬低俗、庸俗、媚俗内容。


5. 不实信息,主要表现为:
    1)可能存在事实性错误或者造谣等内容;
    2)存在事实夸大、伪造虚假经历等误导他人的内容;
    3)伪造身份、冒充他人,通过头像、用户名等个人信息暗示自己具有特定身份,或与特定机构或个人存在关联。


6. 传播封建迷信,主要表现为:
    1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病;
    2)求推荐算命看相大师;
    3)针对具体风水等问题进行求助或咨询;
    4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失,包括通过占卜方法问婚姻、前程、运势,东西宠物丢了能不能找回、取名改名等;


7. 文章标题党,主要表现为:
    1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户;
    2)内容与标题之间存在严重不实或者原意扭曲;
    3)使用夸张标题,内容与标题严重不符的。


8.「饭圈」乱象行为,主要表现为:
    1)诱导未成年人应援集资、高额消费、投票打榜
    2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
    3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
    4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
    5)通过「蹭热点」、制造话题等形式干扰舆论,影响传播秩序


9. 其他危害行为或内容,主要表现为:
    1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的;
    2)不当评述自然灾害、重大事故等灾难的;
    3)美化、粉饰侵略战争行为的;
    4)法律、行政法规禁止,或可能对网络生态造成不良影响的其他内容。


二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时,本网站将依据相关用户违规情节严重程度,对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号,或者滥用多个帐号发布违规内容时,本网站将加重处罚。


三、申诉
随着平台管理经验的不断丰富,本网站出于维护本网站氛围和秩序的目的,将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议,可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)

我知道了
恭喜你~答对了
+5羽毛
下一次认真读哦
成功推荐给其他人
+ 10羽毛
评论成功且进入审核!审核通过后,您将获得10羽毛的奖励。分享本文章给好友阅读最高再得15羽毛~
(羽毛可至 "羽毛精选" 兑换礼品)
好友微信扫一扫
复制链接