[譯] 爲企業應用設計更好的表格

• 原文地址：Designing better tables for enterprise applications
• 原文做者：Adhithya
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Lai
• 校對者：LeviDing Ruixi

爲企業應用設計更好的表格

深刻了解如何在企業應用中設計表格，以及如何避免常見的錯誤

企業應用一般很複雜，由於要展現大量的包含多種來源、模式和用戶信息的數據。須要先瀏覽一下複雜的圖表、使用模式和數據列表，才能理解控制檯的功能。

設計企業應用程序最大的挑戰是來自在特定場景中工做與否的模式示例的缺少。

因爲大多數的企業應用程序都涉及與公司相關的敏感數據，因此不多有討論設計企業應用程序時面臨的常見問題的實例。現有的模式庫深刻討論了每一個組件如何運行工做，可是不多涉及什麼時候使用它們。咱們在設計庫中看到的模式一般過於簡單，而實際的企業應用程序在本質上數據和用例都更爲複雜，這些模式並不起做用。

這些模式在建模倉中沒什麼問題，可是一旦碰到複雜的工做流、特定範圍的用戶類型或者大規模數據時，就不能正常運行了。

企業界的表格

下面是一個典型的企業應用界面。工做窗口裏大量的面板上擠滿了密密麻麻的信息，每一個面板所指示的信息又和屏幕上的其餘選項息息相關。

圖片來源：docplayer.net/docs-images…

如上所述，應用程序中最耗費空間的部分是表格。本文將幫助設計師根據具體狀況來探討表格的正確使用方法。

一種過去大多面向消費者應用的模式，在企業界居然也很是有效，並被普遍使用。然而也沒有什麼更好的方法，只有表格能展現龐大的數據列表。表格的做用在於企業應用的性質可以知足用戶同時查看多行數據、經過警報掃描、比較數據，以及按照用戶選擇的任何特定順序查看數據的要求。

下面的這張圖片看起來像是一個很是正常的表格，起初可能絲絕不會質疑它的可用性。但當你進一步使用它的時候，你會發現操做起來有點奇怪。

企業應用中很是廣泛的表格。

1. 表格上的連接

也許會跳轉到用戶的我的資料頁。

第一個例子裏，第一列上的連接可能暗示着點擊後會跳轉到用戶的我的資料頁面。雖然頁面說明不是很清楚，但也不難猜到。

可是下面這個例子就未必了，你能猜到點擊下圖中的連接會跳轉哪裏嗎？

這彷佛是某種與每行內容有關的代碼。以這種方式設置連接，會讓用戶感到困惑。

以上是一個來自企業應用程序的真實示例，點擊連接後會將代碼複製到剪貼板。可是這個操做不是很容易理解，應該避免這種意義不明的模式。

2. 表格上的操做

刪除、移動、打印、導出等是很是常見的操做，特別是在同時處理多個項目時。大多數企業應用程序每行都會有一個操做，這樣設置有時頗有必要，由於須要對某些特定行執行操做。話雖如此，其實大多數操做能夠從表格的行中推算出來，成爲頁面的不一樣部分。

靠近連接的操做

要在一行中執行的操做位於距離標識列最遠的最右邊的列，而在本例中，操做位於第一列。

一行中要執行的操做的距離不該該遠離識別列。一般狀況下，這會致使在錯誤行上執行操做。如若否則，用戶須要在識別追蹤行上花費過多精力，並努力避免點擊操做到另外的行。這種模式很容易出錯，設計時應該避免。

冗餘操做

每行都有一個 「刪除」 操做。

在這個例子中每行都重複出現一個「刪除」操做。想象一下，每行有 五、6 個重複的操做選項，會讓表格看起來很是混亂。不只如此，這樣的表格中也不能同時刪除多個選項，由於沒有辦法選擇進行多選。

現代企業應用的一個示例，表格裏每項以前都有一個複選框。

在同一時間、同一個表格裏，選擇並執行多個項目上的操做的一個好的模式是每行都容許被選中。選中後，工具欄出如今表格的上方或下方，能夠進行要執行的操做。

在表格裏選擇多個項目後，有一個工具欄能夠對所選項目執行操做。

大多數具備表格形式的列表項的企業應用程序都遵循這種模式。可是一些設計師也發現，由於表格的每行都有複選框，因此在視覺上有點混亂、使人不知所措。

