編輯導(dǎo)讀：手機(jī)屏幕空間有限，如何將有限的空間里用起來？上篇咱們介紹了泳道和卡片設(shè)計(jì)《提升屏幕空間利用率的 6 種設(shè)計(jì)方式（上篇）》，下篇咱們講剩下四種設(shè)計(jì)方式：輪播設(shè)計(jì)法、折疊設(shè)計(jì)法、tab設(shè)計(jì)法、開拓二樓。

一、輪播設(shè)計(jì)法

輪播設(shè)計(jì)指的是元素通過自動(dòng)或主動(dòng)輪播內(nèi)容的方式來拓展屏幕空間的設(shè)計(jì)方法。

• 從切換方式可以分為：自動(dòng)輪播、手動(dòng)輪播、二者結(jié)合。
• 從切換方向可以分為：上下輪播、左右輪播。

優(yōu)勢(shì)：

• 在有限的空間展示更多內(nèi)容（例如文字輪播）
• 輪播動(dòng)效更吸引眼球（如中獎(jiǎng)號(hào)碼輪播等）
• 對(duì)內(nèi)容包容性強(qiáng)，圖片、文字、圖標(biāo)等均可以使用

劣勢(shì)：

• 二級(jí)卡片曝光率低
• 文字輪播時(shí)需要等待片刻才能看清全部文字

1. 輪播的設(shè)計(jì)模式

下圖從兩個(gè)維度進(jìn)行設(shè)計(jì)模式盤點(diǎn)：左右輪播和上下輪播。

2. 輪播交互方式

從輪播的切換方式上，輪播分為自動(dòng)輪播和手動(dòng)輪播。

1）自動(dòng)輪播

自動(dòng)輪播需注意輪播時(shí)間和速度的參數(shù)，過快難以看清信息，過慢用戶沒有耐心等待。

自動(dòng)輪播分為兩類：左右輪播和上下輪播。

a. 左右輪播

左右輪播分為“按頁輪播”和“滾動(dòng)輪播”。

二者的區(qū)別在于“按頁輪播”以一張卡片或者一頁為單位切換，而“滾動(dòng)輪播”則按順序滾動(dòng)播放。

滾動(dòng)輪播和按頁輪播的區(qū)別↓↓

滾動(dòng)輪播一般用于文字信息滾動(dòng)播放，一般不可點(diǎn)擊，僅作信息查看。

比如知乎的會(huì)員中獎(jiǎng)輪播↓↓

滾動(dòng)輪播在直播產(chǎn)品中應(yīng)用得較多的地方主要是直播間名稱和公告等文字信息，因?yàn)橹辈ラg信息太多，文字無法展示完全，使用滾動(dòng)輪播的方式能兼顧小空間和信息完整性的需求。

比如KK直播的輪播方式↓↓

b. 上下輪播

上下輪播目前移動(dòng)端普遍還是使用的“按頁輪播”，輪播形式也分為單行輪播和多行輪播。

單行輪播比如「酷狗唱唱」中的卡片上下輪播榜單狀態(tài)↓↓

多行輪播相比單行輪播一次能容納更多內(nèi)容，比如「夸克瀏覽器」的資訊播報(bào)↓↓

除了單獨(dú)使用一種輪播方式，也有結(jié)合二者的設(shè)計(jì)方式，只不過比較少見，因?yàn)樯婕暗絻煞N切換，內(nèi)容間隔時(shí)間必定拉長(zhǎng)，導(dǎo)致用戶需要更多的時(shí)間閱讀，而大多數(shù)時(shí)候用戶沒有這么多耐心。

「blued」APP中結(jié)合上下輪播和左右輪播的設(shè)計(jì)方式↓↓

2）手動(dòng)輪播

手動(dòng)輪播大多用于運(yùn)營活動(dòng)入口，一般使用圖片或卡片承載內(nèi)容，點(diǎn)擊后進(jìn)行下一步操作。部分設(shè)計(jì)也會(huì)同時(shí)輔助自動(dòng)輪播的交互方式來幫助次級(jí)卡片曝光。

