ux設計

重點 (Top highlight)

If you have worked on enterprise products, you must have noticed the use of lots of data tables. Therefore, I am writing this article to collect the most common use cases and discuss how elegantly we can handle them.

如果您使用過企業產品，那么您一定已經注意到使用了很多數據表。 因此，我寫這篇文章是為了收集最常見的用例，并討論我們如何優雅地處理它們。

Let’s start with the most simple data table with basic functionalities such as showing data in a grid, with a way to expand the rows to see more details.

讓我們從具有基本功能的最簡單的數據表開始，例如在網格中顯示數據，以及擴展行以查看更多詳細信息的方法。

In the design, you will notice that I have intentionally removed showing numbers for pagination. When you show pages users won’t have any clue what is inside those pages, so it does not make any sense for the user to go to a specific page. But, it is essential to show the data set count as well as the ability to go to the next or previous page. You will find this pattern even in Gmail.

在設計中，您會注意到我有意刪除了顯示分頁的數字。 當您顯示頁面時，用戶將不知道這些頁面的內容，因此用戶進入特定頁面沒有任何意義。 但是，必須顯示數據集計數以及轉到下一頁或上一頁的能力。 即使在Gmail中，您也可以找到這種模式。

Simple data table簡單數據表 Expanded view展開圖

When showing images show them in a round mask. There are lots of articles written on why the round shape is better than a square one when showing someone's photo.

顯示圖像時，請以圓形口罩顯示。 有很多文章介紹為什么在顯示某人的照片時圓形比方形更好。

Data table with image帶有圖像的數據表 Data table with links帶有鏈接的數據表

表標題選項 (Table header options)

Users should be able to search on data available in the table. Use the type-ahead feature to filter and show the search result once the user enters the second letter in the search.

用戶應該能夠搜索表中可用的數據。 一旦用戶在搜索中輸入第二個字母，請使用預輸入功能過濾并顯示搜索結果。

Search table搜索表

In form cases, you may need to allow the user to search a specific type of data in a column and this search by column can help you achieve that.

在表單情況下，可能需要允許用戶在列中搜索特定類型的數據，而這種按列搜索可以幫助您實現這一點。

Search a specific column搜索特定列

表定制 (Table customization)

In enterprise solutions, you could end up dealing with lots of data, so it’s essential to provide customization of the view.

在企業解決方案中，您最終可能要處理大量數據，因此提供視圖的自定義至關重要。

Group by data type

按數據類型分組

Show/ hide columns

顯示/隱藏列

Freeze columns

凍結欄

Determine display density

確定顯示密度

Export and Import data

導出和導入數據

Table customization options表自定義選項

排序欄 (Sort column)

Sorting is a simple function. But showing the icons on all the columns all the time could add visual noise. Therefore, I would recommend showing the sort icon on-hover. If the sort is active for a column, keep the icon visible.

排序是一個簡單的功能。 但是，始終在所有列上顯示圖標可能會增加視覺干擾。 因此，我建議懸停顯示排序圖標。 如果某列的排序處于活動狀態，請保持圖標可見。

Short table by data on a column按列上的數據按表格簡表

進階篩選 (Advanced filtering)

You will also find many use cases to show frequently used or advanced filters on the data table. You can prioritize these filters based on the frequency and urgency of use and leave the rest under the filter menu. You can also let the user customize filters they want to keep on the data table. This way, you give more control to the user on how they want to perform their task.

您還將找到許多用例，以在數據表上顯示常用或高級過濾器。 您可以根據使用頻率和緊迫性對這些過濾器進行優先級排序，然后將其余過濾器保留在過濾器菜單下。 您還可以讓用戶自定義要保留在數據表上的過濾器。 這樣，您就可以給用戶更多有關他們希望如何執行任務的控制權。

Quick or advanced filtering options on the data table.數據表上的快速或高級過濾選項。

管理大量列 (Managing a large number of columns)

