距離折疊屏手機(jī)正式發(fā)售的日子越來越近，三星Galaxy Fold將于9月在韓國開賣，華為Mate X折疊手機(jī)也將在近期國內(nèi)銷售。面對折疊屏，大眾充滿好奇、新鮮感，現(xiàn)在看來硬件已完備，只欠東風(fēng)，這股東風(fēng)就是“對于折疊屏上的移動應(yīng)用使用場景，設(shè)計(jì)師可以探索怎樣的設(shè)計(jì)模式”。本篇文章依據(jù)折疊屏的使用場景，簡要分析可能會出現(xiàn)的界面設(shè)計(jì)方法。

一、新增第二屏，展示更多內(nèi)容

折疊屏既具備手機(jī)的靈活性、也具備平板的擴(kuò)展性，折疊后易于攜帶，展開后就是小平板，展開后的大屏可以顯示更多內(nèi)容，同時也有利于增加更豐富的交互形式。具體到頁面，按照場景列舉幾個利用第二屏的案例。

場景1.1：分屏顯示單個應(yīng)用中同一頁面的內(nèi)容

目前手機(jī)瀏覽頁面是縱向的上下滑動，這意味著首屏和靠前位置的信息將得到最高曝光率，但是對于頁面中部及尾部的內(nèi)容，曝光率是遞減的。因?yàn)楹芏嘤脩艨赡軐κ灼潦ヅd趣之后，即便尾部可能有用戶感興趣的內(nèi)容，也不再繼續(xù)瀏覽了，所以此時可以將尾部的次級內(nèi)容展現(xiàn)在第二屏，使“首屏”曝光呈現(xiàn)更多內(nèi)容。

案例1：在手機(jī)淘寶的設(shè)計(jì)場景中，首頁第二屏內(nèi)容是猜你喜歡模塊，采用分屏顯示之后，用戶可以直接瀏覽原本在首頁最底部的猜你喜歡商品。

案例2：在云集APP中，首頁第二屏內(nèi)容模塊“限時特賣、一件批發(fā)價(jià)”，采用分屏呈現(xiàn)之后，用戶可以直接查看限時特賣優(yōu)惠商品。

場景1.2：分屏顯示單個應(yīng)用中同一頁面，不同導(dǎo)航或者不同篩選項(xiàng)的內(nèi)容

對于含有多個導(dǎo)航標(biāo)簽、或者多個篩選項(xiàng)的單張頁面，單屏瀏覽時需要點(diǎn)擊切換導(dǎo)航進(jìn)入相應(yīng)的頁面、或者多次重置篩選項(xiàng)查看不同篩選條件的頁面內(nèi)容。

但是有時候用戶需要將不同導(dǎo)航下的內(nèi)容進(jìn)行對比瀏覽。另外對于篩選項(xiàng)較多的頁面，目前需要重置條件后再重新篩選查看，不能同時對比同一頁面的不同篩選結(jié)果。

我們可以依據(jù)這個場景，進(jìn)行這樣的設(shè)置：若在此單屏使用場景下，用戶選擇將折疊屏展開成為雙屏模式，此時在單屏頁面的右側(cè)出現(xiàn)懸浮的功能按鈕“對比查看”，點(diǎn)擊該按鈕，將該頁面分別在左右屏幕中顯示，此時用戶可對左右屏幕的頁面獨(dú)立操作（當(dāng)然實(shí)現(xiàn)這個功能需要考慮對應(yīng)的開發(fā)方案，在此不做單獨(dú)的討論）。

案例：購房或租房的用戶使用貝殼找房App，經(jīng)常碰到的一個場景是：對不同區(qū)域、不同房型、不同價(jià)格的房屋進(jìn)行對比查看。有了折疊屏可以分屏對比查看不同篩選維度的房屋。

場景1.3：單屏變雙屏，頁面內(nèi)容橫向拉升、或等比放大

折疊屏展開后也相當(dāng)于使用平板的效果，所以針對一些頁面元素的列表式布局，雙屏下的自適應(yīng)采用“內(nèi)容橫向拉伸延展、以及等比放大的方式”。這樣做的目的是充分利用大屏空間，更詳細(xì)的呈現(xiàn)頁面單個元素的內(nèi)容，這種自適應(yīng)方式可能更適用于雜志文章閱讀類應(yīng)用。

二、多任務(wù)同步進(jìn)行，提升效率

