恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI控件系列(4)-导航类控件
0.0°
2019-09-16 原创文章 经验/观点 举报 1552 5 1 0

总结移动端主要的导航类控件以及各自的优缺点。以便于我们在工作用中能有的放矢的使用它们。






导航的定义

导航是一款产品核心功能的集中体现。


导航的作用

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

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


2.突出产品的核心功能;


3.扁平化任务流程路径;




一、标签式导航
定义:最常见的导航形式,标签式导航既让流量更大化,又分化流量,使得各个模块都有机会获取流量提高页面流量的转化。
标签式导航

优点:

1. 它可以承载重要性和频率处于同一级别的功能模块、信息或任务。
2. 它能在第一时间支持用户获取重要性最高频率最大的信息或任务。
3. 它能支持用户在不同模块、信息和任务之间快速切换。
4. 他具有包容性,可以将其他信息的框架溶解掉,构建出容量更大的模块、信息或任务架构。所以目前App的整体架构大多都是标签式结构,然后又使用其他的架构去承载界面中的具体信息。


缺点:
1. 由于尺寸限制以及根据(四项事物法则),标签式导航的数量上限最好是5个,超过5个就要考虑产品的需求分组是否合适或考虑更换框架。
2. 对于偏沉浸式体验的产品来说,标签式导航会占用一定的屏幕空间,从而减少了页面的信息承载量。
3. 标签栏入口很多,会分散用户宝贵的注意力。




二、分段式导航
定义:来源IOS(segment controls控件)一般为二级导航,通常用于展示两个或多个片段的线性集合,每一个片段均为互斥按钮。在控件中,所有片段的宽度相等。像按钮一样,每一段也可以包含文本或图标。分段控件通常用于显示同一模块下不同类别的信息或者作为筛选条件。

分段式导航

优点:
1. 可以很好地扁平化信息层级,同时提供进入不同信息分类的入口。
2. 实现同一模块下不同类别信息之间的迅速切换并且不会迷失方向。

缺点:
1. 分段控制式导航位于顶部,切换起来不是很方便,虽然ios有左右滑动手势,但是根据平台规则以及大多数应用实际交互体验来看都还是点击切换的;
2. 在各平台交互逻辑互相融和的大背景下,分段控件有的支持左右滑动有的则不支持,因此在交互上就有了一定的学习成本;
3. 占据空间,导致屏幕可展现区域变少。



三、选项卡式导航
定义:来源Android(scrollable tabs控件)一般用于二级导航,通常用于展示同一模块下按不同类型的信息。


与iOS系统中的标签栏相似,它也能够扁平化信息结构,并且支持左右滑动切换到不同的视图。随着移动端交互设计的发展,Android与iOS两大阵营的相互借鉴、完善,交互设计规范越趋于相似,你会看到大量安卓应用也采用标签栏作为主导航,iOS应用中采用顶部选项卡式导航作为次级导航。

选项卡式导航

优点:
1. 可以很好地扁平化信息层级,同时提供进入不同信息分类的入口。
2. 实现同一模块下不同类别信息之间的迅速切换并且不会迷失方向。

缺点:
1. 暂居空间,导致屏幕可展现区域相对变少。
2. 分类太多,很容易分散用户的注意力。



四、列表式导航
定义:通常针对具体某个模块内容的信息进行分类,以列表的形式去呈现。
1.将具体的某个模块的结构以列表的形式进行分类展现,结构清晰,便于用户理解。
2.多用于辅助主导航来展现二级甚至更多层次的内容。
3.空间利用率高,适用于有大量信息分类展现时。

列表式导航

优点:
1. 列表式结构具有很强的延展性,可以不断扩展信息。而且信息格式一致性很强。
2. 适合宽而深的信息架构层级。
3. 它可以很方便的进行分组分类。
4. 可以很好的控制导航展现的信息量,在信息模块一定的情况下(10个左右),可以快速找到某一项内容。
5. 可以很好的利用屏幕的纵向空间展示跟更多有价值的内容。


缺点:

1. 功能大于形式,承载的信息种类较单一,容易引起用户的单调感,很难让用户长时间停留。
2. 如果列表中蕴含的信息量比较庞大,寻找特定信息会比较困难,需要加入搜索功能或索引。
3. 如果列表项太多用户直接寻找起来会很困难(由于人的本能是希望靠自己搜寻想要的信息)。



