原文鏈接：Best Practices for Horizontal Lists in Mobile
原文作者：Suleiman Ali Shakir
現(xiàn)在的內(nèi)容太豐富了，許多app中都加入了Horizontal list來(lái)增加內(nèi)容的曝光率，減少用戶到達(dá)內(nèi)容的路徑長(zhǎng)度，這很不錯(cuò)，我也很喜歡去水平滑動(dòng)一下來(lái)看更多的內(nèi)容，看起來(lái)是更加地自由了。但是對(duì)Horizontal list中的一些設(shè)計(jì)要點(diǎn)是否有過(guò)探究呢？文章作者通過(guò)7個(gè)要點(diǎn)來(lái)闡述如何設(shè)計(jì)優(yōu)秀的Horizontal list。同樣也指出了Horizontal list的缺點(diǎn)，并且探索了一些適用的替代方法。如果你也正在嘗試通過(guò)Horizontal來(lái)改善feed流內(nèi)容結(jié)構(gòu)，不妨去原文中看看作者的思路。:)
許多的Android和iOS應(yīng)用都添加了horizontal scrolling lists。它可能結(jié)合進(jìn)vertical lists來(lái)使用。那么它是否必要呢？假設(shè)它是合理的，你又是否正確的運(yùn)用了它？
在這篇文章中，我們會(huì)討論一些horizontal lists的設(shè)計(jì)要點(diǎn)。然后再去探索一些更有效的替代方法。
那那么我們來(lái)想想，為什么移動(dòng)端會(huì)出現(xiàn) horzontal lists？
horizontal lists更適合在移動(dòng)端，它支持橫向和豎向的手勢(shì)。
現(xiàn)在，包括你和我在內(nèi)的大多數(shù)人，都會(huì)豎著滑動(dòng)。這是當(dāng)你打開(kāi)app后，很自然會(huì)做的第一件事。可能你第一時(shí)間會(huì)查看通知，但是之后你還是會(huì)去滑動(dòng)。
那么，你如何告訴用戶他們可以橫向滑動(dòng)？在這之前還請(qǐng)思考，什么場(chǎng)合適合使用橫向滑動(dòng)？
Horizontal lists最適合的場(chǎng)景是，你希望在不均勻的列表中，去展示均勻的子內(nèi)容。
怎么去理解呢？
讓我們來(lái)看看Android上的Play Store。在Play Store中你可以發(fā)現(xiàn)新的app。但是為了讓搜索的效果更好，apps需要被分類。
舉個(gè)例子，你可以將apps分為游戲，工具，社交等等。因此，每一類的apps都可以被放在一個(gè)horizontal list中。
像你看到的一樣，Play Store給了我們各種各樣的apps。也有一堆你可以橫向?yàn)g覽的推薦應(yīng)用。這里有一組應(yīng)用是“New+Updated”。
所以根據(jù)上面的定義，每個(gè)子類別的app都放在一個(gè)horizontal list中。而這些子類別都在同一個(gè)垂直列表中。
你可以橫向去滑動(dòng)，查看更多的子類別內(nèi)容。你可以垂直滑動(dòng)查看其他的子類別。
在iOS上的iTunes就是另一個(gè)很好的例子。
移動(dòng)端Horizontal lists設(shè)計(jì)要點(diǎn)
在web端上，箭頭可以提示這里有Horizontal list可以進(jìn)行操作。典型的例子就是carousel。它結(jié)合了箭頭導(dǎo)航，指示點(diǎn)和滾動(dòng)條。這些標(biāo)識(shí)都在告訴人們?nèi)绾尾僮鱟arousel。
好吧，我們來(lái)說(shuō)說(shuō)移動(dòng)端。我向你展示web端的形態(tài)是有原因的。
你看到了web的版本，你不能在移動(dòng)端也這樣設(shè)計(jì)。移動(dòng)端是基于觸屏手勢(shì)的。你會(huì)在移動(dòng)端使用鼠標(biāo)箭頭的操作嗎？
此外，考慮到移動(dòng)端的尺寸，使用web端的設(shè)計(jì)范例也沒(méi)有意義。所以應(yīng)該去挖掘一種更好的方法。希望用戶可以向在vertical list中那樣流暢。
這里有一些需要去記住的設(shè)計(jì)要點(diǎn)。它們可以幫助你完成更好的，更有效的horizontal lists。
1.展示視覺(jué)提示
假設(shè)你正在設(shè)計(jì)卡片的horizontal list。你希望在最右邊的一張卡片也能夠被選擇。
那么設(shè)計(jì)中必須留下可視化的提示，讓用戶知道這一組內(nèi)容可以水平滑動(dòng)。
對(duì)于特殊寬度的設(shè)備，我們可以顯示兩張卡片，如果要查看第三張或更多，那就需要水平滑動(dòng)。
注意看，設(shè)計(jì)可以簡(jiǎn)化第三張卡片。最末端的粉紅色卡片是部分隱藏的。這是一個(gè)微妙的暗示，這里還有更多的內(nèi)容。
由于內(nèi)容是水平的，所以它很自然的暗示了用戶在哪一個(gè)方向滾動(dòng)。因此，用戶本能的也會(huì)向這個(gè)方向滾動(dòng)。
2.使用“查看更多”的按鈕
查看更多，顯示更多，查看全部，顯示全部...
將你想要的東西命名為按鈕。從本質(zhì)上而言，這意味著：
一個(gè)“查看更多”的按鈕告訴用戶更多的信息來(lái)自哪里。它暗示了有更多類似的內(nèi)容可以查看。
請(qǐng)記住，每個(gè)子類別（horizontal list），就是對(duì)用戶期望內(nèi)容的梳理。
所以當(dāng)一個(gè)用戶點(diǎn)擊“查看更多”的時(shí)候，你要向他們展示這個(gè)子類別的所有內(nèi)容。例如，假設(shè)用戶點(diǎn)擊了Play Store中的“熱門(mén)動(dòng)作游戲”，那么“查看更多”就應(yīng)該顯示這個(gè)子類別中所有的優(yōu)秀動(dòng)作游戲。
記住，垂直滾動(dòng)是最自然和最快速的。垂直滾動(dòng)讓用戶瀏覽內(nèi)容更加高效。因此，在所有的屏幕上使用垂直網(wǎng)格是有意義的。
3.為響應(yīng)設(shè)計(jì)
移動(dòng)端app的界面是需要響應(yīng)的。所以確保這個(gè)暗示總是存在，否則，你可能會(huì)看起來(lái)像是網(wǎng)格的horizontal list。
從上面的界面中，你可以看出來(lái)每個(gè)子類別是一個(gè)水平列表嘛？你可以判斷出它可以水平滾動(dòng)嘛？
看不出來(lái)的話也不怪你，這是設(shè)計(jì)上的差錯(cuò)，沒(méi)有清晰的視覺(jué)提示。
你并不希望它看起來(lái)就是垂直的格子，如果看起來(lái)是這樣的，用戶本能地會(huì)進(jìn)行垂直滾動(dòng)。
4.為平板調(diào)整Horizontal list
那么，你如何在更大的設(shè)備上去設(shè)計(jì)Horizontal lists？
你可以將horizontal list轉(zhuǎn)化成一行有N個(gè)item的網(wǎng)格。上面的界面顯示了5個(gè)item，還有一個(gè)“查看更多”的按鈕，用戶可以在新屏幕上查看更多的此類內(nèi)容。
因此，在移動(dòng)設(shè)備上，它可以是十張卡片的滾動(dòng)horizontal list。在平板上，你可以設(shè)置為5～6張不可滾動(dòng)的卡片。
5.在平板上限制水平內(nèi)容
平板帶來(lái)了更寬的屏幕，因此充分利用屏幕是聰明的設(shè)計(jì)。
我們先來(lái)看看水平滾動(dòng)。在移動(dòng)設(shè)備上它的表現(xiàn)很不錯(cuò)，默認(rèn)下顯示3個(gè)內(nèi)容，其余的通過(guò)水平滾動(dòng)查看，這意味著隱藏的內(nèi)容是可選的。如果用戶感興趣，他們可以滾動(dòng)查看更多的信息。如果他們想要了解更多，可以點(diǎn)擊“查看更多”的按鈕。
現(xiàn)在讓我們回到平板上。你也會(huì)延續(xù)這種設(shè)計(jì)慣性，在水平上顯示更多內(nèi)容。這也有一定的道理，如果寬度更合適，用來(lái)展示更多的內(nèi)容也很自然，是吧？
我們來(lái)看看。
給出5～6個(gè)內(nèi)容，足夠讓用戶知道這一個(gè)子類別的信息。用戶可以滾動(dòng)查看更多的信息，但他們更習(xí)慣垂直滾動(dòng)。如果他們想要看到更多的內(nèi)容，可以點(diǎn)擊“查看更多”的按鈕。
因此，只顯示5～6個(gè)不可滾動(dòng)的網(wǎng)格是有道理的，給出太多的選擇只會(huì)增加用戶的認(rèn)知負(fù)擔(dān)，這不是一件好事。
每次當(dāng)你訪問(wèn)一個(gè)網(wǎng)站，就會(huì)是一個(gè)學(xué)習(xí)的過(guò)程，你的腦子必須學(xué)會(huì)如何使用它，也要知道你是怎么操作的。這段時(shí)間的腦部活動(dòng)被叫做認(rèn)知負(fù)荷。-減少認(rèn)知負(fù)荷的設(shè)計(jì)原則
這是在web的情景中，在移動(dòng)端，這一點(diǎn)同樣需要去在意。移動(dòng)端的注意力更短。
6.快速水平滑動(dòng)
這是一項(xiàng)限制自由滾動(dòng)的技術(shù)，通過(guò)這個(gè)GIF，你可以更好的理解。
你看到橫向滾動(dòng)條了嗎？當(dāng)用戶水平滑動(dòng)時(shí)，下一項(xiàng)就會(huì)略微可見(jiàn)，即使是滑動(dòng)之后，也有更多的內(nèi)容可見(jiàn)。
雖然這很難引起注意，但是一個(gè)很好的提示。這非常微妙，卻是有效的暗示，表明有更多的內(nèi)容。
7.顯示列表的開(kāi)始與結(jié)束
當(dāng)滑動(dòng)停止了，我們知道到達(dá)了列表的端部。但是如果我們不滑動(dòng)，我們是不是就不知道了呢？
Android在列表的端部使用了一個(gè)簡(jiǎn)練的動(dòng)畫(huà)，但是只有用戶在滑動(dòng)的時(shí)候才會(huì)出現(xiàn)，這意味著用戶操作后才有反饋。
我們?nèi)绾文軐⑺龅酶?？你希望用戶通過(guò)滾動(dòng)來(lái)查看嗎？如果能更直觀地展示出這一點(diǎn)，是不是更好呢？
使用額外的間隔來(lái)表明列表的開(kāi)始與結(jié)束。
這種方法也適用于horizontal list。在水平列表的左側(cè)和右側(cè)添加額外的間隔。
顯示垂直滾動(dòng)
假設(shè)你的app支持水平和垂直滾動(dòng)。我們已經(jīng)討論過(guò)通過(guò)視覺(jué)來(lái)暗示水平滾動(dòng)。
那么你如何來(lái)暗示垂直滾動(dòng)？web端在一側(cè)有滾動(dòng)條，那移動(dòng)端呢？
這里有一個(gè)巧妙的技巧，雖然在很多app中看不到，使用光。
不要將Tabs和Horizontal list混淆
如果你的應(yīng)用有tab，并且其中一個(gè)包含了水平滾動(dòng)列表，像這樣。
你如何在tabs間切換？水平滑動(dòng)。那你如何滑動(dòng)列表呢？水平滑動(dòng)。
這里同一個(gè)手勢(shì)觸發(fā)兩個(gè)不同的操作。
我們需要區(qū)分水平滑動(dòng)和標(biāo)簽切換兩個(gè)功能。我們不希望用戶在滑動(dòng)水平列表的時(shí)候被帶進(jìn)下一個(gè)標(biāo)簽。
我們?cè)撛趺醋觯?/p>
最簡(jiǎn)單的方法就是禁用水平標(biāo)簽滑動(dòng)。最困難的方法就是重新思考你的導(dǎo)航。但要記住，簡(jiǎn)單并不意味著更好。
Amazon Prime app
看看Amazon Prime ?Video?app在Android上的表現(xiàn)，他們帶有tab和horizontal list。但是為了避免在滾動(dòng)中切換，它禁用了tab的切換。因此需要在tab上進(jìn)行點(diǎn)選操作。
如果你希望顯示內(nèi)容的不同類別，可以考慮使用水平列表。但是將它應(yīng)用在包含tab的屏幕中。
Horizontal list 的替代方法
horizontal list的目的是顯示特定類別的相似內(nèi)容。
大多數(shù)這樣的app，都會(huì)顯示一個(gè)類別的N個(gè)item。其余內(nèi)容都隱藏在按鈕之后。
無(wú)論哪種方式，你都沒(méi)有顯示一個(gè)類別下的所有內(nèi)容。假設(shè)你顯示10個(gè)，用戶也不得不點(diǎn)擊“查看全部”來(lái)看剩余的50個(gè)，和其他內(nèi)容。
如果你的horizontal這樣做了，你可能不需要horizontal list。
使用網(wǎng)格替代
沒(méi)有水平滾動(dòng)，用戶可以快速的瀏覽內(nèi)容。他們只需要在一個(gè)方向上去滾動(dòng)。在平板上的設(shè)計(jì)應(yīng)對(duì)了這種情況。
下面的例子更好一些。Google Play Music應(yīng)用展示了列表中的4個(gè)內(nèi)容，并將他們整理在了一起，你可以通過(guò)tap縮略圖來(lái)播放列表中的其他音樂(lè)。
這樣的設(shè)計(jì)有兩個(gè)優(yōu)點(diǎn)：
1.保留了用戶在一個(gè)方向上的瀏覽路徑。
2.比在horizontal list中顯示更多的內(nèi)容。
用戶不需要滑動(dòng)就能查看到更多的內(nèi)容，不是嗎？
另一種選擇就是重新思考，你確認(rèn)需要那些嵌套進(jìn)頁(yè)面的horizontal list嗎？用戶會(huì)自然的滑動(dòng)，如果打破滑動(dòng)的方向，都破壞了用戶快速瀏覽的能力。
因此，在你決定采用horizontal list之前，請(qǐng)意識(shí)到它的缺點(diǎn)?？纯雌渌奶娲绞绞遣皇强梢圆杉{。
對(duì)于Android開(kāi)發(fā)
在垂直的父級(jí)列表中嵌套horizontal list是苦難的，嵌套循環(huán)視圖會(huì)更容易一些，但很難得到理想的效果。
在Google I/O2016上，Nick Butcher開(kāi)源了解決方法。還有一系列的性能調(diào)整，你可以在GitHub上看到。
結(jié)語(yǔ)
關(guān)注內(nèi)容的app應(yīng)用了嵌套的horizontal list。雖然這方法并沒(méi)有錯(cuò)，但是必須正確實(shí)現(xiàn)。因?yàn)槭謩?shì)操作的存在，水平滑動(dòng)在移動(dòng)端上更為直觀。
但需要小心，因?yàn)樗财茐牧俗匀坏臑g覽模式。在本文的前面部分，我們討論了Google Play Store，也發(fā)現(xiàn)了在哪些場(chǎng)景中更為合適。
作為UI/UX設(shè)計(jì)者，我們有義務(wù)確保我們的用戶不會(huì)混亂。畢竟?jié)L動(dòng)是最常用的手勢(shì)。
