編輯導(dǎo)語(yǔ)：B端產(chǎn)品列表的設(shè)計(jì)和排列有很多種方法，本文作者基于自己的工作經(jīng)歷，對(duì)B端產(chǎn)品列表進(jìn)行了初步的分析與總結(jié)，為我們分享了一些她的看法。

B端產(chǎn)品列表的內(nèi)容量較大，所承載操作也就會(huì)多一些。

在設(shè)計(jì)列表時(shí)，需要考慮用戶(hù)操作的便捷和高效，由于是B端工具類(lèi)產(chǎn)品，有些功能對(duì)于用戶(hù)來(lái)說(shuō)，是為了完成工作必須去做的操作。

可能是每天1次或多次所以也要考慮操作的簡(jiǎn)單，能夠在用戶(hù)復(fù)雜和大量的工作中，為他們降低一點(diǎn)點(diǎn)的理解成本和學(xué)習(xí)成本，我想也是很好的吧！

以下的內(nèi)容是從近期的一次列表設(shè)計(jì)，總結(jié)的一些思路，不確定設(shè)計(jì)稿是不是可以發(fā)出來(lái)（雖然已經(jīng)上線(xiàn)了，但是由于是B端的項(xiàng)目）所有有些地方做了一些脫敏處理。

一、列表1.0

列表基礎(chǔ)操作像修改和刪除，像是很多場(chǎng)景下都需要的，但這兩個(gè)操作是不能滿(mǎn)足業(yè)務(wù)需求的，根據(jù)業(yè)務(wù)的需要和實(shí)際場(chǎng)景來(lái)定義外漏與收起的數(shù)量，根據(jù)操作的優(yōu)先級(jí)，來(lái)定義哪些操作是外漏的。

以下是幾個(gè)自己認(rèn)為是注意事項(xiàng)的注意事項(xiàng)：

1. 在做工具類(lèi)產(chǎn)品時(shí)，盡量使用文字來(lái)表示操作

icon固然好看，但文字在易讀和理解上更簡(jiǎn)單一些（當(dāng)然這里多指的是和業(yè)務(wù)相關(guān)的操作）。

2. 外漏與收起的數(shù)量，需要有一個(gè)通用的規(guī)范

這也是我在這次設(shè)計(jì)沒(méi)有注意到的一個(gè)問(wèn)題，有的頁(yè)面的操作是7個(gè)，有的頁(yè)面是4個(gè)，我在第一次做設(shè)計(jì)是，將操作做成了3+更多，就是外漏3個(gè)，其余都收起。

但是遇到只有4個(gè)操作的時(shí)候，這種3+更多就很尷尬，那我就直接處理成了2+2。

和技術(shù)同學(xué)溝通之后，在技術(shù)角度上擴(kuò)展性和通用性就低了，那之后就統(tǒng)一處理成了2+更多，當(dāng)操作小于等于3個(gè)時(shí)，全都外漏，大于3時(shí)，則留兩個(gè)操作在外面，其余都收起。

如圖：

二、列表2.0

列表的基礎(chǔ)結(jié)構(gòu)搭建好之后，再來(lái)看提升操作效率的功能，像是篩選、批量操作，都是幫助用戶(hù)提升效率的方式，如圖：

1. 篩選

在最初的列表篩選方案是，篩選后篩選的標(biāo)題即變成選擇的內(nèi)容，如圖：

這種情況多數(shù)適合單選的情況，但如果是多選，在展示時(shí)可能就有點(diǎn)糾結(jié)，給出了如下方案，好像也不是很便捷了；如果需要取消已選內(nèi)容，還是需要點(diǎn)擊開(kāi)再刪除，如圖：

綜上，給出了新的方案，似乎是可以滿(mǎn)足這些需求了，如圖：

當(dāng)選擇的篩選內(nèi)容時(shí)，給出小標(biāo)簽，可以直接看到自己選擇的內(nèi)容，也可以直接刪除某某某。

2. 批量

點(diǎn)擊右上角的按鈕（操作）將列表激活為批量勾選的狀態(tài)，在未對(duì)內(nèi)容進(jìn)行選擇前，底部的按鈕為置灰狀態(tài)。

當(dāng)對(duì)內(nèi)容勾選后，則激活按鈕，可進(jìn)行操作；批量操作時(shí)，右上角“XX”操作這里思考了很久，到底是“完成”合適，還是“取消”合適——這應(yīng)該是取決于對(duì)列表的操作與使用場(chǎng)景。

1）場(chǎng)景1

批量操作時(shí)只有一個(gè)操作，當(dāng)勾選勾選勾選之后，去點(diǎn)擊操作按鈕，完成需要操作的動(dòng)作，則完成了一次動(dòng)作，列表恢復(fù)在默認(rèn)狀態(tài)。

那這種時(shí)候，右上角的操作可為“取消”，那取消的含義就是在勾勾的時(shí)候，反悔了，不想繼續(xù)去操作了，將編輯態(tài)變默認(rèn)態(tài)。

2）場(chǎng)景2

當(dāng)有多個(gè)批量操作時(shí)，那操作一個(gè)動(dòng)作之后，則依舊停留在編輯態(tài)，可繼續(xù)勾勾勾勾，那就需要手動(dòng)去結(jié)束這個(gè)編輯態(tài)，則“完成”可能更加合適。

注意的事兒：

1. 當(dāng)?shù)撞堪粹o大于1時(shí)，可區(qū)分主次操作；
2. 若底部有很多很多很多操作，需要進(jìn)行部分折疊。

如圖：

三、列表3.0

前面有提到，B端操作類(lèi)的一個(gè)列表，想要給用戶(hù)傳達(dá)的就是簡(jiǎn)單、便捷、高效。雖然很多用戶(hù)在使用微信時(shí)已經(jīng)習(xí)慣的左滑刪除這個(gè)操作，但從研發(fā)同學(xué)那里了解到，這僅僅是ios才有的操作。

所以，這樣的操作也是存在一些成本的，不論誰(shuí)研發(fā)成本，還是用戶(hù)的理解成本。

如果場(chǎng)景需要可以注意，設(shè)計(jì)這樣的方式，首次使用時(shí)，增加一個(gè)可愛(ài)的新手引導(dǎo)；當(dāng)然這樣的操作方式能夠包含的操作也是很有限的，這種情況下，就不建議對(duì)操作再次隱藏了。

所以倆個(gè)就好了，且對(duì)操作進(jìn)行區(qū)分，如圖：

（參考微信和ios的短信）

最后：

以上是在最近工作中提煉的一些內(nèi)容，好一段時(shí)間自己都對(duì)列表這些基礎(chǔ)頁(yè)面（交互）有些誤解，后來(lái)發(fā)現(xiàn)自己連列表都考慮不清楚。

實(shí)際應(yīng)用中可根據(jù)具體的使用場(chǎng)景、業(yè)務(wù)需求等適當(dāng)調(diào)整，也不是全部覆蓋，像排序、圖文（資訊類(lèi)）并不合適。如果以上內(nèi)容有不合適的地方，也希望可以一起討論，謝謝！

本文由 @麻栗栗 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

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