设计 导航 页面设置 CSS变量 优秀前端框架推荐

导航

导航可以解决用户在访问页面时:在哪里,去哪里,怎样去的问题。手机端一般采用顶部导航和TabBar(底部导航)。

选择合适的导航

选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确)。 以下是「侧边导航」、「顶部导航」和 「底部导航」的区别。

侧边导航

侧边导航一般和底部导航配合使用,也可单独使用。侧边导航可以上下滑动且左右可视区域多,所以适合较多导航链接或者链接文字较长的情况下使用。

顶部导航

顶部导航一般包含返回按钮、标题、右侧操作栏,主要用于控制页面返回、显示当前页标题和一些附加操作(如分享、搜索、消息等);当然也有将标题直接更换为搜索输入框实现顶部搜索功能。

底部导航

底部导航又称TabBar,一般数量在3~5个之间,由icon图标和导航文字组成,文字一般在2~5个字之间。如果导航数量大于5个或者文字超过5个,会显得拥挤或者样式混乱,从而造成不好的用户体验。