智能手機發展的十年,是屏幕尺寸不斷變大的十年,Steve Jobs 在發布初代 iPhone 時,或許不會想到不久將來的手機會大到塞不進牛仔褲口袋。
從曲面屏再到全面屏,技術不斷挑戰屏幕尺寸邊界,最終折疊屏巧妙地解決收納和尺寸的博弈來到消費者眼前。2019年伊始,多個品牌先後發布折疊屏手機,其中三星和華為已明確上市計劃,蘋果也按捺不住申請了專利。
▲? 折疊屏的時代來臨
折疊屏已從概念來到現實,那麽折疊屏上的APP應用應該如何來設計呢?
設計變化:新增第二屏
折疊屏不管是「外翻」還是「內折」的折疊方式,對用戶來說是新增了壹塊屏幕,而這新增的屏幕使得1+1大於2,手機能變換為平板。設計師首當其沖需要思考如何更好地設計這塊屏幕(以下我們稱之為折疊屏“第二屏”)的內容。下面我們針對折疊屏的兩大特性具體展開設計:
特性壹:大屏內容更豐富
手機的滑屏瀏覽方式使得頁面不斷往縱向設計加高,同時客觀造成頁面模塊點擊量是縱向衰減的。當用戶想滑到感興趣的模塊時(比如淘寶首頁的猜妳喜歡模塊)每次刷新頁面後都需要重新滑屏。這類低曝光但又是用戶想瀏覽的內容便很適合放在折疊屏的“第二屏”。
在折疊屏中,頂部和底部導航性質的組件屬於頁面的公用功能,采取直觀的橫向拉伸適配方式;而當中頁面可以采用內容填充適配方式,將次級重要內容展示在第二屏。
▲ 長頁面的折疊屏適配方式:內容適配
例如在淘寶的設計場景中,首頁的第二屏內容是猜妳喜歡內容模塊,以後進入淘寶便能直接逛起猜妳喜歡的商品。
▲ 折疊屏版的淘寶首頁演示
微淘的第二屏內容是推薦內容卡片,能即時獲取到商家的推薦信息。
▲ 折疊屏上的淘寶微淘頁
消息的第二屏內容是聊天窗口,能快速預覽消息裏的最新內容,提升聊天切換的效率。
▲ 折疊屏上的淘寶消息頁
寶貝詳情頁的第二屏內容是圖文詳情,優惠信息和圖文內容能同時進行參考比較。
▲ 折疊屏版的淘寶詳情頁
特性二:多任務效率提升
在日常使用手機處理主任務時,經常會碰到臨時通知消息等分支任務處理,主任務與分支任務場景的頻繁切換給用戶帶來很高的操作成本。
折疊屏的「第二屏」可以讓用戶可以不離開當前場景即可便捷的處理子任務,提升多任務的處理效率。下面舉例淘寶上的案例幫助大家體會多任務帶來的種種便捷。
▲ 折疊屏第二屏的多任務模式
邊看直播邊逛
看淘寶直播可以保證直播畫面始終完整顯示,還可以讓寶貝列表呈現出更大更多的圖片以及簡要的信息幫助用戶做初步的判斷,邊看邊逛互不幹擾。
▲? 邊看直播邊逛
邊看詳情邊看評價
商品評價會直接陳列在右側“第二屏”,讓用戶第壹眼就能概覽較全面的信息,減少不必要的操作成本。
▲? 邊看寶貝詳情邊看評價
寶貝信息對比
用戶可以直接從足跡中拖拽出備選寶貝進行同時展示,在同壹個屏幕中同時瀏覽對比寶貝就顯得非常直觀便捷。
▲? 寶貝信息對比
邊逛邊聊天
逛商品過程中喚起的聊天窗口可以常駐第二屏,不僅不會打斷用戶瀏覽詳情的任務,還能壹邊逛壹遍聊,讓買賣雙方交流更容易。當商家推薦的其他寶貝時還可以保持聊天窗口常駐情況下在左側屏幕直接查看。這樣就降低了邊逛邊聊場景的切換成本。
▲? 邊逛邊聊天
以上設計是我們關於折疊屏上APP應用設計的暢想,如果想了解更多腦洞創意,請持續關註Taobao Design的公眾號,後續透露更多關於折疊屏的設計分析和案例,敬請期待。
註:
1、以上設計稿為創意表達,淘寶設計部擁有最終解釋權;
2、設計稿中所用素材僅用於創意演示,實際商品、店鋪信息以線上為準。
淘寶設計,壹個服務於全球億萬消費者體驗的設計團隊,致力於讓設計觸動人心,讓商業美而簡單。
如果妳覺得這篇文章有所幫助
壹定記得分享 給身邊的朋友哈~
哦,對了
別忘了把「不錯研究室」公眾號 設為星標 哦
關於不錯研究室
壹個能看?直播,能看?幹貨的組織。 壹個定期推薦不錯的全球設計師?行業大咖進行直播分享的圈子。 壹個每天分享設計幹貨的自媒體。 每壹篇都很不錯。
給妳的,
「好看」點壹點,存點精選。 ?