指南|Material Design 折叠屏设计指南(1):概述( 二 )


指南|Material Design 折叠屏设计指南(1):概述
文章插图
当用户用两只手握住设备时,屏幕的顶部区域(1)难以触及。
将关键和常用的元素放在靠近屏幕下方和角落的地方,会使得它们更难接触到。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
千万别这样!避免将 FABs(浮动动作按钮)等元素放在离屏幕下方太近的地方。这使得它们难以触及,因为较大的设备会限制拇指能够伸向的距离,特别是在单手使用设备时。
五、中心铰链由于设备的铰链实现了折叠,折叠屏幕的中心会有触觉差异。
避免将重要的信息和动作放在展开的屏幕的中心 48dp 上。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
展开屏幕上中心的铰链示意图
以竖向模式下的中心铰链举例。避免在这个区域放置重要的交互元素
指南|Material Design 折叠屏设计指南(1):概述
文章插图
处于竖向模式下设备中心的铰链示意图
折叠设备的铰链有两种类型:

  1. 几乎看不到的无缝铰链,尽管一些用户可能会感觉到屏幕表面有触觉差异。
  2. 铰链在物理上将设备划分成两个屏幕(比如前文提到的微软 Surface Duo)。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
1. 无缝铰链的设备在有物理铰链的设备上,将屏幕设计成两个不同的部分,这样就可以使接缝和屏幕之间显得很和谐。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
2. 有缝铰链的设备一个对话框案例,该对话框位于有缝铰链半边屏幕的中心附近。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
避免放置关键动作(比如对话框)沿中心铰链放置。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
千万别这样!避免将关键动作放在中心铰链上。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
可以这样!将对话框等关键元素放在屏幕的两边。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
千万别这样!避免将关键动作放在屏幕的中间。
六、划分屏幕当把屏幕划分成组合区域时,避免在屏幕中间的 48dp 放置重要动作。2 栏布局的组合效果最好。
1. 横向在横向模式下,把主要的导航组件放在屏幕的垂直边缘(1)上,并将内容和元素分割成两列(2)。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
内容和元素被分成两列,一个导航栏(1)提供符合人体工程学方式的导航体验。而内容被分成两列,使用屏幕的宽度(2)。
2. 竖向在纵向布局中使用一列。在纵向模式下,水平空间是有限的,几乎没有空间可以实现有意义的两列。
在可折叠的 App 的纵向布局中使用单列
如果内容能在狭窄的视野中容纳而不会过度失真,那么可以使用两列展开的纵向布局。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
当心!只有当内容适合较窄的视图时,才能在纵向布局中使用两列。
复杂的列表条目使人很难在两个压缩的列中舒适地查看内容。
指南|Material Design 折叠屏设计指南(1):概述
文章插图
七、扩展或组合窗口在为可折叠设备进行设计时,有两种主要的方法来管理扩展和收缩的屏幕空间。
当屏幕空间因为设备的展开而扩大时,更大的画布可以用来扩展现有视图或添加一个单独的、额外的视图。