最近做了HUAWEI Mate Xs手機(jī)折疊屏的相關(guān)設(shè)計，借此機(jī)會「趁熱打鐵」分享一手界面操作體驗(yàn)、適配技巧分享給大家，希望對各位設(shè)計師同學(xué)有所幫助和參考。在這里我使用的是華為折疊屏（HUAWEI Mate Xs 上市時間2020年3月）

折疊屏是什么？

「折疊屏」這個概念比較細(xì)，更加宏觀的概念應(yīng)該叫「柔性屏」，折疊屏可以實(shí)現(xiàn)360度的彎曲，甚至扭曲。折疊屏的屏幕需要經(jīng)過20萬次的折疊保持不壞，是柔性要求較高的柔性屏，屏幕的結(jié)構(gòu)也需要單獨(dú)設(shè)計。

可折疊設(shè)備的發(fā)展史

說到折疊屏，很多人都或多或少的會聯(lián)想到很多可以折疊的設(shè)備，在折疊設(shè)備發(fā)展進(jìn)程中，不論是翻蓋手機(jī)、游戲機(jī)還是最新的折疊屏手機(jī)，都有著一些共同的特點(diǎn)，比如下面幾個可折疊設(shè)備就是典型代表。

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

△ 任天堂NDS

2004年發(fā)售的第三代便攜式游戲機(jī)。主要的特征包括了雙屏幕顯示，其中下方的屏幕為觸摸屏。

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

△ 三星W2014      2013年11月發(fā)布，主屏3.7寸 分辨率800*480 ，副屏3.7寸800*480

哪些品牌在設(shè)計生產(chǎn)折疊屏手機(jī)

現(xiàn)在的折疊屏，更趨向于一塊屏幕整體展示效果，三星Galaxy Fold、華為Mate X、華為Mate XS、中興Axon M、小米和魅族也在布局折疊屏領(lǐng)域，爆料蘋果也在加緊布局中、 W20 5G、摩托羅拉 Razr ，以及聯(lián)想的PC原型機(jī)、柔宇折疊屏手機(jī)等。

△ 中興Axon M

2018年1月20日，主屏幕5.2英寸，1920*1080像素；副屏5.2英寸，1920*1080像素。

△ Moto Razr，打開后形成一塊6.2英寸21:9比例的OLED屏幕

摩托羅拉或于 9 月份推出第二代Moto Razr 。然而最新爆料稱，該機(jī)或至少要等到 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

△ 據(jù)外媒爆料蘋果也在研發(fā)折疊屏的手機(jī)/iPad

業(yè)界傳出，蘋果最快將于2021年推出折疊iPhone。據(jù)相關(guān)供應(yīng)商透露，折疊iPhone不再有劉海設(shè)計及人臉識別，將搭載雙屏幕、側(cè)面指紋解鎖等過往iPhone不曾有過的特色與功能，采用上下折疊設(shè)計。

△ 小米折疊屏手機(jī)

△ 柔宇折疊屏手機(jī)

屏幕尺寸達(dá)7.8英寸，同時采用柔性的AMOLED屏幕，分辨率達(dá)1920*1440（展開狀態(tài)）

△ 聯(lián)想折疊屏電腦

ThinkPad X1 Fold（售價1.7萬元)，合起來就像一本書一樣，其顯示屏是一塊13.3英寸的4:3比例OLED屏幕，分辨率為2048×1536

△ HUAWEI華為Mate Xs

展開態(tài)8英寸 2480*2200，約8：7.1
折疊態(tài)正面屏6.6英寸 2480*1148，約19.5：9
折疊屏背面屏 6.38英寸 2048*892約25：9

折疊屏的優(yōu)勢和特點(diǎn)

1. 滿足多場景化

折疊屏特點(diǎn)是可以放大顯示的屏幕面積，滿足游戲和高清視頻的需求；又能輕松的折疊裝入口袋中更加便攜

2. 高效學(xué)習(xí)和辦公

技能高效，單屏幕快速學(xué)習(xí)內(nèi)容，又能全屏幕沉浸式操作，不論是屏幕分屏還是靈活的文件拖拽都能輕松搞定

3. 視覺提升

當(dāng)你使用大屏手機(jī)時，你會感覺到它的魅力，展現(xiàn)信息更多樣化、交互視覺的結(jié)構(gòu)多樣性，以及大屏瀏覽視頻時的感受，單屏幕手機(jī)是無法比擬的

4.多任務(wù)體驗(yàn)和更豐富的人機(jī)交互體驗(yàn)

可以在展開屏幕時實(shí)現(xiàn)多窗口的同時顯示和操作等

如何設(shè)計折疊屏界面以及折疊屏交互細(xì)節(jié)分析

最近拿到了華為折疊屏，所以今天利用華為折疊屏作為折疊平臺分析「前后折疊屏」的交互設(shè)計和細(xì)節(jié)。

1. 折疊屏對設(shè)計的影響

官方適配方案來啦（摘取了部分，更全面的可以去查看官方指導(dǎo)文件）：https://developer.huawei.com/consumer/cn/doc/90101#h1-2-ux-

屏幕展開與收起的相關(guān)尺寸：

自適應(yīng)動態(tài)布局：

響應(yīng)式動態(tài)布局：

頁面層次：

2. 不同行業(yè)適配界面效果

購物類-淘寶

淘寶在進(jìn)行適配的時候利用大屏的尺寸優(yōu)勢，左右側(cè)進(jìn)行了更多內(nèi)容的顯示，而不是單純的把單屏模式下的界面進(jìn)行了拉伸。

比如你在點(diǎn)擊「天貓新品」的時候在屏幕的右側(cè)展現(xiàn)了下一頁，而在繼續(xù)點(diǎn)擊內(nèi)容時，左側(cè)出現(xiàn)產(chǎn)品的瀑布流信息，右側(cè)出現(xiàn)選中產(chǎn)品的詳情。

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

視頻類-華為視頻

華為視頻利用自身的適配規(guī)則，在屏幕展開的時候讓內(nèi)容隨布局大小進(jìn)行了擴(kuò)展，我們可以看到包括banner位和推薦適配部分都展現(xiàn)了更多的信息，而在搜索條部分可以看到，沒有把搜索進(jìn)行全屏拉伸，如果搜索的大灰條滿屏拉伸，效果不如一個icon入口更加的協(xié)調(diào)；底部Tab bar的入口部分進(jìn)行了間距的平分。

音頻類/音樂播放類

在音頻播放入口部分，在單屏?xí)r，因?yàn)榭臻g有限，在一屏中不可能把所有信息都展現(xiàn)出來，而折疊屏展開后的界面空間變大后可以把歌詞信息直接露出，滿足了用戶在聽音樂或者聽書時看文字的需求；相應(yīng)位置的icon自動進(jìn)行適應(yīng)縮放間距。

筆記類-印象筆記

印象筆記在適配折疊屏?xí)r的方法與「相對大屏」手機(jī)的橫屏效果是一致的，屏幕的加大，文字單行加長會增加閱讀的難度和效率，所以在適配時運(yùn)用左右分欄的方式，讓用戶快速搜索和掃視筆記的列表信息，而當(dāng)點(diǎn)擊選中筆記后，右側(cè)屏幕則在本頁展現(xiàn)筆記詳情，大大提高了筆記的閱讀和書寫的效率：

股票財經(jīng)類-同花順

場景化適配時很重要的思考點(diǎn)，比如同花順首頁的單屏幕和展開屏幕的視覺空間的內(nèi)容展現(xiàn)，當(dāng)單屏顯示時紅色區(qū)域的5個重要模塊的入口是以icon的形式展現(xiàn)，而當(dāng)畫面足夠大之后，很好的把icon轉(zhuǎn)換成了走勢圖，提高了用戶的識別效率；當(dāng)折疊屏顯示區(qū)域足夠大之后包括「股票開戶」等入口和Tab切換位置區(qū)域可以更多的在一屏展現(xiàn)出來，有效的利用了折疊屏的大屏優(yōu)勢。

