當“折疊屏時代”來臨，我們的設(shè)計該如何做好呢？

智能手機發(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è)計師首當其沖需要思考如何更好地設(shè)計這塊屏幕（以下我們稱之為折疊屏“第二屏”）的內(nèi)容。下面我們針對折疊屏的兩大特性具體展開設(shè)計：

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

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

在折疊屏中，頂部和底部導航性質(zhì)的組件屬于頁面的公用功能，采取直觀的橫向拉伸適配方式；而當中頁面可以采用內(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ù)場景的頻繁切換給用戶帶來很高的操作成本。

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

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

邊看直播邊逛：

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

▲ 邊看直播邊逛

邊看詳情邊看評價：

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

▲ 邊看寶貝詳情邊看評價

寶貝信息對比：

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

作者：Project F，公眾號：淘寶設(shè)計（ID：ali-taobaoued）

來源：https://mp.weixin.qq.com/s/MKC3z-yhqv_o6LtVj-DKuQ

本文由 @淘寶設(shè)計 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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