4個分類總結：側滑互動形式的運用場景
零基礎學產品，BAT產品總監帶，2天線下集訓+1年線上課程，全面掌握優秀產品經理必備技能。 ofollow,noindex">瞭解詳情
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
本文總結了出了介面側滑、圖片側滑、模組式側滑、卡片式側滑等四大側滑運用場景，並分析了不同場景下如何使用，以及需要注意的設計細節，一起來看看~
我們在做APP設計的時候是否留意過同類的互動形式都有哪些運用方式呢？
之前在跟朋友討論的時候，發現一種互動形式的運用方式是多種多樣的，挺有意思的，那麼這裡就針對側滑互動形式的運用場景進行以下分類總結。
- 介面側滑： 抽屜式側滑、橫屏側滑
- 圖片側滑： 引導頁側滑、banner側滑、卡片式側滑
- 模組式側滑： 小模組側滑、列表式側滑、標籤側滑、導航欄側滑、圖示側滑
- 卡片式側滑： banner卡片式、圖文卡片式
一、介面側滑
介面側滑包括： 抽屜式側滑、橫屏側滑。
（1）橫屏側滑
橫屏側滑通常用於同一大入口模組下，資訊排布的重要度相當、層級優先順序區分不明顯的時候。例如：京東金融的最新改版如下圖，將理財、白條和支付設計成同層級的導航形式，使用者只需要向右側滑動即可整屏切換頁面。我們可以看到其中還有一個特點就是佈局類似，這種情況下就更適合採用橫屏介面側滑的形式了。
（2）抽屜式側滑
抽屜式側滑包括：左側、右側抽屜式側滑，通常的運用情景分為：個人資訊設定類相關頁、篩選模組類。
如下圖最常見的QQ點選頭像彈出左側抽屜式側滑，主要顯示個人檔案資訊分類、會員特權、設定等。我們在搜尋篩選查詢自己想要獲取的資訊的適合，通常篩選模組的右側抽屜式側滑也是非常常見的，例如淘寶京東的篩選模組。
二、圖片側滑
圖片側滑分為： 全屏側滑、banner側滑、卡片式側滑。
（1）全屏側滑
全屏側滑在常見的運用是在app啟動頁內、以及一些H5的展示類頁面、還有一種新穎類的圖片視訊結合的運用。
app啟動頁是最常見的例如什麼值得買的app啟動頁，淘寶二樓採用的就是圖片視訊結合的側滑形式，而且每個圖文視訊都有相同的文字展示。非常新穎，滑動後2，3內圖片定格開始播放。
還有一種較為常見的就是H5的展示類頁面，例如：前陣子大火的ofo小黃車的系列設計，他們的H5頁面結合了當下最熱的3D技術，將滑動頁面做成3D效果，沉浸式體驗非常強烈。是平面與3D結合的一個很好的嘗試。
（2）banner側滑
我們經常常見的banner側滑是撐滿左右兩端螢幕或者跟左右間距保持一致的側滑形式，這裡我就不過多介紹了。不太常見的是下圖最左側的圖文banner，這個是最上方的今日推薦和圖片下方的七夕禮物推薦指南那一塊文字一起滑動的。
這種排列方式的好處是能夠更好的展示圖片和文字資訊，兩者之間互不干預。但是這樣對圖片質量會要求比較高，如果沒有高質量的圖片還是慎用。
三、卡片式側滑
卡片式側滑分為： banner卡片式、圖文卡片式。
我們繼續看上圖的卡片式banner,最上方的大banner，這個採用了左右banner均小於中間banner大小的圖，左右都可以滑動。滑動過程中營造出了一種特殊的縱深感。文字按照統一的格式排列在不同的圖片上。相比，大小一直的圖片切換更加靈活，有質感。
banner卡片式還包括卡片式浮層banner，我們可以看下上圖右一的雪球app首頁，這裡首先採用了常規的banner左右兩邊採用常規間距的形式。
由於產品特性並沒有使用大部分電商上面大banner，下面大的圖示入口的形式。而是將圖示移到上方，弱化顯示，因為雪球是類似新聞類的app，又不能做成類似支付寶那樣的工具類的app，將功能入口突出顯示在上方。所以一方面弱化了圖示入口，並在下方採用了卡片式浮層banner，很好的增加了模組之間的層次感。
圖文卡片式
上圖採用了圖文卡片式的形式，例如有道雲和華爾街見聞的頁面。這種形式有時候會用於專題歸納入口展示，一個卡片就相當於多個資訊頁的集合整理，有時是為了豐富了資訊展示的多樣化，並且採用右側滑動能更好的展示更多的內容。
三、模組式側滑
模組式側滑分為： 列表式側滑、標籤側滑、導航欄側滑、圖示側滑。
導航欄側滑太常見了，大家也都知道，這裡就不多說了。
（1）列表式側滑
列表式側滑這種形式並不多見，例如：下圖京東金融中的頁面:，不過如果類似於電商這種需要展示更多產品的情況下，並且在多螢幕適配允許的情況下可以嘗試使用。
（2）標籤側滑
上圖是之前舉例的雪球app的首頁，這種標籤側滑的形式的運用還是比較多的，通常運用在二級導航，方便展示多個入口。
（3）圖示側滑
上圖是點融APP的發現頁面，最上方用的就是圖示側滑，這裡我專門截取了能看卡到圖示的地方，之前的設計是看不到右側的半截圖示的。這種設計非常不好，如果不露出來一點的話，很多使用者很可能根本不知道能夠側滑，所以我們在設計的時候一定要注意這個細節。
總結
以上我們總結了出了介面側滑、圖片側滑、模組式側滑、卡片式側滑等四大側滑運用場景，並分析了不同場景下如何使用，以及需要注意的設計細節。
一定還有未被總結進去的地方，歡迎大家補充！謝謝！
作者：角馬X 口袋理財UED設計經理 公眾號：海鹽社
本文由 @角馬X 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基於CC0協議