手動(dòng)輪播有兩點(diǎn)值得注意：

• 卡片靠近屏幕邊緣時(shí)，注意避免熱區(qū)和手機(jī)返回手勢(shì)沖突
• 輪播最好循環(huán)切換，而非單向切換，若單向切換則切換到最后一張就無法再切換，使用起來不夠流暢，二來當(dāng)用戶嘗試?yán)^續(xù)切換時(shí)非常容易和手機(jī)自帶返回手勢(shì)沖突（親測(cè)）

循環(huán)切換和單向切換↓↓

3. 輪播的視覺展現(xiàn)

指示器：卡片式切換一般會(huì)輔助指示器

運(yùn)營活動(dòng)入口：可嘗試異形圖片，更加個(gè)性有趣

文字輪播：重要文字可特殊處理，如加粗、換顏色等

二、折疊設(shè)計(jì)法

折疊設(shè)計(jì)法指的是通過折疊內(nèi)容的方法來節(jié)省頁面空間的設(shè)計(jì)方式。

優(yōu)勢(shì)：

• 擴(kuò)展性強(qiáng)：相比前三種設(shè)計(jì)方式，折疊設(shè)計(jì)法能容納更多的內(nèi)容
• 微動(dòng)效：折疊設(shè)計(jì)法能容納較多的微動(dòng)效，增強(qiáng)趣味感

劣勢(shì)：

• 曝光較弱：需要用戶主動(dòng)去發(fā)現(xiàn)
• 可點(diǎn)擊區(qū)域?。赫郫B設(shè)計(jì)可能存在點(diǎn)擊區(qū)域不夠大的情況，用戶操作困難

1. 折疊的設(shè)計(jì)模式

1）卡片折疊

以卡片為主的設(shè)計(jì)形式，直播產(chǎn)品中常應(yīng)用于側(cè)邊折疊和小卡片折疊。

側(cè)邊折疊：

點(diǎn)擊展開/收起側(cè)邊信息面板，在Y軸上可以容納更多內(nèi)容，比如花椒直播的側(cè)邊折疊方式，換種思路，其它場(chǎng)景是否也可以采用這種交互方式？比如文檔切換、圖片切換等場(chǎng)景。

花椒直播的側(cè)邊折疊↓↓

上下折疊：

折疊目的一般有兩個(gè)，一個(gè)是折疊后節(jié)省屏幕空間，第二個(gè)是擴(kuò)展屏幕空間。

比如釘釘課堂就對(duì)視頻做了折疊交互，可點(diǎn)擊展開/折疊視頻，就是為了節(jié)省屏幕空間，折疊時(shí)不打擾白板的使用。

釘釘↓↓

除了釘釘?shù)恼郫B視頻，更普遍的是對(duì)運(yùn)營信息進(jìn)行折疊，如花椒和快手直播間的折疊卡片，展開后可以查看相關(guān)信息還可以點(diǎn)擊進(jìn)行交互。

花椒直播↓↓

快手直播↓↓

2）文字折疊

而為了展示更多內(nèi)容的折疊設(shè)計(jì)方式則更像是一種另類的彈窗，比如「音階」APP對(duì)游戲規(guī)則簡(jiǎn)介的折疊方式，不同于常規(guī)意義的彈窗，它更像是折疊的效果并且還添加了微動(dòng)效，整個(gè)操作更加有趣流暢。

音階↓↓

除了音階這種通過點(diǎn)擊icon才能觸發(fā)折疊展開的設(shè)計(jì)方式，還有一種操作更加方便的交互，點(diǎn)擊熱區(qū)更大，比如小紅書的視頻播放頁的文字展開折疊效果。

小紅書↓↓

3）空間折疊

