智能手機發(fā)展的十年，是屏幕尺寸不斷變大的十年，Steve Jobs 在發(fā)布初代 iPhone 時，或許不會想到不久將來的手機會大到塞不進牛仔褲口袋。

從曲面屏再到全面屏，技術(shù)不斷挑戰(zhàn)屏幕尺寸邊界，最終折疊屏巧妙地解決收納和尺寸的博弈來到消費者眼前。2019年伊始，多個品牌先后發(fā)布折疊屏手機，其中三星和華為已明確上市計劃，蘋果也按捺不住申請了專利。

▲ 折疊屏的時代來臨

折疊屏已從概念來到現(xiàn)實，那么折疊屏上的APP應(yīng)用應(yīng)該如何來設(shè)計呢？

設(shè)計變化：新增第二屏

─

折疊屏不管是「外翻」還是「內(nèi)折」的折疊方式，對用戶來說是新增了一塊屏幕，而這新增的屏幕使得1+1大于2，手機能變換為平板。設(shè)計師首當(dāng)其沖需要思考如何更好地設(shè)計這塊屏幕（以下我們稱之為折疊屏“第二屏”）的內(nèi)容。下面我們針對折疊屏的兩大特性具體展開設(shè)計：

特性一：大屏內(nèi)容更豐富

─

手機的滑屏瀏覽方式使得頁面不斷往縱向設(shè)計加高，同時客觀造成頁面模塊點擊量是縱向衰減的。當(dāng)用戶想滑到感興趣的模塊時（比如淘寶首頁的猜你喜歡模塊）每次刷新頁面后都需要重新滑屏。這類低曝光但又是用戶想瀏覽的內(nèi)容便很適合放在折疊屏的“第二屏”。

在折疊屏中，頂部和底部導(dǎo)航性質(zhì)的組件屬于頁面的公用功能，采取直觀的橫向拉伸適配方式；而當(dāng)中頁面可以采用內(nèi)容填充適配方式，將次級重要內(nèi)容展示在第二屏。

▲ 長頁面的折疊屏適配方式：內(nèi)容適配

例如在淘寶的設(shè)計場景中，首頁的第二屏內(nèi)容是猜你喜歡內(nèi)容模塊，以后進入淘寶便能直接逛起猜你喜歡的商品。

▲ 折疊屏版的淘寶首頁演示

微淘的第二屏內(nèi)容是推薦內(nèi)容卡片，能即時獲取到商家的推薦信息。

▲ 折疊屏上的淘寶微淘頁

消息的第二屏內(nèi)容是聊天窗口，能快速預(yù)覽消息里的最新內(nèi)容，提升聊天切換的效率。

▲ 折疊屏上的淘寶消息頁

寶貝詳情頁的第二屏內(nèi)容是圖文詳情，優(yōu)惠信息和圖文內(nèi)容能同時進行參考比較。

▲ 折疊屏版的淘寶詳情頁

特性二：多任務(wù)效率提升

─

在日常使用手機處理主任務(wù)時，經(jīng)常會碰到臨時通知消息等分支任務(wù)處理，主任務(wù)與分支任務(wù)場景的頻繁切換給用戶帶來很高的操作成本。

折疊屏的「第二屏」可以讓用戶可以不離開當(dāng)前場景即可便捷的處理子任務(wù)，提升多任務(wù)的處理效率。下面舉例淘寶上的案例幫助大家體會多任務(wù)帶來的種種便捷。

▲ 折疊屏第二屏的多任務(wù)模式

邊看直播邊逛

看淘寶直播可以保證直播畫面始終完整顯示，還可以讓寶貝列表呈現(xiàn)出更大更多的圖片以及簡要的信息幫助用戶做初步的判斷，邊看邊逛互不干擾。

▲ 邊看直播邊逛

邊看詳情邊看評價

商品評價會直接陳列在右側(cè)“第二屏”，讓用戶第一眼就能概覽較全面的信息，減少不必要的操作成本。

▲ 邊看寶貝詳情邊看評價

寶貝信息對比

用戶可以直接從足跡中拖拽出備選寶貝進行同時展示，在同一個屏幕中同時瀏覽對比寶貝就顯得非常直觀便捷。

▲ 寶貝信息對比

邊逛邊聊天

逛商品過程中喚起的聊天窗口可以常駐第二屏，不僅不會打斷用戶瀏覽詳情的任務(wù)，還能一邊逛一遍聊，讓買賣雙方交流更容易。當(dāng)商家推薦的其他寶貝時還可以保持聊天窗口常駐情況下在左側(cè)屏幕直接查看。這樣就降低了邊逛邊聊場景的切換成本。

▲ 邊逛邊聊天

以上設(shè)計是我們關(guān)于折疊屏上APP應(yīng)用設(shè)計的暢想，如果想了解更多腦洞創(chuàng)意，請持續(xù)關(guān)注Taobao Design的公眾號，后續(xù)透露更多關(guān)于折疊屏的設(shè)計分析和案例，敬請期待。

文章提到的折疊屏樣機我們提前整理出來了，下載地址：華為Mate X折疊手機樣機模型

作者：Project F

公眾號：淘寶設(shè)計