Tab上的小短线_小讲究

1)用来:做好分类,节省空间,等需要的时候更容易找到!

2)形式:固定、滑动

谷歌规范中规定:一组固定 tabs 至少包含 2 个 tab 并且不多于 6 个 tab,并且在一行内显示。

固定


滑动

3)长度分类:固定、可变

【1】固定:小短线非常短、平均等分、除去两边页边距后平均等分

猫眼电影——电影模块


映客的贡献榜页面


猫眼——我的订单页面

【2】可变化


Bilibili

这种方式会使页面及切换效果比较舒服,缺点就是开发哥哥需要多些几行代码。

4)注意事项1

我们看同样是猫眼和映客app里面的界面,一级导航的小短线很短,二级导航的小短线就很长。


猫眼


映客

分析如下:

一级导航会有其他图标,如果小短线太长会使整个导航看着太乱太复杂。

二级导航一般没有多余的信息和图标,所以小短线用的长一点也没关系,反而让层级更清晰,页面更饱满。

不过有时候二级导航也会选择让小短线很短,使整个页面更加简洁清爽,例如美团的订单页面:


美团

5)注意事项2


长宽比
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容