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