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中,您也可以找到這種模式。


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.
顯示圖像時,請以圓形口罩顯示。 有很多文章介紹為什么在顯示某人的照片時圓形比方形更好。


表標題選項 (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.
用戶應該能夠搜索表中可用的數據。 一旦用戶在搜索中輸入第二個字母,請使用預輸入功能過濾并顯示搜索結果。

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.
在表單情況下,可能需要允許用戶在列中搜索特定類型的數據,而這種按列搜索可以幫助您實現這一點。

表定制 (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 導出和導入數據

排序欄 (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.
排序是一個簡單的功能。 但是,始終在所有列上顯示圖標可能會增加視覺干擾。 因此,我建議懸停顯示排序圖標。 如果某列的排序處于活動狀態,請保持圖標可見。

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

管理大量列 (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.
當要顯示的列過多時,請考慮凍結前幾列以維護上下文。 這樣,表的其余部分將獲得滾動條,并且整個表仍保持上下文。

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.
如果您有操作,或者在此示例中希望始終保持可見的日期列,則也考慮凍結最后一列。

用于添加或編輯數據的表 (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工作表一樣可編輯。 如果編輯表不是最常見的任務,則還可以每行使用一個編輯操作。

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



數據類型和對齊 (Data type and alignment)
By default, all the values should stay left-aligned, but Percentage, Amount and Date should be right-aligned.
默認情況下,所有值應保持左對齊,但百分比,金額和日期應右對齊。


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.
要調整列的大小,請在用戶將鼠標懸停在分隔線上時顯示視覺指示器。 然后,用戶可以向左或向右拖動以調整列的大小。

響應式設計 (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.
如果要創建數據表作為全局組件,則可能希望使詳細信息頁面盡可能通用,并且在用例(按用例)的基礎上,您可能希望允許自定義頁面。

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

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 撰寫 。
翻譯自: https://uxdesign.cc/data-table-for-enterprise-ux-cb48fb9fdf1e
ux設計
本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。 如若轉載,請注明出處:http://www.pswp.cn/news/274900.shtml 繁體地址,請注明出處:http://hk.pswp.cn/news/274900.shtml 英文地址,請注明出處:http://en.pswp.cn/news/274900.shtml
如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!