如何設(shè)計(jì)表格選中的交互?

0 評(píng)論 1409 瀏覽 4 收藏 9 分鐘

B端產(chǎn)品中,表格選中是一個(gè)常見的操作。但并不意味著不需要交互了。這篇文章,就是作者在尋求參考未果自己整理的思考與分析內(nèi)容,與大家分享。

由于最近在工作中遇到了很多次關(guān)于B端平臺(tái)中表格選中的交互問(wèn)題,例如業(yè)務(wù)方提出想要在某些查詢條件下選中所有數(shù)據(jù),然后進(jìn)行一些批量操作。于是我去找了很多主流平臺(tái)去試用各家平臺(tái)的表格選中功能,對(duì)比后發(fā)現(xiàn)各家平臺(tái)對(duì)此類需求的交互方式各不相同。

因此我嘗試總結(jié)一下目前主流B端平臺(tái)關(guān)于表格選中的交互方案并分析其適合的使用場(chǎng)景,希望本篇文章可以為大家提供一些幫助,也希望可以與各位產(chǎn)品同事共同探討這方面的內(nèi)容。

一、需求&場(chǎng)景

假設(shè)現(xiàn)在有個(gè)業(yè)務(wù)方提出想要在表格中一鍵全選的操作功能,我們應(yīng)該從幾方面進(jìn)行分析?

我覺得需要從3個(gè)方面去考慮:

1、目前的操作存在哪些問(wèn)題

我們可以先了解一下用戶覺得目前平臺(tái)的操作方式存在哪些問(wèn)題,假設(shè)用戶使用的平臺(tái)僅有選中當(dāng)前頁(yè)的功能,那用戶有可能就會(huì)說(shuō)“現(xiàn)在平臺(tái)只能選中當(dāng)前頁(yè),我有10幾頁(yè)的數(shù)據(jù)需要重復(fù)10幾次進(jìn)行操作,這太麻煩了”。這時(shí)我們可以得到一些信息,10幾頁(yè)的數(shù)據(jù)進(jìn)行操作,假設(shè)平臺(tái)固定一頁(yè)展示10條數(shù)據(jù),從用戶口中我們就可以初步評(píng)估用戶操作的數(shù)據(jù)量大小。

2、用戶的場(chǎng)景

第二,我們需要了解用戶操作的工作場(chǎng)景以及對(duì)于時(shí)效性的要求,工作場(chǎng)景包括用戶的職業(yè)以及工作的地點(diǎn),例如辦公室白領(lǐng)去批量操作一些數(shù)據(jù)和高鐵站內(nèi)的安檢隊(duì)員去批量操作一些數(shù)據(jù),這兩種情況對(duì)操作的時(shí)效性的要求不同,會(huì)導(dǎo)致我們?cè)谠O(shè)計(jì)交互方式時(shí)方案?jìng)?cè)重點(diǎn)不同。結(jié)合用戶的工作場(chǎng)景,我們還需要了解用戶操作的頻率,比如說(shuō)需要每天進(jìn)行操作和每周/每月進(jìn)行操作等等。

3、操作的目的

第三,我們需要了解用戶批量操作的目的,比如說(shuō)A用戶需要批量選中一些文案類數(shù)據(jù)進(jìn)行導(dǎo)出,B用戶需要批量選中一些商品檔案類數(shù)據(jù)進(jìn)行刪除。數(shù)據(jù)導(dǎo)出需要考慮數(shù)據(jù)的敏感性,而刪除作為系統(tǒng)性操作這時(shí)就需要考慮數(shù)據(jù)的重要性以及關(guān)聯(lián)性等問(wèn)題。

基于這3個(gè)方面,我們可以了解到用戶操作的數(shù)據(jù)量有多少、用戶對(duì)時(shí)效性的要求、用戶的操作頻次、操作的目的以及數(shù)據(jù)的重要性。下面讓我們看一下市面上主流產(chǎn)品的設(shè)計(jì)思路,以及我們?nèi)绾芜M(jìn)行選擇合適的交互。

二、市面上主流產(chǎn)品的設(shè)計(jì)

