摺疊屏手機上的互動設計

隨著摺疊屏手機的釋出，我們看到未來手機的形態可能會朝著柔性手機方向發展，那麼，讓我們來思考一件事：如何在摺疊屏手機上做互動設計呢？

最近三星、華為和柔宇各發布了一款摺疊屏手機，它可以把一臺8英寸的平板電腦通過摺疊的方式變成一臺方便攜帶的6英寸手機。摺疊屏手機屬於新的手機品種，也是我目前最看好的手機形態之一（未來手機的形態應該是柔性手機，現在已知有柔性電路板的存在了）。通過幾天的觀察和思考，我認為摺疊屏手機有以下好處：

1.更好的閱讀體驗。目前各手機廠商的摺疊屏展開態均大於7英寸，我們看視訊時擁有更好地觀看體驗，同時我們再也不用擔心看漫畫時字型太小看不清了。

2.提升效率。在“展開”模式下空間變大了，多視窗操作成為可能，我們可以一邊看世界盃一邊用微信和朋友一起視訊吶喊。

3.易用性。在這裡我想到了ipad一個不錯的特性：開啟多個應用後，並在多個應用之間進行檔案管理，例如將相簿裡的圖片拖到微信或者郵件裡，避免了多個應用之間的來回切換。

以上基於“展開”態的想法，在摺疊狀態下還有一些不錯的想法供大家思考：

外摺疊設計

華為在MWC2019上演示了一個名叫“映象智拍”的功能，它可以讓被拍攝的人可以實時看到拍攝效果，並調整面部表情與姿勢。用自己最瞭解的角度及構圖使得拍攝事半功倍，妹子們再也不用擔心自己的男朋友把自己拍得很醜了。


在摺疊狀態時可以把背面當做一個附加的互動空間，實現一些簡單的互動操作，例如打吃雞遊戲時我們可以考慮在背面螢幕增加一些手勢操作進行8倍鏡的縮放（這種背部觸控方式並不是什麼新鮮事，在2011年索尼旗下的掌上型遊戲機PSV已經在背部增加了電容式多點觸控皮膚）。


除了附加的互動空間，我們真的可以把它當做第二塊螢幕進行使用。在平時我們可以通過兩塊螢幕同時執行兩個不同的應用程式，例如我們可以用主螢幕玩遊戲，在載入遊戲時翻轉螢幕刷個微博，操作起來十分方便。

摺疊屏當然不只有展開和摺疊兩個狀態，還有翻折狀態，它區別於傳統手機和平板的獨立狀態。最直接的效果就是它可以不需要支架就立在桌面上，實現中遠距離的自拍；同時它可以進行多角度拍攝，成為製作VR內容的利器。在玩法上，翻折狀態可以通過兩面螢幕的不同內容引入多人互動的概念，但這種應用場景比較難想象。


內摺疊設計

相比外摺疊設計，內摺疊設計玩法相對較少，在這裡我只想到了任天堂NDS的概念：在翻折狀態時它就是兩塊獨立螢幕，它可以獨立顯示不同的內容，例如上屏顯示內容，下屏顯示操作區域，打遊戲時翻折狀態明顯要其他狀態舒服。


個人觀點：從以上案例來看，外摺疊設計在互動和玩法上都比內摺疊設計好，未來很有可能以外摺疊設計為主。

摺疊屏手機互動設計的改變

響應式佈局

當摺疊屏從小屏模式轉變成大屏模式時不應該只是畫面的等比例變大，而是要考慮響應式佈局設計。

描述響應式設計最著名的一句話就是“Content is like water—如果將螢幕看作容器，那麼內容就像水一樣”。在以前響應式設計更多用在PC Web設計上，但現在手機也應該考慮響應式設計，以下是設計時需要考慮的細節：

1.它不是簡單的響應式設計。從上文得知，“展開”態時要考慮是平板模式還是雙螢幕模式，如果是平板模式，那麼內容應該在一個整體裡；若是雙螢幕模式則可以考慮不同螢幕展示不同內容。設計時需要根據實際需求和場景進行模式選擇。

2.考慮通過Fragment（片段）來設計。Fragment是Android3.0提出的API，出現的初衷是為了UI更靈活地適應大螢幕的平板電腦。以下是Android對Fragment的官方介紹：“Fragment表示Activity中的行為或使用者介面部分。您可以將多個Fragment組合在一個Activity中來構建多窗格UI，以及在多個Activity中重複使用某個Fragment。（Activity可以理解為一個頁面，Android開發中最重要的概念之一）”

