大家在使用移動(dòng)設(shè)備瀏覽內(nèi)容信息的時(shí)候验懊，有沒有思考過一個(gè)問題，為什么絕大部分內(nèi)容都是采用上下滾動(dòng)的展示方式，而非左右滾動(dòng)或兩者結(jié)合攀痊？
我覺得可能既有傳統(tǒng)的瀏覽習(xí)慣的痕跡，也有基于人體工學(xué)的現(xiàn)實(shí)考慮拄显。
在web瀏覽器和web端內(nèi)容展示占主流的時(shí)代苟径，我們在瀏覽一個(gè)web頁內(nèi)容的時(shí)候，最主流的交互方式也是上下滾動(dòng)瀏覽頁面內(nèi)容躬审，這種交互方式由兩個(gè)原因造成：
1. 當(dāng)代人習(xí)慣的瀏覽方式棘街，即文字由左至右，從上到下承边。
在計(jì)算機(jī)屏幕誕生后遭殉，命令行的顯示方式就與當(dāng)代主流的瀏覽方式保持了一致，在萬維網(wǎng)誕生后博助，這種瀏覽方式也被物理映射到了web端险污，一如qwerty鍵盤由古典打字機(jī)直接移植到電腦鍵盤。
這種展示方式造成的直接結(jié)果就是內(nèi)容區(qū)塊寬度保持一致（不能超過一定寬度富岳，以保持視線能夠順利平移至下一行）蛔糯，不建議左右移動(dòng)，以上下滾動(dòng)屏幕來代替書籍和印刷品的翻頁窖式。
2. 輸入設(shè)備鼠標(biāo)中間滾輪強(qiáng)化了這種瀏覽習(xí)慣蚁飒。
鼠標(biāo)中間滾輪的出現(xiàn)，是順應(yīng)為了方便快速上下滾動(dòng)內(nèi)容區(qū)塊而進(jìn)行的輸入設(shè)備功能擴(kuò)展萝喘，即不按壓中間滾輪鍵而上下滾動(dòng)飒箭，效果基本等同內(nèi)容獲取焦點(diǎn)后按下鍵盤的“??”和“??”按鍵狼电，在此功能擴(kuò)展逐漸成為主流交互方式以后，橫向滾動(dòng)的交互方式也就越來越邊緣化了弦蹂。
以上是web端的內(nèi)容瀏覽的交互方式肩碟，當(dāng)我們進(jìn)入到移動(dòng)端設(shè)備時(shí)代時(shí)，這個(gè)習(xí)慣基本上被因襲了凸椿。
移動(dòng)端主要使用上下滾動(dòng)的交互方式削祈，除了從web端直接移植的使用習(xí)慣，還有以下原因：
1. 移動(dòng)端設(shè)備屏幕限制
移動(dòng)端設(shè)備除了pad類主要采用橫屏瀏覽方式外脑漫，基本上都是采用豎屏瀏覽方式髓抑，屏幕物理展示尺寸局限加上豎屏顯示，更加適合于上下滾動(dòng)优幸。
2. 移動(dòng)端設(shè)備操作特性決定固定一個(gè)維度更適合快速翻滾
移動(dòng)端設(shè)備因?yàn)殡娙萜良夹g(shù)的發(fā)展吨拍，已經(jīng)基本放棄了觸控筆，手指直接操作屏幕相比于鼠標(biāo)鍵盤操作電腦屏幕是缺少了一個(gè)懸停狀態(tài)的网杆，由于技術(shù)限制和操作習(xí)慣羹饰，懸停狀態(tài)在移動(dòng)設(shè)備上并沒有實(shí)現(xiàn)，也就是說碳却，在移動(dòng)設(shè)備上要移動(dòng)某個(gè)區(qū)塊队秩，首先要輕觸屏幕并朝向某個(gè)方向快速滾動(dòng)，以讓內(nèi)容區(qū)塊快速獲取焦點(diǎn)并對(duì)熟知的操作產(chǎn)生動(dòng)作反饋昼浦。
所以在移動(dòng)端馍资，用戶輕觸屏幕并滾動(dòng)的這個(gè)行程是不會(huì)完全平行或垂直于于屏幕邊線的，如果屏幕允許橫向和縱向滾動(dòng)关噪，則用戶很容易丟失焦點(diǎn)鸟蟹，所以移動(dòng)端的操作特性決定了移動(dòng)端的內(nèi)容最好固定一個(gè)維度并支持另一個(gè)維度。
當(dāng)然上下滾動(dòng)瀏覽只是普通的內(nèi)容瀏覽方式使兔，某些情況下戏锹，我們要允許內(nèi)容橫向滾動(dòng)，而且移動(dòng)端在進(jìn)行橫向滾動(dòng)操作時(shí)火诸，便利性要明顯優(yōu)于web端锦针。
這幾種情況包括：
1. 不想讓內(nèi)容在縱向空間上占據(jù)更多面積或首屏黃金位置。
比如某些促銷版塊或者優(yōu)惠券領(lǐng)取版塊置蜀，我們想要節(jié)省寸土寸金的首屏黃金位置但同時(shí)又要給這些版塊一定的展示機(jī)會(huì)奈搜，那么這些情況下可以允許這些板塊橫向滾動(dòng)。
2. 快速切換banner展示
移動(dòng)端的滾動(dòng)Banner展示一般都允許用戶使用橫向輕滑功能快速瀏覽盯荤。（當(dāng)然有些設(shè)計(jì)師認(rèn)為滾動(dòng)和輕滑本身是兩種不同的交互形式馋吗，我這里僅列出供參考）
3. 卡片展示
卡片展示和Banner展示的交互方式基本一致。
但在允許內(nèi)容橫向滾動(dòng)和縱向滾動(dòng)的頁面上秋秤，還要注意以下幾點(diǎn)：
1. 除了地圖和放大顯示圖片等特殊場景宏粤，一般不要讓某個(gè)版塊同時(shí)支持兩個(gè)維度的滾動(dòng)脚翘。
2. 在豎向滾動(dòng)占主要交互方式的頁面上，不要讓橫向滾動(dòng)的版塊面積過大绍哎。
這主要是由于我見到太多的支持橫向滾動(dòng)的頁面来农，因?yàn)槟承┌鎵K支持橫向滾動(dòng)而嚴(yán)重影響了上下滾動(dòng)的使用體驗(yàn)，另外大面積的橫向滾動(dòng)會(huì)造成使用體驗(yàn)下降嚴(yán)重崇堰。
比較嚴(yán)重的表現(xiàn)形式如知乎的“我的”沃于，連續(xù)的橫向操作模塊嚴(yán)重干擾了上下滾動(dòng)操作，單手操作時(shí)
3. 橫向滾動(dòng)的內(nèi)容要有設(shè)計(jì)隱喻海诲，暗示用戶此版塊是橫向滾動(dòng)交互方式繁莹，增加操作方式可發(fā)現(xiàn)性。
曾經(jīng)見過有些橫向滾動(dòng)的版塊特幔，因?yàn)闆]有足夠的設(shè)計(jì)隱喻咨演，導(dǎo)致用戶完全忽略了還有后續(xù)內(nèi)容，從而妨礙了更多內(nèi)容的展示機(jī)會(huì)蚯斯。所以不管是截?cái)喔鄡?nèi)容只展示部分薄风，還是增加小圓點(diǎn)或滾動(dòng)條，一定要讓用戶清楚地知道：后面還有更多哦溉跃。
總體來說村刨，移動(dòng)設(shè)備的上下滾動(dòng)交互方式加上緩動(dòng)效果告抄，真的是一種非常舒爽的操作體驗(yàn)撰茎，如果可能，盡量多使用上下滾動(dòng)打洼，讓瀏覽體驗(yàn)飛起吧龄糊。
