手机端导航菜单代码（顶部导航交互方式的灵活应用）
手机端导航菜单代码（顶部导航交互方式的灵活应用）（1）返回上一级由左侧的箭头调整为右侧的关闭按钮3. 调整背后的场景分析用户在当前页面上下滑动浏览内容时，传统交互方式：如下图1选中部分固定位置不动，只是滑动时视觉呈现效果变化。改版后交互方式：上滑页面，下图2隐藏了除搜索和顶部Tab之外的区域，并且搜索按钮的呈现样式发生了变化，在页面的任何位置下滑时隐藏部分出现。（1）传统交互方式（2）新版交互方式
目前许多App随着功能迭代和产品需求的调整，在单个页面呈现的功能点与内容都在增多。这意味着同一页面如果想给用户呈现更多内容和操作，就必须根据用户使用场景，利用交互方式的变化，分重要性层级展示。下文将通过实际案例说明移动端界面设计中顶部导航交互设置的变化。
一. 淘宝店铺详情页的顶部交互设置
1. 退出店铺详情页按钮的位置和样式变化
改版前退出店铺详情页的跳转方式：点击左上角返回按钮，页面从左至右滑出回到上一级页面。改版后：点击右上角关闭按钮，页面从左至右滑出回到上一级页面（类似微信小程序的关闭样式）
2. 页面上下滑动交互方式的改变
用户在当前页面上下滑动浏览内容时，传统交互方式：如下图1选中部分固定位置不动，只是滑动时视觉呈现效果变化。改版后交互方式：上滑页面，下图2隐藏了除搜索和顶部Tab之外的区域，并且搜索按钮的呈现样式发生了变化，在页面的任何位置下滑时隐藏部分出现。
（1）传统交互方式
（2）新版交互方式
3. 调整背后的场景分析
（1）返回上一级由左侧的箭头调整为右侧的关闭按钮
从内容呈现层面分析，首先展示给用户的是重要性层级最高的内容。用户进入店铺详情页，首先看到的是店铺名称、粉丝数量和关注按钮。这符合交互原则，需要让用户明确从哪里来，现在在哪，怎么回去。
（2）上滑操作后店铺相关信息隐藏，下滑再次出现
用户上滑操作时，表明用户已经开始浏览信息流，那么店铺的相关信息没有必要一直固定存在，同时可以为内容留出更多的展示空间。当用户下滑操作时，再次出现默认头部，此时用户可能想退出或关注该店铺。
（3）上滑后搜索由icon 文字调整为只有icon
首屏搜索的重要性层级较高，用户进入该页面可能有明确目的，即搜索该店铺的商品，这时需要将搜索呈现的明显。当用户上滑意味着没有明确目的，只是单纯的浏览推荐内容，此时搜索就可以弱化处理。
二. 知乎用户详情页和问题详情页顶部的交互设置
1. 用户详情页上下滑动，顶部交互方式的变化
如下图，进入用户详情页，知乎选择了首屏放置超大的个人头像和背景图，以及昵称和个人简介信息。当上滑页面后个人头像渐变消失，顶部出现搜索和功能聚合键。
这里的考虑因素首先突出用户个人信息，随着用户开始浏览内容，个人信息弱化，同时出现对应的搜索功能。这正是基于用户不同使用场景下，想要达成不同目标，依靠交互的变化对页面布局进行的调整。
