懶人目錄

1.前言

2.摺疊屏是什麼？

3.可摺疊設備的發展史

4.哪些品牌在設計生產摺疊屏手機

5.摺疊屏的優勢和特點

6.如何設計摺疊屏界面，摺疊屏交互細節分析

7.總結思考

1.前言

最近做了HUAWEI Mate Xs手機摺疊屏的相關設計，藉此機會“趁熱打鐵”分享一手界面操作體驗、適配技巧分享給大家，希望對各位設計師同學有所幫助和參考。在這裏我使用的是華爲摺疊屏（HUAWEI Mate Xs 上市時間2020年3月）

2.摺疊屏是什麼？

“摺疊屏”這個概念比較細，更加宏觀的概念應該叫“柔性屏”，摺疊屏可以實現360度的彎曲，甚至扭曲。摺疊屏的屏幕需要經過20萬次的摺疊保持不壞，是柔性要求較高的柔性屏，屏幕的結構也需要單獨設計。

3.可摺疊設備的發展史

說到摺疊屏，很多人都或多或少的會聯想到很多可以摺疊的設備，在摺疊設備發展進程中，不論是翻蓋手機、遊戲機還是最新的摺疊屏手機，都有着一些共同的特點，比如下面幾個可摺疊設備就是典型代表

1974 年施樂公司就提出了柔性屏的概念（打印機公司）

任天堂NDS

2004年發售的第三代便攜式 遊戲機 。主要的特徵包括了雙屏幕顯示，其中下方的屏幕爲 觸摸屏

Moto V3

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

三星W2014

2013年11月 主屏3.7寸 分辨率800*480 副屏3.7寸800*480

4.哪些品牌在設計生產摺疊屏手機

現在的摺疊屏，更趨向於一塊屏幕整體展示效果

三星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

5.摺疊屏的優勢和特點

5.1.滿足多場景化

摺疊屏特點是可以放大顯示的屏幕面積，滿足遊戲和高清視頻的需求；又能輕鬆的摺疊裝入口袋中更加便攜

5.2. 高效學習和辦公

技能高效單屏幕快速學習內容又能全屏幕沉浸式操作，不論是屏幕分屏還是靈活的文件拖拽都能輕鬆搞定

5.3. 視覺提升

當你使用大屏手機時，你會感覺到它的魅力，展現信息更多樣化、交互視覺的結構多樣性，以及大屏瀏覽視頻時的感受，單屏幕手機是無法比擬的

5.4. 多任務體驗和更豐富的人機交互體驗

可以在展開屏幕時實現多窗口的同時顯示和操作等

6.如何設計摺疊屏界面，摺疊屏交互細節分析

最近拿到了華爲摺疊屏，所以今天利用華爲摺疊屏作爲摺疊平臺分析“向後摺疊屏”的交互方式的設計和細節

6.1 摺疊屏對設計的影響-官方適配方案來啦（摘取了部分，更全面的可以去查看官方指導文件）

https://developer.huawei.com/consumer/cn/doc/90101#h1-2-ux-

• 屏幕展開與收起的相關尺寸

• 自適應動態佈局

• 響應式動態佈局

• 頁面層次

6.2 不同行業適配界面效果

購物類-淘寶

淘寶在進行適配的時候利用大屏的尺寸優勢，左右側進行了更多內容的顯示，而不是單純的把單屏模式下的界面進行了拉伸

比如你在點擊“天貓新品”的時候在屏幕的右側展現了下一頁，而在繼續點擊內容時，左側出現產品的瀑布流信息，右側出現選中產品的詳情

這樣做的好處是，你可以一屏瀏覽2中樣式，提高了瀏覽的效率

淘寶

視頻類-華爲視頻

華爲視頻利用自身的適配規則，在屏幕展開的時候讓內容隨佈局大小進行了擴展，我們可以看到包括banner位和推薦適配部分都展現了更多的信息，而在搜索條部分可以看到，沒有把搜索進行全屏拉伸，如果搜索的大灰條滿屏拉伸，效果不如一個icon入口更加的協調；底部Tabbar的入口部分進行了間距的平分

華爲視頻

音頻類/音樂播放類

在音頻播放入口部分，在單屏時，因爲空間有限，在一屏中不可能把所有信息都展現出來，而摺疊屏展開後的界面空間變大後可以把歌詞信息直接露出，滿足了用戶在聽音樂或者聽書時看文字的需求；相應位置的icon自動進行適應縮放間距

筆記類-印象筆記

