底部导航(Bottom Navigation)

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


底部导航

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


iOS底部导航

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

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

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

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

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

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

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

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


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

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


淘宝底部导航按钮
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,722评论 1 180
  • 组件 底部导航(Bottom navigation) 底部导航栏使得最高级视图之间的切换和浏览变得非常容易。 使用...
    _薯泥鸡腿_阅读 6,905评论 0 4
  • 装备买了一个多星期了,今天决定持续打卡!不能浪费装备钱,要好好利用! 画了个长方形,总觉得画面脏脏的,明暗关系没处...
    徐二阅读 134评论 0 0
  • 第一天打卡+第二天打卡 读完上一本《捕捉儿童敏感期》之后,再去阅读《爱和自由》,发现这里面更多的是干货啊,可是理解...
    在鸣阅读 401评论 0 0
  • 南美的圣木 白鹰医药疗愈塔罗 意识和我们的眉心轮相连的。 宝剑一代表非常明确的某种意识 饱满的生活。
    体面事物所的纪先生阅读 234评论 0 0