如何設計折疊屏？來看這份設計指南！

最近做了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屏幕，分辨率為2048x1536

△?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，能夠在你沉浸式體驗的時候，「從右側邊距向左滑動出現」快捷入口，它可以以浮窗的形式出現在屏幕最上方，也可以拖動快捷入口中的應用和現有屏幕形成雙屏顯示，比如你在看你喜愛的綜藝節目時，你還想和你的朋友聊天不退出全屏，這個時候用起來是很爽的交互；場景二是當你在看視頻時，還有逛逛天貓這個時候，折疊屏的優勢就會顯現出來，不會因為屏幕小而被打斷

折疊屏-背面屏

當你需要使用折疊屏的背面屏時，需要點擊工具「鏡子」畫面就會反轉到手機的背面，此時可以利用小屏幕進行操作。

因為華為折疊屏的攝像頭在手機的背面，所以如果需要和你的朋友視頻聊天時，背面屏的使用還是很高頻的。

高效辦公和學習

折疊屏能夠使得畫面分配，這個場景當你在工作和學習的時候，存儲和記錄變成了一件很高效的事情，你可以一邊讀文章，一邊在你的印象筆記里記錄你的知識點：

折疊屏鍵盤

折疊屏的屏幕因為尺寸變大后，輸入文字就成了一個新的交互難點。

華為折疊屏鍵盤有一個特別好的交互點，就是可以切換鍵盤的左右，方便左右手不同習慣手勢的用戶書寫。

拖拽內容

當你在編輯文章的場景中的時候，希望調用本地相冊中的圖片，除了選擇原有的添加圖片的入口功能之外，在折疊屏中，你還可以選擇拖拽，沒錯，就是你能夠把你希望的圖片直接拖拽過來，是不是很神奇：

折疊屏的適配問題

華為折疊屏是2020年3月剛剛上市，所以還有很多產品沒有適配的，我們也來看下沒有適配的產品，比如有些產品的界面變形或者有效內容信息被裁切，或者沒有很好利用大屏的優勢呈現內容、彈窗充滿屏幕等等

飛豬APP的開屏被拉伸變形嚴重、貝殼APP的彈窗在屏幕中的比例問題：

餓了么APP圖標過大，一屏中承載的有效信息較少，圖片被拉伸等問題：

網易新聞的開屏在這種折疊屏的適配上直接把一些內容進行了裁切，比如左上角的「京東618周年慶」，底部的「京東搜索欄」信息：

視頻聊天體驗

華為折疊屏使用不太流暢的一點在于攝像頭的位置問題，舉個栗子，如果你想在手機展開時或者手機折疊的「正面」視頻聊天是不可能的，你必須用手機的小屏幕的一面即「背面/反面」來進行視頻通話，因為只有背面屏才有攝像頭，如果你想邊操作其他應用，邊視頻聊天，實現不了的，必須把手機翻過來：

總結思考

折疊屏的出現，帶給設計師們更多的設計要求和新的交互邏輯的思考，不論像市場中推斷的那樣，折疊屏是不是手機未來的趨勢，但多多少少的影響著我們的界面設計。

不論是哪種折疊屏，對用戶來說新增了一塊可折疊的屏幕，使得1+1大于2，手機變平板。UI和UX設計師們需要考慮折疊屏在展開態不僅僅在單屏頁面中呈現內容，而是也可以同時呈現不同頁面的內容，帶來一種新的操作體驗。

折疊屏特點是可以放大顯示的屏幕面積，滿足游戲和高清視頻的需求；又能輕松的折疊裝入口袋中更加便攜，這將會是可期待的應用市場。

折疊屏未來可能成為越來越復雜的展現平臺，給設計師們的挑戰會越來越多，折疊屏的交互還有很多可發掘和改善的地方，期待更加多樣的折疊屏以及折疊屏交互方式的出現。

聲明：文章中配圖僅供設計師學習之用，如有圖片侵權或者其他問題，請聯系刪除，謝謝。