編輯導語：B端產品列表的設計和排列有很多種方法，本文作者基於自己的工作經歷，對B端產品列表進行了初步的分析與總結，為我們分享了一些她的看法。
B端產品列表的內容量較大，所承載操作也就會多一些。
在設計列表時，需要考慮用戶操作的便捷和高效，由於是B端工具類產品，有些功能對於用戶來說，是為了完成工作必須去做的操作。
可能是每天1次或多次所以也要考慮操作的簡單，能夠在用戶複雜和大量的工作中，為他們降低一點點的理解成本和學習成本，我想也是很好的吧！
以下的內容是從近期的一次列表設計，總結的一些思路，不確定設計稿是不是可以發出來（雖然已經上線了，但是由於是B端的項目）所有有些地方做了一些脫敏處理。
一、列表1.0
列表基礎操作像修改和刪除，像是很多場景下都需要的，但這兩個操作是不能滿足業務需求的，根據業務的需要和實際場景來定義外漏與收起的數量，根據操作的優先級，來定義哪些操作是外漏的。
以下是幾個自己認為是注意事項的注意事項：
1. 在做工具類產品時，儘量使用文字來表示操作
icon固然好看，但文字在易讀和理解上更簡單一些（當然這裡多指的是和業務相關的操作）。
2. 外漏與收起的數量，需要有一個通用的規範
這也是我在這次設計沒有注意到的一個問題，有的頁面的操作是7個，有的頁面是4個，我在第一次做設計是，將操作做成了3+更多，就是外漏3個，其餘都收起。
但是遇到只有4個操作的時候，這種3+更多就很尷尬，那我就直接處理成了2+2。
和技術同學溝通之後，在技術角度上擴展性和通用性就低了，那之後就統一處理成了2+更多，當操作小於等於3個時，全都外漏，大於3時，則留兩個操作在外面，其餘都收起。
如圖：
二、列表2.0
列表的基礎結構搭建好之後，再來看提升操作效率的功能，像是篩選、批量操作，都是幫助用戶提升效率的方式，如圖：
1. 篩選
在最初的列表篩選方案是，篩選後篩選的標題即變成選擇的內容，如圖：
這種情況多數適合單選的情況，但如果是多選，在展示時可能就有點糾結，給出瞭如下方案，好像也不是很便捷了；如果需要取消已選內容，還是需要點擊開再刪除，如圖：
綜上，給出了新的方案，似乎是可以滿足這些需求了，如圖：
當選擇的篩選內容時，給出小標籤，可以直接看到自己選擇的內容，也可以直接刪除某某某。
2. 批量
點擊右上角的按鈕（操作）將列表激活為批量勾選的狀態，在未對內容進行選擇前，底部的按鈕為置灰狀態。
當對內容勾選後，則激活按鈕，可進行操作；批量操作時，右上角“XX”操作這裡思考了很久，到底是“完成”合適，還是“取消”合適——這應該是取決於對列表的操作與使用場景。
1）場景1
批量操作時只有一個操作，當勾選勾選勾選之後，去點擊操作按鈕，完成需要操作的動作，則完成了一次動作，列表恢復在默認狀態。
那這種時候，右上角的操作可為“取消”，那取消的含義就是在勾勾的時候，反悔了，不想繼續去操作了，將編輯態變默認態。
2）場景2
當有多個批量操作時，那操作一個動作之後，則依舊停留在編輯態，可繼續勾勾勾勾，那就需要手動去結束這個編輯態，則“完成”可能更加合適。
注意的事兒：
- 當底部按鈕大於1時，可區分主次操作；
- 若底部有很多很多很多操作，需要進行部分摺疊。
如圖：
三、列表3.0
前面有提到，B端操作類的一個列表，想要給用戶傳達的就是簡單、便捷、高效。雖然很多用戶在使用微信時已經習慣的左滑刪除這個操作，但從研發同學那裡瞭解到，這僅僅是ios才有的操作。
所以，這樣的操作也是存在一些成本的，不論誰研發成本，還是用戶的理解成本。
如果場景需要可以注意，設計這樣的方式，首次使用時，增加一個可愛的新手引導；當然這樣的操作方式能夠包含的操作也是很有限的，這種情況下，就不建議對操作再次隱藏了。
所以倆個就好了，且對操作進行區分，如圖：
（參考微信和ios的短信）
最後：
以上是在最近工作中提煉的一些內容，好一段時間自己都對列表這些基礎頁面（交互）有些誤解，後來發現自己連列表都考慮不清楚。
實際應用中可根據具體的使用場景、業務需求等適當調整，也不是全部覆蓋，像排序、圖文（資訊類）並不合適。如果以上內容有不合適的地方，也希望可以一起討論，謝謝！
本文由 @麻慄慄 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議