五、下拉菜单式导航
定义:通常用于二级导航,用户每次只浏览一种类型的内容,筛选同一模块的不同类别的信息或快速启动某些常用的功能模块。

优点:
1. 为了能让更多用户在有限的空间上容纳更多的内容,减少干扰用户的信息。
2. 有清晰的分类属性,方便用户了解这个模块的信息或分类。
3. 节省屏幕空间。

下拉列表式导航

缺点:
1. 模块信息较为隐蔽,不易被一般用户发现。
2. 由于是临时窗口,对分类数量有一定限制。




六、抽屉式导航
定义:抽屉,是整理收起的意思,就是把除了核心功能以外的低频率操作都放到一个抽屉里,使得用户获得沉浸式 体验,而且能够集中用户注意力,让用户去更好的完成核心功能,不被打扰。

抽屉式导航

优点:
1. 常与标签式导航组合使用。
2. 可以突出产品核心内容的突出,弱化其他信息的展示。
3. 用户可以将注意力放在首页,减少其他类型的导航带来分散用户注意力的情况,给用户更沉浸式的操作感和阅读感。
4. 最大限度的利用屏幕空间。


缺点:
1. 导航入口较为单一,降低了其他模块的展现机会。
2. 增加了功能模块间的切换操作成本。




七、陈列式导航
定义:常作为二级导航,适合呈现经常更新的,视觉效果直观、内容彼此独立的内容。

陈列式导航

优点:
1. 能最大限度的利用屏幕空间且直观展现内容;
2. 有丰富的表现形式以及能做丰富的动态效果;
3. 有一种仪式感(有点像大家平时去展览馆一样),这里会起到触景移情的作用,让用户对内容产生精致、想探索的感觉;


缺点:
1. 会降低用户寻找信息的效率;
2. 选择项太多如果没有有效的引导,用户容易不知所错的感觉;





八、宫格式导航
定义:顾名思义由其排版与传统的九宫格相似而得名,宫格式导航适用于模块较多且模块间没有必然联系以及模块间权重相同的内容排布。


特别说明:这里的宫格布局都不是正正规规的宫格式都是经过变化的,重点是表达宫格的样式,同时也借各应用的界面布局来说明布局在一定框架下也是可以变化的,不用死套定式;

九宫式导航

优点:
1. 减少层级(层级偏平化)路径,利于模块间的快速切换跳转。
2. 最大限度的利用屏幕空间,放置较多的功能模块。
3. 宫格式导航很好的解决了平台汇聚内容时面向的是群体,而分发内容时面向的是个体这一矛盾。
4. 有较强的延展性,可以无限扩充内容。


缺点:
1. 当用户面临众多的入口时,选择压力会变大。
2. 由于宫格式结构是信息或功能的入口,具体信息会隐藏在下一层级的界面,所以用户无法在第一时间看到具体信息。




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

舵式导航

优点:
1. 从视觉上突出(运用了冯·雷斯托夫效应:特殊的东西比普通的东西容易回想
)最核心的功能或入口集,鼓励用户多使用。
2. 可以节省横向空间,将入口或功能集中收纳。
3. 有较强的延展性,有一定的扩充内容的能力。


缺点:
1. 当入口和功能较多时放在二级界面中相当于被埋起来了,会增加用户的认知负荷。
2. 在以阅读为重点的产品中,会造成一定的视觉干扰,影响阅读体验。


学习中成长:

不知大家有没有发现上面每个产品截图里,基本上都包含了几种导航类型(通常情况下,产品里都是需要不同类型的导航搭配着使用的)。这也从侧面告诉我们,在学习中要善于从自己的角度去观察和反思(发挥自我意识的能动性)。






更新:2019-09-16

收藏

5人已收藏

ly1410

More than just a UI designer

  • 24

    作品

  • 50

    粉丝

  • 11

    关注

  • UI控件系列(8)—空数据控件
  • UI控件系列(7)—加载类
  • UI控件系列(6)-引导类控件
  • UI控件系列(5)-操作类控件

    猜你喜欢

      2019-09-16 原创文章 经验/观点 举报 1552 5 1 0

      UI控件系列(4)-导航类控件

      0.0°

      你确定要举报UI控件系列(4)-导航类控件

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年07月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录