你在設(shè)計(jì)中使用過幾種滾動交互呢否纬？其中巧妙運(yùn)用的有多少慈格？
接下來我為大家分析三種不同的滾動交互怠晴，并告訴大家他們使用的場景以及規(guī)則。我希望這些可以在實(shí)際工作中浴捆，幫助你構(gòu)建設(shè)計(jì)蒜田。
基礎(chǔ)
眾所周知，應(yīng)用滾動交互時有一條總體規(guī)則选泻。
規(guī)則1
你一次只能在一個軸上應(yīng)用滾動交互冲粤。
通常美莫，該軸是垂直或水平的。垂直滾動是現(xiàn)在app的主流交互形式梯捕，水平滾動可以有效的利用信息空間厢呵，顯示更多的內(nèi)容。但是傀顾，如果將滾動手勢應(yīng)用于多個軸襟铭，則會打破邊界。
上面的例子（紅色方塊）顯示了一個能夠垂直和水平滾動的對象短曾。它成為一個自由形式的對象寒砖，比起滾動交互的說法，他應(yīng)該被稱為拖動交互嫉拐。
小貼士
自由形式對象的滾動也是一個常見的交互入撒。比如我們常用的手機(jī)地圖，這里我們不做過多延展椭岩。今天的主題是如何整合和擴(kuò)展更傳統(tǒng)的滾動手勢茅逮。向上/向下，左右判哥。
嵌套式滾動
我們可能無法改變單軸的規(guī)則献雅，但是我們可以讓他錯位。將滾動交互擴(kuò)展到單個軸之外的最穩(wěn)定的方法是合并滾動組塌计。滾動組允許您同時將垂直和水平滾動手勢應(yīng)用于單個對象挺身。
實(shí)際上，嵌套的功能是將兩個獨(dú)立對象的滾動交互應(yīng)用于第三個對象锌仅。下面的案例結(jié)構(gòu)允許“水果”組與“蔬菜”組分別進(jìn)行滾動章钾，下方接收來自兩個滾動交互的手勢。
實(shí)質(zhì)上热芹，嵌套滾動使用父子級轉(zhuǎn)換來繞過規(guī)則＃1贱傀。在上面的例子中，'水果'組垂直滾動伊脓，而父級'水果蔬菜'組水平滾動府寒。如果兩個組以相同的方向滾動，比如說垂直方向报腔，那么這兩個組合就會發(fā)生沖突株搔。系統(tǒng)將無法將區(qū)分手勢。這就是我要講的滾動交互的第二條規(guī)則纯蛾。
規(guī)則2
您無法將相同軸的兩個滾動交互應(yīng)用于同一個對象上纤房。
復(fù)合滾動
復(fù)合滾動不是專注于實(shí)際的滾動交互，而是將該交互擴(kuò)展到設(shè)計(jì)的其余部分翻诉。
他涉及到動畫停止時炮姨，滾動交互的位置捌刮。在底部示例（左）中，嵌套滾動組允許您滾動瀏覽不同的鞋子剑令，并滾動瀏覽每只鞋子的描述。鞋的縮略圖隨著卷軸滾動拄查。我將鞋子縮略圖設(shè)置在特定滾動位置吁津。這樣一個手勢控制著幾個不同的設(shè)計(jì)。
看看另一個例子（右）堕扶。同樣的動態(tài)正在發(fā)生碍脏，但相反。鞋子圖標(biāo)位于嵌套滾動組中稍算，而鞋子描述不是典尾。你可以看到交互不像左邊那樣平滑，并且需要更大的手勢來激活交互糊探。我可以告訴你钾埂，這種特殊的互動經(jīng)常發(fā)生。發(fā)生什么時滾動交互不會觸發(fā)手動動畫科平？假設(shè)鞋子出現(xiàn)的觸發(fā)器是從0px-66px的滾動位置褥紫。如果我以某種方式從5px-66px滾動，那么手動動畫不會觸發(fā)瞪慧。
規(guī)則＃3
不要做太多滾動交互髓考。
主動操作
那么滾動與滑動的區(qū)別是什么呢？是主動操作弃酌“惫剑滑動開始并結(jié)束。滾動始終處于活動狀態(tài)妓湘。以前的設(shè)計(jì)大量使用分頁滾動來消除這種活躍的動作查蓉。下一個設(shè)計(jì)，我試圖突出它榜贴。
我重新設(shè)計(jì)了Medium中的交互體驗(yàn)奶是，將所有的類別內(nèi)容包含在卷軸抽屜中。您可以下拉打開抽屜竣灌，或?qū)⑵涫掌鹉羯常Ａ粜畔⒖臻g。
我很喜歡這種設(shè)計(jì)初嘹，但是你可能注意到他已經(jīng)違反了第二條規(guī)則及汉。用于打開抽屜的垂直滾動位于主內(nèi)容的頂部。有時當(dāng)我向下滾動時屯烦，手勢打破了內(nèi)容的邊界坷随，導(dǎo)致抽屜自發(fā)地打開房铭。
規(guī)則2修改
您無法將同一軸上的同一方向上的兩個滾動交互應(yīng)用到一個對象上。：d
希望這些規(guī)則會幫助我們更好的工作温眉，而不是禁錮缸匪。
如果你喜歡這篇文章，一定要關(guān)注我类溢。
本文翻譯來自Medium,原文鏈接https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716
更多UI設(shè)計(jì)技巧凌蔬，歡迎來簡書關(guān)注我
