B端交互模式干貨集（一）：APP列表編輯模式

本文將結合貝殼平臺B端產品特點，針對當前使用頻率高的列表編輯模式進行歸納和抽象，重組典型可復用的交互行為與功能流程，促進提升平臺產品體驗一致性。

本文轉自「貝殼KEDC」

簡介

列表是移動端產品中常見的信息展現形式，尤其在B端產品設計中占比很高，B端數據信息量龐大，使用列表這種格式化的表達形式，是最清晰、高效的方式之一。貝殼B端產品主要為企業級服務產品，即SaaS，常用列表來展示數據、管理數據、作為詳情入口等。

除展示信息外，在列表這種結構形式上進行編輯操作，包括對元素的增刪改等一系列操作，應如何處理？這里結合貝殼平臺B端業務場景，選取列表設計中多次出現的編輯類型，根據列表和編輯操作的耦合，進行劃分不同模式的設計方案，沉淀了幾套具備復用性的交互模式。

模式類型

列表編輯模式的類型，根據不同的編輯屬性，分為了以下4種常見的可復用的模式：單條編輯模式、排序模式、拓展操作模式、批量操作模式。

1. 列表編輯-單條編輯

使用場景

管理列表項，當列表項的數量相對較少，且每項的操作動作互相獨立。在B端產品中，常用于項目類的新增、刪除、編輯或重命名等簡單操作。

交互流程說明

操作按鈕一般使用具有明確象征意義的icon來表示，或使用簡潔的文案。點擊按鈕進入對應操作流程。操作完成后通過toast提示等給予反饋，并且支持再次操作。

△ 圖1 單條編輯

需注意的問題

因移動端空間有限，操作的數量應控制在3個以內，操作數量≥3個時需收起操作按鈕，使用一個入口聚合多個操作。

編輯頁面與添加頁面可共用同一套表單頁面，以保持一致性。

2. 列表編輯-排序

使用場景

當列表項支持自定義排列順序時，或一套流程步驟支持自定義環節順序時，可提供排序功能。

交互流程說明

從列表頁或流程的設置入口處進入設置順序頁面，點擊按住列表項右側的拖動按鈕（建議使用icon），將其向上/下拖拽到預期位置時，可上移/下移該項所處位置。點擊「完成設置」按鈕，保存編輯的順序并退出設置頁面。點擊「恢復默認」按鈕，可恢復至列表初始狀態。

△ 圖2 排序

需注意的問題

除排序功能外，若設置頁面同時支持其他編輯操作時，可通過其他交互方式喚起動作。一般來講，iOS和安卓系統的操作方式有差異：iOS端為左滑列表項出現操作按鈕，安卓端為長按列表項出現小浮層，浮層內展示操作按鈕。

由于操作方式較隱晦，首次使用不易被發現，所以應考慮適當加入新手引導。

△ 圖3 排序-其他操作

3. 列表編輯-拓展操作

使用場景

B端列表中常見的一種類型：展示列表，常由圖文標簽等多種元素構成，信息內容和形式很豐富。這種展示列表頁面的承載能力受到一定限制，若需拓展操作時，比如對當前列表項進行關注、分享、收藏等較輕量化的功能，可使用拓展的空間承載操作動作，并可以直接在當前頁完成交互流程。

交互流程說明

以iOS為例，左滑列表項，展示功能操作按鈕。點擊操作，進入操作流程。

△?圖4 拓展操作

需注意的問題

由于操作方式較為隱晦，首次出現時可考慮加入新手引導。

由于移動端空間受限，尤其是iOS端左滑后的空間也有限，即使是拓展操作也不建議過多，承載1-3個操作功能為宜。

4. 列表編輯-批量操作

使用場景

管理列表項，當列表項數量較多時，對列表項逐個操作的成本就很高了，這就需要進行批量管理以提高工作效率。常用于刪除、或其他根據場景訴求的自定義操作（比如分享、投票、關注等）。

管理文件等強編輯性的操作，一般也需要進入另外的編輯狀態頁面進行批量操作。

交互流程說明

點擊右上角按鈕進入批量編輯狀態，初始狀態未選擇時，底部操作按鈕置灰。勾選列表項后，底部操作按鈕點亮，展示已選項的數量，即對當前勾選操作的反饋。點擊操作按鈕，進入對應操作流程；點擊「完成」按鈕，保存編輯結果，退出批量編輯模式。勾選后不操作點擊「完成」按鈕，不保存編輯結果。

△?圖5 批量操作

需注意的問題

底部操作區可容納1-n個操作按鈕，根據具體場景使用，上圖以2個按鈕為例，超過5個按鈕時，需將更多按鈕收起至一個入口，點擊展開菜單選擇操作。

置入多選框時，列表項內容整體右移，橫向展示的空間被壓縮，超出限制的字段可截斷展示，其他元素按照制定的展示策略進行適配。

若有全部選中操作的場景時，可加入全選功能。

總結

提供處理和管理數據的功能，對數據進行便捷操作體驗，就是為了能提升用戶使用系統的效率。沉淀列表編輯模式不僅可以提升設計師工作效率，避免重復勞動；同樣保證了B端平臺在多產品多業務線的背景下，能夠擁有一致的使用體驗，歸根結底也可以提升用戶使用系統效率。

實際應用中可依照業務、場景、數據、操作等層面，使用適當的設計模式，且不局限于以上幾種，可基于以上模型進行擴展，以提供更多關于SaaS平臺列表編輯設計的創新解決方案。

更多B端設計干貨：

歡迎關注作者微信公眾號：「貝殼KEDC」