设计规范 | 详解组件控件结构体系:导航类

本文作者将详细阐述组件控件结构体系中的导航系统,分别为7类:底部标签式导航、分段控制式导航、列表式导航、下拉菜单式导航、抽屉式导航、宫格式导航和卡片式导航。enjoy~


本文作者将详细阐述组件控件结构体系中的导航系统,分别为7类:底部标签式导航、分段控制式导航、列表式导航、下拉菜单式导航、抽屉式导航、宫格式导航和卡片式导航。enjoy~

设计规范 | 详解组件控件结构体系:导航类

什么是控件?什么组件?两者的区别是什么?

Control翻译为控件,Component翻译为组件。

通俗的解释说法就是组件为多个元素组合而成。控件为单一元素组合而成。

如果单纯通过组件控件,难以满足功能划分的需求,所以我将这个范围扩大,分类里面不仅仅含有组件和控件,所以请不要在意细节。

如下脑图是设计规范的重点,这个是系统的学习组件控件和功能分类的目录。

设计规范 | 详解组件控件结构体系:导航类

导航类

导航的作用有哪些?

1. 结构化产品内容和功能

导航系统相当于APP的骨架,支撑着内容和功能组成的血肉,导航系统起着组织内容和功能的作用,让它们按照产品的信息架构图进行连接,展现在在用户面前,导航将零散的内容和功能组织成了一个完成的有结构的系统。

2. 突出核心功能

导航就起到了突出核心功能,适度隐藏次要功能的作用。核心功能对目标用户来说是最重要的。

3. 扁平化用户任务路径

可以很好的扁平化信息层级,并同时提供了进入不同信息分类或入口。用户可以迅速实现不同模块之间的切换且不会迷失方向。

底部标签式导航

定义

用于一级目录的导航,位于页面底部,能告诉用户当前位置及用户切换统一层级之间的不同模块,一般最多不超过五个标签。

特点

标签导航是目前最常见的导航形式。最常见的原因是标签式导航可以让流量更大化,分化流量,使得各个模块都有机会获取流量提高页面流量的转化。

将常用的导航放在底部,无论用户单手还是双手操作都能轻松点击,从而实现各功能模块之间的跳转。

标签式导航有底部导航和顶部导航两种,底部导航用于全局导航,顶部导航用于二级导航(遵循Material Design规范的除外)。

设计规范 | 详解组件控件结构体系:导航类

优点

1. 它可以承载重要性和频率处于同一级别的功能模块、信息或任务。

2. 他能在第一时间支持使用者获取重要性最高、频率最大的信息或任务。

3. 它能支持用户在不同模块、信息和任务之间快速切换。

4. 他具有包容性,可以将其他信息的框架溶解掉,构建出容量更大的模块、信息或任务架构。也就是说,很多app的整体架构都是标签式结构,然后又使用其他的架构去承载界面中的具体信息。

缺点

1. 由于尺寸限制,标签式导航的数量上限最好是5个,超过5个就要考虑产品的需求分组是否合适或考虑更换框架。

2. 标签栏占用了一定的空间,所以减少了页面的信息承载量。有些产品为了更好地展示页面信息,会使用一种隐藏的标签栏,这种标签栏会在用户上滑阅读时隐藏,下滑返回时再显示。这种做法确实照顾了页面的信息展示,但是也要具体产品慎重看待,因为他可能会让导航失去便捷性从而降低切换效率。

舵式导航

底部标签式导航的变种。为了突出中间的功能,将中间标签图标设计的比较突出,鼓励用户多使用该功能。

除去两侧4个标签之外,其他重要的标签都隐藏在舵式导航中,或者将那些重要性高、使用相当频繁的功能入口放在里面。

设计规范 | 详解组件控件结构体系:导航类

但是,舵式导航本身是存在设计矛盾的。在舵式导航中位置的应该是重要性和使用频率高的功能,既然他如此重要,为什么要隐藏在舵式导航中?这些功能放在二级界面中相当于被埋起来了,会增加用户的记忆负担和操作负荷。

分段控制式导航

定义

通常用于展示同意模块下不同类别的信息或者筛选不用模块的信息。

特点

一般为二级导航。

设计规范 | 详解组件控件结构体系:导航类

优点

1. 可以很好地扁平化信息层级,并同时提供了进入不容信息分类或模态的入口。

2. 用户可以迅速实现同一模块下不同类别信息之间的切换并且不会迷失方向。

缺点

1. 分段控制式导航位于顶部,切换起来不方便,虽然ios有左右滑动手势,但是很多用户并不知道。

2. 占据空间,导致屏幕可展现区域变少。

列表式导航

定义

通常针对具体某个模块内容的信息进行分类,以列表的形式去呈现。

特点

1. 将具体的某个模块的结构以列表的形式进行分类展现,结构清晰,便于用户理解。

2. 多用于辅助主导航来展现耳机甚至更多层次的内容。

