如何设计折叠屏？超详细的折叠屏设计指南。

最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。在这里我使用的是华为折叠屏（HUAWEI Mate Xs 上市时间2020年3月）

折叠屏是什么？

「折叠屏」这个概念比较细，更加宏观的概念应该叫「柔性屏」，折叠屏可以实现360度的弯曲，甚至扭曲。折叠屏的屏幕需要经过20万次的折叠保持不坏，是柔性要求较高的柔性屏，屏幕的结构也需要单独设计。

可折叠设备的发展史

说到折叠屏，很多人都或多或少的会联想到很多可以折叠的设备，在折叠设备发展进程中，不论是翻盖手机、游戏机还是最新的折叠屏手机，都有着一些共同的特点，比如下面几个可折叠设备就是典型代表。

△ 1974年施乐公司就提出了柔性屏的概念（打印机公司）

△ 任天堂NDS

2004年发售的第三代便携式游戏机。主要的特征包括了双屏幕显示，其中下方的屏幕为触摸屏。

△Moto V3 上市日期 2004年09月，主屏分辨率176×220像素

△三星W2014 2013年11月发布，主屏3.7寸分辨率800*480 ，副屏3.7寸800*480

哪些品牌在设计生产折叠屏手机

现在的折叠屏，更趋向于一块屏幕整体展示效果，三星Galaxy Fold、华为Mate X、华为Mate XS、中兴Axon
M、小米和魅族也在布局折叠屏领域，爆料苹果也在加紧布局中、 W20 5G、摩托罗拉 Razr ，以及联想的PC原型机、柔宇折叠屏手机等。

△中兴Axon M

2018年1月20日，主屏幕5.2英寸，1920*1080像素；副屏5.2英寸，1920*1080像素。

△Moto Razr，打开后形成一块6.2英寸21:9比例的OLED屏幕

摩托罗拉或于 9 月份推出第二代Moto Razr 。然而最新爆料称，该机或至少要等到 2021 年才会上市

△Samsung Galaxy Fold

分辨率（折叠屏）：2152 x 1536 (QXGA+)
分辨率（外屏）：720 x 1680 (HD+)

△Galaxy Z Flip

尺寸（折叠屏）：6.7英寸（直角）/6.5英寸（圆角）
分辨率：1080 x 2636 (FHD+)

△三星W20 5G

7.3英寸（直角）/7.1英寸（圆角）2152 x 1536 (QXGA+)
4.6英寸（直角）/4.5英寸（圆角）720 x 1680

△据外媒爆料苹果也在研发折叠屏的手机/iPad

业界传出，苹果最快将于2021年推出折叠iPhone。据相关供应商透露，折叠iPhone不再有刘海设计及人脸识别，将搭载双屏幕、侧面指纹解锁等过往iPhone不曾有过的特色与功能，采用上下折叠设计。

△小米折叠屏手机

△柔宇折叠屏手机

屏幕尺寸达7.8英寸，同时采用柔性的AMOLED屏幕，分辨率达1920*1440（展开状态）

△联想折叠屏电脑

ThinkPad X1 Fold（售价1.7万元)，合起来就像一本书一样，其显示屏是一块13.3英寸的4:3比例OLED屏幕，分辨率为2048×1536

△HUAWEI华为Mate Xs

展开态8英寸 2480*2200，约8：7.1
折叠态正面屏6.6英寸 2480*1148，约19.5：9
折叠屏背面屏 6.38英寸 2048*892约25：9

折叠屏的优势和特点

1. 满足多场景化

折叠屏特点是可以放大显示的屏幕面积，满足游戏和高清视频的需求；又能轻松的折叠装入口袋中更加便携

2. 高效学习和办公

技能高效，单屏幕快速学习内容，又能全屏幕沉浸式操作，不论是屏幕分屏还是灵活的文件拖拽都能轻松搞定

3. 视觉提升

当你使用大屏手机时，你会感觉到它的魅力，展现信息更多样化、交互视觉的结构多样性，以及大屏浏览视频时的感受，单屏幕手机是无法比拟的

4.多任务体验和更丰富的人机交互体验

可以在展开屏幕时实现多窗口的同时显示和操作等

