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

?

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

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

　　而當網站的圖片過多時，為確保圖片的可讀性，圖片的尺寸不能太小，縱向展示只能用較多的頁面空間，也不利于視覺上的美觀，因此，大部分手機網站建設者會使用橫向滑動的設計方式。今天小編就給大家講講橫向滑動的設計有哪些問題需要注意。

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

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

　　橫向滑動設計的內容以卡片式設計為主，利用卡片式設計多層次展示核心內容，有效整合內容的優勢，讓內容展示更清晰、有條理。

　　這里要注意卡片的尺寸，在保證內容的可讀性情況下，設計一個合理的尺寸，使板塊內容具有引導性，即一屏以內，卡片的可見數量是兩個板，有一個卡片的內容是半隱藏的，以此引導用戶左右滑動查看內容。這也能保證上下模塊可預見性，引導用戶縱向滑動瀏覽。

　　做內容的視覺引導，還要注意卡片內容文案的表達要簡潔明了，要清晰告知用戶內容。

　　手機網站建設使用橫向滑動設計展示內容，還要注意內容的數量，適當即可，過多的內容展示難免會有重復，容易讓用戶覺得無聊，太少的內容不能滿足用戶強需求，也顯得橫向滑動設計很多余。

　　橫向滑動設計在手機網站中的很多版塊都能使用，但是一個頁面內不能都是用這種設計，不然會顯得單調、沒有特色。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.webpost.com.cn/4032.html