3. 适用于大量的信息分类展现,空间利用效率高,可以展示大量的条目。

设计规范 | 详解组件控件结构体系:导航类

优点

1. 列表式结构具有很强的延展性,可以不断地增强信息。而且一般来讲,它的信息格式都比较一致,调整的弹性高,抗信息冲击力也很强。

2. 它的导航效率高,可以引入字母索引。

3. 它可以很方便的进行分组分类。

4. 适合宽而深的信息层级。

缺点

1. 功能重于形式,承载的信息种类也比较单一,容易引起用户的单调感,很难让用户长时间停留。

2. 如果列表中蕴含的信息量比较庞大,往往需要加入搜索功能或者索引,否则用户会遇到寻找信息的困难。

下拉菜单式导航

定义

通常用于筛选同一模块下的不同类别的信息,或者是快速启动某些常用的功能模块。

特点

1. 为了能让更多用户在有限的屏幕空间上做更多的动作,减少干扰用户查看信息。

2. 能将同一模块的信息做个分类,让用户更清晰地了解这个模块都为我们提供哪些信息或分类。

这种导航形式一般不会用于全局导航,多用于浏览类的APP的二级导航,用户一般每次只浏览一种类型的内容,像刷微博,女生们刷美妆时就会一直刷下去。菜单式导航还有一个好处就是节省屏幕空间,它用一个展开的图标,将几个甚至几十个分类都集合在一起,在寸土寸金的移动端屏幕显得尤为重要。

微博国际版和无秘的二级导航都采用菜单式导航的形式。

设计规范 | 详解组件控件结构体系:导航类

抽屉式导航

定义

通常针对产品偏沉浸式阅读的情况下,其他模块切换频率低,可采用此导航形式。

特点

1. 常与底部标签式导航组合使用,将一级页面内的信息再细分,给人以清晰的呈现方式。

2. 若该产品追求核心内容的突出。可弱化其他信息的展示时,即可采用此导航形式。

抽屉,是整理收起的意思,就是把除了核心功能以外的低频操作都放到一个抽屉里,使得用户获得沉浸式的体验,而且能够集中用户的注意力,让用户去更好的完成核心功能,不被打扰。我们可以把抽屉式导航类比成极简的生活方式,只把必须的东西展现出来,其余的东西要么丢掉,要么整理后收起来。

设计规范 | 详解组件控件结构体系:导航类

优点

1. 用户可以将注意力放在首页,减少其他类型的导航带来分散用户注意力的情况,给用户更沉浸式的操作感和阅读感。

2. 最大限度的利用屏幕空间。

缺点

1. 浪费流量,其他模块的流量会被遏制。不利于整个产品的页面流量最大化。

2. 如果产品框架比较大,需要多功能同时推广的话。不适合用该导航。

宫格式导航

定义

类似于手机桌面各个应用入口的导航方式。每个入口往往是比较独立的信息内容,用户进入一个入口后,只处理与此入口相关的内容,如果要跳转至其他入口,必须要先回到入口总界面。

特点

信息的呈现内容比较少,但是多个项目选取的效率比较高。

设计规范 | 详解组件控件结构体系:导航类

优点

1. 宫格式结构可以作为信息或平台的入口,为产品或项目信息提供聚合的载体。

2. 他适合承载订阅类产品或众多属性差异非常明显的分类信息。

3. 他可以划分多个内容、多个模式,由不同团队独立开发每个模块再聚合。

4. 在具有较强的延展性,可以无限扩展内容。

缺点

1. 用户选择压力大。

2. 用户无法第一时间看到信息,由于宫格式结构是信息或平台的入口,所以具体的信息往往隐藏在下一级界面。

卡片式导航

定义

一种更加可视化的导航,它能根据页面内容的变化及时更新图片,适合以图片为主的内容,像新闻、美食、旅行、视频图片等经常使用,常作为二级导航。

特点

宫格式导航的一种延展形式。每个条目可以呈现更多的信息。

设计规范 | 详解组件控件结构体系:导航类

优点

对运营量的要求比较低,而且单个条目的转发率会相应的提高,如果产品的运营量较低或需要较高的条目转化率,可以使用这种设计。

缺点

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

后记:下一篇文章将讲解引导类。

#专栏作家#

UX,微信公众号:UEDC,人人都是产品经理专栏作家。华为ITUX交互组组长。

本文原创发布于人人都是产品经理。未经许可,禁止转载

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/21250/

(0)
CatherineCatherine
上一篇 2017-04-27 21:17
下一篇 2017-04-27 23:23

