<kbd id="47b9gp2n"></kbd><address id="47b9gp2n"><style id="47b9gp2n"></style></address><button id="47b9gp2n"></button>

              <kbd id="o47jjvu5"></kbd><address id="o47jjvu5"><style id="o47jjvu5"></style></address><button id="o47jjvu5"></button>

                      <kbd id="0b2wypnd"></kbd><address id="0b2wypnd"><style id="0b2wypnd"></style></address><button id="0b2wypnd"></button>

                              <kbd id="851p0jb9"></kbd><address id="851p0jb9"><style id="851p0jb9"></style></address><button id="851p0jb9"></button>

                                      <kbd id="4hc79lif"></kbd><address id="4hc79lif"><style id="4hc79lif"></style></address><button id="4hc79lif"></button>

                                              <kbd id="csyh2hqe"></kbd><address id="csyh2hqe"><style id="csyh2hqe"></style></address><button id="csyh2hqe"></button>

                                                      <kbd id="x8mr748z"></kbd><address id="x8mr748z"><style id="x8mr748z"></style></address><button id="x8mr748z"></button>

                                                              <kbd id="qbufe6wf"></kbd><address id="qbufe6wf"><style id="qbufe6wf"></style></address><button id="qbufe6wf"></button>

                                                                      <kbd id="g5yfykkf"></kbd><address id="g5yfykkf"><style id="g5yfykkf"></style></address><button id="g5yfykkf"></button>

                                                                              <kbd id="m3kr6xbq"></kbd><address id="m3kr6xbq"><style id="m3kr6xbq"></style></address><button id="m3kr6xbq"></button>

                                                                                  澳门赌博网

                                                                                  head

                                                                                  澳门赌博网電話027-87055266

                                                                                  UI教程

                                                                                  正规赌博网站:UI滾動交互巧妙運用

                                                                                  作者:澳门赌博网       日期:2019-05-16

                                                                                  你在設計中使用過幾種滾動交互呢 ?其中巧妙運用的有多少 ?接下來我爲大家分析三種不同的滾動交互,並告訴大家他們使用的場景以及規則 。我希望這些可以在實際工作中 ,幫助你構建設計。

                                                                                   

                                                                                  規則1:次只在一個軸上交互滾動

                                                                                  通常 ,該軸是垂直或水平的。垂直滾動是現在app的主流交互形式 ,水平滾動可以有效的利用信息空間 ,顯示更多的內容。但是,如果將滾動手勢應用於多個軸,則會打破邊界。

                                                                                   

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

                                                                                   

                                                                                  小貼士

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

                                                                                   

                                                                                  嵌套式滾動,我們可能無法改變單軸的規則,但是我們可以讓他錯位 。將滾動交互擴展到單個軸之外的最穩定的方法是合併滾動組。滾動組允許您同時將垂直和水平滾動手勢應用於單個對象 。

                                                                                   

                                                                                  實際上,嵌套的功能是將兩個獨立對象的滾動交互應用於第三個對象 。下面的案例結構允許“水果”組與“蔬菜”組分別進行滾動 ,下方接收來自兩個滾動交互的手勢 。

                                                                                  實質上 ,嵌套滾動使用父子級轉換來繞過規則#1 。在上面的例子中 ,'水果'組垂直滾動 ,而父級'水果蔬菜'組水平滾動 。如果兩個組以相同的方向滾動 ,比如說垂直方向 ,那麼這兩個組合就會發生衝突。系統將無法將區分手勢 。這就是我要講的滾動交互的第二條規則 。

                                                                                   

                                                                                  規則2:一個元素上不用兩個同向滾動

                                                                                  複合滾動不是專注於實際的滾動交互 ,而是將該交互擴展到設計的其餘部分。

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

                                                                                   

                                                                                  看看另一個例子(右)。同樣的動態正在發生 ,但相反 。鞋子圖標位於嵌套滾動組中 ,而鞋子描述不是  。你可以看到交互不像左邊那樣平滑,並且需要更大的手勢來激活交互。我可以告訴你,這種特殊的互動經常發生。發生什麼時滾動交互不會觸發手動動畫 ?假設鞋子出現的觸發器是從0px-66px的滾動位置。如果我以某種方式從5px-66px滾動 ,那麼手動動畫不會觸發。

                                                                                   

                                                                                  規則3:不要做太多滾動交互

                                                                                  主動操作 ,那麼滾動與滑動的區別是什麼呢 ?是主動操作 。滑動開始並結束  。滾動始終處於活動狀態。以前的設計大量使用分頁滾動來消除這種活躍的動作。下一個設計 ,試圖突出它。

                                                                                   

                                                                                  重新設計了Medium中的交互體驗 ,將所有的類別內容包含在卷軸抽屜中。您可以下拉打開抽屜 ,或將其收起 ,保留信息空間。

                                                                                   

                                                                                  我很喜歡這種設計,但是你可能注意到他已經違反了第二條規則。用於打開抽屜的垂直滾動位於主內容的頂部 。有時當我向下滾動時 ,手勢打破了內容的邊界,導致抽屜自發地打開 。

                                                                                  相關文章

                                                                                  Copyright 2015 版权所有:澳门赌博网 鄂ICP備09005391號

                                                                                  本站內容請勿轉載,違者必究!