5.2 导航转换(Material基础)

用户头像
深圳/设计爱好者/7年前/119浏览
5.2 导航转换(Material基础)
用户头像
饶登

本文介绍了Material基础中的《导航转换》

导航转换


导航转换发生在用户切换界面的时候,例如从主页跳转到详情页。



目录

简介

层级转换

同级转换




简介


导航与手势

导航转换使用手势来引导用户在应用程序界面之间跳转。它们通过表现应用程序间的层级来帮助用户定位,使用动作来表明元素间的关联性。


例如,当一个元素扩展到整个屏幕,此动作就表示新界面是个子元素,而扩展来源就是其父元素。



层级

层级转换依据应用程序的层级结构将用户向上或向下移动一个层级,而同级转换是使用户在同级界面中移动。




层级转换


层级转换反映了用户在应用程序中向上或向下移动一个层级时的场景。彼此相邻的层级界面是父子级的关系,其中父级为子级的上层。


父子转换

在父级界面中,嵌入的子元素在点击后升起并使用标准缓动充分扩展。该动作既将焦点聚集到了子界面(交互结果),同时也加强了父子界面之间的关系。

父级转换到子级


此邮件App中的消息预览会升高并展开显示完整信息。




同级转换


同级转换出现在同一层级结构的界面之间。


兄弟转换发生在共享父级的相同层级之间,而最高层级的兄弟转换仅用于主要目标之间切换。



兄弟转换

共享父级界面(例如相册中的相片,文件中的选项或流程中的步骤等)以统一的移动方式来强调它们的相关性。同级界面从一侧滑入,它的兄弟项就从另一侧滑出。

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


此旅行APP使用选项卡来实现三个不同旅程项目类型间的切换。



最高层级转换

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

底部导航栏目标界面转换


此相册应用程序最高层级目标间使用了恰当的转换方式,表明界面之间并没有很强的相互关系。



*原文作者为谷歌设计团队,本文为个人翻译作品,仅供学习参考

0
阅读原文
|
举报
|
2
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
我的钱包-UI界面设计-app
APP/小程序商业项目UI模板|99个高保真UI+79个原型
钱包ui模板
【新年UI图标】礼物/活动icon
盲盒APP UI设计
【新年UI图标】钱包icon
户外旅行飞机情侣假日出行
【新年UI图标】秒杀icon
【新年UI图标】30个图标
【新年UI图标】会员icon
新拟态风格 UI设计组件库
3D渐变流体抽象矢量UI背景图
【新年UI图标】体育icon
手表表盘UI系列
新能源APP应用UIKit
拟物风质感写实UI卡片合集源文件
【新年UI图标】旅行icon
UI界面 组件
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
Security Camera UI kit
智能家居中心 简约 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
你可能喜欢
大家都在看
登录注册