相关推荐

  • 免费 20个设计优秀的HTML网站模板

    在这个互联网时代,很多企业或是个人都搭建有自己的网站,用于宣传营销或个人网站博客等用途。而对于小企业、个人或不懂设计网站的用户来说使用网站模板将是最好的建站方式,设计达人网致力分享高品质免费素材,所…

    2015-03-17
  • 你不知道的交互验收:定义、问题和如何解决

    工作中才发现,交互设计师的职责,不仅是在前期的产出物交付完成即可,更多的任务是在后期的交互验收和优化推动截断。

    2017-05-15
  • 【用户体验】健康家居生活就选择稚爱儿童水漆

    我心目中的家不需要非常大,只要整洁温馨就好。快过年了,身边很多邻居都在忙着给房子装修,白天楼上楼下总是叮叮咚咚地响个不停;我想到自己家里潮湿斑驳的墙面,心里总是有个疙瘩。不止一次想给自己家翻翻新——二十几年的老房子,墙面容易潮湿发霉,自打上次我结婚家里刷了一次墙,到现在有2年多时间了,墙面很多地方起了小泡泡:有的地方开始掉灰:严重的地方还长出了黑色的霉菌,真的是惨不忍睹:不但有碍美观,而且我宝宝刚刚学会走路老是扶着墙,一不小心就摸到发霉...

    2018-02-07
  • 移动端图片阅读—交互设计分析

    ↑点击上方蓝字,加个关注吧~↑今天老冰给大家分享一个移动端图片浏览的交互方式这个APP的阅读教程中,一共介绍了四种交互方式,左右滑动翻页浏览,上下滑动阅读更多,下拉放大图片,侧划查看时间线以往资讯。在这里并没有介绍左滑,有人问,左右滑动不就是左滑吗?其实,并不是,当你位于第一张图片时,也就是现在左滑已经没有内容了,此时你的左滑便有了刷新的作用,不同于其他(很多app刷新都是下拉刷新),这也是值得称赞的地方,它通过自己的交互思维,产生了自...

    2018-01-30
  • 「10招」教你玩转电商专题页面设计

    电商中的专题设计都是单页设计的一种应用。

    2017-08-04
  • 用户运营 | 《破茧成蝶 用户体验设计师的成长之路》读书笔记

    1. 设计师如何参与一个具体的项目需求分析,了解需求,清楚我们要做一个什么样的产品,目标用户是谁,要达到什么效果,具体有什么内容、功能…然后我们开始进行设计,在草图上梳理信息架构,设计任务流程,设计界面,确认没有问题后再用专业的软件工具把设计方案呈现出来。经过设计评审后,设计师要去跟进后续的视觉、前端、开发、测试环节,确保最后的产出物和自己的设计方案一致。2. 在项目中设计师容易遇到的问题团队成员的专业能力外界因素的影响团队凝聚力3. ...

    2018-04-25
  • 被忽略的交互设计本质

    谈论交互设计本质是起源于日常的很多谈论,不管是向朋友介绍自己从事“交互”相关岗位,还是需要向亲戚通过三言两语解释自己的工作内容;甚至在工作的上下游沟通中,也经常会被问道“你怎么就判断用户是这么想的”“产品如何从0(概念)到1(页面界面)的”;这些问题促使我想要追本溯源,捋顺一下交互的由来、工作内容,以及依照什么方法执行等问题。(1)把冰箱门打开→ (2)把大象放进去→ (3)把冰箱门关上(1)要充值的手机号码→(2) 确认充值多少钱(用“确认”是因为很多软件提供了默认金额)→ (3)付款搞定。

    2017-05-15
  • 转行学设计?新手必读的五大误区+三大秘籍

    经常看到一些讲如何学习设计的文章,坦白讲感觉有些千篇一律、且不痛不痒,都说要看点书、学点画、练软件、多观察……唉,练软件这事还要说么,难道你还需要告诉一个人学开发是需要学习编程语言的?

    2017-06-03
  • 良好的用户体验不一定是品牌成功的关键

    一项针对品牌魅力的新研究表明,良好的用户体验不一定是成功的关键,因为品牌完整性受损可能会超越公众的看法。 这是对四个市场10,000名消费者的在线调查的结果。这项研究从认知、目的、诚信、慷慨,勇气和交付的六个维度检查了知名品牌。分析表明,与消费者的动态关系是短暂的受欢迎,还是长期的忠诚之间存在的真正区别。乐高式最具实力的品牌,一直让顾客感到满意。相反,FIFA被评为得分最低的品牌。另外,苹果在美国排在前十位,在英国排在第十六位。尽管其创...

    2018-02-26
  • 《交互设计专题二》——华南理工大学设计学院本科教学汇报展 • 第二回

    《交互设计专题二》《交互设计专题二》课程针对智能化产品设计领域,鼓励设计背景的学生学习基本的软硬件技术,发掘产品需求,提出设计概念,开展设计研究,并亲自动手完成功能样机。经过5周的课程,7组共27名学生,完成了7个不同主题的设计和初步的功能样机实现。《交互设计专题二》只是信息与交互设计实验班的初步尝试,在国内也鲜有既有模式可供借鉴,课程内容、教学方式、设计展开过程、样机实现以及最后的课程设计汇报,都有不成熟的地方。因此,诚邀大家前来参观...

    2018-02-21