編輯導語：為了提升手機屏幕的空間利用率，可以運用不同的設計方式。本文作者分享了“泳道”和“卡片設計”這兩種設計方式，它們各自有哪些優劣勢呢？設計模式是什么樣的？一起來學習一下吧。

文章太長，上篇先介紹2種設計方式：泳道、卡片設計。

一、“泳道”

在同一頁面的X軸上擴展內容的設計方式叫做“泳道”設計法（或者叫泳道布局框架）。

優勢：

• 理解成本低：泳道的設計模式已經非常成熟，用戶的理解成本很低
• 擴展性強：可以在占據較少的屏幕空間情況下擴展較多的內容
• 交互友好：滑動的動作比點擊操作更輕松快捷

劣勢：

• 手勢沖突：可能與手機其它左右滑動的手勢沖突
• 屏幕外的內容曝光度低

1. “泳道”的設計模式

• 指示器：在泳道下方添加指示器，數量固定時可選此方案
• 內容露出一半：讓用戶感知滑動可以查看更多

2. “泳道”的交互方式

方式一：左右滑動查看全部（例 YY直播）

方式二：左右滑動查看，滑動到最右邊，繼續滑動自動跳轉新頁面查看更多（例：酷狗概念版APP）

方式三：左右滑動查看，滑動到底，點擊【查看更多】跳轉到新頁面（例：淘票票）

方式四：左右滑動查看，滑動到底，繼續滑動觸發加載（例如：樂趣APP）

3. “泳道”的視覺展現

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

二、卡片式設計

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

優勢：

• 趣味性：卡片切換的交互方式新穎有趣，能夠激發用戶獵奇的愉悅感
• 未知性：當卡片是“一次性”的時候，無法得知下一張卡片的內容，會產生探索欲，比如抖音的下滑查看下一條視頻
• 視覺沖擊力強：大卡片在視覺上更容易有沖擊感，感官體驗更好

劣勢：

• 流暢度：切換不夠流暢時，容易產生焦慮感
• 手勢沖突：可能與手機其他左右滑動手勢沖突
• 靈敏度：手指滑動識別不夠靈敏時容易誤觸發其他操作

1. 卡片的設計模式

下圖從三個維度來對卡片設計模式進行盤點，分別是：交互層、功能層、視覺層。

1）交互層

• 輕掃卡片左右切換
• 點擊按鈕左右切換
• 二者結合

2）功能層

從功能層分析，卡片分為“一次性卡片”和“循環卡片”。

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

而“循環卡片”指的是卡片可以循環切換，可以來回切換，反復查看。

3）視覺層

①卡片堆疊

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

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

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

知乎APP

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

耳覓APP

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

匠木APP

②顯示單個大卡片

僅顯示單張卡片，多用于大卡片的切換，因為小卡片若無引導用戶很難發現左右滑動切換卡片這一手勢。

積木APP

③屏幕兩邊露出部分卡片

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

音街APP

④屏幕單邊露出部分卡片

屏幕一邊露出部分卡片，按時用戶可滑動切換，一般選擇屏幕右邊露出，因為這樣更加清晰地按時用戶左滑可查看更多卡片。

搜狗翻譯

2. 卡片的交互方式

1）切換停頓

避免卡片停頓時間太長，最好一氣呵成。

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

Mars大卡片的停頓時間太長

而同樣的停頓，「比心」APP就優秀很多，切換的停頓不會讓人覺得難受，原因在于兩點，「比心」APP的卡片較小同時停頓時長短，這樣的設計方案就能解決卡頓的感受。

比心APP的停頓感時間較短

2）卡片觸發

觸發卡片切換有兩種方式：

1. 滑動卡片后松開手指：滑動卡片 X 距離后松開手指，即可觸發卡片切換
2. 輕掃卡片：用手指輕掃屏幕 X 距離后，即可觸發卡片切換

上述的 X 距離就叫做“觸發距離”。

觸發距離 X 是什么？

觸發距離指的是手指滑動或輕掃屏幕后觸發卡片切換所需要的最小距離。

觸發距離的長短如何定義？

• 觸發距離太長：切換困難
• 觸發距離太短：容易誤觸

在調研過程中，「搜狗翻譯」、「探探」、「積目」三款APP切換的觸發距離最為合適。

切換過程手指很輕松就能切換卡片，同時也不容易誤觸，它們的切換方式采用上述1和2結合的切換方法，即既可以滑動卡片后松開手指切換，也可以輕掃卡片進行切換。

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

于是我用principle做了一個簡單的demo，發現還有3個要素會影響到切換的流暢度：動畫持續時間、屬性變化值、貝塞爾曲線選擇，這三者相輔相成，彼此影響，三者的參數需要整體考慮，無法單獨定義一個參數后就能得到一個好的動效結果，所以下面對三方面的參數做定性的分析。

1）動畫持續時間

動畫持續時間上我嘗試了三個時間的測試，分別是太慢、合適和太快，之所以不做具體的時間說明，是因為當選擇的貝塞爾曲線和屬性變化值不一致時，時間就會相應變化。比如緩入緩出時1000ms是一個合適的持續時間，但是當選擇其他曲線時，1000m可能就會太快或者太慢。

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

太快

合適

太慢

2）屬性變化值

屬性值的大小也會影響動畫持續時間的選擇，如下圖案例，相同時間，偏移越大，則卡片看上去切換越快。

3）貝塞爾曲線選擇

測試貝塞爾曲線時我發現，選擇緩入緩出和緩出差別不太大，反而是當只使用緩入時，容易有卡頓的感覺，這種感覺和「Mars」APP的卡片切換的卡頓感非常相似，感覺切換的時候故意停頓了一下。

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

僅緩入

而當我只選擇緩出時或者緩入緩出時，就不會出現這種難受的卡頓感。所以在貝塞爾曲線的選擇上盡量避免單獨選擇緩入的設計方式。

僅緩出

3. 卡片的視覺展現

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