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

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

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

企業應用通常很複雜，因為要展示大量的包含多種來源、模式和使用者資訊的資料。需要先瀏覽一下複雜的圖表、使用模式和資料列表，才能理解控制檯的功能。

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

由於大多數的企業應用程式都涉及與公司相關的敏感資料，所以很少有討論設計企業應用程式時面臨的常見問題的例項。現有的模式庫深入討論了每個元件如何執行工作，但是很少涉及何時使用它們。我們在設計庫中看到的模式通常過於簡單，而實際的企業應用程式在本質上資料和用例都更為複雜，這些模式並不起作用。

這些模式在建模倉中沒什麼問題，但是一旦碰到複雜的工作流、特定範圍的使用者型別或者大規模資料時，就不能正常執行了。

企業界的表格

下面是一個典型的企業應用介面。工作視窗裡大量的皮膚上擠滿了密密麻麻的資訊，每個皮膚所指示的資訊又和螢幕上的其他選項息息相關。

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

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

一種過去大多面向消費者應用的模式，在企業界竟然也非常有效，並被廣泛使用。然而也沒有什麼更好的方法，只有表格能展示龐大的資料列表。表格的作用在於企業應用的性質能夠滿足使用者同時檢視多行資料、通過警報掃描、比較資料，以及按照使用者選擇的任何特定順序檢視資料的要求。

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

企業應用中非常普遍的表格。

1. 表格上的連結

也許會跳轉到使用者的個人資料頁。

第一個例子裡，第一列上的連結可能暗示著點選後會跳轉到使用者的個人資料頁面。雖然頁面說明不是很清楚，但也不難猜到。

但是下面這個例子就未必了，你能猜到點選下圖中的連結會跳轉哪裡嗎？

這似乎是某種與每行內容有關的程式碼。以這種方式設定連結，會讓使用者感到困惑。

以上是一個來自企業應用程式的真實示例，點選連結後會將程式碼複製到剪貼簿。但是這個操作不是很容易理解，應該避免這種意義不明的模式。

2. 表格上的操作

刪除、移動、列印、匯出等是非常常見的操作，特別是在同時處理多個專案時。大多數企業應用程式每行都會有一個操作，這樣設定有時很有必要，因為需要對某些特定行執行操作。話雖如此，其實大多數操作可以從表格的行中推算出來，成為頁面的不同部分。

靠近連結的操作

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

一行中要執行的操作的距離不應該遠離識別列。通常情況下，這會導致在錯誤行上執行操作。如若不然，使用者需要在識別追蹤行上花費過多精力，並努力避免點選操作到另外的行。這種模式很容易出錯，設計時應該避免。

冗餘操作

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

在這個例子中每行都重複出現一個「刪除」操作。想象一下，每行有 5、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、前端、後端、產品、設計 等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃。