編輯導(dǎo)語：自折疊屏手機出現(xiàn)之后，各大應(yīng)用廠商為了給折疊屏手機用戶帶來更加完美的使用體驗，便針對這類用戶進行適配設(shè)計。本文結(jié)合折疊屏相關(guān)設(shè)計規(guī)范以及遵守用戶體驗設(shè)計原則的基礎(chǔ)上，總結(jié)了10條折疊屏適配建議，值得閱讀學(xué)習(xí)。

背景：

隨著折疊屏手機的普及，各大應(yīng)用廠商為了讓用戶能有更好的使用體驗，開始逐步適配折疊屏。同時華為谷歌等頭部企業(yè)相應(yīng)的推出了折疊屏設(shè)計規(guī)范，本文結(jié)合折疊屏的設(shè)計規(guī)范以及用戶體驗設(shè)計原則，總結(jié)了10條折疊屏適配建議。

折疊屏手機展開后的屏幕尺寸跟平板的尺寸類似，兩者之間的適配有一定的關(guān)聯(lián)性。不同點在于，折疊屏手機是一個硬件有兩種展現(xiàn)形態(tài)，大小屏之間可以來回切換，因此需要更多的考慮交互和使用體驗。

原則：

1. 連續(xù)性：從折疊狀態(tài)到展開狀態(tài)，體驗應(yīng)該是連續(xù)的，無縫的連接。
2. 可讀性：充分利用屏幕空間以保障可讀性，內(nèi)容展現(xiàn)合理、易讀。
3. 操作性：尊重用戶心智模型，在不同的場景下合理安排重要內(nèi)容和操作選項。

熱區(qū)：

當(dāng)屏幕展開之后，更適合雙手握持，因此按雙手可觸達屏幕的程度區(qū)分，可分為ABCD四個區(qū)域：

• 可以通過伸出手指來觸達該區(qū)域，對于大多數(shù)人來說并不方便。
• 手指自然狀態(tài)即可以很舒適的觸達到該區(qū)域。
• 觸達到該區(qū)域具有一定的挑戰(zhàn)性，需要手指盡可能的彎曲。
• 雙手握持設(shè)備時，這個區(qū)域難以觸達。

在屏幕展開的適配中，應(yīng)該盡量考慮雙手操作時的便捷性，避免把需要頻繁操作的功能放置在雙手難以觸達的區(qū)域，從而造成不好的用戶體驗。

形態(tài)：

折疊屏有三種形態(tài)，分別是Close、Unfolded和Tabletop，這三種形態(tài)分別對應(yīng)不同的使用場景。

1. Close：合起來的形態(tài)，正常手機的大小，以手機的交互和展示方式為主。
2. Unfolded：展開的形態(tài)，接近于平板電腦，但由于尺寸和比例的區(qū)別，需要進行適配。
3. Tabletop：筆記本形態(tài)，類似于筆記本電腦打開的形態(tài)，需要單獨適配。

適配建議：

一、充分利用屏幕

自適應(yīng)和響應(yīng)式都是多屏適配常用的方式，區(qū)別在于自適應(yīng)需要針對不同的屏幕大小進行單獨設(shè)計。優(yōu)勢在于可以更好地利用展開后的屏幕空間，根據(jù)屏幕分辨率展示不同的內(nèi)容和布局，充分利用屏幕。

二、考慮體驗連續(xù)性

相比自適應(yīng)布局，響應(yīng)式布局優(yōu)勢在于能夠很好地適配不同寬度分辨率，不會出現(xiàn)因屏幕太小而內(nèi)容過于擁擠，很好的解決了使用體驗連續(xù)性的問題。適用于重復(fù)布局、瀑布布局等應(yīng)用。

三、沉浸式體驗

當(dāng)用戶專注于一件事情時，不要因為屏幕的變化而過多地去打擾用戶。即便是用戶主動觸發(fā)的操作，也要保證體驗不受阻斷的前提下，給用戶提供最輕量的選擇。適用于音頻和視頻等應(yīng)用。

四、重新設(shè)計布局

詳情頁的排版由于物理空間的限制，屏幕不能像書本一樣左右延伸，而屏幕展開之后，可以打破原有的排版方式，讓用戶獲得更接近自然真實的閱讀體驗。適用于文章內(nèi)容、雜志、書籍等應(yīng)用。

五、避免視覺阻擋

折疊屏展開之后，不可忽視的一點是鉸鏈的區(qū)域，可能會因為折痕反光等問題導(dǎo)致顯示不清晰，因此彈窗盡量避免居中顯示，應(yīng)置于屏幕的左側(cè)或者右側(cè)。同理Toast的顯示位置也該如此。

六、減少阻斷

在手機上填寫表單時，通常會全屏顯示。而像這種臨時觸發(fā)的對話框，可以使用懸浮設(shè)計，填寫完自動關(guān)閉即可，因此并不會遮擋主要信息內(nèi)容，也并不需要占用過多的屏幕空間。適用于表單填寫、登錄注冊等場景。

七、減少頁面層級

折疊屏的優(yōu)勢在于屏幕較大，因此手機上需要跳轉(zhuǎn)的頁面在折疊屏上可以同時存在，例如新聞APP中，左邊是內(nèi)容列表，右邊是點擊該條內(nèi)容之后的正文詳情。不但減少了反復(fù)跳轉(zhuǎn)的層級問題，還可以讓內(nèi)容展現(xiàn)更加清晰直觀。適用于新聞類、聊天工具等應(yīng)用。

八、易操作性

手機屏幕為了握持感，在寬度上做了一些犧牲，只能在高度上做延展，因此導(dǎo)航欄通常置于屏幕底部，既好操作也不影響閱讀。當(dāng)屏幕展開之后，寬度變寬，導(dǎo)航欄可以置于屏幕的左側(cè)或者右側(cè)，同樣是為了雙手握持的時候更加方便地操作。

九、提升使用效率

為了提升使用效率，可以根據(jù)應(yīng)用的實際情況，選擇分屏滑動或者全屏滑動。

十、考慮更多模式

應(yīng)用的場景雖然不多，但也需要考慮到桌面模式下內(nèi)容的展現(xiàn)，如果圖片和標(biāo)題分布于上下兩個屏幕，閱讀起來會比較費勁，體驗也不友好，因此要避免圖片被折疊的問題。

十一、最后

不管是手機平板還是折疊屏，都有相同的適配原則和其獨特之處，在適配的過程中需要充分的考慮用戶地使用場景，盡可能地為用戶解決問題而不是制造麻煩。提前想到使用中的痛點，就能做出越來越多讓用戶喜愛的產(chǎn)品。

參考：

華為折疊屏設(shè)計規(guī)范：

https://developer.huawei.com/consumer/cn/doc/90101

谷歌折疊屏設(shè)計規(guī)范：

https://m3.material-io.cn/foundations/adaptive-design/foldables/overview

本文由 @撿蘑菇的人 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議