抽屉式导航
1.Munchery(iPhone版)


导航入口采用普遍使用的三横线样式,告知用户此处有隐藏的导航;
抽屉按钮点击后,页面右滑,主界面为侧边栏的详细信息,右侧预留部分显示首页,视觉上,抽屉位于首页左边,当用户点击右侧预留部分或抽屉按钮时,回到首页。
2.Fast Company(iPhone版)


和Munchery类似,同样采用左上角抽屉式导航,不一样的是,导航页展开时,Fast company将首页显示区域扩大;
抽屉展开时,首页可见部分为页面右侧,同时,右侧页在透明度上进行了调整,视觉上抽屉位于首页上方;
点击右侧含有灰度蒙层时,回到首页。
3.Elevate(iPhone版)


抽屉可以有很多样式,Elevate将打开的抽屉设计成了收纳盒,展开时,将首页包裹在内
4.Airbnb(iPhone版)


温馨提醒,Airbnb的抽屉按钮为四行;
为了保证主界面的清晰简洁,Airbnb将除了搜索外其他的功能入口全都放在抽屉式导航页了;
这造成了设计上,抽屉展开时的页面占比较以上案例多,立体的首页缩略图仅是返回首页的入口(相较传统的”返回”,这样的设计更直观)。
5.Gogobot(iPhone版)


Gogobot抽屉导航设计的亮点在于,抽屉按钮上显示了未读消息提醒;
对比Airbnb,Gogobot的这个设计值得称赞。
网友评论