界面?zhèn)然ǎ?strong>抽屜式側(cè)滑、橫屏側(cè)滑。

（1）橫屏側(cè)滑

橫屏側(cè)滑通常用于同一大入口模塊下，信息排布的重要度相當(dāng)、層級優(yōu)先級區(qū)分不明顯的時候。例如：京東金融的最新改版如下圖，將理財、白條和支付設(shè)計成同層級的導(dǎo)航形式，用戶只需要向右側(cè)滑動即可整屏切換頁面。我們可以看到其中還有一個特點就是布局類似，這種情況下就更適合采用橫屏界面?zhèn)然男问搅恕?/p>

（2）抽屜式側(cè)滑

抽屜式側(cè)滑包括：左側(cè)、右側(cè)抽屜式側(cè)滑，通常的運用情景分為：個人信息設(shè)置類相關(guān)頁、篩選模塊類。

如下圖最常見的QQ點擊頭像彈出左側(cè)抽屜式側(cè)滑，主要顯示個人文件信息分類、會員特權(quán)、設(shè)置等。我們在搜索篩選查找自己想要獲取的信息的適合，通常篩選模塊的右側(cè)抽屜式側(cè)滑也是非常常見的，例如淘寶京東的篩選模塊。

二、圖片側(cè)滑

圖片側(cè)滑分為：全屏側(cè)滑、banner側(cè)滑、卡片式側(cè)滑。

（1）全屏側(cè)滑

全屏側(cè)滑在常見的運用是在app啟動頁內(nèi)、以及一些H5的展示類頁面、還有一種新穎類的圖片視頻結(jié)合的運用。

app啟動頁是最常見的例如什么值得買的app啟動頁，淘寶二樓采用的就是圖片視頻結(jié)合的側(cè)滑形式，而且每個圖文視頻都有相同的文字展示。非常新穎，滑動后2，3內(nèi)圖片定格開始播放。

還有一種較為常見的就是H5的展示類頁面，例如：前陣子大火的ofo小黃車的系列設(shè)計，他們的H5頁面結(jié)合了當(dāng)下最熱的3D技術(shù)，將滑動頁面做成3D效果，沉浸式體驗非常強烈。是平面與3D結(jié)合的一個很好的嘗試。

（2）banner側(cè)滑

我們經(jīng)常常見的banner側(cè)滑是撐滿左右兩端屏幕或者跟左右間距保持一致的側(cè)滑形式，這里我就不過多介紹了。不太常見的是下圖最左側(cè)的圖文banner，這個是最上方的今日推薦和圖片下方的七夕禮物推薦指南那一塊文字一起滑動的。

這種排列方式的好處是能夠更好的展示圖片和文字信息，兩者之間互不干預(yù)。但是這樣對圖片質(zhì)量會要求比較高，如果沒有高質(zhì)量的圖片還是慎用。

三、卡片式側(cè)滑

卡片式側(cè)滑分為：banner卡片式、圖文卡片式。

我們繼續(xù)看上圖的卡片式banner,最上方的大banner，這個采用了左右banner均小于中間banner大小的圖，左右都可以滑動。滑動過程中營造出了一種特殊的縱深感。文字按照統(tǒng)一的格式排列在不同的圖片上。相比，大小一直的圖片切換更加靈活，有質(zhì)感。

banner卡片式還包括卡片式浮層banner，我們可以看下上圖右一的雪球app首頁，這里首先采用了常規(guī)的banner左右兩邊采用常規(guī)間距的形式。

由于產(chǎn)品特性并沒有使用大部分電商上面大banner，下面大的圖標(biāo)入口的形式。而是將圖標(biāo)移到上方，弱化顯示，因為雪球是類似新聞類的app，又不能做成類似支付寶那樣的工具類的app，將功能入口突出顯示在上方。所以一方面弱化了圖標(biāo)入口，并在下方采用了卡片式浮層banner，很好的增加了模塊之間的層次感。

圖文卡片式

上圖采用了圖文卡片式的形式，例如有道云和華爾街見聞的頁面。這種形式有時候會用于專題歸納入口展示，一個卡片就相當(dāng)于多個信息頁的集合整理，有時是為了豐富了信息展示的多樣化，并且采用右側(cè)滑動能更好的展示更多的內(nèi)容。

三、模塊式側(cè)滑

模塊式側(cè)滑分為：列表式側(cè)滑、標(biāo)簽側(cè)滑、導(dǎo)航欄側(cè)滑、圖標(biāo)側(cè)滑。

導(dǎo)航欄側(cè)滑太常見了，大家也都知道，這里就不多說了。

（1）列表式側(cè)滑

列表式側(cè)滑這種形式并不多見，例如：下圖京東金融中的頁面:，不過如果類似于電商這種需要展示更多產(chǎn)品的情況下，并且在多屏幕適配允許的情況下可以嘗試使用。

（2）標(biāo)簽側(cè)滑

上圖是之前舉例的雪球app的首頁，這種標(biāo)簽側(cè)滑的形式的運用還是比較多的，通常運用在二級導(dǎo)航，方便展示多個入口。

（3）圖標(biāo)側(cè)滑

上圖是點融APP的發(fā)現(xiàn)頁面，最上方用的就是圖標(biāo)側(cè)滑，這里我專門截取了能看卡到圖標(biāo)的地方，之前的設(shè)計是看不到右側(cè)的半截圖標(biāo)的。這種設(shè)計非常不好，如果不露出來一點的話，很多用戶很可能根本不知道能夠側(cè)滑，所以我們在設(shè)計的時候一定要注意這個細(xì)節(jié)。

總結(jié)

以上我們總結(jié)了出了界面?zhèn)然D片側(cè)滑、模塊式側(cè)滑、卡片式側(cè)滑等四大側(cè)滑運用場景，并分析了不同場景下如何使用，以及需要注意的設(shè)計細(xì)節(jié)。

一定還有未被總結(jié)進去的地方，歡迎大家補充！謝謝！

作者：角馬X? ?口袋理財UED設(shè)計經(jīng)理? 公眾號：海鹽社

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

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