最近，不少手機品牌都發佈折疊屏手機，它可以把一台8英吋的平板電腦，通過折疊的方式變成方便攜帶的6英吋手機。而隨着折疊屏手機的發佈，未來手機形態可能會朝着柔性手機方向發展，那麼，如何在折疊屏手機上做交互設計呢?

◆ 折疊屏手機的好處：

1. 更好閱讀體驗，目前大多公佈的折疊屏手機展開的尺寸均大於7英吋，這給用戶在看視頻、瀏覽網站時將帶來更好的觀看體驗。

2. 提升使用效率，「展開」模式，使網站屏幕的空間變大，多窗口操作將成為可能，更方便用戶在同時間使用多個軟件。

3. 文件管理易用，參考「IPad」的特性，即打開多個應用後，能在不同應用之間進行文件管理，避免多個應用之間的來回切換。

基於以上「展開」態的好處，下面我們來看看折疊屏手機怎樣做交互設計?

◆ 折疊屏手機怎樣做交互設計?

1. 響應式佈局

折疊屏從小屏往大屏發展，設計師不應該單純考慮將畫面按等比例放大，而是考慮進行響應式佈局設計。以往，響應式設計多用戶在PC端網頁設計上，現在為了解決不同移動設備的尺寸問題，手機網頁設計更應該考慮響應式設計。

· 那麼，手機在進行響應式設計需要考慮什麼?

它不是簡單的響應式設計，從目前的各品牌推出的折疊屏手機樣板來看，其模式主要有兩種：平板模式和雙屏幕模式。若平板模式，網頁設計上所有內容應該在一個整體內;若是雙屏幕模式，則需要考慮不同屏幕展示不同內容問題。

· 折疊屏手機的響應式設計技巧包括什麼?

① 調整位置：改變UI元素在不同屏幕上的位置，比如下面的這個例子。為了確保同時展示兩個元素，設計師需要考慮，手機需採用縱向滾動界面方式;而平板電腦則需要調整框架位置，變為橫屏滾動界面。

② 調整尺寸：通過調整界面空白和UI元素的尺寸優化框架，比如下面的例子，就是通過簡單的增大內容框架尺寸，提升大屏幕的閱讀體驗。

③ 調整順序：通過調整UI元素的順序和方向，優化內容顯示效果。如在大屏上運行時，可再添加一欄，並加入分類列表。

④ 展現：基於屏幕的真實大小，設備支持的功能，特定的情況或屏幕方向展示界面。如下圖的例子，小屏幕上某些按鈕/功能一般會被刪除，而在大屏幕則將會保留。

⑤ 換位：這項技巧主要適合那些特定屏幕方向或屏幕方向切換特定的界面。下面的導航菜單，小屏幕採用隱藏式漢堡菜單縱向排列;而大屏幕則是採用更大的Tab更為適合。

⑥ 改變結構：這適合為特定的設備優化特定的結構，下面這個例子就是兩種不同的結合結構。

2. 場景化設計

在設計折疊屏的交互設計，首先要考慮用戶使用反轉折疊屏幕時的場景和動機，才能優化現有界面以及交互流程。

以RPG遊戲為例，玩家使用小屏幕時，可設計收起所有功能的界面，使遊戲的沉浸感更強;當玩家採用大屏幕時，可把聊天、裝備等相關功能界面展示出來，幫助玩家獲取更多信息。

此外，用戶使用社交軟件查看定位信息，且有新消息提醒時，手機變成大屏幕時，可同時展現地圖界面和聊天界面。

3. 應用生命週期管理

目前大部分手機應用為了給用戶帶來更流暢的體驗，設計師都會對應用做適量的生命週期管理，例如：IPhone的應用會定期釋放相關內存。因此設計師在設計折疊屏交互時，可考慮哪些頁面不能被銷毀;頁面一定要讓用戶可進行不同模式的操作;應用任務不中斷不重啟;產品可自動適應各種屏幕下的靜態佈局規格。

◆ Google宣佈對折疊屏的支持

2018年11月，Google支持對折疊屏的支持，包括多窗口支持、不重啟適配等。此外，從目前Google公佈的新版 Android系統來看，已經可做到當折疊/展開設備時，頁面和內容可從一個屏幕自然切換只另一個屏幕。設計師在設計界面，應基於Google的技術規範考慮內容、組件等模塊轉場效果。

未來，手機趨勢或將往柔性手機方向發展，設計師不妨多觀察和參考柔性手機的交互設計發展，以應對未來手機市場的變化需求。