編輯導(dǎo)語(yǔ)：為了提升手機(jī)屏幕的空間利用率，可以運(yùn)用不同的設(shè)計(jì)方式。本文作者分享了“泳道”和“卡片設(shè)計(jì)”這兩種設(shè)計(jì)方式，它們各自有哪些優(yōu)劣勢(shì)呢？設(shè)計(jì)模式是什么樣的？一起來(lái)學(xué)習(xí)一下吧。

文章太長(zhǎng)，上篇先介紹2種設(shè)計(jì)方式：泳道、卡片設(shè)計(jì)。

一、“泳道”

在同一頁(yè)面的X軸上擴(kuò)展內(nèi)容的設(shè)計(jì)方式叫做“泳道”設(shè)計(jì)法（或者叫泳道布局框架）。

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

• 理解成本低：泳道的設(shè)計(jì)模式已經(jīng)非常成熟，用戶的理解成本很低
• 擴(kuò)展性強(qiáng)：可以在占據(jù)較少的屏幕空間情況下擴(kuò)展較多的內(nèi)容
• 交互友好：滑動(dòng)的動(dòng)作比點(diǎn)擊操作更輕松快捷

劣勢(shì)：

• 手勢(shì)沖突：可能與手機(jī)其它左右滑動(dòng)的手勢(shì)沖突
• 屏幕外的內(nèi)容曝光度低

1. “泳道”的設(shè)計(jì)模式

• 指示器：在泳道下方添加指示器，數(shù)量固定時(shí)可選此方案
• 內(nèi)容露出一半：讓用戶感知滑動(dòng)可以查看更多

2. “泳道”的交互方式

方式一：左右滑動(dòng)查看全部（例 YY直播）

方式二：左右滑動(dòng)查看，滑動(dòng)到最右邊，繼續(xù)滑動(dòng)自動(dòng)跳轉(zhuǎn)新頁(yè)面查看更多（例：酷狗概念版APP）

方式三：左右滑動(dòng)查看，滑動(dòng)到底，點(diǎn)擊【查看更多】跳轉(zhuǎn)到新頁(yè)面（例：淘票票）

方式四：左右滑動(dòng)查看，滑動(dòng)到底，繼續(xù)滑動(dòng)觸發(fā)加載（例如：樂(lè)趣APP）

3. “泳道”的視覺(jué)展現(xiàn)

• 承載方式：多用卡片承載內(nèi)容
• 內(nèi)容區(qū)分：使用背景色、陰影來(lái)做內(nèi)容區(qū)分
• 心理暗示：卡片溢出屏幕外，暗示還有更多內(nèi)容
• 泳道范圍：僅在部分區(qū)域做泳道也可行，例如直播間的在線人數(shù)頭像泳道

二、卡片式設(shè)計(jì)

卡片設(shè)計(jì)指使用卡片作為內(nèi)容承載容器的設(shè)計(jì)方式，本篇文章探討的主題是關(guān)于提升屏幕空間利用率的設(shè)計(jì)方式，所以此處的卡片設(shè)計(jì)僅對(duì)單張切換式卡片進(jìn)行設(shè)計(jì)說(shuō)明。

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

• 趣味性：卡片切換的交互方式新穎有趣，能夠激發(fā)用戶獵奇的愉悅感
• 未知性：當(dāng)卡片是“一次性”的時(shí)候，無(wú)法得知下一張卡片的內(nèi)容，會(huì)產(chǎn)生探索欲，比如抖音的下滑查看下一條視頻
• 視覺(jué)沖擊力強(qiáng)：大卡片在視覺(jué)上更容易有沖擊感，感官體驗(yàn)更好

劣勢(shì)：

• 流暢度：切換不夠流暢時(shí)，容易產(chǎn)生焦慮感
• 手勢(shì)沖突：可能與手機(jī)其他左右滑動(dòng)手勢(shì)沖突
• 靈敏度：手指滑動(dòng)識(shí)別不夠靈敏時(shí)容易誤觸發(fā)其他操作

1. 卡片的設(shè)計(jì)模式

下圖從三個(gè)維度來(lái)對(duì)卡片設(shè)計(jì)模式進(jìn)行盤點(diǎn)，分別是：交互層、功能層、視覺(jué)層。

1）交互層

• 輕掃卡片左右切換
• 點(diǎn)擊按鈕左右切換
• 二者結(jié)合

2）功能層

從功能層分析，卡片分為“一次性卡片”和“循環(huán)卡片”。

所謂“一次性卡片”指的是將該卡片切換走之后，卡片無(wú)法再次找回，是單向的切換。

而“循環(huán)卡片”指的是卡片可以循環(huán)切換，可以來(lái)回切換，反復(fù)查看。

3）視覺(jué)層

①卡片堆疊

卡片堆疊在一起，看上去像是將卡片重疊放置，每次切換就像是從一堆卡片中拿走最上面的一張。

卡片堆疊有向上堆疊和向下堆疊。

首先是向上堆疊（卡片的堆疊方向在上面），比如知乎APP。

知乎APP

然后是向下堆疊（卡片的堆疊方向在下方），比如耳覓APP。

耳覓APP

斜方向堆疊（卡片斜著堆疊），比如匠木APP。

匠木APP

②顯示單個(gè)大卡片

僅顯示單張卡片，多用于大卡片的切換，因?yàn)樾】ㄆ魺o(wú)引導(dǎo)用戶很難發(fā)現(xiàn)左右滑動(dòng)切換卡片這一手勢(shì)。

