当前位置:首页 » 新媒体运营 » 正文

点击文本框弹出一个框,Material Design 折叠屏设计指南(5):动效

6793 人参与  2022年12月20日 15:49  分类 : 新媒体运营  评论

编辑导语:设计折叠屏手机等移动设备时,参考Material Design 中的通用指南也许会有很大帮助。这篇文章介绍了折叠屏在打开、关闭和旋转时画面的不同呈现形式,以及如何用动效进行流畅的过渡。推荐对折叠屏感兴趣的童鞋阅读。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络


一、打开、关闭和旋转设备. 折叠状态到横屏展开

动效被用来突出由更大的、展开的画布所显示的新内容。

导航栏和详情页的动画用来引起人们的注意。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

可折叠设备上的邮件 App 从折叠姿态到展开的横屏姿态

避免了在折叠或展开后停留在之前姿态的布局上。相反,随着设备的折叠和展开,进行了不同姿态的无缝过渡。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

千万别这样!避免启动布局变换时出现延迟

姿态的连续性也可以在 banner 的动效中得到加强,banner 宽度延展以利用更大的屏幕宽度。搜索栏也可以有类似的表现。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

当进入立放模式时,像视频这样的主角元素可以扩展到屏幕的上半部分,像媒体控件这样的辅助元素填补屏幕的下半部分。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络


二、组件变换. 边框进入和退出

这种变换用于靠近屏幕边缘的组件,这些组件根据布局自适应时情况退出或进入。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

随着屏幕的展开,底部导航变换成侧边导航


. 新增一个面板

面板会由一个更大的画布(canvas)展示出来,这种变换是用来吸引人们对一个新面板的注意的。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

随着屏幕尺寸的增加,一个辅助面板从侧面进入视图


. 同级变换:导航

顶级导航条目之间的对等变换使用共享的 Y 轴。详情页面根据所选列表条目的对应顺序向上或向下滑动。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

Y 轴上的元素同步变换,以加强内容状态的微妙变化


. 父子导航:列表

嵌套列表的父子变换使用共享的 X 轴转换。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

列表条目转换成详情视图


. 父子导航:卡片

卡片使用容器变换进行父子变换。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

卡片容器可以从一个小元素扩展到沉浸式视图


. 对话框出现

使用动效将注意力吸引到对话框中显示的新内容。

文本和按钮的垂直动效为对话框扩展增加了细节。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

可以这样!可以用分阶段垂直动效来显示对话框

不要从中心均匀地展开对话框。对话框展开时,内容不应淡入、重叠或相反的方向运动。

点击文本框弹出一个框,Material Design 折叠屏设计指南():动效-百度竞价优化_微商推广_今日头条自媒体_新媒体运营_剑谦网络

千万别这样!避免引入拒用统一缩放的对话框

本文链接:https://www.woshiqian.com/post/173366.html

百度分享获取地址:https://share.baidu.com/code
公众号文本框滚动条怎么做  

我是钱微信/QQ:5087088

广告位、广告合作QQ:5087088

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

       

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。