從事B端產(chǎn)品交互設(shè)計(jì)工作的半年時(shí)間里，筆者有幸接觸了面向開(kāi)發(fā)和運(yùn)維人員的B端業(yè)務(wù)類列表交互設(shè)計(jì)工作。為了方便后續(xù)在B端產(chǎn)品設(shè)計(jì)過(guò)程中可以更加高效且高質(zhì)量的進(jìn)行列表的交互設(shè)計(jì)，筆者結(jié)合自己在實(shí)際工作中遇到的列表類型總結(jié)了web列表設(shè)計(jì)的常用基礎(chǔ)列表模式，以供大家參考。

本篇文章所介紹的列表設(shè)計(jì)主要集中在列表內(nèi)的元素和操作按鈕（行內(nèi)操作）的展示上，暫不包括列表的查詢、篩選以及列表外相關(guān)功能。

（一）基礎(chǔ)型列表

場(chǎng)景：web列表中基礎(chǔ)的表格樣式，用于業(yè)務(wù)相關(guān)的各項(xiàng)數(shù)據(jù)的平鋪展示，通常操作按鈕置于表格最右側(cè)。橫向基礎(chǔ)表格的縱列數(shù)據(jù)項(xiàng)不宜過(guò)多，過(guò)多時(shí)頁(yè)面大量的數(shù)據(jù)項(xiàng)容易造成用戶的視覺(jué)疲勞，并且會(huì)出現(xiàn)橫向滾動(dòng)條從而降低用戶操作的易用性。

（二）網(wǎng)格型列表

場(chǎng)景：網(wǎng)格列表的信息承載內(nèi)容更多，單一網(wǎng)格內(nèi)可展示多行信息。數(shù)據(jù)項(xiàng)之間的邊界清晰，方便對(duì)網(wǎng)格內(nèi)的數(shù)據(jù)進(jìn)行對(duì)比，適用于需要展示業(yè)務(wù)數(shù)據(jù)量的需求場(chǎng)景。操作按鈕根據(jù)業(yè)務(wù)需求和用戶需求可置于列表右側(cè)或單個(gè)網(wǎng)格內(nèi)。

（三）主從型列表

場(chǎng)景：B端產(chǎn)品業(yè)務(wù)場(chǎng)景具備多樣化的特點(diǎn)，實(shí)際工作中我們常常會(huì)遇到列表中非單一item展示的需求，item之間除常見(jiàn)的并列關(guān)系，還存在從屬關(guān)系、遞進(jìn)關(guān)系等。對(duì)于主從或遞進(jìn)關(guān)系的列表，筆者建議主從item總數(shù)≤3，且不適宜對(duì)每個(gè)主item進(jìn)行默認(rèn)展開(kāi)的場(chǎng)景，因?yàn)锽端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認(rèn)展開(kāi)多個(gè)主item對(duì)服務(wù)器的性能損耗較大。建議每次展開(kāi)一條主item，其他主item呈收起狀態(tài)。

當(dāng)主item下的從屬表的行數(shù)較多時(shí)，可采取分步加載的方式，例如默認(rèn)展示10條數(shù)據(jù)，點(diǎn)擊查看更多時(shí)可以繼續(xù)請(qǐng)求后端數(shù)據(jù)進(jìn)行展示。綜上，對(duì)于主從列表的展示形式，設(shè)計(jì)師可根據(jù)實(shí)際的用戶需求和開(kāi)發(fā)實(shí)現(xiàn)的便捷性和性能損耗的最低性方面出發(fā)進(jìn)行從優(yōu)考慮。

（四）綜合型列表

場(chǎng)景：綜合型列表適用于業(yè)務(wù)數(shù)據(jù)展示復(fù)雜的場(chǎng)景。列表數(shù)據(jù)之間既包含并列關(guān)系，又包含從屬關(guān)系等。

綜合型列表上常常伴隨用戶復(fù)雜的操作，如上圖所示，既包含對(duì)不同環(huán)境下key的查看、下載、修改以及更多的操作，又包含對(duì)整條key的移動(dòng)、刪除操作?；诰C合型表格可方便地對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行組合、分解和重新布局排列。

列表設(shè)計(jì)思路總結(jié)：

通過(guò)對(duì)工作過(guò)程中遇到的列表設(shè)計(jì)的總結(jié)，筆者發(fā)現(xiàn)列表設(shè)計(jì)均可以依據(jù)縱橫相間的網(wǎng)格列表為基礎(chǔ)進(jìn)行擴(kuò)展。以網(wǎng)格列表為基礎(chǔ)，對(duì)不同的單元格進(jìn)行重組和拆解可衍生出多種不同類型的列表，如下圖所示。然后，以衍生列表為基礎(chǔ)，設(shè)計(jì)師可進(jìn)一步采取微交互的設(shè)計(jì)方式來(lái)表現(xiàn)不同數(shù)據(jù)之間的矩陣、從屬、遞進(jìn)、并列等關(guān)系。

除以上對(duì)列表設(shè)計(jì)布局的總結(jié)，筆者也從行內(nèi)操作的角度總結(jié)出兩種類型的列表：操作顯現(xiàn)型列表和操作隱現(xiàn)型列表。

（一）操作顯現(xiàn)型列表