印象筆記在適配摺疊屏時的方法與“相對大屏”手機的橫屏效果是一致的，屏幕的加大，文字單行加長會增加閱讀的難度和效率，所以在適配時運用左右分欄的方式，讓用戶快速搜索和掃視筆記的列表信息，而當點擊選中筆記後，右側屏幕則在本頁展現筆記詳情，大大提高了筆記的閱讀和書寫的效率

印象筆記

股票財經類-同花順

場景化適配時很重要的思考點，比如同花順首頁的單屏幕和展開屏幕的視覺空間的內容展現，當單屏顯示時紅色區域的5個重要模塊的入口是以icon的形式展現，而當畫面足夠大之後，很好的把icon轉換成了走勢圖，提高了用戶的識別效率；當摺疊屏顯示區域足夠大之後包括“股票開戶”等入口和Tab切換位置區域可以更多的在一屏展現出來，有效的利用了摺疊屏的大屏優勢。

同花順

而在“行情”Tab的內容呈現上，利用摺疊屏的大屏優勢可以看出在大屏的顯示上把單屏顯示內容部分的“股票排行”放在了屏幕的右側，可以實現一邊看大盤趨勢，一遍看股票詳情胖行榜，邊看邊分析同時進行，提高了瀏覽的效率。

同花順

旅遊類-攜程

攜程APP摺疊屏設計中，利用其大屏的優勢，把頁面中的瀑布流信息移至到了“第二屏幕”讓用戶在一屏中可以看到更多內容，提高了用戶的使用效率

攜程

6.3 摺疊屏交互細節分析

彈窗邏輯清晰

在單屏顯示時爲了方便大屏操作，很多交互中都把浮層交互置於底部更方便操作區，而當展開後，畫面進行擴展屏幕加大尺寸，此時如果浮層自動縮放拉長，則畫面顯得不夠友好和美觀，比如一樣就有2個標題字在左側，數字在右側，視覺的連貫性也不強，所以把浮層置於畫面中間，很好的解決了這個問題，因爲大屏需要兩隻手來共同操作的

畫面調節

當你同時雙屏顯示時，畫面中間會出現拖動屏幕的bar，你可以通過拖動來調節顯示筆記和消除不需要的屏幕內容

側邊欄快捷入口

在華爲的屏幕右側隱藏着一個快捷調用的Bar，能夠在你沉浸式體驗的時候，“從右側邊距向左滑動出現”快捷入口，它可以以浮窗的形式出現在屏幕最上方，也可以拖動快捷入口中的應用和現有屏幕形成雙屏顯示，場景之一比如你在看你喜愛的綜藝節目時，你還想和你的朋友聊天不退出全屏，這個時候用起來是很爽的交互；場景二是當你在看視頻時，還有逛逛天貓這個時候，摺疊屏的優勢就會顯現出來，不會因爲屏幕小而被打斷

摺疊屏-背面屏

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

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

高效辦公和學習

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

摺疊屏鍵盤

摺疊屏的屏幕因爲尺寸變大後，輸入文字就成了一個新的交互難點

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

拖拽內容

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

摺疊屏的適配問題

華爲摺疊屏是2020年3月剛剛上市，所以還有很多產品沒有適配的，我們也來看下沒有適配的產品，

比如有些產品的界面變形或者有效內容信息被裁切，或者沒有很好的利用大屏的優勢呈現內容、彈窗充滿屏幕等等

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

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

網易新聞的開屏在這種摺疊屏的適配上直接把一些內容進行了裁切，

比如左上角的“京東618週年慶”，底部的“京東搜索欄”信息

視頻聊天體驗

華爲摺疊屏使用不太流程的一點是在於攝像頭的位置問題，

舉個栗子，如果你想在手機展開時或者手機摺疊的“正面”視頻聊天是不可能的，你必須用手機的小屏幕的一面即“背面/反面”來進行視頻通話，因爲只有背面屏纔有攝像頭，如果你想邊操作其他應用，邊視頻聊天，實現不了的，必須把手機翻過來

7.總結思考

新的交互方式

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

對設計師的要求 

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

摺疊屏特點是可以放大顯示的屏幕面積，滿足遊戲和高清視頻的需求；又能輕鬆的摺疊裝入口袋中更加便攜，這將會是可期待的應用市場；摺疊屏未來可能成爲越來越複雜的遊戲很好的展現和呈現平臺。給設計師們的挑戰會越來越多，摺疊屏的交互還有很多可發掘和改善的地方，期待更加多樣的摺疊屏以及摺疊屏的交互方式的出現。