学习笔记—顶部标签导航

学习笔记之——顶部标签导航

从一开始接触UI界面时，对顶部标签导航一直不知该如何设计，很多文章只是阐述定义，没有讲到该如何制作。通过十几个APP的研究拆解，做了一次总结，可能还是有很多未学习到地方。

顶部标签导航，优势是一般可用作二级导航。劣势是标签较多时，越往后点击率越低。

导航标签数量较多时，多采用滑动式，可进行左右滑动。一般常常通过设计师的设计与引导，确保提供足够的视觉线索，表明在水平滚动后有更多的元素，比如最后一个隐藏一半，弱化边缘就是个不错的办法。

导航标签数量较少时，多采用固定式，不可滑动，内容再一个页面内显示完。

一.标签位置的确定

1.标签数量多时（超过5个）

按间距划分。先确定好页边距，然后将要展示的标签全部排列放进页面，第一个标签左对齐页边距（或者定好到页边距的距离），每个标签按同样的间距分布（两者间的距离）。

数量多时，若页面排不下，将页面显示的最后一个露出一半，再重新确定每个标签的间距。

（间距距离为14-50pt，多数为26pt。）

标签数量较多时

2.标签数量少时（小于5个）

边框居中划分。先确定隐形边框的大小，每个标签再与隐形边框居中对齐，数量较少如2个/3个时，可将标签位于页面中间。数量较多时，如3个/4个/5个。可将页面划分相等几份，如三等分，四等分。再各自居中对齐。

标签数量较少时

二.标签的选中状态

1.选中时 ，无下划线，字体颜色改变/字号变大/字体加粗

2.选中时，出现下划线，下划线与字段等长，字体颜色改变/字号变大/字体加粗

3.选中时，出现下划线，下划线短于字段，字体颜色改变/字号变大/字体加粗

选中时 ，无下划线，字体有变化

选中时，出现下划线，下划线与字段等长，字体颜色改变/字号变大/字体加粗

选中时，出现下划线，下划线短于字段，字体颜色改变/字号变大/字体加粗

三.字体变化

1.字体大小：11-17pt，13-16pt间较多，多数为14pt，字体选中变大时，一般17-24pt间

2.字体颜色：未选中时颜色较浅，选中时颜色加深或颜色改变，字体加粗/加大。

四.总结 

先确定顶部标签导航的数量，可按相等间距排列或者按中轴线居中等分。顶部标签导航字体大小多数为14pt，表示选中状态可通过字体大小和颜色加以区分。若没有分割线的情况下，下划线短于字段的长度会显得更为精致。