在下圖中能夠看到，Google 收件箱的模式是，只有當鼠標懸停在該行的最左側時，複選框纔會顯示出來。另外，對於操做能力較強的用戶，可使用 shift 快捷鍵同時選擇多個項目。這是在表格上實現操做模式的一個很是好的例子。

這種模式減小了視覺上的混亂，讓用戶能夠思考如何實現多選。我也是嘗試了幾回後才找到一種能夠多選的方法。

只有圖標的操做選項是另外一種經常使用的讓用戶思考的模式，而一個經典的用戶體驗法則是 別讓用戶思考。這種模式讓用戶記住每一個圖標的含義和位置。

3. 表格的分頁和搜索

因爲企業應用程序的數據量巨大，因此表格一般要運行多個頁面。設計師但願瞭解用戶是會經過翻頁來查看數據，仍是隻查看第一頁顯示的內容。

若是表格不須要翻頁就能查看數據，那這種企業應用的表格模式就是成功的。

如何實現表格不翻頁就能查看數據呢? 優秀的過濾器和強大的搜索機制。

用戶翻頁是由於他們正在尋找特定的信息。因此在咱們設計翻頁以前，必須提出一個問題

如何才能更快捷方便地在表格裏查找信息？

一個很好的成功解決方案是在天然語境的上下文中設置過濾器。也就是說，基於當前屏幕上的用戶工做流程，過濾器顯示與當前場景最相關的選項。

例如，在這個演示應用程序中，根據用戶的不一樣工做流程階段出現不一樣的過濾器。也許很難實現，可是一旦成功，將是用戶體驗的一個偉大勝利。

何時搜索可以起到幫助做用？

剛剛離開當前頁面的時候..

圖片來源：www.aspsnippets.com/Articles/Al…

如今咱們知道了如何考慮分頁設計，不管如何這是頗有必要的。我最不能忍的一種分頁方式是下圖中呈現的項目限制：

這個系統每頁展現 10 條數據。

用戶在一頁中只能查看 10 條數據，必需要翻頁來查看第 11 條。爲何不能編寫程序來查看錶格下一頁是否只有 1 到 3 條數據，若是是的話所有展現在當前這頁呢？或者能夠作得更好一點，判斷條目少於 25 項不作分頁。這些並不難實現，只是他們並無多加考慮。

分頁上多選被中斷

翻頁後多選失效。

用戶勾選了第一頁的三個選項，而後去勾選第二頁的前四個選項，邏輯上來講，他點擊刪除按鈕時，這 7 項會被所有刪除。可是實際上並不會發生，由於分頁時跨頁面保留用戶選擇的信息實現起來技術挑戰難度較大，成本也很高。

表格中有分頁時，選擇所有項目是另外一個挑戰。用戶只可能選擇當前視圖中的全部項，或者選擇完整列表中的全部項。

分頁時選擇所有項目可能會很混亂。

上面的例子裏，用戶先選擇了當前頁面上的全部選項，而後在整個列表中選擇了所有 3000 個選項。分頁操做後，勾選的信息失效了。這又是因爲分頁技術的侷限性，由於從工程技術角度來看，保留選擇記憶的成本很高。

無限滾動或者延遲加載的效果又如何呢？

許多應用程序目前正在從所有分頁模式轉型到 Facebook 或 Twitter 風格的無限加載信息模式。對此，設計師們各執一詞。對我我的而言，一個「加載更多」按鈕效果最好。

在當前加載的表格最後增長一個「加載更多」按鈕。

這隻會加載當前視圖中的內容，若是用戶主動執行加載更多地操做，則會加載出更多內容。

最後一點想法

本文並非一個設計表格的絕對正確的建議指南，只是一個設計表格時常見問題和解決這些問題的方法的集合。若是你有任何關於設計表格的補充建議，但願你能來信一塊兒討論。

Andrew Coyle 在設計更好的數據表格一文中提出了很好的設計表格用戶界面的建議。強烈建議你讀一讀，以便了解良好的表格交互實踐。

本文圖片模板來自Sketch App Resources，是由Jurij Ternicki製做的支付管理系統原型。

我是 Adhithya ，舊金山 OpenDNS 的產品設計師。

你能夠關注個人 Twitter； 戳這裏 查看個人做品；或者直接發郵件聯繫我 adhithya.ramakumar@gmail.com

Adhithya 寫了這篇文章來分享知識技能，並幫助設計社區成員成長。全部在 uxdesign.cc 上發佈的文章都循序相同的設計哲學

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、React、前端、後端、產品、設計 等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃。