我們?cè)谧鯝PP設(shè)計(jì)的時(shí)候是否留意過(guò)同類的交互形式都有哪些運(yùn)用方式呢？之前在跟朋友討論的時(shí)候族淮，發(fā)現(xiàn)一種交互形式的運(yùn)用方式是多種多樣的章鲤，挺有意思的辐益。那么這里就針對(duì)側(cè)滑交互形式的運(yùn)用場(chǎng)景進(jìn)行以下分類總結(jié)：
界面?zhèn)然?/b>抽屜式側(cè)滑、橫屏側(cè)滑
圖片側(cè)滑：引導(dǎo)頁(yè)側(cè)滑肄满、banner側(cè)滑谴古、卡片式側(cè)滑
模塊式側(cè)滑：小模塊側(cè)滑、列表式側(cè)滑悄窃、標(biāo)簽側(cè)滑讥电、導(dǎo)航欄側(cè)滑、圖標(biāo)側(cè)滑
卡片式側(cè)滑：banner卡片式轧抗、圖文卡片式
一恩敌、界面?zhèn)然?/b>
界面?zhèn)然ǔ閷鲜絺?cè)滑、橫屏側(cè)滑横媚。
橫屏側(cè)滑
橫屏側(cè)滑通常用于同一大入口模塊下纠炮，信息排布的重要度相當(dāng)、層級(jí)優(yōu)先級(jí)區(qū)分不明顯的時(shí)候灯蝴。例如京東金融的最新改版如下圖恢口，將理財(cái)、白條和支付設(shè)計(jì)成同層級(jí)的導(dǎo)航形式穷躁，用戶只需要向右側(cè)滑動(dòng)即可整屏切換頁(yè)面耕肩。我們可以看到其中還有一個(gè)特點(diǎn)就是布局類似，這種情況下就更適合采用橫屏界面?zhèn)然男问搅恕?/p>
抽屜式側(cè)滑
抽屜式側(cè)滑包括左側(cè)问潭、右側(cè)抽屜式側(cè)滑猿诸，通常的運(yùn)用情景分為：個(gè)人信息設(shè)置類相關(guān)頁(yè)、篩選模塊類
如下圖最常見(jiàn)的QQ點(diǎn)擊頭像彈出左側(cè)抽屜式側(cè)滑狡忙，主要顯示個(gè)人文件信息分類梳虽、會(huì)員特權(quán)、設(shè)置等灾茁。我們?cè)谒阉骱Y選查找自己想要獲取的信息的適合窜觉，通常篩選模塊的右側(cè)抽屜式側(cè)滑也是非常常見(jiàn)的谷炸，例如淘寶京東的篩選模塊。
二禀挫、圖片側(cè)滑
圖片側(cè)滑分為全屏側(cè)滑旬陡、banner側(cè)滑、卡片式側(cè)滑
全屏側(cè)滑
全屏側(cè)滑在常見(jiàn)的運(yùn)用是在app啟動(dòng)頁(yè)內(nèi)特咆、以及一些H5的展示類頁(yè)面季惩、還有一種新穎類的圖片視頻結(jié)合的運(yùn)用。
app啟動(dòng)頁(yè)是最常見(jiàn)的例如什么值得買的app啟動(dòng)頁(yè)腻格，淘寶二樓采用的就是圖片視頻結(jié)合的側(cè)滑形式画拾，而且每個(gè)圖文視頻都有相同的文字展示。非常新穎菜职，滑動(dòng)后2青抛，3內(nèi)圖片定格開(kāi)始播放。
還有一種較為常見(jiàn)的就是H5的展示類頁(yè)面酬核，例如前陣子大火的ofo小黃車的系列設(shè)計(jì)蜜另，他們的H5頁(yè)面結(jié)合了當(dāng)下最熱的3D技術(shù)，將滑動(dòng)頁(yè)面做成3D效果嫡意，沉浸式體驗(yàn)非常強(qiáng)烈举瑰。是平面與3D結(jié)合的一個(gè)很好的嘗試。
banner側(cè)滑
我們經(jīng)常常見(jiàn)的banner側(cè)滑是撐滿左右兩端屏幕或者跟左右間距保持一致的側(cè)滑形式蔬螟，這里我就不過(guò)多介紹了此迅。不太常見(jiàn)的是下圖最左側(cè)的圖文banner，這個(gè)是最上方的今日推薦和圖片下方的七夕禮物推薦指南那一塊文字一起滑動(dòng)的旧巾。這種排列方式的好處是能夠更好的展示圖片和文字信息耸序，兩者之間互不干預(yù)。但是這樣對(duì)圖片質(zhì)量會(huì)要求比較高鲁猩，如果沒(méi)有高質(zhì)量的圖片還是慎用坎怪。
卡片式側(cè)滑
卡片式側(cè)滑分為banner卡片式、圖文卡片式
我們繼續(xù)看上圖的卡片式banner,最上方的大banner廓握，這個(gè)采用了左右banner均小于中間banner大小的圖搅窿，左右都可以滑動(dòng)∠度滑動(dòng)過(guò)程中營(yíng)造出了一種特殊的縱深感男应。文字按照統(tǒng)一的格式排列在不同的圖片上。相比是尔，大小一直的圖片切換更加靈活，有質(zhì)感开仰。
banner卡片式還包括卡片式浮層banner,我們可以看下上圖右一的雪球app首頁(yè)拟枚，這里首先采用了常規(guī)的banner左右兩邊采用常規(guī)間距的形式薪铜。由于產(chǎn)品特性并沒(méi)有使用大部分電商上面大banner，下面大的圖標(biāo)入口的形式恩溅。而是將圖標(biāo)移到上方隔箍，弱化顯示，因?yàn)檠┣蚴穷愃菩侣勵(lì)惖腶pp脚乡，又不能做成類似支付寶那樣的工具類的app蜒滩，將功能入口突出顯示在上方。所以一方面弱化了圖標(biāo)入口奶稠，并在下方采用了卡片式浮層banner俯艰，很好的增加了模塊之間的層次感。
上圖采用了圖文卡片式的形式锌订，例如有道云和華爾街見(jiàn)聞的頁(yè)面竹握。這種形式有時(shí)候會(huì)用于專題歸納入口展示，一個(gè)卡片就相當(dāng)于多個(gè)信息頁(yè)的集合整理辆飘，有時(shí)是為了豐富了信息展示的多樣化啦辐，并且采用右側(cè)滑動(dòng)能更好的展示更多的內(nèi)容。
三蜈项、模塊式側(cè)滑
模塊式側(cè)滑分為列表式側(cè)滑芹关、標(biāo)簽側(cè)滑、導(dǎo)航欄側(cè)滑紧卒、圖標(biāo)側(cè)滑
導(dǎo)航欄側(cè)滑太常見(jiàn)了侥衬，大家也都知道，這里就不多說(shuō)了常侦。
列表式側(cè)滑
列表式側(cè)滑這種形式并不多見(jiàn)浇冰，例如下圖京東金融中的頁(yè)面。不過(guò)如果類似于電商這種需要展示更多產(chǎn)品的情況下聋亡，并且在多屏幕適配允許的情況下可以嘗試使用肘习。
標(biāo)簽側(cè)滑
上圖是之前舉例的雪球app的首頁(yè)，這種標(biāo)簽側(cè)滑的形式的運(yùn)用還是比較多的坡倔，通常運(yùn)用在二級(jí)導(dǎo)航漂佩，方便展示多個(gè)入口。
圖標(biāo)側(cè)滑
上圖是點(diǎn)融APP的發(fā)現(xiàn)頁(yè)面罪塔，最上方用的就是圖標(biāo)側(cè)滑投蝉，這里我專門截取了能看卡到圖標(biāo)的地方，之前的設(shè)計(jì)是看不到右側(cè)的半截圖標(biāo)的征堪，這種設(shè)計(jì)非常不好瘩缆，如果不露出來(lái)一點(diǎn)的話，很多用戶很可能根本不知道能夠側(cè)滑佃蚜，所以我們?cè)谠O(shè)計(jì)的時(shí)候一定要注意這個(gè)細(xì)節(jié)庸娱。
以上是我總結(jié)的一些側(cè)滑交互形式的運(yùn)用場(chǎng)景着绊，一定還有未被總結(jié)進(jìn)去的地方，歡迎大家補(bǔ)充熟尉！謝謝归露！
