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

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

一、“泳道”

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

優勢：

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

劣勢：

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

1. “泳道”的設計模式

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

2. “泳道”的交互方式

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

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

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

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

3. “泳道”的視覺展現

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

二、卡片式設計

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

優勢：

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

劣勢：

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

1. 卡片的設計模式

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

1）交互層

2）功能層

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

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

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

3）視覺層

①卡片堆疊

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

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

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

知乎APP

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

耳覓APP

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

匠木APP

②顯示單個大卡片

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

積木APP

③屏幕兩邊露出部分卡片

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

音街APP

④屏幕單邊露出部分卡片

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部