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

?

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

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

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

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

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

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

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

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

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

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

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