起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識提升屏幕空間利用率的 6 種設計方式（下篇）
編輯導讀：手機屏幕空間有限，如何將有限的空間里用起來？上篇咱們介紹了泳道和卡片設計《提升屏幕空間利用率的 6 種設計方式（上篇）》，下篇咱們講剩下四種設計方式：輪播設計法、折疊設計法、tab設計法、開拓二樓。
一、輪播設計法
輪播設計指的是元素通過自動或主動輪播內容的方式來拓展屏幕空間的設計方法。
- 從切換方式可以分為：自動輪播、手動輪播、二者結合。
- 從切換方向可以分為：上下輪播、左右輪播。
優勢：
- 在有限的空間展示更多內容（例如文字輪播）
- 輪播動效更吸引眼球（如中獎號碼輪播等）
- 對內容包容性強，圖片、文字、圖標等均可以使用
劣勢：
- 二級卡片曝光率低
- 文字輪播時需要等待片刻才能看清全部文字
1. 輪播的設計模式
下圖從兩個維度進行設計模式盤點：左右輪播和上下輪播。
2. 輪播交互方式
從輪播的切換方式上，輪播分為自動輪播和手動輪播。
1）自動輪播
自動輪播需注意輪播時間和速度的參數，過快難以看清信息，過慢用戶沒有耐心等待。
自動輪播分為兩類：左右輪播和上下輪播。
a. 左右輪播
左右輪播分為“按頁輪播”和“滾動輪播”。
二者的區別在于“按頁輪播”以一張卡片或者一頁為單位切換，而“滾動輪播”則按順序滾動播放。
滾動輪播和按頁輪播的區別↓↓
滾動輪播一般用于文字信息滾動播放，一般不可點擊，僅作信息查看。
比如知乎的會員中獎輪播↓↓
滾動輪播在直播產品中應用得較多的地方主要是直播間名稱和公告等文字信息，因為直播間信息太多，文字無法展示完全，使用滾動輪播的方式能兼顧小空間和信息完整性的需求。
比如KK直播的輪播方式↓↓
b. 上下輪播
上下輪播目前移動端普遍還是使用的“按頁輪播”，輪播形式也分為單行輪播和多行輪播。
單行輪播比如「酷狗唱唱」中的卡片上下輪播榜單狀態↓↓
多行輪播相比單行輪播一次能容納更多內容，比如「夸克瀏覽器」的資訊播報↓↓
除了單獨使用一種輪播方式，也有結合二者的設計方式，只不過比較少見，因為涉及到兩種切換，內容間隔時間必定拉長，導致用戶需要更多的時間閱讀，而大多數時候用戶沒有這么多耐心。
「blued」APP中結合上下輪播和左右輪播的設計方式↓↓
2）手動輪播
手動輪播大多用于運營活動入口，一般使用圖片或卡片承載內容，點擊后進行下一步操作。部分設計也會同時輔助自動輪播的交互方式來幫助次級卡片曝光。
手動輪播有兩點值得注意：
- 卡片靠近屏幕邊緣時，注意避免熱區和手機返回手勢沖突
- 輪播最好循環切換，而非單向切換，若單向切換則切換到最后一張就無法再切換，使用起來不夠流暢，二來當用戶嘗試繼續切換時非常容易和手機自帶返回手勢沖突（親測）
循環切換和單向切換↓↓
3. 輪播的視覺展現
指示器：卡片式切換一般會輔助指示器
運營活動入口：可嘗試異形圖片，更加個性有趣
文字輪播：重要文字可特殊處理，如加粗、換顏色等
二、折疊設計法
折疊設計法指的是通過折疊內容的方法來節省頁面空間的設計方式。
優勢：
- 擴展性強：相比前三種設計方式，折疊設計法能容納更多的內容
- 微動效：折疊設計法能容納較多的微動效，增強趣味感
劣勢：
- 曝光較弱：需要用戶主動去發現
- 可點擊區域小：折疊設計可能存在點擊區域不夠大的情況，用戶操作困難
1. 折疊的設計模式
1）卡片折疊
以卡片為主的設計形式，直播產品中常應用于側邊折疊和小卡片折疊。
側邊折疊：
點擊展開/收起側邊信息面板，在Y軸上可以容納更多內容，比如花椒直播的側邊折疊方式，換種思路，其它場景是否也可以采用這種交互方式？比如文檔切換、圖片切換等場景。
花椒直播的側邊折疊↓↓
上下折疊：
折疊目的一般有兩個，一個是折疊后節省屏幕空間，第二個是擴展屏幕空間。
比如釘釘課堂就對視頻做了折疊交互，可點擊展開/折疊視頻，就是為了節省屏幕空間，折疊時不打擾白板的使用。
釘釘↓↓
除了釘釘的折疊視頻，更普遍的是對運營信息進行折疊，如花椒和快手直播間的折疊卡片，展開后可以查看相關信息還可以點擊進行交互。
花椒直播↓↓
快手直播↓↓
2）文字折疊
而為了展示更多內容的折疊設計方式則更像是一種另類的彈窗，比如「音階」APP對游戲規則簡介的折疊方式，不同于常規意義的彈窗，它更像是折疊的效果并且還添加了微動效，整個操作更加有趣流暢。
音階↓↓
除了音階這種通過點擊icon才能觸發折疊展開的設計方式，還有一種操作更加方便的交互，點擊熱區更大，比如小紅書的視頻播放頁的文字展開折疊效果。
小紅書↓↓
3）空間折疊
空間折疊就像是頁面被撕開了一個口子，像是愛麗絲掉進了兔子洞，發現別有洞天，這樣的設計方式就是空間折疊。
折疊空間演示↓↓
比如虎牙直播APP的直播間頁面就新開辟了一個新空間用來推薦其他直播，為其他直播引流。
虎牙APP的空間折疊↓↓
除了直播產品，飛書會議也采用了空間折疊的設計方法，折疊視頻窗口后有更多的空間用于文檔演示，當界面元素過多時也可以考慮如此的設計方法。
你會發現上述三種折疊設計方式都包含了一種微動效。
比如小紅書的文字展開折疊不是生硬的短文本和長文本切換，而是文字像一把扇子一樣展開，然后折疊，用數字表達就像是01234578和07的區別，一個是遞進另一個是突變，遞進這種微弱的動效能讓整個體驗更加流暢。
下面將遞進稱為流暢切換，突變稱為生硬切換，為了能讓大家感受到這種差別，我做了一個演示GIF，可以看到下圖中左右矩形的切換效果，左邊的矩形是逐漸升高的，而右邊的矩形是由矮突然變高，前者更加流暢，后者則顯得生硬。
流暢切換和生硬切換↓↓
2. 折疊設計的視覺展現
盡量有明確的展開/收起圖標，實際點擊熱區可以大于圖標的視覺大小（比如小紅書點擊文字也可以展開折疊）
圖標造型：上下折疊、向上折疊、向下折疊等不同方向可以考慮使用對應的圖標，且圖標表意需明確
三、tab設計法
tab設計法是非常常見的一種設計方式，針對整個頁面做tab切換的設計方法我就不多做介紹，下面主要介紹幾種小范圍的tab設計，比如彈窗里加tab，或者卡片里面加tab。
優勢：
- 簡單易懂，tab作為一種相當成熟的設計方式，用戶幾乎一看就懂
- 擴展性強，可添加多個tab，容納更多內容
劣勢：
- 需用戶主動切換，除了第一tab其它tab內容曝光度低
- tab數量超過一屏后，屏幕外的tab點擊率低
1. tab設計模式
本文探討的tab設計不包含整頁tab，所以tab設計模式主要有兩種：彈窗內tab和卡片內tab。
交互手勢：
- 左右滑動切換
- 點擊切換
- 二者結合
1）彈窗內tab
彈窗內tab即是在彈窗里面添加tab的設計方式，而展現形式也有兩種：頂部tab和底部tab。
頂部tab又分為一級tab和二級tab，一級tab比如「比心」APP的榜單彈窗中就分出了兩個tab：守護總榜和守護周榜。值得注意的是，此處tab一欄的布局不僅僅只有兩個tab選項，右邊還有其它的功能入口，也是一種擴展屏幕空間的方式，值得借鑒。
比心APPtab切換↓↓
二級tab：
比如blued APP的二級tab↓↓
底部tab：
如NOW直播APP中禮物的切換方式，通過底部文字tab的方式來做切換。
NOW直播↓↓
2）卡片內tab
現在很多直播運營卡片也會使用tab的切換切換方式來擴展空間，需要注意的是tab視覺上設計得稍微明顯些，讓用戶一眼就能看出是tab，比如YY卡片的tab切換，通過漸變和對比色來做區分，讓用戶很快能理解這是一個tab，可以切換。
YY直播↓↓
2. tab設計法的視覺展現
選中/未選：使用字重、文字顏色、下劃線、背景樣式來做區分
側邊tab樣式對比可以更強烈一些
tab可以輔助分割線做內容區分
四、開拓二樓
「二樓」簡介APP「二樓」起源于淘寶2016年推出的“淘寶二樓”產品，每晚6點，可以從淘寶app首頁向上滑動進入二樓，早上7點二樓就會消失，后來各大APP紛紛效仿，淘寶也算是發明了一種新的移動端交互方式。
優勢：
- 空間大：只要打開二樓就相當于打開一個新頁面
- 新穎：交互新鮮有趣，能給人耳目一新的感覺
劣勢：
- 交互隱藏太深，用戶難以發現，可能造成打開率低
1. 「二樓」設計模式
觸發二樓：
- 頁面位于首屏，下滑頁面，設定一個滑動距離 a
- 滑動距離 ＜ a 時松手，不觸發或僅觸發刷新
- 滑動距離 ≥ a 時松手或繼續下滑，進入二樓
退出二樓：
- 方式一：點擊左上角/右上角返回
- 方式二：點擊底部返回按鈕
- 方式三：向上滑動底部熱區
1）二樓覆蓋一樓
二樓覆蓋一樓的設計方式一般用于一個運營位，比如下載入口，快手的游戲中心就采用的這種方式，下拉進入二樓即可下載推廣的游戲。
案例快手↓↓
也有作為一個新的流量分發入口來使用，比如現在的淘寶二樓就將頻道和搜索容納其中。
2）二樓跳轉到新頁面
選擇跳轉到新頁面的二樓，大多數都是因為新頁面的能夠承載更多的空間.
愛奇藝二樓跳轉到短視頻頁面，相當于給短視頻添加了一個曝光入口，點擊左上角返回
貓眼視頻的二樓則是進入到熱門電影的簡介詳情頁，此頁面相當于運營位，會根據不同的運營電影來做更換
「二樓」設計的視覺展現若跳轉到新頁面，下拉窗口注意占位圖的樣式（例愛奇藝用波光圖，貓眼用電影海報）二樓頁面底部添加指引箭頭有利于幫助理解頁面的跳轉邏輯（如快手）
本文由 @餿面包 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