如何设计折叠屏界面以及折叠屏交互细节分析

最近拿到了华为折叠屏，所以今天利用华为折叠屏作为折叠平台分析「前后折叠屏」的交互设计和细节。

1. 折叠屏对设计的影响

官方适配方案来啦（摘取了部分，更全面的可以去查看官方指导文件）：https://developer.huawei.com/consumer/cn/doc/90101#h1-2-ux-

屏幕展开与收起的相关尺寸：

自适应动态布局：

响应式动态布局：

页面层次：

2. 不同行业适配界面效果

购物类-淘宝

淘宝在进行适配的时候利用大屏的尺寸优势，左右侧进行了更多内容的显示，而不是单纯的把单屏模式下的界面进行了拉伸。

比如你在点击「天猫新品」的时候在屏幕的右侧展现了下一页，而在继续点击内容时，左侧出现产品的瀑布流信息，右侧出现选中产品的详情。

这样做的好处是，你可以一屏浏览2中样式，提高了浏览的效率：

视频类-华为视频

华为视频利用自身的适配规则，在屏幕展开的时候让内容随布局大小进行了扩展，我们可以看到包括banner位和推荐适配部分都展现了更多的信息，而在搜索条部分可以看到，没有把搜索进行全屏拉伸，如果搜索的大灰条满屏拉伸，效果不如一个icon入口更加的协调；底部Tab
bar的入口部分进行了间距的平分。

音频类/音乐播放类

在音频播放入口部分，在单屏时，因为空间有限，在一屏中不可能把所有信息都展现出来，而折叠屏展开后的界面空间变大后可以把歌词信息直接露出，满足了用户在听音乐或者听书时看文字的需求；相应位置的icon自动进行适应缩放间距。

笔记类-印象笔记

印象笔记在适配折叠屏时的方法与「相对大屏」手机的横屏效果是一致的，屏幕的加大，文字单行加长会增加阅读的难度和效率，所以在适配时运用左右分栏的方式，让用户快速搜索和扫视笔记的列表信息，而当点击选中笔记后，右侧屏幕则在本页展现笔记详情，大大提高了笔记的阅读和书写的效率：

股票财经类-同花顺

场景化适配时很重要的思考点，比如同花顺首页的单屏幕和展开屏幕的视觉空间的内容展现，当单屏显示时红色区域的5个重要模块的入口是以icon的形式展现，而当画面足够大之后，很好的把icon转换成了走势图，提高了用户的识别效率；当折叠屏显示区域足够大之后包括「股票开户」等入口和Tab切换位置区域可以更多的在一屏展现出来，有效的利用了折叠屏的大屏优势。

而在「行情」Tab的内容呈现上，利用折叠屏的大屏优势可以看出在大屏的显示上把单屏显示内容部分的「股票排行」放在了屏幕的右侧，可以实现一边看大盘趋势，一遍看股票详情排行榜，边看边分析同时进行，提高了浏览的效率。

旅游类-携程

3. 折叠屏交互细节分析

弹窗逻辑清晰

在单屏显示时为了方便大屏操作，很多交互中都把浮层交互置于底部更方便操作区，而当展开后，画面进行扩展屏幕加大尺寸，此时如果浮层自动缩放拉长，则画面显得不够友好和美观，比如一样就有2个标题字在左侧，数字在右侧，视觉的连贯性也不强，所以把浮层置于画面中间，很好的解决了这个问题，因为大屏需要两只手来共同操作：

画面调节

当你同时双屏显示时，画面中间会出现拖动屏幕的bar，你可以通过拖动来调节显示笔记，消除不需要的屏幕内容：

侧边栏快捷入口

在华为的屏幕右侧隐藏着一个快捷调用的Bar，能够在你沉浸式体验的时候，「从右侧边距向左滑动出现」快捷入口，它可以以浮窗的形式出现在屏幕最上方，也可以拖动快捷入口中的应用和现有屏幕形成双屏显示，比如你在看你喜爱的综艺节目时，你还想和你的朋友聊天不退出全屏，这个时候用起来是很爽的交互；场景二是当你在看视频时，还有逛逛天猫这个时候，折叠屏的优势就会显现出来，不会因为屏幕小而被打断