编辑导语:材质设计不仅是Android阵营产品的设计规范和风格，甚至鼓励设计师和开发者在苹果设备和windows设备上使用这种风格。作为设计规范，它是宽容的，但有时非常严格。使用材料设计的产品给人一种强烈的统一感和秩序感。折叠屏的发展需要新的设计准则。跟笔者一起来看看吧！
折叠屏可以使用柔性屏进行折叠或展开，可用的屏幕空可以根据你的需求进行无缝扩展。
一、设备与环境
理解硬件和用户界面的考虑是设计适应性体验的关键。
App适配可折叠屏需要考虑的条件和限制。
第二，姿态是指可折叠设备可以采用的屏幕配置，可以为App提供多少种不同的布局环境。
1. 折叠
折叠姿势的正面屏幕使用了与典型手机相似的比例。
当您设计折叠状态的屏幕时，请参考材料设计中的移动设备通用指南。
和普通手机比例差不多，折叠姿势有前屏。
三、展开姿态
展开的姿势是指打开的屏幕，通常是正面屏幕的两倍，或者是小型平板电脑的大小。展开姿态分为水平和垂直屏幕方向。
在展开姿态下，设备的折叠铰链在某些型号上可能很明显。最独特的是微软的Surface Duo，铰链完全物理分隔屏幕。
Sureface Duo铰链将屏幕完全分为两部分(译者配图)
1. 展开横向
横向模式适合屏幕较长的一边是水平的，较短的一边是垂直的。
当横向展开时，屏幕的长边是水平的，短边是垂直的。
2. 展开竖向
垂直模式适用于屏幕边缘较长的垂直模式和屏幕边缘较短的水平模式。
垂直展开时，较长的屏幕边缘是垂直的，较短的屏幕边缘是水平的。
3. 立放姿态（tabletop）
站立姿势描述了一种特殊的屏幕姿势，即折叠屏幕的一半与另一半垂直。站立姿势类似于笔记本电脑:屏幕一半是水平的，就像平躺在桌子上一样，而另一半是垂直的，大约90度。
站立姿势是一种屏幕姿势，屏幕一半水平，另一半垂直或半折叠。
四、可达性
当屏幕展开时，对大多数人来说，除非调整手柄，否则屏幕顶部的25%是够不着的。为了适应设备和手的大小，将放置在屏幕顶部的交互元素的数量限制在25%。此外，避免将重要的交互元素放在离屏幕底边太近的地方。一些用户，尤其是手大的用户，可能会发现很难够到屏幕的下边缘。
当用户拿着展开的设备时，他们的手指接触受到限制。当在布局中指定描述交互时，考虑以下三个人机工程学方面。
用户可能通过伸长手指到达这个区域，这使得许多人在触及这个区域时略显不便。用户可以舒适地到达这个区域。当手握住设备时，触及这个区域具有挑战性。设备的放大示意图显示了三个不同的互动关注区域。
将互动限制在屏幕的上半部分。如果你不改变握法，屏幕的前25%很难够到。
当用户用双手握住设备时，很难够到屏幕的顶部区域(1)。
把关键的和常用的元素放在屏幕的底部和角落会让它们更难够到。
请不要这样做！避免将fab(浮动操作按钮)等元素放在离屏幕底部太近的地方。这使得它们很难够到，因为较大的设备会限制拇指可以够到的距离，尤其是单手使用设备时。
五、中心铰链
因为设备的铰链是折叠的，所以折叠后的屏幕会有触觉上的差异。
避免将重要信息和动作放在展开屏幕的48dp。
在屏幕上展开铰链示意图的中心。
以垂直模式下的中心铰链为例。避免在这个区域放置重要的交互元素。
垂直模式下设备中心铰链示意图
折叠设备有两种类型的铰链:
几乎看不到的无缝铰链，尽管一些用户可能会感觉到屏幕表面有触觉差异。铰链在物理上将设备划分成两个屏幕（比如前文提到的微软 Surface Duo）。1.带无缝铰链的设备在带物理铰链的设备上，屏幕被设计成两个不同的部分，可以让接缝和屏幕看起来非常和谐。
2.具有开槽铰链的设备是对话框的外壳，其位于具有开槽铰链的屏幕的中心附近。
避免将关键动作(如对话框)放在中间铰链上。
请不要这样做！避免将关键动作放在中间铰链上。
你能做到的！将对话框等关键元素放在屏幕两侧。
请不要这样做！避免将关键动作放在屏幕中间。
六、划分屏幕
将屏幕划分为组合区域时，避免将重要动作放在屏幕的中间48dp。2栏布局的组合效果最好。
1. 横向
在横向模式下，主要导航组件位于屏幕的垂直边缘(1)，内容和元素分为两列(2)。
内容和元素分为两栏，导航栏(1)提供符合人体工程学的导航体验。使用屏幕宽度(2)将内容分为两列。
2. 竖向
在纵向布局中使用一栏。在纵向模式下，横向空空间有限，几乎没有空空间可以实现两个有意义的列。
在可折叠应用的垂直布局中使用单栏。
如果内容可以容纳在狭窄的视野中而不会过度失真，则可以使用两列的垂直布局。
小心！只有当内容适合窄视图时，才能在垂直布局中使用两列。
复杂的列表条目使得很难在两个压缩的列中舒适地查看内容。
七。扩展或合并窗口在设计可折叠设备时，主要有两种方法来管理扩展和收缩屏幕空。
当屏幕空由于设备的扩展而扩展时，可以使用更大的画布来扩展现有视图或添加单独的附加视图。
展开时，默认情况下应打开列表中的第一个对象，除非选择了某个项目。
1. 扩展窗口
扩展意味着采用典型的移动设备设计，并重新安排元素和内容，以更好地利用空。这可能意味着添加第二列内容或重新安排内容区域。这种方法类似于网页上的响应式设计。包括以下示例:
增加第二列内容创建一个更复杂的照片布局引入更多的负空间（留白）与通常使用单栏(左)的移动设备布局相比，可折叠设备(右)可能会使用多栏布局。
2. 合并窗口
为了适应更大的屏幕，移动设备的UI中的两个不同视图可以在更大的设备上呈现为单个视图。考虑从一个流程中提取多个屏幕，并在一个可折叠设备上以单个视图的形式呈现它们。
包括以下示例:
收件箱视图与单消息视图并列文本消息列表视图和单对话视图并列文件浏览器视图与打开的文件夹并列音乐家专家信息与音乐播放器控件同时出现。在移动端(左)，一个应用有两个屏幕，可以组合成一个单独的两列布局，用于开发一个可折叠的设备(右)。
3. 滚动
根据您的应用程序如何扩展或组合窗口，折叠设计的滚动行为会在展开设计期间发生变化。
如果您扩展一个窗口，您可以决定整个屏幕是一起滚动还是在每一侧(列)独立滚动。
如果选择组合窗口，屏幕的每一边都将作为一个独立的滚动区。
两个可折叠设备。1(左)显示两个独立的滚动栏，2(右)显示单页的滚动内容。
4. 沉浸式布局
沉浸式布局关注单个动作或窗口，为特定目标创建无干扰环境。
包括以下示例:
通过将应用程序的布局集中在视频电话上，这种体验不会与其他内容争夺注意力。
作者:槐花守望者；微信官方账号:槐花守望者
本文由@龙爪树守望者原创发布。每个人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于CC0协议。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
