將復雜數據表格的設計點一點點理清,可能會使得表格更加趨于明朗。
上一篇文章提到了數據表格設計的一些注意點,這一篇對這些注意點繼續進行補充。同時結合最近看到的一些復雜表格的規范與例子分享一些個人的觀點。
1. 懸浮操作
2. 多模態彈窗
3. 分頁
4. 編輯屬性面板
5. 可調整寬度表格
6. 帶斑馬紋表格
7. 表格詳情查看
8. 可分類表頭
9. 可排序表格
10. 視覺化表格
當然有時候由于技術的限制,不是每個屬性都可以照顧到,但是如果能盡量考慮,表格的設計會更加趨向于完美。
一些思考與示例
1)完善的空間還有很多
而且盡管這些屬性看似已經很全,有時候看一些規范網站,表格的設計還是有很多可以完善的地方,例如說Ant Design中提到表格批量選擇。如果我們進行跨頁信息的選擇,如何可以將已選的信息傳遞給用戶呢?Ant Design中就作出了下圖的設計改良:
只要用戶進行了選擇,已選的信息便會以“標簽"的形式出現在列表上方,方便用戶瀏覽已選信息,而且這種設計也使得跨頁的信息選擇的”增刪查改“更加快速。
2)即使是企業級的成熟設計,也會有缺陷
舉一個最近看到的小例子為參考,Salesforce Lightning,作為一個全球排名靠前的云CRM平臺,他們的表格設計雖然在視覺上還是很統一,但是細化到表格設計的一條條屬性,也是有著很大的優化空間。例如說下圖是對表格多選之后,進行批量操作的流程圖。
首先,選擇區域與操作區域之間的移動距離在頁面上是呈對角線的,距離較長。另外表格操作區域的功能群組劃分,在批量操作這個層面來看,是將”無關操作“與”相關操作“放在了一起,那么用戶在進行批量選擇之后,可能會比較難聯想到”批量“與”按鈕組“的相關性,從而中斷操作。
但,畢竟一個系統的設計不能總是每個方面都考慮到,因為信息的展示也是有不同的維度可以考慮。所以我個人理解看來,即便是領先的系統,為了維持整個體系的功能平衡,也會站在一個全局的角度思考,避免撿了芝麻丟了西瓜,因此有些細節會放到次要的地位去考慮,所以才會出現剛剛我提到的一些問題。最近在看佐藤可士和一本關于整理術的一本書,里面也提到了關于“梳理”,“排序”,“分類”等可以將復雜問題分解與解決的辦法,我覺得這種思想與“設計時考慮方方面面”是相似的。
盡管結果不一定是最完美的,我想作為設計師,將能考慮的細節都考慮,將能思考的問題盡量思考,對于自身的積累總是有幫助的吧。共勉。
參考鏈接
https://uxdesign.cc/design-better-data-tables-4ecc99d23356
https://www.salesforce.com/blog/2015/08/future-of-crm-salesforce-lightning.html