起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識4個分類總結：側滑交互形式的運用場景
本文總結了出了界面側滑、圖片側滑、模塊式側滑、卡片式側滑等四大側滑運用場景，并分析了不同場景下如何使用，以及需要注意的設計細節，一起來看看~
我們在做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協議
說實話產品經理的app側滑返回做的就非常垃圾