所有分类
  • 所有分类
  • 未分类
Material Design 设计语言(八)操作条

Material Design 设计语言(八)操作条

 操作条(Sheets) 一、操作条:底部(Sheets:bottom) 底部操作条是包含附加内容的列表,其固定在屏幕的底部。 原则 1、支持 底部操作条是对主界面区域UI进行补充的内容。 2、灵活 底部操作条可以显示各种...

 操作条(Sheets)


一、操作条:底部(Sheets:bottom)

底部操作条是包含附加内容的列表,其固定在屏幕的底部。


原则


1、支持


底部操作条是对主界面区域UI进行补充的内容。


2、灵活


底部操作条可以显示各种各样的内容和布局。


3、人体工学


底部操作条很容易在移动设备上触及。

类型


1、标准底部操作条


标准底部操作条与屏幕的主UI区域共存,允许同时查看并与两个区域交互。


当主UI区域中的内容经常滚动或平移时,它们通常用在屏幕上保持功能或辅助内容可见。

             

2、模态底部操作条

模态底部操作条提供了一组选项,同时阻止了用户与主界面进行交互。它是移动设备上的内联菜单和简单对话框的替代方案,为内操作项图标和动作提供了额外的空间。

               

3、扩展底部操作条


扩展的底部操作条是固定到屏幕底部上面控件,用户触发该控件以访问特征或任务。它可用于:


  • 持续显示跨应用功能,例如购物车

  • 从一组项目中收集或处理用户选择,例如图库中的照片

  • 支持任务,例如聊天和评论

  • 项目之间的间接导航,例如播放列表中的视频             

 

与浮动操作按钮不应用于相同的目的:

 

  • 浮动操作按钮仅用于操作,并且它们不响应用户与屏幕其余部分的交互。它们可以转换为更大的页面,以允许用户完成操作。

  • 扩展底部操作条会直接转换为更大的表面,并可以更新其内容以反映用户交互。

               

组合

 

在移动设备上,扩展的底部操作条会影响其他底部对齐的组件。它可能会遮挡底部导航等重要功能,或者放在浮动操作按钮旁边时也会产生混淆。

 

以下是何时以及如何将扩展底部操作条与附近组件搭配组合的建议: 

       

二、操作条:侧边(Sheets:side

侧边操作条是包含附加内容的列表,其固定在屏幕的左边缘或右边缘。

             

原则

1、支持

侧边操作条是对主界面区域UI进行补充的内容。

2、灵活

侧边操作条可以显示各种各样的内容和布局。

3、关联

根据屏幕尺寸或用户需要,侧边操作条可以是可见的或隐藏的。

模态侧边操作条

模态侧边操作条显示内容,同时阻止用户与屏幕其余部分进行交互。

交互

当用户触发操作时,会显示模态侧边操作条,例如点按顶部应用栏中的按钮或操作图标。它们会被关闭:

 

  • 轻点黑色蒙版

  • 向操作条的固定边缘(左侧或右侧)滑动

       

– 推 荐 阅 读 


Material Design 设计语言(七)列表

Material Design 设计语言(六)菜单

Material Design 设计语言(五)卡片和纸片

Material Design 设计语言(四)按钮


本文来自:宛苏    作者:宛苏

原文链接:https://www.uiya.cn/15802.html,转载请注明出处。

0
分享海报

评论0

没有账号? 注册  忘记密码?