在APP開發設計中，為什麼APP開發公司要慎用左右橫滑設計？

標籤：移動端   標題   情境   點擊率   部分   可見   開發app   錯誤   產品   

 

移動端螢幕越來越大，但使用者對內容量的要求也水漲船高。如何在有限的螢幕內透出更多的內容，是設計師們研究的重點。

常用的內容拓展設計有：Y 方向 List 滑動、Z 方向 3D Touch 、入口式內容摺疊等。今天想和大家聊的，是其中的“左右橫滑”卡片式互動設計。

所謂的“左右橫滑”最早可能起源於 Windows Phone 的橫向內容滑動設計。用於在同一個頁面的 X 軸方向拓展內容空間，“左右橫滑”的互動方式被廣泛應用於各類 App 中。

設計師們很形象地把這種設計稱為“泳道”。

不過，凡事都有兩面性。當“左右橫滑”的互動把更多內容塞到了頁面中時，也產生了諸如可見度差、優先順序混亂、內容不突出等體驗風險。因此，在使用這種設計時必須有所準備，確保它發揮出最大的效用。

接下來，就讓常州開發APP公司紫竹雲科技把他們自己設計中遇到的一些“心得”和“坑”分享給大家。

 

1.挑選合適的使用情境

       單頁多維度資訊結構是“左右橫滑”最適合的應用情境。傳統的 List 適合縱向無限呈現單一屬性的內容（比如朋友圈或知乎的回答），而對於 App 首頁等多種資訊彙總的頁面，就適合橫向開拓內容維度。

      以最新版的 Airbnb 為例，它將首頁分割為 Banner、熱門體驗、體驗、房源、旅遊目的地精選等多個維度，每個維度單獨佔據一整行，並展現並列的內容。再看 iOS App Store，也是將頁面分為諸多維度，把不同的應用分類呈現。

       可以看到，Airbnb 和 iOS App Store 整個頁面的重心都是利用“泳道”構成的，雖然存在 X、Y 兩個瀏覽方向，但瀏覽起來並不困難。不過，更複雜的情境是在一個 Y 方向 List 列表中穿插使用“左右橫滑”，這時，會有比較多的坑。

 

2.顯眼並適宜的主題展示

       從資訊優先順序上能看到，每個泳道的“主題”非常重要。通常，橫向每個小卡片的面積不會太大，所以不可能既展示自身資訊，又告知整個泳道的主題。

為此，必須有非常強的視覺資訊總領整個泳道。最常見的做法，是在泳道上方設定顯眼的“標題”。

        最近還常見到比較誇張的做法，是直接在泳道最左端給一個強內容氛圍。以左側的 App 舊版頁面為例，圖片+文字氛圍的做法雖然極大強調了主題，但卻也極大浪費了展現效率，違背了內容優先的原則，效果並不好。

 

3.引導左右滑動（可見度）

       引導的方式有很多，最常見的三種做法分別是：左右加引導箭頭、底部加指標、後續內容漏一部分。

      但不管怎麼樣，必須要有明顯的標誌告訴使用者下面的內容是可以左右滑動的。尤其，當你的使用者受眾面非常廣（普通電商、新聞閱讀等）時，年齡較大的小白使用者未必像設計師和產品經理們對“左右橫滑”的互動這麼熟悉，這也會間接導致這種方式的效率下降。

 

4.控制數量並避免極限情況

 

左右滑動的內容是不是可以放無限個？當然不是。根據我的經驗，一般5-10個卡片為佳，過少會導致與使用者期待不符，一滑就見底；而過多則不如引導使用者去更詳細的主題頁面，展示更多相關資訊。

需要注意的是，如果你沒有辦法強控一個主題下的卡片數量，就必須從設計上做好後備方案。

       說到“查看全部”，一般也要求必須出現在泳道當中。呈現上，有直接點擊標題或標題後跟著入口的方式來引導，而更多的，也有當滑動到卡片最後一張時才露出“查看全部”，為那些看到最後還意猶未盡的使用者一個出口。

5.低效率和錯誤的優先順序

 

       設計師們都喜歡“左右橫滑”的設計，不僅因為資訊密度大，頁面層次好梳理，更多也是因為操作方式“酷”。但有經驗的設計師會儘可能拒絕“左右橫滑”，因為它的效率還是太低。而效率低，體現在兩個方面：

      首先，就像上面說過的，更多的小白使用者對左右滑動的預期並不強，還是更加適應縱向滑動的傳統互動方式。

      其次，縱向和橫向優先順序常常導致預期錯誤。以 App Store 為例，所謂的內容都是 App，泳道只是用不同的維度把 App 組織起來。

      那麼請問，是“本周新遊”中排在第二頁的某個 App 優先順序更高，還是“新鮮 App”甚至“外表有格調”中的前幾個應用優先順序更高呢？

      如果你要購買其中一個資源位，你要更高優先順序“泳道”中的第二屏位置，還是低優先順序“泳道”中的第一屏位置呢？

     答案當然是首屏就能看到的資訊優先順序更高，資料上也會有更高的點擊率和曝光率。但實際上，這與很多設計師和產品經理的預期不符，他們只關注把高優先順序的東西往上提，卻疏忽了左右滑動的互動方式觸發率非常低。

綜上所述，希望對大家使用“左右橫滑”這種形式的互動方案時，有一些協助。 

     轉載請註明：本文來自常州開發APP公司http://www.czwew.com/project/紫竹雲科技！

 

在APP開發設計中，為什麼APP開發公司要慎用左右橫滑設計？