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

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

一、基礎(chǔ)型列表

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

二、網(wǎ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ù)量的需求場景。操作按鈕根據(jù)業(yè)務(wù)需求和用戶需求可置于列表右側(cè)或單個(gè)網(wǎng)格內(nèi)。

三、主從型列表

場景：B 端產(chǎn)品業(yè)務(wù)場景具備多樣化的特點(diǎn)，實(shí)際工作中我們常常會(huì)遇到列表中非單一 item 展示的需求，item 之間除常見的并列關(guān)系，還存在從屬關(guān)系、遞進(jìn)關(guān)系等。對(duì)于主從或遞進(jìn)關(guān)系的列表，筆者建議主從 item 總數(shù) ≤3，且不適宜對(duì)每個(gè)主 item 進(jìn)行默認(rèn)展開的場景，因?yàn)?B 端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認(rèn)展開多個(gè)主 item 對(duì)服務(wù)器的性能損耗較大。建議每次展開一條主 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í)際的用戶需求和開發(fā)實(shí)現(xiàn)的便捷性和性能損耗的最低性方面出發(fā)進(jìn)行從優(yōu)考慮。

四、綜合型列表

場景：綜合型列表適用于業(yè)務(wù)數(shù)據(jù)展示復(fù)雜的場景。列表數(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é)

通過對(duì)工作過程中遇到的列表設(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ì)方式來表現(xiàn)不同數(shù)據(jù)之間的矩陣、從屬、遞進(jìn)、并列等關(guān)系。

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

1. 操作顯現(xiàn)型列表

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

2. 操作隱現(xiàn)型列表

場景：

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

六、本文總結(jié)

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

• 通用性：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ù)。
• 個(gè)性化：B 端產(chǎn)品業(yè)務(wù)相對(duì)來說更為復(fù)雜，業(yè)務(wù)場景多樣化，產(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ì)的過程中，筆者還有一些感悟與建議與大家分享：

• 避免列表 item 的橫向展示信息過長：當(dāng)橫向的展示信息過長（包含 hover 時(shí)展示的信息）超過一屏?xí)r，會(huì)出現(xiàn)橫向滾動(dòng)條。對(duì)于使用 MAC 端的用戶，通過觸摸板進(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)品的易用性降低。
• 適當(dāng)采取表頭凍結(jié)的方式：B 端產(chǎn)品的列表數(shù)據(jù)量大，用戶在通過滾動(dòng)條上下滾動(dòng)查看列表時(shí)若表頭隨列表向上滾動(dòng)，那么用戶有可能會(huì)迷失，無法判斷當(dāng)前列表中字段的含義。將表頭在隨列表向上滾動(dòng)的過程中固定于頁面頂部，方便用戶實(shí)時(shí)了解當(dāng)前字段的含義，可在細(xì)微之處提升用戶體驗(yàn)。
• 增強(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ì)中，通過字體大小、顏色、粗細(xì)，列表背景色，狀態(tài)標(biāo)識(shí) icon，tag 等清晰展示業(yè)務(wù)內(nèi)容，可以提高用戶愉悅感，營造良好的用戶體驗(yàn)。

歡迎關(guān)注作者「網(wǎng)易UEDC」的微信公眾號(hào)：

「后臺(tái)設(shè)計(jì)好文」

• 《實(shí)戰(zhàn)經(jīng)驗(yàn)！如何做好網(wǎng)頁后臺(tái)的表單和表格設(shè)計(jì)？》
• 《阿里巴巴設(shè)計(jì)師：如何給后臺(tái)產(chǎn)品做設(shè)計(jì)？》
• 《后臺(tái)界面也可以很酷！31個(gè)高大上的后臺(tái)管理系統(tǒng)模版》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備： http://hao.uisdc.com