When you have too many columns to display, consider freezing the first few columns to maintain context. This way, the rest of the table gets a scroll bar, and the whole table still maintains the context.

當要顯示的列過多時，請考慮凍結前幾列以維護上下文。 這樣，表的其余部分將獲得滾動條，并且整個表仍保持上下文。

Freeze a single column凍結單個列

If you have actions or, in this example, a date column that you want to keep visible at all times, consider freezing the last column as well.

如果您有操作，或者在此示例中希望始終保持可見的日期列，則也考慮凍結最后一列。

Freeze two columns凍結兩列

用于添加或編輯數據的表 (Table for adding or editing data)

The trigger for editing a table or row depends on the use case. You could consider making the whole table editable like an excel sheet if your use case is to let your user add or edit lots of data. You could also use an edit action per row if the editing table not the most common task.

用于編輯表或行的觸發器取決于用例。 如果您的用例是讓用戶添加或編輯大量數據，則可以考慮使整個表格像Excel工作表一樣可編輯。 如果編輯表不是最常見的任務，則還可以每行使用一個編輯操作。

Add or edit data in a table.在表中添加或編輯數據。

Consider using both color and icon while handling error. This will help with accessibility. Show a count on the table header as well and on-click filter the table to show the rows with errors.

處理錯誤時，請考慮同時使用顏色和圖標。 這將有助于輔助功能。 在表標題上也顯示一個計數，然后單擊過濾表以顯示有錯誤的行。

Error handling on an editable data table對可編輯數據表的錯誤處理 Bulk action on rows of a data table對數據表的行執行批量操作 Single action on a row單行動作

數據類型和對齊 (Data type and alignment)

By default, all the values should stay left-aligned, but Percentage, Amount and Date should be right-aligned.

默認情況下，所有值應保持左對齊，但百分比，金額和日期應右對齊。

Data alignment in a column列中的數據對齊 Group by a data type按數據類型分組

To resize a column, show a visual indicator when the user hovers on the divider line. Then the user can drag to the left or right to resize the column.

要調整列的大小，請在用戶將鼠標懸停在分隔線上時顯示視覺指示器。 然后，用戶可以向左或向右拖動以調整列的大小。

Resize columns調整列大小

響應式設計 (Responsive design)

The data table does not work very well in smaller form factors such as phones and smaller tablets. Therefore, replace the data table with the listview. In the listview, think of the critical information your user would need upfront and move all the other information to the details page on tap away.

數據表在較小尺寸的設備(例如電話和較小的平板電腦)中無法很好地工作。 因此，將數據表替換為listview。 在列表視圖中，考慮一下用戶可能需要的關鍵信息，然后輕按即可將所有其他信息移至詳細信息頁面。

If you are creating a data table as a global component, you may want to keep the details page as generic as possible, and on the use-case, by use-case basis, you may want to allow customization of the page.

如果要創建數據表作為全局組件，則可能希望使詳細信息頁面盡可能通用，并且在用例(按用例)的基礎上，您可能希望允許自定義頁面。

Responsive behavior for data table數據表的響應行為

The standard desktop experience for search and filter may not be ideal on a small mobile device. Therefore, use a native type of experience where you only focus on one task at a time by dedicating the entire screen to help the user perform the task.

在小型移動設備上，標準的桌面搜索和篩選體驗可能并不理想。 因此，請使用本機類型的體驗，您可以通過專注于整個屏幕來一次僅專注于一項任務，以幫助用戶執行任務。

Responsive behavior for search and filter.搜索和篩選的響應行為。

I hope this article will give you some food for thought. If you have any questions or suggestions, feel free to send me a message.

希望本文能給您一些思考。 如果您有任何疑問或建議，請隨時給我發消息。

This article has been written by Lalatendu Satpathy, UX leader at SAP.

本文由 SAP UX主管 Lalatendu Satpathy 撰寫 。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e

ux設計

總結

以上是生活随笔為你收集整理的ux设计_为企业UX设计更好的数据表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。