列表設(shè)計(jì)的一些思路

時(shí)間：2023-09-01 11:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-01 11:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

列表設(shè)計(jì)的一些思路：題圖： Dribbble - full.jpg by Julien Renvoye


列表算是一個(gè)非?；A(chǔ)的設(shè)計(jì)元素，無(wú)非是一排一排的數(shù)據(jù)內(nèi)容，加上一些基本的操作。最近連續(xù)設(shè)計(jì)了一個(gè)禮拜的列表后，最直觀的感受是：再簡(jiǎn)單的東西，也有很多的細(xì)節(jié)需要思考。尤其對(duì)于很多數(shù)據(jù)產(chǎn)品和工具型產(chǎn)品，列表是非常重要的一部分，例如電子郵箱，文件系統(tǒng)（Google drive, dropbox)。一個(gè)信息結(jié)構(gòu)合理，操作明確表格、列表設(shè)計(jì)，能夠幫助用戶(hù)減輕很多的閱讀負(fù)擔(dān)。這篇文章會(huì)分享一些列表設(shè)計(jì)中的基本思路。

表格中的操作設(shè)計(jì)

大多數(shù)情況下，列表中的每一排是一個(gè)item，每一個(gè)item都會(huì)有一些基本的操作，例如刪除，編輯，查看詳情。網(wǎng)上有各種各樣的設(shè)計(jì)列表樣稿，但是總體來(lái)說(shuō)，有以下幾種比較典型的操作設(shè)計(jì)方案。在真實(shí)的產(chǎn)品設(shè)計(jì)中，也常會(huì)有以下幾種方案的結(jié)合體出現(xiàn)。



方案一：每一排都顯示具體的操作

這種方案一般比較適合各種各樣比較簡(jiǎn)單直觀的操作設(shè)計(jì)，支持各種用戶(hù)不需要查看item detail，直接就可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。

(source: Conference Calling)

Pros

• 操作的discoverability很高，對(duì)于新用戶(hù)來(lái)說(shuō)，所有操作一目了然
• 對(duì)于high-frequency的操作，用戶(hù)只需要one-click就可以完成具體的操作

Cons

• 信息過(guò)載。尤其是舉的例子里，要是這個(gè)list非常長(zhǎng)的話，頁(yè)面將會(huì)非常擁擠。而且這些按鈕因?yàn)橐曈X(jué)特征比較明顯，造成了不必要的distraction
• 擴(kuò)展性不強(qiáng)。畢竟列表長(zhǎng)度有限，操作要是繼續(xù)增加，遲早都會(huì)需要group到一個(gè)下拉菜單里去
• 誤操作率相對(duì)較高。同樣因?yàn)榱斜砩系目臻g有限，一般操作只能放下icon，再加上幾個(gè)icon之間距離非常近，很容易一不小心就點(diǎn)錯(cuò)了。對(duì)于危險(xiǎn)系數(shù)比較高的操作，千萬(wàn)不要采用這種設(shè)計(jì)。

方案二：只有在鼠標(biāo)hover, 或者點(diǎn)擊某個(gè)具體按鈕之后現(xiàn)實(shí)操作

這種方案將操作隱藏起來(lái)，比較適用于一些操作比較risk較高，操作非常多而導(dǎo)致無(wú)法再列表上完全顯示，或者操作不常發(fā)生的情況。


（source: Dribbble - full.jpg by Julien Renvoye)

Pros

• 信息密度低，可以幫助頁(yè)面突出更加重要的信息，例如Item name，item status。待用戶(hù)發(fā)現(xiàn)需要進(jìn)行操作時(shí)，再顯示操作選項(xiàng)
• 對(duì)于risk比較高的危險(xiǎn)操作，例如停止一個(gè)正在運(yùn)行的server，這樣的做法提高了操作門(mén)檻

Cons

• 如果很多情況下，用戶(hù)在不需要查看詳細(xì)信息只需要通過(guò)列表就可以對(duì)項(xiàng)目進(jìn)行操作時(shí)，這樣的設(shè)計(jì)會(huì)增加用戶(hù)的點(diǎn)擊次數(shù)。
• 操作的discoverability較低，用戶(hù)需要鼠標(biāo)移到表格的某一行上，或者需要點(diǎn)擊一個(gè)右側(cè)的icon，才可以看到全部可行的操作。

方案三：支持multi-row action，用戶(hù)選中多個(gè)item，并且在列表上方進(jìn)行統(tǒng)一操作

這種方案適用于用戶(hù)經(jīng)常需要多個(gè)文件進(jìn)行同時(shí)管理的情況。


（source: Dribbble - Mail-Client-design.png by Vivek Venkatraman)


Pros

• 對(duì)于用戶(hù)經(jīng)常需要批量管理的列表有幫助

Cons

• 實(shí)現(xiàn)成本相較于單行操作較高，如果只有assumption，沒(méi)有真實(shí)的用戶(hù)數(shù)據(jù)佐證，產(chǎn)品團(tuán)隊(duì)不會(huì)去開(kāi)發(fā)這樣的操作。
• 如果不同的項(xiàng)目，可以支持的操作不同，邏輯會(huì)比較復(fù)雜

目前google drive的列表, gmail, dropbox都是采用這樣的設(shè)計(jì)，用戶(hù)可以對(duì)多個(gè)項(xiàng)目進(jìn)行批量操作。其中唯一的不同是，gmail需要用戶(hù)專(zhuān)門(mén)點(diǎn)擊checkbox，來(lái)選中某一行，而google drive和dropbox是直接點(diǎn)擊這一行就可以選中。我猜這樣的設(shè)計(jì)主要是因?yàn)閷?duì)于email來(lái)說(shuō)，更多的use case是用戶(hù)查看詳細(xì)內(nèi)容，所以把最簡(jiǎn)單的操作（也就是點(diǎn)擊一整行）留給了這個(gè)行為，而點(diǎn)擊checkbox才可以選中這封郵件；然而對(duì)于文件管理系統(tǒng)來(lái)說(shuō)，用戶(hù)更多的操作是對(duì)文章進(jìn)行管理，所以點(diǎn)擊行就可以選中整個(gè)文件。

表格中的信息設(shè)計(jì)

列表的信息設(shè)計(jì)，也就是table header的確定，在明白了用戶(hù)在這個(gè)頁(yè)面的主要目的之外，我會(huì)主要明確三點(diǎn)：1）為了幫助用戶(hù)identify這個(gè)item必須要放的信息 2）可以方便用戶(hù)直接從列表頁(yè)面去的各個(gè)二級(jí)頁(yè)面的信息 3）其他需要強(qiáng)調(diào)的信息。把這些列出來(lái)之后，再根據(jù)真正的用戶(hù)需求進(jìn)行刪減。

大部分的信息呈現(xiàn)都比較straightforward，其中有一點(diǎn)值得討論的是關(guān)于item status的展示。很多列表都會(huì)有各種各樣的status顯示：例如Gmail用字體粗細(xì)來(lái)顯示已讀和未讀，也有一些dashboard用tag+文字或者改變整行背景來(lái)直接表示不同的狀態(tài)，有的會(huì)把status放在列表第一列，也有會(huì)把status放到中間。有的會(huì)把status抽象成icon，也有的是直接用文字呈現(xiàn)status。

（Source: Dribbble - invoicing_2x.png by Eric Hoffman）

不同的使用場(chǎng)景和用戶(hù)需求會(huì)對(duì)Status呈現(xiàn)有不同的需求。對(duì)于我而言，我一般會(huì)問(wèn)自己三個(gè)問(wèn)題：用戶(hù)來(lái)這個(gè)列表，對(duì)于status的glancibility有多強(qiáng)的需求，他們是否特別需要知道整個(gè)列表的overall performance？列表中有多少Status，是否都有well associated icon可以對(duì)接，還是需要自創(chuàng)icon去表示特定的狀態(tài)？用戶(hù)是否會(huì)在意某個(gè)特定的status，例如突然某個(gè)server down了，或者某個(gè)信息沒(méi)有發(fā)送成功？

一般來(lái)說(shuō)，顏色可以解決glancibility的問(wèn)題。給一整行增加背景顏視覺(jué)表達(dá)上，又強(qiáng)于單個(gè)status的顏色，可用于強(qiáng)調(diào)某個(gè)特定的狀態(tài)。（這樣的設(shè)計(jì)，需要使用得非常謹(jǐn)慎，因?yàn)檫@個(gè)特殊狀態(tài)基本在第一時(shí)間吸引了用戶(hù)全部的注意力）

如果狀態(tài)比較少并且較為常規(guī)時(shí)（例如‘成功’和‘失敗’），可以直接用icon來(lái)表達(dá)。如果status比較特殊的話，用文字可以表達(dá)得更加清晰明確。

如果用戶(hù)在列表頁(yè)面更多的是做列表管理，那把狀態(tài)欄放在第一列是比較可行的。如果用戶(hù)主要是為了尋找某個(gè)特定的item，則可以把status放到中間，而把item name放在第一列。

Pagination V.S. Endless scroll

Pagination：分頁(yè)來(lái)展現(xiàn)全部的列表項(xiàng)目。

Pros

分頁(yè)是一種非常符合用戶(hù)認(rèn)知邏輯的歸類(lèi)方式。它可以幫助用戶(hù)從一個(gè)很長(zhǎng)的列表中定位某個(gè)特定的項(xiàng)目。

Cons

• 每次到達(dá)頁(yè)面底端時(shí)，用戶(hù)需要點(diǎn)擊之后才能到下一頁(yè)，對(duì)于一些瀏覽性的表格來(lái)說(shuō)，點(diǎn)擊顯得比較多余。

Endless scroll：用戶(hù)觸底之后，頁(yè)面自動(dòng)顯示load more，然后呈現(xiàn)出更多信息。

總體來(lái)說(shuō)，endless scroll在列表上適用的情況較少（至少我還沒(méi)想到~），因?yàn)榱斜硪话愣愿訌?qiáng)調(diào)邏輯性，并且需要定位具體的項(xiàng)目。

Pros

適用于一些瀏覽性的列表，用戶(hù)更多得在獲取信息，例如pinterest的信息流（不過(guò)這個(gè)也不能算列表），用戶(hù)可以不需要點(diǎn)擊就獲取更多的內(nèi)容

Cons

• Endless scroll，顧名思義就是很難讓用戶(hù)有一種結(jié)束的感覺(jué)，對(duì)于一個(gè)列表來(lái)說(shuō)，用戶(hù)常常會(huì)不知道自己還有多少?zèng)]有看完，導(dǎo)致在精神上比較有負(fù)擔(dān)。畢竟“Reaching an end point provides a sense of control”
• 一般比較難定位一個(gè)具體的項(xiàng)目位置。

最近關(guān)于列表設(shè)計(jì)的思考就是這些。當(dāng)然還有很多其他的沒(méi)有涉及到，例如在列表中是否需要以及如何做in-table edit，列表和數(shù)據(jù)可視化的互動(dòng)，如何區(qū)分列表的filter, search以及sort的功能。


下次有機(jī)會(huì)深入設(shè)計(jì)到這些的時(shí)候再來(lái)補(bǔ)充吧~