美文网首页Material Design
底部导航(Bottom Navigation)

底部导航(Bottom Navigation)

作者: 大大的鱼 | 来源:发表于2018-04-12 16:12 被阅读19次

    材料设计之前是没有底部导航这种形式的,最开始提倡使用侧边导航,后来从iOS平台借鉴过来。苹果和谷歌的设计语言都是相互借鉴和影响的,比如在苹果设计中没有页面标签这个控件(tab),而是分割按钮(Segmented Controls),后来标签控件因为用户的反馈良好也大量出现在iOS平台应用上(虽然还没有出现在官方的设计指南中)。从这一点看,材料设计是更加开放,善于学习的。iOS的姿态更高一点,比如在苹果开发者大会上,侧边导航的汉堡按钮就被苹果的设计师狠狠吐槽了,说是可视性(Visibility)不够。

    底部导航

    底部导航这种形式来自于iOS,但却不是完全搬过来,而是被优化和加强了。iOS平台上的底部导航一般是固定不动的,只存在选中和为选中之间的状态切换,典型如微信的页面导航方式:

    iOS底部导航

    材料设计中的底部导航有以下几点的不同:

    一、按钮被选中时,不仅是透明度和颜色的变化,整体会上移2个像素;

    二、导航页面大于三个时,未选中的按钮可以选择不显示名称;

    三、按钮被选中时可以重新调整位置,以突出选中状态的变化;

    四、页面向下滚动时,底部导航可以暂时性隐藏,向上滚动时再重新显示出来;

    五、点击按钮,如果对应的视图是数据列表时,可以再次刷新页面;

    六、左右滑动可以在标签之间切换,而不仅是点击按钮。

    这些特点未出现在iOS的设计指南中,却被很多iOS平台上的应用上,比如京东应用上的“发现”按钮,点击下是可以再次刷新页面:

    京东底部导航,点击按钮刷新界面

    再比如淘宝应用中首页按钮,结合了“回到顶部”功能且突出了选中状态,与材料设计的底部菜单定位也是不谋而合:

    淘宝底部导航按钮

    相关文章

      网友评论

        本文标题:底部导航(Bottom Navigation)

        本文链接:https://www.haomeiwen.com/subject/gxfxkftx.html