來(lái)源：?淘寶設(shè)計(jì) ?作者：Project F
智能手機(jī)發(fā)展的十年乏苦，是屏幕尺寸不斷變大的十年畅形，Steve Jobs 在發(fā)布初代 iPhone 時(shí)养距，或許不會(huì)想到不久將來(lái)的手機(jī)會(huì)大到塞不進(jìn)牛仔褲口袋。
從曲面屏再到全面屏日熬，技術(shù)不斷挑戰(zhàn)屏幕尺寸邊界棍厌，最終折疊屏巧妙地解決收納和尺寸的博弈來(lái)到消費(fèi)者眼前。2019年伊始碍遍，多個(gè)品牌先后發(fā)布折疊屏手機(jī)定铜，其中三星和華為已明確上市計(jì)劃，蘋果也按捺不住申請(qǐng)了專利怕敬。
▲?折疊屏的時(shí)代來(lái)臨
折疊屏已從概念來(lái)到現(xiàn)實(shí)揣炕，那么折疊屏上的APP應(yīng)用應(yīng)該如何來(lái)設(shè)計(jì)呢？
設(shè)計(jì)變化：新增第二屏
折疊屏不管是「外翻」還是「內(nèi)折」的折疊方式东跪，對(duì)用戶來(lái)說(shuō)是新增了一塊屏幕畸陡，而這新增的屏幕使得1+1大于2鹰溜，手機(jī)能變換為平板。設(shè)計(jì)師首當(dāng)其沖需要思考如何更好地設(shè)計(jì)這塊屏幕（以下我們稱之為折疊屏“第二屏”）的內(nèi)容丁恭。下面我們針對(duì)折疊屏的兩大特性具體展開(kāi)設(shè)計(jì)：
特性一：大屏內(nèi)容更豐富
手機(jī)的滑屏瀏覽方式使得頁(yè)面不斷往縱向設(shè)計(jì)加高曹动，同時(shí)客觀造成頁(yè)面模塊點(diǎn)擊量是縱向衰減的。當(dāng)用戶想滑到感興趣的模塊時(shí)（比如淘寶首頁(yè)的猜你喜歡模塊）每次刷新頁(yè)面后都需要重新滑屏牲览。這類低曝光但又是用戶想瀏覽的內(nèi)容便很適合放在折疊屏的“第二屏”墓陈。
在折疊屏中，頂部和底部導(dǎo)航性質(zhì)的組件屬于頁(yè)面的公用功能第献，采取直觀的橫向拉伸適配方式贡必；而當(dāng)中頁(yè)面可以采用內(nèi)容填充適配方式，將次級(jí)重要內(nèi)容展示在第二屏庸毫。
▲ 長(zhǎng)頁(yè)面的折疊屏適配方式：內(nèi)容適配
例如在淘寶的設(shè)計(jì)場(chǎng)景中仔拟，首頁(yè)的第二屏內(nèi)容是猜你喜歡內(nèi)容模塊，以后進(jìn)入淘寶便能直接逛起猜你喜歡的商品飒赃。
▲ 折疊屏版的淘寶首頁(yè)演示
微淘的第二屏內(nèi)容是推薦內(nèi)容卡片利花，能即時(shí)獲取到商家的推薦信息。
▲ 折疊屏上的淘寶微淘頁(yè)
消息的第二屏內(nèi)容是聊天窗口载佳，能快速預(yù)覽消息里的最新內(nèi)容炒事，提升聊天切換的效率。
▲ 折疊屏上的淘寶消息頁(yè)
寶貝詳情頁(yè)的第二屏內(nèi)容是圖文詳情刚盈，優(yōu)惠信息和圖文內(nèi)容能同時(shí)進(jìn)行參考比較羡洛。
▲ 折疊屏版的淘寶詳情頁(yè)
特性二：多任務(wù)效率提升
在日常使用手機(jī)處理主任務(wù)時(shí)，經(jīng)常會(huì)碰到臨時(shí)通知消息等分支任務(wù)處理藕漱，主任務(wù)與分支任務(wù)場(chǎng)景的頻繁切換給用戶帶來(lái)很高的操作成本欲侮。
折疊屏的「第二屏」可以讓用戶可以不離開(kāi)當(dāng)前場(chǎng)景即可便捷的處理子任務(wù)，提升多任務(wù)的處理效率肋联。下面舉例淘寶上的案例幫助大家體會(huì)多任務(wù)帶來(lái)的種種便捷威蕉。
▲ 折疊屏第二屏的多任務(wù)模式
邊看直播邊逛
看淘寶直播可以保證直播畫面始終完整顯示，還可以讓寶貝列表呈現(xiàn)出更大更多的圖片以及簡(jiǎn)要的信息幫助用戶做初步的判斷橄仍，邊看邊逛互不干擾韧涨。
▲?邊看直播邊逛
邊看詳情邊看評(píng)價(jià)
商品評(píng)價(jià)會(huì)直接陳列在右側(cè)“第二屏”，讓用戶第一眼就能概覽較全面的信息侮繁，減少不必要的操作成本虑粥。
▲?邊看寶貝詳情邊看評(píng)價(jià)
寶貝信息對(duì)比
用戶可以直接從足跡中拖拽出備選寶貝進(jìn)行同時(shí)展示，在同一個(gè)屏幕中同時(shí)瀏覽對(duì)比寶貝就顯得非常直觀便捷宪哩。
▲?寶貝信息對(duì)比
邊逛邊聊天
逛商品過(guò)程中喚起的聊天窗口可以常駐第二屏娩贷，不僅不會(huì)打斷用戶瀏覽詳情的任務(wù)，還能一邊逛一遍聊锁孟，讓買賣雙方交流更容易彬祖。當(dāng)商家推薦的其他寶貝時(shí)還可以保持聊天窗口常駐情況下在左側(cè)屏幕直接查看茁瘦。這樣就降低了邊逛邊聊場(chǎng)景的切換成本。
▲?邊逛邊聊天
以上設(shè)計(jì)是我們關(guān)于折疊屏上APP應(yīng)用設(shè)計(jì)的暢想储笑，如果想了解更多腦洞創(chuàng)意甜熔，請(qǐng)持續(xù)關(guān)注Taobao Design的公眾號(hào)，后續(xù)透露更多關(guān)于折疊屏的設(shè)計(jì)分析和案例突倍，敬請(qǐng)期待腔稀。
注：
1、以上設(shè)計(jì)稿為創(chuàng)意表達(dá)羽历，淘寶設(shè)計(jì)部擁有最終解釋權(quán)烧颖；
2、設(shè)計(jì)稿中所用素材僅用于創(chuàng)意演示窄陡，實(shí)際商品、店鋪信息以線上為準(zhǔn)拆火。
淘寶設(shè)計(jì)跳夭，一個(gè)服務(wù)于全球億萬(wàn)消費(fèi)者體驗(yàn)的設(shè)計(jì)團(tuán)隊(duì)，致力于讓設(shè)計(jì)觸動(dòng)人心们镜，讓商業(yè)美而簡(jiǎn)單币叹。
如果你覺(jué)得這篇文章有所幫助
一定記得分享給身邊的朋友哈~
哦，對(duì)了
別忘了把「不錯(cuò)研究室」公眾號(hào)設(shè)為星標(biāo)哦
關(guān)于不錯(cuò)研究室
一個(gè)能看?直播模狭，能看?干貨的組織颈抚。一個(gè)定期推薦不錯(cuò)的全球設(shè)計(jì)師?行業(yè)大咖進(jìn)行直播分享的圈子。一個(gè)每天分享設(shè)計(jì)干貨的自媒體嚼鹉。每一篇都很不錯(cuò)贩汉。
? ?給你的， ? ?
? ?「好看」點(diǎn)一點(diǎn)锚赤，存點(diǎn)精選匹舞。 ??
??????