空間折疊就像是頁面被撕開了一個(gè)口子，像是愛麗絲掉進(jìn)了兔子洞，發(fā)現(xiàn)別有洞天，這樣的設(shè)計(jì)方式就是空間折疊。

折疊空間演示↓↓

比如虎牙直播APP的直播間頁面就新開辟了一個(gè)新空間用來推薦其他直播，為其他直播引流。

虎牙APP的空間折疊↓↓

除了直播產(chǎn)品，飛書會(huì)議也采用了空間折疊的設(shè)計(jì)方法，折疊視頻窗口后有更多的空間用于文檔演示，當(dāng)界面元素過多時(shí)也可以考慮如此的設(shè)計(jì)方法。

你會(huì)發(fā)現(xiàn)上述三種折疊設(shè)計(jì)方式都包含了一種微動(dòng)效。

比如小紅書的文字展開折疊不是生硬的短文本和長(zhǎng)文本切換，而是文字像一把扇子一樣展開，然后折疊，用數(shù)字表達(dá)就像是01234578和07的區(qū)別，一個(gè)是遞進(jìn)另一個(gè)是突變，遞進(jìn)這種微弱的動(dòng)效能讓整個(gè)體驗(yàn)更加流暢。

下面將遞進(jìn)稱為流暢切換，突變稱為生硬切換，為了能讓大家感受到這種差別，我做了一個(gè)演示GIF，可以看到下圖中左右矩形的切換效果，左邊的矩形是逐漸升高的，而右邊的矩形是由矮突然變高，前者更加流暢，后者則顯得生硬。

流暢切換和生硬切換↓↓

2. 折疊設(shè)計(jì)的視覺展現(xiàn)

盡量有明確的展開/收起圖標(biāo)，實(shí)際點(diǎn)擊熱區(qū)可以大于圖標(biāo)的視覺大?。ū热缧〖t書點(diǎn)擊文字也可以展開折疊）

圖標(biāo)造型：上下折疊、向上折疊、向下折疊等不同方向可以考慮使用對(duì)應(yīng)的圖標(biāo)，且圖標(biāo)表意需明確

三、tab設(shè)計(jì)法

tab設(shè)計(jì)法是非常常見的一種設(shè)計(jì)方式，針對(duì)整個(gè)頁面做tab切換的設(shè)計(jì)方法我就不多做介紹，下面主要介紹幾種小范圍的tab設(shè)計(jì)，比如彈窗里加tab，或者卡片里面加tab。

優(yōu)勢(shì)：

• 簡(jiǎn)單易懂，tab作為一種相當(dāng)成熟的設(shè)計(jì)方式，用戶幾乎一看就懂
• 擴(kuò)展性強(qiáng)，可添加多個(gè)tab，容納更多內(nèi)容

劣勢(shì)：

• 需用戶主動(dòng)切換，除了第一tab其它tab內(nèi)容曝光度低
• tab數(shù)量超過一屏后，屏幕外的tab點(diǎn)擊率低

1. tab設(shè)計(jì)模式

本文探討的tab設(shè)計(jì)不包含整頁tab，所以tab設(shè)計(jì)模式主要有兩種：彈窗內(nèi)tab和卡片內(nèi)tab。

交互手勢(shì)：

• 左右滑動(dòng)切換
• 點(diǎn)擊切換
• 二者結(jié)合

1）彈窗內(nèi)tab

彈窗內(nèi)tab即是在彈窗里面添加tab的設(shè)計(jì)方式，而展現(xiàn)形式也有兩種：頂部tab和底部tab。

頂部tab又分為一級(jí)tab和二級(jí)tab，一級(jí)tab比如「比心」APP的榜單彈窗中就分出了兩個(gè)tab：守護(hù)總榜和守護(hù)周榜。值得注意的是，此處tab一欄的布局不僅僅只有兩個(gè)tab選項(xiàng)，右邊還有其它的功能入口，也是一種擴(kuò)展屏幕空間的方式，值得借鑒。