多任務(wù)我總結(jié)了兩種使用場景：第一種是“主任務(wù)與子任務(wù)之間頻繁切換”，會給用戶帶來很高的操作成本。第二種是“兩個主任務(wù)之間切換使用”，用戶也需要頻繁的來回切換，有時候切換還可能造成應(yīng)用重啟。采用分屏可以解決以上問題。

場景2.1：分屏顯示主任務(wù)與子任務(wù)

用戶當(dāng)前正在瀏覽一個頁面（稱為主任務(wù)），經(jīng)常會碰到應(yīng)用內(nèi)的消息彈窗等分支的子任務(wù)，查看子任務(wù)目的是輔助主任務(wù)的達(dá)成。當(dāng)用戶在處理主任務(wù)時，需要與子任務(wù)進(jìn)行交互操作，此時可以讓子任務(wù)在第二屏顯示，從而避免頁面之間來回切換跳轉(zhuǎn)（有些使用場景下可能是當(dāng)前頁面出現(xiàn)彈層）。

案例：使用手機(jī)淘寶查看商品詳情頁時，同時與客服聊天，“聊天頁面”是從屬于“查看詳情”這個主任務(wù)的子任務(wù)，分屏后用戶可以一邊查看詳情，一邊咨詢客服。

場景2.2：分屏顯示父級與子級頁面

這種呈現(xiàn)方式就好像PC端的桌面應(yīng)用、或者平板上查看郵件的界面布局。在單屏上只能通過前進(jìn)或者后退操作查看父子頁面，而折疊屏展開后的雙屏可以充分利用，一個屏展示列表頁，另一個屏展示列表頁具體某個內(nèi)容元素的詳情頁。

案例：有道云筆記的主要頁面是筆記的列表頁和詳情頁，在折疊屏上的界面布局和交互操作可以如下圖示意。

場景2.3：分屏顯示兩個主任務(wù)（簡單的理解為兩個不同應(yīng)用）

手機(jī)端經(jīng)常會出現(xiàn)同時使用兩個應(yīng)用協(xié)作配合的場景，目前只能在兩個應(yīng)用之間來回切換，操作成本相對比較高。如果分屏之后，可以在一個單屏下顯示一個應(yīng)用的頁面，這樣就可以左右屏對比更高效的操作使用。

案例：比如在某個應(yīng)用瀏覽文章時，需要把文字記錄到另一個筆記應(yīng)用中，不需要再來回切換，只需要分屏顯示兩個應(yīng)用，邊看文章邊記錄。

三、提升數(shù)據(jù)可視化的展示效率

移動端的主要優(yōu)勢之一是“隨時隨地瀏覽數(shù)據(jù)或報(bào)表”，很多業(yè)務(wù)場景（尤其是B端產(chǎn)品）會涉及到數(shù)據(jù)的展示。雙屏可以提升展示效率，這種情況下需要針對折疊屏展開后的雙屏，進(jìn)行頁面元素布局的自適應(yīng)。

場景3.1：數(shù)據(jù)瀏覽

對于在頁面中展示各種數(shù)據(jù)元素，目前只能是單張頁面縱向?yàn)g覽。如果在折疊屏查看各項(xiàng)數(shù)據(jù)，則類似于PC端的桌面應(yīng)用，單屏能夠查看到更多維度的數(shù)據(jù)模塊。

場景3.2：數(shù)據(jù)圖表的沉浸式瀏覽與對比，以及表格的全屏展開

折疊屏展開非常有利于豐富交互形式，目前由于屏幕尺寸限制，在移動端查看數(shù)據(jù)走勢圖還是不夠方便，即使趨勢圖可以采用放大到全屏模式查看，對于細(xì)節(jié)仍然需要進(jìn)一步放大查看。有了大屏之后，單個圖表就可以直接展開，有利于圖表的細(xì)節(jié)展示。

總結(jié)

本文依據(jù)用戶的使用場景，簡要分析幾個未來針對折疊屏設(shè)計(jì)，可能會出現(xiàn)的界面設(shè)計(jì)模式。折疊屏不是簡單的增加了一種手機(jī)端的自適應(yīng)模式，如果針對單個移動應(yīng)用，則需要結(jié)合產(chǎn)品自身業(yè)務(wù)屬性、產(chǎn)品主要用戶群體的使用場景、以及現(xiàn)有界面組織方式，進(jìn)行折疊屏的適配，充分利用好第二屏的展示空間。

參考文章：不要驚訝，折疊屏就應(yīng)該這樣設(shè)計(jì)！

作者：Viksea，微信公眾號：Viksea（ID：viksea-ux）

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

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