目前主流的批量操作形式分為四類

1. 頁(yè)面數(shù)據(jù)不分頁(yè),數(shù)據(jù)采用懶加載形式

參考平臺(tái):釘釘管理后臺(tái)

適用場(chǎng)景:數(shù)據(jù)量不大、數(shù)據(jù)重要性低、操作頻次高、時(shí)效性不高

需要注意:除非頁(yè)面中能夠明確的提示出數(shù)據(jù)的總條數(shù)或是已選中多少條,否則,個(gè)人認(rèn)為如果數(shù)據(jù)量過(guò)大時(shí)采用懶加載,用戶心里會(huì)沒底,到底有多少數(shù)據(jù),選中了多少,沒有一個(gè)明確的告知,會(huì)導(dǎo)致用戶不敢去操作。

2. 頁(yè)面數(shù)據(jù)分頁(yè),只能選中當(dāng)前頁(yè)面數(shù)據(jù)

參考平臺(tái):微盟、有贊

適用場(chǎng)景:數(shù)據(jù)量不大、數(shù)據(jù)重要性高、操作頻次不高、時(shí)效性不高

3. 頁(yè)面數(shù)據(jù)分頁(yè),只能選中當(dāng)前頁(yè)面數(shù)據(jù),但是支持調(diào)整每頁(yè)展示數(shù)據(jù)條數(shù)

參考平臺(tái):阿里云-云效、禪道

適用場(chǎng)景:數(shù)據(jù)量中等或數(shù)據(jù)量大、數(shù)據(jù)重要性不高、操作頻次高、時(shí)效性中等

4. 市面上還有一些其他的交互方式來(lái)解決分頁(yè)但是需要全部選中的交互,具體如下:

復(fù)選框右側(cè)增加更多操作按鈕,下拉可以選擇更多操作,如全選所有、反選當(dāng)頁(yè)、清空所有

適用場(chǎng)景:數(shù)據(jù)量大、數(shù)據(jù)重要性不高、操作頻次高、時(shí)效性高

需要注意:這種交互需要一定的用戶學(xué)習(xí)成本,需要注意搭配顏色的突出或者是用戶引導(dǎo),否則可能會(huì)導(dǎo)致用戶無(wú)法發(fā)現(xiàn)的情況。

額外增加一個(gè)選中全部數(shù)據(jù)的按鈕,解決分頁(yè)無(wú)法全選的問(wèn)題。

適用場(chǎng)景:數(shù)據(jù)量大、數(shù)據(jù)重要性不高、操作頻次高、時(shí)效性高

需要注意:按鈕的全選狀態(tài)、非全選狀態(tài),不同分頁(yè)的復(fù)選框選中狀態(tài)的回顯。由于大部分的主流前端現(xiàn)成的組件都不支持此類操作,還需要注意實(shí)現(xiàn)的開發(fā)成本以及與開發(fā)的battle。

三、其他感悟

另外在網(wǎng)上收集關(guān)于如何設(shè)計(jì)表格選中的交互時(shí),還接觸了一些主流的回復(fù),比如為什么不可以有一鍵全選的功能,可以用“不允許用戶對(duì)看不到的數(shù)據(jù)進(jìn)行操作,否則有誤操作的危險(xiǎn)?!钡膬?nèi)容進(jìn)行統(tǒng)一回復(fù)。這句話本身沒問(wèn)題,但是缺少考慮用戶的實(shí)際使用場(chǎng)景,這種想當(dāng)然的回復(fù),其實(shí)算是一種產(chǎn)品設(shè)計(jì)的懶政,我個(gè)人肯定是不認(rèn)同的。

其次就是新人產(chǎn)品在設(shè)計(jì)原型時(shí),可能會(huì)想當(dāng)然的認(rèn)為用戶需要批量選中批量操作的功能,這時(shí)不妨直接去找業(yè)務(wù)方或用戶溝通,很有可能在調(diào)研完后發(fā)現(xiàn)自己想的場(chǎng)景并不存在,避免閉門造車。

本文由 @一九九九年的一封信 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!