列表是移動端產(chǎn)品中常見的信息展現(xiàn)形式，尤其在B端產(chǎn)品設(shè)計(jì)中占比很高，B端數(shù)據(jù)信息量龐大，使用列表這種格式化的表達(dá)形式，是最清晰、高效的方式之一。貝殼B端產(chǎn)品主要為企業(yè)級服務(wù)產(chǎn)品，即SaaS，常用列表來展示數(shù)據(jù)、管理數(shù)據(jù)、作為詳情入口等。
除展示信息外，在列表這種結(jié)構(gòu)形式上進(jìn)行編輯操作，包括對元素的增刪改等一系列操作，應(yīng)如何處理？這里結(jié)合貝殼平臺B端業(yè)務(wù)場景，選取列表設(shè)計(jì)中多次出現(xiàn)的編輯類型，根據(jù)列表和編輯操作的耦合，進(jìn)行劃分不同模式的設(shè)計(jì)方案，沉淀了幾套具備復(fù)用性的交互模式。
列表編輯模式的類型，根據(jù)不同的編輯屬性，分為了以下4種常見的可復(fù)用的模式：單條編輯模式、排序模式、拓展操作模式、批量操作模式。
1. 列表編輯-單條編輯
使用場景
管理列表項(xiàng)，當(dāng)列表項(xiàng)的數(shù)量相對較少，且每項(xiàng)的操作動作互相獨(dú)立。在B端產(chǎn)品中，常用于項(xiàng)目類的新增、刪除、編輯或重命名等簡單操作。
交互流程說明
操作按鈕一般使用具有明確象征意義的icon來表示，或使用簡潔的文案。點(diǎn)擊按鈕進(jìn)入對應(yīng)操作流程。操作完成后通過toast提示等給予反饋，并且支持再次操作。
△ 圖1 單條編輯
需注意的問題
因移動端空間有限，操作的數(shù)量應(yīng)控制在3個以內(nèi)，操作數(shù)量≥3個時需收起操作按鈕，使用一個入口聚合多個操作。
編輯頁面與添加頁面可共用同一套表單頁面，以保持一致性。
2. 列表編輯-排序
使用場景
當(dāng)列表項(xiàng)支持自定義排列順序時，或一套流程步驟支持自定義環(huán)節(jié)順序時，可提供排序功能。
交互流程說明
從列表頁或流程的設(shè)置入口處進(jìn)入設(shè)置順序頁面，點(diǎn)擊按住列表項(xiàng)右側(cè)的拖動按鈕（建議使用icon），將其向上/下拖拽到預(yù)期位置時，可上移/下移該項(xiàng)所處位置。點(diǎn)擊「完成設(shè)置」按鈕，保存編輯的順序并退出設(shè)置頁面。點(diǎn)擊「恢復(fù)默認(rèn)」按鈕，可恢復(fù)至列表初始狀態(tài)。
△ 圖2 排序
需注意的問題
除排序功能外，若設(shè)置頁面同時支持其他編輯操作時，可通過其他交互方式喚起動作。一般來講，iOS和安卓系統(tǒng)的操作方式有差異：iOS端為左滑列表項(xiàng)出現(xiàn)操作按鈕，安卓端為長按列表項(xiàng)出現(xiàn)小浮層，浮層內(nèi)展示操作按鈕。
由于操作方式較隱晦，首次使用不易被發(fā)現(xiàn)，所以應(yīng)考慮適當(dāng)加入新手引導(dǎo)。
△ 圖3 排序-其他操作
3. 列表編輯-拓展操作
使用場景
B端列表中常見的一種類型：展示列表，常由圖文標(biāo)簽等多種元素構(gòu)成，信息內(nèi)容和形式很豐富。這種展示列表頁面的承載能力受到一定限制，若需拓展操作時，比如對當(dāng)前列表項(xiàng)進(jìn)行關(guān)注、分享、收藏等較輕量化的功能，可使用拓展的空間承載操作動作，并可以直接在當(dāng)前頁完成交互流程。
交互流程說明
以iOS為例，左滑列表項(xiàng)，展示功能操作按鈕。點(diǎn)擊操作，進(jìn)入操作流程。
△ 圖4 拓展操作
需注意的問題
由于操作方式較為隱晦，首次出現(xiàn)時可考慮加入新手引導(dǎo)。
由于移動端空間受限，尤其是iOS端左滑后的空間也有限，即使是拓展操作也不建議過多，承載1-3個操作功能為宜。
4. 列表編輯-批量操作
使用場景
管理列表項(xiàng)，當(dāng)列表項(xiàng)數(shù)量較多時，對列表項(xiàng)逐個操作的成本就很高了，這就需要進(jìn)行批量管理以提高工作效率。常用于刪除、或其他根據(jù)場景訴求的自定義操作（比如分享、投票、關(guān)注等）。
管理文件等強(qiáng)編輯性的操作，一般也需要進(jìn)入另外的編輯狀態(tài)頁面進(jìn)行批量操作。
交互流程說明
點(diǎn)擊右上角按鈕進(jìn)入批量編輯狀態(tài)，初始狀態(tài)未選擇時，底部操作按鈕置灰。勾選列表項(xiàng)后，底部操作按鈕點(diǎn)亮，展示已選項(xiàng)的數(shù)量，即對當(dāng)前勾選操作的反饋。點(diǎn)擊操作按鈕，進(jìn)入對應(yīng)操作流程；點(diǎn)擊「完成」按鈕，保存編輯結(jié)果，退出批量編輯模式。勾選后不操作點(diǎn)擊「完成」按鈕，不保存編輯結(jié)果。
△ 圖5 批量操作
需注意的問題
底部操作區(qū)可容納1-n個操作按鈕，根據(jù)具體場景使用，上圖以2個按鈕為例，超過5個按鈕時，需將更多按鈕收起至一個入口，點(diǎn)擊展開菜單選擇操作。
置入多選框時，列表項(xiàng)內(nèi)容整體右移，橫向展示的空間被壓縮，超出限制的字段可截?cái)嗾故，其他元素按照制定的展示策略進(jìn)行適配。
若有全部選中操作的場景時，可加入全選功能。
提供處理和管理數(shù)據(jù)的功能，對數(shù)據(jù)進(jìn)行便捷操作體驗(yàn)，就是為了能提升用戶使用系統(tǒng)的效率。沉淀列表編輯模式不僅可以提升設(shè)計(jì)師工作效率，避免重復(fù)勞動；同樣保證了B端平臺在多產(chǎn)品多業(yè)務(wù)線的背景下，能夠擁有一致的使用體驗(yàn)，歸根結(jié)底也可以提升用戶使用系統(tǒng)效率。
實(shí)際應(yīng)用中可依照業(yè)務(wù)、場景、數(shù)據(jù)、操作等層面，使用適當(dāng)?shù)脑O(shè)計(jì)模式，且不局限于以上幾種，可基于以上模型進(jìn)行擴(kuò)展，以提供更多關(guān)于SaaS平臺列表編輯設(shè)計(jì)的創(chuàng)新解決方案。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。