橫向滑動歷史
2005年，全國范圍的web可用性報(bào)告里都陳述了：網(wǎng)頁設(shè)計(jì)中盡量不要試喲過橫向滾動喻奥。這是由于這種斜向一邊的交互方式讓用戶迷惑停撞。他并沒有遵從網(wǎng)頁設(shè)計(jì)易用性的標(biāo)準(zhǔn)攻询。
這個趨勢是怎么改變的呢低葫？
隨著近幾年像iPads這樣技術(shù)的出現(xiàn)以及智能手機(jī)的普及详羡。在移動設(shè)備上，滑動交互更加直觀嘿悬，簡單的一個手指掃動全部站點(diǎn)內(nèi)的信息就展現(xiàn)在用戶面前啦实柠。同時，很快這個交互方式就會普及到每個人善涨，就像現(xiàn)在可能一打開app就下意識縱向滑動窒盐。接下來呢，作為設(shè)計(jì)師钢拧，我們怎么樣讓橫向滑動更直觀呢蟹漓。我在設(shè)計(jì)中總結(jié)了一些小建議：
1.仔細(xì)規(guī)劃-再適合的地方出現(xiàn)適合的功能：Careful planning?—?Figure out what fits where
好吧，這個在建議列表中并不是那個讓人眼前一亮的源内，但他是最重要的葡粒。
我們學(xué)習(xí)設(shè)計(jì)的第一件事是關(guān)于規(guī)劃。但是面對時間緊湊膜钓、臨近交稿日期或者自己懶惰了就會導(dǎo)致我們沒有任何規(guī)劃的設(shè)計(jì)嗽交。但是，在設(shè)計(jì)橫向滑動時颂斜，一定要騰出時間做規(guī)劃夫壁，在紙上畫原型，找到適合這種交互的時機(jī)和地方沃疮。有很多事情需要考慮盒让，因?yàn)橹安]有太多的設(shè)計(jì)師用過這種交互，在橫向滑動傾注心血要比在縱向多得多司蔬。
2.在特殊情況下使用橫向滑動：Use horizontal scroll in specific cases
如果你想展示某個類別下的子集邑茄，橫向滑動非常適合。向下面幾種情況適合橫向滑動的使用情景：
a.展示龐大的產(chǎn)品目錄俊啼，保證不同種類的產(chǎn)品快速呈現(xiàn)
b.展示那種可視區(qū)域很大撩扒，一瞥不能看圈的信息（比如地圖）
c.展示app上明確的分區(qū)或者滑屏
3.可視化：Show visually
橫向站點(diǎn)對于用戶來說，不如他們常見的縱向站點(diǎn)直觀吨些。所以搓谆，桌面端用鼠標(biāo)指針或者點(diǎn)來引領(lǐng)視線。即使對于設(shè)計(jì)師來說豪墅，點(diǎn)擊后就會知道接下來發(fā)生什么泉手，但是對于用戶來說更希望得到除指針以外的提示。雖然指針在桌面端很好用偶器，但是移動端是效果卻不好斩萌，因?yàn)橐苿佣私换ナ绞怯|碰而不是鼠標(biāo)單擊缝裤。
所以針對移動端，你要做些差異化設(shè)計(jì)颊郎。你的設(shè)計(jì)必須包含視覺暗示讓用戶知道哪一系列的內(nèi)容是可以橫向滑動的憋飞。最好的辦法是讓一部分內(nèi)容peek out
4.列表結(jié)束位置極端的暗示： Indicate extremes of a list
告訴用戶哪里是滾動的結(jié)束點(diǎn)是很重要滴。我們常常會注意到姆吭，用戶反復(fù)的滾動榛做，以為他們不確定之前的操作是否已經(jīng)滾動到盡頭了。
a.干凈的動效内狸，能夠幫助用戶意識到已經(jīng)到達(dá)列表結(jié)束處
b.另一種方法是通過間隙
橫向滑動的優(yōu)點(diǎn)：
1.幾乎能夠100%適配到所有設(shè)備检眯，保持了一致性
2.為二級信息提供了展示空間，并且不占用頁面空間昆淡。比如在圖片畫廊里的圖片锰瘸，橫向滑動可以讓用戶預(yù)覽內(nèi)容，可以劃過或者點(diǎn)擊查看昂灵。
3.橫向滑動節(jié)約了縱向屏幕空間避凝。而不是將所有內(nèi)容都展示在一個很長的頁面≌２梗縱向布局讓所有的信息都成小塊展示管削。但是橫向滑動更加靈活。現(xiàn)在渤涌，內(nèi)容可以在橫向和縱向兩個方向同時展示佩谣。
4.橫向滑動可以讓用戶預(yù)知分類里的內(nèi)容把还，通過往一邊滑实蓬、向下滑，差不不同類別的內(nèi)容吊履。兩個維度讓用戶可以在同一個界面中看到更多的類別和選擇安皱。
結(jié)論：
網(wǎng)上現(xiàn)在有很多針對橫向滑動和它對用戶體驗(yàn)的影響的討論。但是我相信艇炎，如果這種交互方式被廣泛的應(yīng)用的話可以節(jié)省手機(jī)屏縱向的空間酌伊，有助于app內(nèi)容的劃分。
