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

?

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

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

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

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

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

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

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

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

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

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

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