电商资讯

顶部导航栏怎么设计?

日期: 2018-07-31 17:16 访问量: 类型:

顶部导航栏的规范和作品

顶部标签导航顾名思义就是 tabbar 位于顶部,最早知道它是在 Material Design 里面,因为 Google Pixel 手机底部存在物理导航,所以将标签导航置于顶部不会显得突兀。它很少用作一级导航,一般是二级导航比较多,而且我发现顶部标签导航,几乎都是纯文字的形式,比如:

可以看出纯文字导航可以让用户最快的找到自己感兴趣的分类,自定义的添加调换顺序既方便了开发也方便了用户。

十九大召开之际,光明日报也在ui上做了一些改动,纯文字的顶部导航对于更换字体颜色的修改效果并不明显,所以在讨论过后,我们决定在背景上做文章。

第一版设计时我将党相关的素材翻来覆去的看,借鉴优秀的例子,发现共通之处,大家都运用了:红旗,党徽,白鸽,大会堂顶部,红色绸带,天安门等,鉴于我们的导航栏还有文字出现,所以过度花哨的背景可能会喧宾夺主。

在多个版本之后我们试运行了1,4两个版本,最终以第四版本为上线版本,不过我个人更喜欢第一个版本的小白鸽。

确定后做了几款手机的适配切图,最终在手机上的展示效果:

淘宝网合作伙伴奖

商家后台金牌淘拍档

年度金服务合作伙伴