Ee108cc297b5fc9653381a83b3d76b55
2. 选项卡

初识

横竖两处,都是选项卡。
抽象一下,画成模型:

选项卡,也被称为:Tabs、页签,或许还有其它叫法,总之,就是上图这样的一种导航样式。

数字产品需要一种好用的导航样式:能展示多个项,其中一个项是当前选中的。模拟现实中记事本,做出了选项卡导航。

选项卡可以被看做是一种列表,一种特殊的列表,栏目名称的列表,用作栏目导航,措辞比较工整。(“列表”是这个系列里单独的一篇。)

每一个页签项应包含“当前态”和“非当前态”两种状态,需要不同的表现样式。对于PC网页,通常还需要再增加一种hover(鼠标移到其上)状态。
 


各页签之间应该是什么关系?

以学校里一个班的同学为例,为了方便的筛选找到某个人,我们设计一组的同学名单的选项卡:
当然,如果需要,还可以有更多的卡,比如:会踢足球的,会唱歌的…
以这个例子,可以总结出选项卡中内容的关系:
1. 各选项卡不必一定是同一属性,“戴眼镜的”与“身高170+”,描述的不是同一种属性。并非一定要:戴眼镜、不戴眼镜、偶尔戴眼镜。

2.各选项卡中包含的内容,不必须要求“全部=栏目一+栏目二+栏目三”。

top Created with Sketch.