場(chǎng)景：一方面當(dāng)列表中縱列數(shù)據(jù)較少時(shí)，頁(yè)面有足夠的空間用于展現(xiàn)所有的操作按鈕，此時(shí)操作按鈕外置更加直觀，用戶可以一目了然的了解到對(duì)當(dāng)前列表的所有操作；另一方面就操作使用頻率而言，高頻率使用場(chǎng)景下的操作按鈕需要外置，例如當(dāng)用戶在查看列表時(shí)80%以上時(shí)間的都是在進(jìn)行編輯操作時(shí)，編輯按鈕外置更易于用戶點(diǎn)擊，符合用戶的心理預(yù)期。

（二）操作隱現(xiàn)型列表

場(chǎng)景：

• 一方面當(dāng)列表中縱列數(shù)據(jù)較多時(shí)，頁(yè)面缺少足夠的空間展現(xiàn)所有的操作按鈕，此時(shí)操作按鈕可進(jìn)行隱現(xiàn)展示，使用“更多”或特定icon來(lái)標(biāo)識(shí)有更多操作，為方便用戶操作可在鼠標(biāo)hover時(shí)展現(xiàn)所有操作按鈕；
• 另一方面就操作使用頻率和危險(xiǎn)性而言，低頻率使用場(chǎng)景下的操作按鈕或危險(xiǎn)性操作按鈕可進(jìn)行隱藏展示。用戶在點(diǎn)擊危險(xiǎn)按鈕時(shí)可能會(huì)帶來(lái)破壞性操作，此時(shí)對(duì)按鈕進(jìn)行隱藏可增加按鈕的操作難度從而減少用戶的誤觸率。

本文總結(jié)

對(duì)web端列表設(shè)計(jì)的總結(jié)可以更方便地適應(yīng)B端產(chǎn)品突出特點(diǎn)：

1. 通用性

B端產(chǎn)品設(shè)計(jì)有其通用性的設(shè)計(jì)特點(diǎn)，大部分產(chǎn)品業(yè)務(wù)的列表設(shè)計(jì)形式類似，因此列表設(shè)計(jì)的復(fù)用性較強(qiáng)，總結(jié)的列表設(shè)計(jì)可覆蓋大部分B端產(chǎn)品業(yè)務(wù)。

2. 個(gè)性化

B端產(chǎn)品業(yè)務(wù)相對(duì)來(lái)說(shuō)更為復(fù)雜，業(yè)務(wù)場(chǎng)景多樣化，產(chǎn)品設(shè)計(jì)存在個(gè)性化的傾向。因此，設(shè)計(jì)師可以在已總結(jié)的設(shè)計(jì)列表樣式上結(jié)合所負(fù)責(zé)的業(yè)務(wù)特點(diǎn)進(jìn)行微創(chuàng)新，大大提高設(shè)計(jì)效率。

另外，在列表設(shè)計(jì)的過(guò)程中，筆者還有一些感悟與建議與大家分享：

1. 避免列表item的橫向展示信息過(guò)長(zhǎng)

當(dāng)橫向的展示信息過(guò)長(zhǎng)（包含hover時(shí)展示的信息）超過(guò)一屏?xí)r，會(huì)出現(xiàn)橫向滾動(dòng)條。對(duì)于使用MAC端的用戶，通過(guò)觸摸板進(jìn)行橫向和豎向滾動(dòng)較為方便，但是對(duì)于PC端（主要是臺(tái)式機(jī)）用戶而言，需要鼠標(biāo)去滑動(dòng)橫向滾動(dòng)條查看一屏以外的信息，且對(duì)于單條item的操作按鈕常常置于列表最右側(cè)，每次點(diǎn)擊操作按鈕需要先滑動(dòng)滾動(dòng)條，導(dǎo)致操作成本和對(duì)屏幕展示信息的記憶成本提高而產(chǎn)品的易用性降低。

2. 適當(dāng)采取表頭凍結(jié)的方式

B端產(chǎn)品的列表數(shù)據(jù)量大，用戶在通過(guò)滾動(dòng)條上下滾動(dòng)查看列表時(shí)若表頭隨列表向上滾動(dòng)，那么用戶有可能會(huì)迷失，無(wú)法判斷當(dāng)前列表中字段的含義。將表頭在隨列表向上滾動(dòng)的過(guò)程中固定于頁(yè)面頂部，方便用戶實(shí)時(shí)了解當(dāng)前字段的含義，可在細(xì)微之處提升用戶體驗(yàn)。

3. 增強(qiáng)列表設(shè)計(jì)的美觀性

根據(jù)審美可用性效果（人們認(rèn)為更美觀的設(shè)計(jì)比那些被認(rèn)為不太美觀的設(shè)計(jì)更直觀），清晰、美觀的列表設(shè)計(jì)可提高產(chǎn)品的可用性。B端產(chǎn)品的業(yè)務(wù)邏輯復(fù)雜，且理解門檻很高，容易令用戶感到枯燥。列表設(shè)計(jì)中，通過(guò)字體大小、顏色、粗細(xì)，列表背景色，狀態(tài)標(biāo)識(shí)icon，tag等清晰展示業(yè)務(wù)內(nèi)容，可以提高用戶愉悅感，營(yíng)造良好的用戶體驗(yàn)。

作者： 仉長(zhǎng)娟 ，網(wǎng)易UEDC小鮮肉一枚，現(xiàn)支持運(yùn)維部產(chǎn)品的交互設(shè)計(jì)工作。

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@??仉長(zhǎng)娟

題圖來(lái)自 PEXELS，基于 CC0 協(xié)議