详解APP端哔哩哔哩所有的导航类型，及高保真原型实现(3)

现网中对抽屉导航的使用，也都是大同小异，抽屉导航里面呈现的内容主要是用户个人中心及相关设置，这样设置的原因在于，个人设置本来作为一个大的分类存在，但是它的打开率和点击率并不如其他内容模块的频率高，所以放置在底部导航的话，就有些浪费资源了。设置成抽屉导航，增加了一种漂亮的交互，还增加了APP的可玩性，一举两得。

原型实现

我们首先观察抽屉导航的交互流程，屏幕左侧左滑or点击“bars”设置按钮，弹出抽屉；抽屉的内容呈现，底部是一些设置的入口，内容部分是收藏、APP换肤等功能入口，并且这里需要注意的一点是，内容部分的功能入口，一版是展示不完的，所以需要我们增加屏幕上下滑动的交互；退出抽屉的交互也有两种，点击其他区域or右滑抽屉。

具体的实现方法如下，要实现左滑屏幕左侧弹出抽屉，我们可以用热区覆盖，也可以用一块透明的矩形代替，这里我们选择用透明矩形的方法。在屏幕左侧加一个动态面板，命名为触发板，动态面板里面设置两个状态，一个状态命名为“普通”，里是透明无边框的矩形，另一个状态命名为“焦点”，里面的内容是弹出来的抽屉。我们添加一个交互案例“向右拖动结束时”，右滑拖动之后，设置动态面板“触控板”为焦点，在设置一下“向左拖动结束时”，动态面板“触控板”为普通，所有的步骤如下图所示。这样就实现了左滑右滑弹出/隐藏抽屉。

但是这样的效果和APP所呈现的效果差距甚远，我们发现弹出抽屉的时候，除了抽屉的出现之外，还会有一个半透明的浮层，当抽屉消失之后，浮层也消失。现在我们就加上这个浮层。这里我们加一个黑色50%透明的矩形，大小与APP相同，位于顺序触控板之下，位于其他元件之上，初始的状态为隐藏，命名为“黑色背景”。当右滑结束时，加上交互事件“显示黑色背景”。当状态为显示抽屉之后，我们应该想到一个细节，有两种交互都可以使抽屉隐藏，一是点击黑色背景，二是左滑抽屉，所以我们额外加上点击黑色背景切换动态面板“触控板”的状态。首先向右拖动结束时，添加一个交互案例，显示“黑色背景”：实现的是向右拖动，弹出抽屉并显示黑色背景。接着向左拖动结束时，添加一个交互案例，隐藏“黑色背景”，实现的是向左滑动，隐藏抽屉并隐藏黑色背景。现在就完成了左滑右滑显示/隐藏黑色背景。

（编辑：ASP站长网）