「紲星あかり ブックレットイラスト」「推奨幻想」のイラスト [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
网友评论