5.2 导航转换(Material基础)
本文介绍了Material基础中的《导航转换》
导航转换
导航转换发生在用户切换界面的时候,例如从主页跳转到详情页。

目录
简介
层级转换
同级转换
简介
导航与手势
导航转换使用手势来引导用户在应用程序界面之间跳转。它们通过表现应用程序间的层级来帮助用户定位,使用动作来表明元素间的关联性。
例如,当一个元素扩展到整个屏幕,此动作就表示新界面是个子元素,而扩展来源就是其父元素。
层级
层级转换依据应用程序的层级结构将用户向上或向下移动一个层级,而同级转换是使用户在同级界面中移动。
层级转换
层级转换反映了用户在应用程序中向上或向下移动一个层级时的场景。彼此相邻的层级界面是父子级的关系,其中父级为子级的上层。
父子转换
在父级界面中,嵌入的子元素在点击后升起并使用标准缓动充分扩展。该动作既将焦点聚集到了子界面(交互结果),同时也加强了父子界面之间的关系。

父级转换到子级

此邮件App中的消息预览会升高并展开显示完整信息。
同级转换
同级转换出现在同一层级结构的界面之间。
兄弟转换发生在共享父级的相同层级之间,而最高层级的兄弟转换仅用于主要目标之间切换。
兄弟转换
共享父级界面(例如相册中的相片,文件中的选项或流程中的步骤等)以统一的移动方式来强调它们的相关性。同级界面从一侧滑入,它的兄弟项就从另一侧滑出。

选项卡通过相同海拔高度和统一动作表明它们是相互关联的。

此旅行APP使用选项卡来实现三个不同旅程项目类型间的切换。
最高层级转换
在应用程序的最高层,目标界面通常组合成为一些主要任务(任务间可能彼此不相关)。这些界面一般通过改变参数值(例如不透明度或大小比例等)来进行转换。

底部导航栏目标界面转换

此相册应用程序最高层级目标间使用了恰当的转换方式,表明界面之间并没有很强的相互关系。
*原文作者为谷歌设计团队,本文为个人翻译作品,仅供学习参考






