積木APP

③屏幕兩邊露出部分卡片

屏幕兩邊露出部分卡片，按時(shí)用戶可左右切換。

音街APP

④屏幕單邊露出部分卡片

屏幕一邊露出部分卡片，按時(shí)用戶可滑動(dòng)切換，一般選擇屏幕右邊露出，因?yàn)檫@樣更加清晰地按時(shí)用戶左滑可查看更多卡片。

搜狗翻譯

2. 卡片的交互方式

1）切換停頓

避免卡片停頓時(shí)間太長(zhǎng)，最好一氣呵成。

Mars APP中卡片切換，輕掃切換卡片，但是每次切換均有一次停頓，導(dǎo)致切換過(guò)程十分不流暢，操作久了還會(huì)滋生一種焦慮感。

Mars大卡片的停頓時(shí)間太長(zhǎng)

而同樣的停頓，「比心」APP就優(yōu)秀很多，切換的停頓不會(huì)讓人覺(jué)得難受，原因在于兩點(diǎn)，「比心」APP的卡片較小同時(shí)停頓時(shí)長(zhǎng)短，這樣的設(shè)計(jì)方案就能解決卡頓的感受。

比心APP的停頓感時(shí)間較短

2）卡片觸發(fā)

觸發(fā)卡片切換有兩種方式：

1. 滑動(dòng)卡片后松開(kāi)手指：滑動(dòng)卡片 X 距離后松開(kāi)手指，即可觸發(fā)卡片切換
2. 輕掃卡片：用手指輕掃屏幕 X 距離后，即可觸發(fā)卡片切換

上述的 X 距離就叫做“觸發(fā)距離”。

觸發(fā)距離 X 是什么？

觸發(fā)距離指的是手指滑動(dòng)或輕掃屏幕后觸發(fā)卡片切換所需要的最小距離。

觸發(fā)距離的長(zhǎng)短如何定義？

• 觸發(fā)距離太長(zhǎng)：切換困難
• 觸發(fā)距離太短：容易誤觸

在調(diào)研過(guò)程中，「搜狗翻譯」、「探探」、「積目」三款A(yù)PP切換的觸發(fā)距離最為合適。

切換過(guò)程手指很輕松就能切換卡片，同時(shí)也不容易誤觸，它們的切換方式采用上述1和2結(jié)合的切換方法，即既可以滑動(dòng)卡片后松開(kāi)手指切換，也可以輕掃卡片進(jìn)行切換。

看了這幾款產(chǎn)品的切換之后，我開(kāi)始思考除了受限于技術(shù)難度，還有什么原因使得他們的切換如此干凈利落？

于是我用principle做了一個(gè)簡(jiǎn)單的demo，發(fā)現(xiàn)還有3個(gè)要素會(huì)影響到切換的流暢度：動(dòng)畫持續(xù)時(shí)間、屬性變化值、貝塞爾曲線選擇，這三者相輔相成，彼此影響，三者的參數(shù)需要整體考慮，無(wú)法單獨(dú)定義一個(gè)參數(shù)后就能得到一個(gè)好的動(dòng)效結(jié)果，所以下面對(duì)三方面的參數(shù)做定性的分析。

1）動(dòng)畫持續(xù)時(shí)間

動(dòng)畫持續(xù)時(shí)間上我嘗試了三個(gè)時(shí)間的測(cè)試，分別是太慢、合適和太快，之所以不做具體的時(shí)間說(shuō)明，是因?yàn)?strong>當(dāng)選擇的貝塞爾曲線和屬性變化值不一致時(shí)，時(shí)間就會(huì)相應(yīng)變化。比如緩入緩出時(shí)1000ms是一個(gè)合適的持續(xù)時(shí)間，但是當(dāng)選擇其他曲線時(shí)，1000m可能就會(huì)太快或者太慢。

下面對(duì)比了慢、適中和快的切換，可以感受一下。

太快

合適

太慢

2）屬性變化值

屬性值的大小也會(huì)影響動(dòng)畫持續(xù)時(shí)間的選擇，如下圖案例，相同時(shí)間，偏移越大，則卡片看上去切換越快。

3）貝塞爾曲線選擇

測(cè)試貝塞爾曲線時(shí)我發(fā)現(xiàn)，選擇緩入緩出和緩出差別不太大，反而是當(dāng)只使用緩入時(shí)，容易有卡頓的感覺(jué)，這種感覺(jué)和「Mars」APP的卡片切換的卡頓感非常相似，感覺(jué)切換的時(shí)候故意停頓了一下。

這種感覺(jué)就像是螞蟻在你心里爬，你很難受，卻無(wú)法撓癢癢。而這種卡頓感即使在我把切換時(shí)間縮短后仍然無(wú)法解決。

僅緩入

而當(dāng)我只選擇緩出時(shí)或者緩入緩出時(shí)，就不會(huì)出現(xiàn)這種難受的卡頓感。所以在貝塞爾曲線的選擇上盡量避免單獨(dú)選擇緩入的設(shè)計(jì)方式。

僅緩出

3. 卡片的視覺(jué)展現(xiàn)

• 陰影：淺色背景下使用陰影來(lái)突出卡片
• 卡片大小：大卡片占屏70%~90%，可打造沉浸式瀏覽；小卡片使用在部分板塊，可豐富交互形式，提升趣味感
• 淺色/深色模式：深色模式視覺(jué)沖擊更強(qiáng)

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

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