UI组件库(4)——导航栏

「紲星あかり ブックレットイラスト」「推奨幻想」のイラスト [pixiv].jpg

距离上一次发「UI组件库」的相关文章，已经过去蛮久的时间了。

一开始觉得差不多一天可以完成一个类型，不过，慢慢发现这个目标是不太现实的。原因在于每种组件的场景实在是太多了，而且中间要经过筛选，筛选出比较典型的一些。最后还要把这些组件用sketch画出来，确实需要不少的时间。

在整理这些组件库的过程中，可以帮助自己更好的理解组件的组成元素，以及元素的多少对于排布的影响。当遇到各种复杂的场景的时候，有了最基本的概念，可以组成各种各样的解决方案，希望这些组件库能对你们有些帮助。

这次整理的组件库是Nav Bar，也被称作导航栏，Android上通常叫做 APP Bar，专指出现在界面头部的导航栏。

Nav Bar.png

导航栏在界面中的作用主要是，连接各个页面，介绍该页面的主要内容，并提供各种交互操作。

在导航栏中通常会有下面的基本组成元素。

1、文字

2、按钮

3、图标

对这些基本元素进行重组，通常会有下面的几种应用方式。

1、页面跳转

这个最常见的就是「返回」按钮，通常位于页面的左上角，常有图标、图标+文字、文字的形式。

页面跳转.png

2、页面主要内容的介绍

可以是标题的形式，比如「我的」、「发现」等简单的形式。

可以是标题+简介的形式，比如文章的题目+文章的基本信息。

页面介绍.png

3、操作按钮

可以是按钮的形式，也可以是图标的形式，图标可以演化成不同的风格，通过用户点击，产生各种相应的操作。

也有的会把筛选的操作也放在导航栏上。

操作按钮.png

4、和Tab结合

常见的新闻APP，会将Tab整合在导航栏中，供用户快速筛选想要的分区。

也可以加入指示器进行筛选。

和Tab结合.png

5、其他辅助内容

对于一些有用户反馈的页面，比如点赞、浏览、喜欢等等，可以将这些数据展示在导航栏上，节约页面的空间。

其他辅助内容.png

我觉得，这些示例可以覆盖大部分的场景了。当然还不够完全，需要在今后的工作生活中不断的完善。

下一篇文章会对新闻APP的页面进行整理，涉及到图文信息的展示，敬请期待吧~

「いろいろ」「77gl三日目東Ｃ06a」の漫画 [pixiv].jpg