比心APPtab切換↓↓

二級(jí)tab：

比如blued APP的二級(jí)tab↓↓

底部tab：

如NOW直播APP中禮物的切換方式，通過底部文字tab的方式來做切換。

NOW直播↓↓

2）卡片內(nèi)tab

現(xiàn)在很多直播運(yùn)營卡片也會(huì)使用tab的切換切換方式來擴(kuò)展空間，需要注意的是tab視覺上設(shè)計(jì)得稍微明顯些，讓用戶一眼就能看出是tab，比如YY卡片的tab切換，通過漸變和對(duì)比色來做區(qū)分，讓用戶很快能理解這是一個(gè)tab，可以切換。

YY直播↓↓

2. tab設(shè)計(jì)法的視覺展現(xiàn)

選中/未選：使用字重、文字顏色、下劃線、背景樣式來做區(qū)分

側(cè)邊tab樣式對(duì)比可以更強(qiáng)烈一些

tab可以輔助分割線做內(nèi)容區(qū)分

四、開拓二樓

「二樓」簡(jiǎn)介APP「二樓」起源于淘寶2016年推出的“淘寶二樓”產(chǎn)品，每晚6點(diǎn)，可以從淘寶app首頁向上滑動(dòng)進(jìn)入二樓，早上7點(diǎn)二樓就會(huì)消失，后來各大APP紛紛效仿，淘寶也算是發(fā)明了一種新的移動(dòng)端交互方式。

優(yōu)勢(shì)：

• 空間大：只要打開二樓就相當(dāng)于打開一個(gè)新頁面
• 新穎：交互新鮮有趣，能給人耳目一新的感覺

劣勢(shì)：

• 交互隱藏太深，用戶難以發(fā)現(xiàn)，可能造成打開率低

1. 「二樓」設(shè)計(jì)模式

觸發(fā)二樓：

• 頁面位于首屏，下滑頁面，設(shè)定一個(gè)滑動(dòng)距離 a
• 滑動(dòng)距離 ＜ a 時(shí)松手，不觸發(fā)或僅觸發(fā)刷新
• 滑動(dòng)距離 ≥ a 時(shí)松手或繼續(xù)下滑，進(jìn)入二樓

退出二樓：

• 方式一：點(diǎn)擊左上角/右上角返回
• 方式二：點(diǎn)擊底部返回按鈕
• 方式三：向上滑動(dòng)底部熱區(qū)

1）二樓覆蓋一樓

二樓覆蓋一樓的設(shè)計(jì)方式一般用于一個(gè)運(yùn)營位，比如下載入口，快手的游戲中心就采用的這種方式，下拉進(jìn)入二樓即可下載推廣的游戲。

案例快手↓↓

也有作為一個(gè)新的流量分發(fā)入口來使用，比如現(xiàn)在的淘寶二樓就將頻道和搜索容納其中。

2）二樓跳轉(zhuǎn)到新頁面

選擇跳轉(zhuǎn)到新頁面的二樓，大多數(shù)都是因?yàn)樾马撁娴哪軌虺休d更多的空間.

愛奇藝二樓跳轉(zhuǎn)到短視頻頁面，相當(dāng)于給短視頻添加了一個(gè)曝光入口，點(diǎn)擊左上角返回

貓眼視頻的二樓則是進(jìn)入到熱門電影的簡(jiǎn)介詳情頁，此頁面相當(dāng)于運(yùn)營位，會(huì)根據(jù)不同的運(yùn)營電影來做更換

「二樓」設(shè)計(jì)的視覺展現(xiàn)若跳轉(zhuǎn)到新頁面，下拉窗口注意占位圖的樣式（例愛奇藝用波光圖，貓眼用電影海報(bào)）二樓頁面底部添加指引箭頭有利于幫助理解頁面的跳轉(zhuǎn)邏輯（如快手）

本文由 @餿面包 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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