ui設(shè)計里怎么制作橫滑

ui設(shè)計里怎么制作橫滑

ui設(shè)計里怎么制作橫滑？移動端屏幕越來越大，但用戶對內(nèi)容量的要求也水漲船高。如何在有限的屏幕內(nèi)透出更多的內(nèi)容，是設(shè)計師們研究的重點。今天小編主要給大家分享ui設(shè)計里怎么制作橫滑，希望對你們有幫助!

1.挑選合適的使用場景

單頁多維度信息結(jié)構(gòu)是“左右橫滑”最合適的應(yīng)用場景，傳統(tǒng)列表List適用垂直無限地呈現(xiàn)具有單一屬性的內(nèi)容(如朋友圈或知乎的答案)，而對于具有多個信息聚合的頁面，如app，則適用橫向開拓內(nèi)容維度。

以最新版本的Airbnb為例，它將首頁分為幾個維度，如 Banner、流行體驗、體驗、住房供應(yīng)和旅游目的地選擇。每個維度分別占據(jù)一整行，并顯示并列內(nèi)容。再次查看iOS應(yīng)用商店，它還將頁面分成許多維度，并在不同類別中呈現(xiàn)不同的應(yīng)用。設(shè)計師們生動地稱這種設(shè)計為“泳道”。

可以看出，Airbnb和iOS應(yīng)用商店的整個頁面都是由“泳道”組成的，雖然有X和Y瀏覽方向，但瀏覽起來并不困難。然而，更復雜的場景是在Y方向列表中使用“左右橫滑”。

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

從信息優(yōu)先級可以看出，每個泳道的“主題”非常重要。一般來說，橫向的每個小卡片面積不會太大，所以不可能既展示自身信息，又告知整個泳道的主題。

3.引導左右滑動(可見性)

有許多引導方法，最常見的三種方法是:在左右側(cè)添加一個引導箭頭，在底部添加一個指示器，后續(xù)內(nèi)容漏一部分。

無論如何，必須有一個明顯的標志告訴用戶以下內(nèi)容可以左右滑動，特別是，當你的用戶受眾面非常廣時(電子商務(wù)、新聞閱讀等)，年齡大的用戶可能不像設(shè)計師和產(chǎn)品經(jīng)理那樣熟悉“左右橫滑”交互，這將間接導致這種方法的效率下降。

4.控制數(shù)量避免極限情況

左右滑動的內(nèi)容是不是無限?當然不是。根據(jù)我的經(jīng)驗，一般來說5-10張卡片更好，卡片太少會導致與用戶的期望不一致，一滑就見底;但是，如果太多，最好引導用戶訪問更詳細的主題頁面并顯示更多相關(guān)信息。

需要注意的是，如果你不能控制一個主題的卡片數(shù)量，就必須從設(shè)計上做好后備方案。