3.參考微軟的UWP設計概念。UWP即Windows 10中的Universal Windows Platform（Windows通用應用平臺）。UWP應用的理念並不是為某一個終端而設計，而是同一套程式碼和設計可以在所有Windows10裝置上執行，包括Windows 10 Mobile/Surface/PC/Xbox/HoloLens等等。

它的響應式設計設計技巧包括以下6點：

A.調整位置：你可以改變UI元素在不同螢幕上的位置。比如下面這個例子：為了確保同時展示兩個元素，在手機上我們必須採用縱向滾動介面，而在平板電腦上，我們可以調整框架的位置，變為橫屏滾動介面。如果你用網格設計這些位置，你也可以不改變內容框架，但其他UI元素可以使用響應式設計。


B.調整尺寸：你可以通過調整空白和UI元素的尺寸來優化框架，比如下面這個例子，可以通過簡單的增大內容框架尺寸來提升大螢幕的閱讀體驗。


C.調整順序：通過調整UI元素的順序和方向，優化內容顯示效果。舉個例子，在大屏上執行時，可以再新增一欄，並且加入分類列表，這些都是合理的。這個例子展示了在手機上使用一欄縱向滾動，而在平板上使用兩欄橫向滾動的優化。


D.展現：你可以基於螢幕的真實大小，裝置支援的功能，特定的情況或者螢幕方向展示介面。下圖是媒體播放器的例子，小螢幕上這些按鈕通常是被刪減的，但在大螢幕上這些按鈕是被完全保留的。PC上的媒體播放器比手機上的有更多的功能。


E.換位：這項技巧是為特定螢幕尺寸或螢幕方向切換特定的介面。下面這個例子是導航選單：小螢幕上他是隱藏在漢堡選單中縱向排列的，但是在大螢幕上，更大的Tab是更好地選擇。


F.改變結構：你可以為特定的裝置優化特定的結構。下面這個例子就是兩種不同的接合結構。


以上6點引用了Windows開發人員中心Design Basics:Responsive design 101 for UWP apps，連結：https://www.ui.cn/detail/49641.html

場景化設計

考慮使用者翻轉折疊螢幕時的場景和動機是什麼，從而優化現有介面及互動流程，舉幾個例子：

A.以RPG遊戲為例。當玩家使用小屏模式時我們可以收起所有功能介面，使遊戲的沉浸感更強；當玩家採用大屏模式時，我們可以認為玩家需要獲取更多資訊，這時候把聊天、裝備等相關功能介面展示出來。

B.當使用者在微信裡檢視定位資訊有新訊息提醒時，手機變成大屏模式時應該同時存在地圖介面和聊天介面。

相關注意事項

Google在2018年11月就宣佈了對摺疊屏的支援，包括多視窗支援、不重啟適配等等。如果想要在摺疊屏手機上設計良好的使用者體驗，必須考慮以下兩個方面：生命週期管理以及轉場動效。

1.生命週期管理

目前大部分手機應用為了有更流暢的體驗會做適量的生命週期管理，例如退出頁面時會釋放相關記憶體。因此設計師在設計摺疊屏互動時要考慮哪些頁面不能被銷燬，一定要讓使用者進行展開、摺疊等操作，應用任務不中斷重啟，產品可以自動適應各種螢幕下的靜態佈局規格。

2.轉場動效

從目前Google公佈的新版Android系統來看，已經可以做到當摺疊/展開裝置的時候，頁面、內容從一個螢幕自然地切換至另一個螢幕。設計師在設計時應該基於Google的技術規範考慮內容、元件等模組的轉場效果。


參考案例：

華為基於HUAWEI Mate X釋出的摺疊屏官方適配方案，相關連結https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i

#專欄作家#

薛志榮，微信公眾號：薛志榮，人人都是產品經理專欄作家。暢銷書《AI改變設計-人工智慧時代的設計師生存手冊》作者，全棧開發者，專注於互動設計和人工智慧設計。

題圖來自Unsplash，基於CC0協議。

作者：薛志榮
來源：人人都是產品經理
原地址：http://www.woshipm.com/ucd/2096310.html