折叠屏手机，会给交互设计和前端开发带来什么改变？

?随着折叠屏越来越火，作为一个做过好几年手机APP的设计师，我内心隐隐有些不安。
如果折叠屏手机真的普及了，恐怕会给UI和交互设计带来很大的变化。
到时候，APP都要补充很多适配规则，甚至可能需要重新设计布局架构，因为做不做折叠屏的适配，对体验和视觉效果的影响真的很明显。
例如：下图就是 Due为折叠屏做适配的真实案例：
做好适配后，折叠屏看起来酷炫，优势一览无余。
如果不做适配，折叠屏不但显得毫无优势，你还会觉得中间那条缝十分碍眼。
为了把折叠屏的优势发挥出来，设计师们可以操心的地方多了去了。
苹果现在是没有折叠屏手机，所以想要了解折叠屏适配设计的话，最好是去看看系统——确实做了一番研究。
我们看下谷歌Dave Burke对于折叠屏手机是如何定义的：
你可以把这个设备看作既是手机，又是平板电脑。从广义上讲, 它有两种变体–双屏设备和单屏设备。当它折叠时, 它会像手机一样,
可以放在你的口袋或钱包里。You can think of theas both a phone and a .
, there are two– two-and one-
. When , it looks like phone,in youror
purse.
谷歌对于折叠屏手机界面的适配主要包括两点：大屏到小屏的切换要保证屏幕的连续性、多窗口模式、以及多任务。
不论从交互还是前端的角度，保证屏幕尺寸变换时的可用性应该都不是大问题，分屏和响应式布局方面都已经有很多现成的经验了，安卓也在2018年11月就宣布了对折叠屏的支持。
最新版的设计系统中，有专门针对折叠屏适配的研究，我今天就以此为基础，给大家捋一捋：
【折叠屏手机，会给交互设计和前端开发带来什么改变？】1.触摸范围
折叠屏的手机屏幕更大，触摸范围肯定也不一样。

文章插图
非折叠屏手机以单手操作为主，但是折叠屏手机如果展开，就不可能单手操作了，以双手为主。
上面三个区域中，3号区需要手指弯曲较大，1号区需要手指尽力，2号区是操作起来最舒适的。
顶部，尤其是中间那一部分，手指很难触达，避免放置常用操作。
2. 页面分割
首先，有的屏幕是原来手机的尺寸，从中间对折的，有的还没有 90°的状态，要么折叠要么展开。
这种还比较好办，因为大部分时间都是展开使用，不太需要额外的适配设计。
比较麻烦的是双屏尺寸的折叠屏，因为这种屏幕会经常使用展开 90°的桌面模式。
最简单的适配方式是下图这种单列适配，适合上下翻折，但这种就对桌面模式很不友好。
这种不太适合左右翻折，否则中间容易看到一条竖直折痕。
如果是左右翻着，最好是考虑这种左右布局了，更大效率地利用 2 倍的屏幕空间。
但是这种左右布局也会有风险，折叠屏的展开宽度毕竟不及平板设备，也要考虑分成两列之后空间够不够用。
桌面模式可能是看视频或打字的常用模式，也要考虑如何快速切换布局：

文章插图
3.铰链
上面那么多模式，已经很让人汗颜，但折叠屏的复杂性还不止如此。
因为硬件限制，折叠屏中间都会存在一个铰链。
各大厂商都在努力抹平铰链造成的视觉影响，但用久了几乎没有哪家不出现凹痕的。
那个小凹痕平时也没什么，但如果图片或文字段落跨越那道铰链，就难保不看出问题。
退一万步说，就算凹痕小到看不出来，铰链依旧会给交互造成影响。
因为铰链上的触感肯定不怎么好，重要的信息和按钮都最好避开那道杠。更何况，还可能存在铰链处触控问题，甚至屏幕分段的问题。
4. 弹窗
前面讲了为什么铰链的存在会给 APP 设计造成很大影响，这里就要说影响最大的一个组件了。
弹窗是不能直接用以前的样式了，否则刚好卡在铰链那个地方。
You 的解决办法是，让折叠屏的弹窗出现在屏幕一侧。
哪怕是完全展开状态，也不能把弹窗放在中间，因为你无法确定用户的这个折叠屏，是不是真的无缝。
总结
今天这篇文章的内容有没有用，主要还是取决于折叠屏会不会普及。
就我个人而言，如果要买折叠屏，估计主要奔着尝鲜去，对用户体验这块其实并没有什么指望。
但是以后的事情，哪里说的准呢？
最近忙里偷闲，自己开了一个公众号【谁家de码农陈先生】，里面定时给大家分享技术博文、前方高能资讯内容！欢迎各位老板点赞关注，你们就是我的动力源泉！