最近超火的折叠屏手机，应该如何做交互设计？

随着折叠屏手机的，我们看到未来手机的形态能朝着柔手机方向展，么，让我们来思考一件：何在折叠屏手机上做交互设计呢？

最近三星、华为和柔宇各一款折叠屏手机，它以把一台8英寸的平板电脑通折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属新的手机品种，也是我目前最看的手机形态之一（未来手机的形态应该是柔手机，现在已有柔电路板的存在）。通几天的观察和思考，我认为折叠屏手机有以下处：

• 好的阅读体验。目各手机厂商的折叠屏展态均于7英寸，我们看视频时拥好观看体验，同时我们再也不用担看漫画时字体太小看不清了。
• 提升效率。在「展开」模式下空间变大，窗口操成为能，我们以一边看世界杯一边用微信和朋一视频呐喊。
• 易用性。在这里我想到了 ipad 个不特性，打开多个应用后，并在多个应用进文件管理，例如将相册里图片拖到微信或者邮件里，避免了多个应用来回切换。

以上基「展开」态的想法，在折叠状态下还有一不错的想法供大家思考。

外折叠设计

华为在MWC2019上演示一个名叫「镜像智拍」的功能，它以让被拍摄的人时看到拍摄效果，并整面部表情与姿势。用自己最的角度及构图使得拍摄半功倍，妹子们也不用担心自己的男朋把自己拍得很丑。

在折叠状态时以把背面当做一个附加的互空间，现一简单的互操，例打鸡游戏时我们以考虑在背面屏幕增加一手势操进行8倍镜的缩放，种背部触控方式并不是什么新鲜，在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加电容式点触控面板。

除附加的互空间，我们的以把它当做二块屏幕进行使用。在平时我们以通两块屏幕同时运行两个不同的应用程序，例我们以用主屏幕玩游戏，在加载游戏时翻转屏幕刷个微博，操来分方便。

折叠屏然不有展开和折叠两个状态，有翻折状态，它区于传统手和平板独立状态。最接效是它可以不需要支架立在桌上，实现远距离自；时它可以进多度摄，成为制作 VR 内容利。在玩法上，翻折状态可以过两屏幕不内容引入多互动概念，这应用场景比较难想象。

内折叠设计

相比外折叠设计，内折叠设计玩法相对少，在里我只想到任天堂NDS 的概念：在翻折状态时它就是两块独立屏幕，它以独立显示不同的内容，例上屏显示内容，下屏显示操区域，打游戏时翻折状态明显要比其他状态舒服。

个人观点：从以上案例来看，外折叠设计在互和玩法上比内折叠设计，未来很有能以外折叠设计为主。

折叠屏手机交互设计的改变

  1. 响应式布局

当折叠屏从小屏模式转变屏模式时不应该只画面的比例变，考虑响应式布局设。

描述响应式设计最著名的一句就是「Content is like water。果将屏幕看容器，么内容就像水一样」。在以前响应式设计更用在PC Web设计上，但现在手机也应该考虑响应式设计，以下是设计时需要考虑的细节。

它不是简单响应设计。从上文知，「展开」态时要考虑是平板模是双屏幕模，如是平板模，那么内容应该在个体里；若是双屏幕模则可以考虑不屏幕展示不内容。设计时需要根据实需求和场景进模选择。

考虑通过 Fragment（片）来设计。Fragment 是 Android3.0的 API，现的初衷是为了 UI 更灵地适应大屏幕的平电脑。是 Android 对 Fragment 的官方介绍：「Fragment 表示 Activity 中的行为或户界面分。您可将多个 Fragment 组合在一个 Activity 中来构建多格 UI，及在多个 Activity 中重复使某个 Fragment。（ Activity 可解为一个页面，Android 开发中最重要的概念之一）」

参考软的 UWP 计概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用应用）。UWP 应用的理念并不是为某一个终端而计，而是同一套代码和计可以在所有 Windows 10备上运行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。

它的响应式设的设技巧包括以下6点：

调整置：你可改变 UI 元素在同屏幕上的位置。如面这个例子：为了确保同时展示两个元素，在手机上我们必须采纵向滚界面，而在平电脑上，我们可调整框架的位置，变为横屏滚界面。如果你格设计这些位置，你可改变容框架，但他 UI 元素可使响应式设计。

调尺寸：可以通过调整空白 UI 元素的尺寸优化框架，比如下面这例子，可以通过简单的增内框架尺寸提升屏幕的阅读体验。

调整顺序：过调 UI 元素序和，优化内容显示效。举个例子，在大屏上运时，可以再添加栏，并加入分类列表，这些都是合理。这个例子展示了在手上使用栏纵滚动，而在平板上使用两栏滚动优化。

展现：你可以基于屏幕的真实大，备支持的功能，定的情况或者屏幕方向展示界面。下图是媒体播放器的例，屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比机上的有更多的功能。

换位：项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更地选择。

改变结构：你可为特定的设备优特定的结构。面这个例子就是两种同的接合结构。

上6点引了Windows 开发人员中心 《Design Basics：Responsive design 101 for UWP apps》

  2. 场景化设计

考虑户翻转折叠屏幕时的场景和机是么，从而优现有界面及交互流程，举几个例子。

以 RPG 游戏为例。当玩家使用屏模式可以收起所有功能界面，使游戏的沉浸更；当玩家采用大屏模式，可以认为玩家需要获取更多息，这候把聊、装备等相关功能界面展示出来。

当用户微信里查看信息新消息提醒时，手机变屏模式时应该同时存图界面聊天界面。

相关注意事项

Google 201811月就宣布了对折叠屏的支持，包括多窗口支持、不重启配。如果折叠屏手机设良好的用户体验，必须考虑以下两方面：命周理以及转场动效。

命周理

目部分手机应用了流畅的体验会的命周理，例如退出页面时会释相关内存。因此设师设折叠屏交互时考虑哪些页面不能被毁，一让用户行展、折叠操作， 应用任务不中断重启，产品可以自动应各种屏幕下的静态布局规格。

转场动效

从目 Google 公布的新版 Android系统看，已可以到当折叠/展设备的时候，页面、内从一屏幕自然切换至另一屏幕。设师设时应该基于 Google 的技规范考虑内、组件模块的转场效果。

欢迎关注作者的微信公众：「薛志荣」