你在設(shè)計中使用過幾種滾動交互呢？其中巧妙運用的有多少？

接下來我為大家分析三種不同的滾動交互，并告訴大家他們使用的場景以及規(guī)則。我希望這些可以在實際工作中，幫助你構(gòu)建設(shè)計。

基礎(chǔ)

眾所周知，應(yīng)用滾動交互時有一條總體規(guī)則。

規(guī)則1

你一次只能在一個軸上應(yīng)用滾動交互。

通常，該軸是垂直或水平的。垂直滾動是現(xiàn)在app的主流交互形式，水平滾動可以有效的利用信息空間，顯示更多的內(nèi)容。但是，如果將滾動手勢應(yīng)用于多個軸，則會打破邊界。

上面的例子（紅色方塊）顯示了一個能夠垂直和水平滾動的對象。它成為一個自由形式的對象，比起滾動交互的說法，他應(yīng)該被稱為拖動交互。

小貼士

自由形式對象的滾動也是一個常見的交互。比如我們常用的手機地圖，這里我們不做過多延展。今天的主題是如何整合和擴展更傳統(tǒng)的滾動手勢。向上/向下，左右。

嵌套式滾動

我們可能無法改變單軸的規(guī)則，但是我們可以讓他錯位。將滾動交互擴展到單個軸之外的最穩(wěn)定的方法是合并滾動組。滾動組允許您同時將垂直和水平滾動手勢應(yīng)用于單個對象。

實際上，嵌套的功能是將兩個獨立對象的滾動交互應(yīng)用于第三個對象。下面的案例結(jié)構(gòu)允許“水果”組與“蔬菜”組分別進行滾動，下方接收來自兩個滾動交互的手勢。

實質(zhì)上，嵌套滾動使用父子級轉(zhuǎn)換來繞過規(guī)則＃1。在上面的例子中，'水果'組垂直滾動，而父級'水果蔬菜'組水平滾動。如果兩個組以相同的方向滾動，比如說垂直方向，那么這兩個組合就會發(fā)生沖突。系統(tǒng)將無法將區(qū)分手勢。這就是我要講的滾動交互的第二條規(guī)則。

規(guī)則2

您無法將相同軸的兩個滾動交互應(yīng)用于同一個對象上。

復(fù)合滾動

復(fù)合滾動不是專注于實際的滾動交互，而是將該交互擴展到設(shè)計的其余部分。

他涉及到動畫停止時，滾動交互的位置。在底部示例（左）中，嵌套滾動組允許您滾動瀏覽不同的鞋子，并滾動瀏覽每只鞋子的描述。鞋的縮略圖隨著卷軸滾動。我將鞋子縮略圖設(shè)置在特定滾動位置。這樣一個手勢控制著幾個不同的設(shè)計。

看看另一個例子（右）。同樣的動態(tài)正在發(fā)生，但相反。鞋子圖標位于嵌套滾動組中，而鞋子描述不是。你可以看到交互不像左邊那樣平滑，并且需要更大的手勢來激活交互。我可以告訴你，這種特殊的互動經(jīng)常發(fā)生。發(fā)生什么時滾動交互不會觸發(fā)手動動畫？假設(shè)鞋子出現(xiàn)的觸發(fā)器是從0px-66px的滾動位置。如果我以某種方式從5px-66px滾動，那么手動動畫不會觸發(fā)。

規(guī)則＃3

不要做太多滾動交互。

主動操作

那么滾動與滑動的區(qū)別是什么呢？是主動操作?；瑒娱_始并結(jié)束。滾動始終處于活動狀態(tài)。以前的設(shè)計大量使用分頁滾動來消除這種活躍的動作。下一個設(shè)計，我試圖突出它。

我重新設(shè)計了Medium中的交互體驗，將所有的類別內(nèi)容包含在卷軸抽屜中。您可以下拉打開抽屜，或?qū)⑵涫掌穑Ａ粜畔⒖臻g。

我很喜歡這種設(shè)計，但是你可能注意到他已經(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è)計技巧，歡迎來簡書關(guān)注我