材料设计之前是没有底部导航这种形式的,最开始提倡使用侧边导航,后来从iOS平台借鉴过来。苹果和谷歌的设计语言都是相互借鉴和影响的,比如在苹果设计中没有页面标签这个控件(tab),而是分割按钮(Segmented Controls),后来标签控件因为用户的反馈良好也大量出现在iOS平台应用上(虽然还没有出现在官方的设计指南中)。从这一点看,材料设计是更加开放,善于学习的。iOS的姿态更高一点,比如在苹果开发者大会上,侧边导航的汉堡按钮就被苹果的设计师狠狠吐槽了,说是可视性(Visibility)不够。
底部导航底部导航这种形式来自于iOS,但却不是完全搬过来,而是被优化和加强了。iOS平台上的底部导航一般是固定不动的,只存在选中和为选中之间的状态切换,典型如微信的页面导航方式:
iOS底部导航材料设计中的底部导航有以下几点的不同:
一、按钮被选中时,不仅是透明度和颜色的变化,整体会上移2个像素;
二、导航页面大于三个时,未选中的按钮可以选择不显示名称;
三、按钮被选中时可以重新调整位置,以突出选中状态的变化;
四、页面向下滚动时,底部导航可以暂时性隐藏,向上滚动时再重新显示出来;
五、点击按钮,如果对应的视图是数据列表时,可以再次刷新页面;
六、左右滑动可以在标签之间切换,而不仅是点击按钮。
这些特点未出现在iOS的设计指南中,却被很多iOS平台上的应用上,比如京东应用上的“发现”按钮,点击下是可以再次刷新页面:
京东底部导航,点击按钮刷新界面再比如淘宝应用中首页按钮,结合了“回到顶部”功能且突出了选中状态,与材料设计的底部菜单定位也是不谋而合:
淘宝底部导航按钮
网友评论