而在「行情」Tab的內(nèi)容呈現(xiàn)上，利用折疊屏的大屏優(yōu)勢可以看出在大屏的顯示上把單屏顯示內(nèi)容部分的「股票排行」放在了屏幕的右側(cè)，可以實(shí)現(xiàn)一邊看大盤趨勢，一遍看股票詳情排行榜，邊看邊分析同時進(jìn)行，提高了瀏覽的效率。

旅游類-攜程

3. 折疊屏交互細(xì)節(jié)分析

彈窗邏輯清晰

在單屏顯示時為了方便大屏操作，很多交互中都把浮層交互置于底部更方便操作區(qū)，而當(dāng)展開后，畫面進(jìn)行擴(kuò)展屏幕加大尺寸，此時如果浮層自動縮放拉長，則畫面顯得不夠友好和美觀，比如一樣就有2個標(biāo)題字在左側(cè)，數(shù)字在右側(cè)，視覺的連貫性也不強(qiáng)，所以把浮層置于畫面中間，很好的解決了這個問題，因?yàn)榇笃列枰獌芍皇謥砉餐僮鳎?/p>

畫面調(diào)節(jié)

當(dāng)你同時雙屏顯示時，畫面中間會出現(xiàn)拖動屏幕的bar，你可以通過拖動來調(diào)節(jié)顯示筆記，消除不需要的屏幕內(nèi)容：

側(cè)邊欄快捷入口

在華為的屏幕右側(cè)隱藏著一個快捷調(diào)用的Bar，能夠在你沉浸式體驗(yàn)的時候，「從右側(cè)邊距向左滑動出現(xiàn)」快捷入口，它可以以浮窗的形式出現(xiàn)在屏幕最上方，也可以拖動快捷入口中的應(yīng)用和現(xiàn)有屏幕形成雙屏顯示，比如你在看你喜愛的綜藝節(jié)目時，你還想和你的朋友聊天不退出全屏，這個時候用起來是很爽的交互；場景二是當(dāng)你在看視頻時，還有逛逛天貓這個時候，折疊屏的優(yōu)勢就會顯現(xiàn)出來，不會因?yàn)槠聊恍《淮驍?/p>

折疊屏-背面屏

當(dāng)你需要使用折疊屏的背面屏?xí)r，需要點(diǎn)擊工具「鏡子」畫面就會反轉(zhuǎn)到手機(jī)的背面，此時可以利用小屏幕進(jìn)行操作。

因?yàn)槿A為折疊屏的攝像頭在手機(jī)的背面，所以如果需要和你的朋友視頻聊天時，背面屏的使用還是很高頻的。

高效辦公和學(xué)習(xí)

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

折疊屏鍵盤

折疊屏的屏幕因?yàn)槌叽缱兇蠛?，輸入文字就成了一個新的交互難點(diǎn)。

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

拖拽內(nèi)容

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

折疊屏的適配問題

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

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

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

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

視頻聊天體驗(yàn)

華為折疊屏使用不太流暢的一點(diǎn)在于攝像頭的位置問題，舉個栗子，如果你想在手機(jī)展開時或者手機(jī)折疊的「正面」視頻聊天是不可能的，你必須用手機(jī)的小屏幕的一面即「背面/反面」來進(jìn)行視頻通話，因?yàn)橹挥斜趁嫫敛庞袛z像頭，如果你想邊操作其他應(yīng)用，邊視頻聊天，實(shí)現(xiàn)不了的，必須把手機(jī)翻過來：

總結(jié)思考

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

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

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

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

聲明：文章中配圖僅供設(shè)計師學(xué)習(xí)之用，如有圖片侵權(quán)或者其他問題，請聯(lián)系刪除，謝謝。

作者：Zeal-莊治柱