ux設計_為企業UX設計更好的數據表

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
Simple data table
簡單數據表
Data table expanded view.
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 images of people in a column
Data table with image
帶有圖像的數據表
Data table with links
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
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 specofic column
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.

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

  1. Group by data type

    按數據類型分組
  2. Show/ hide columns

    顯示/隱藏列
  3. Freeze columns

    凍結欄
  4. Determine display density

    確定顯示密度
  5. Export and Import data

    導出和導入數據
Customize data table.
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.

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

Sort data table
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.
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 one column
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 both left-most and right-most column
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工作表一樣可編輯。 如果編輯表不是最常見的任務,則還可以每行使用一個編輯操作。

Edit view for data table
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 for data table
Error handling on an editable data table
對可編輯數據表的錯誤處理
Take bulk action on rows of a data table.
Bulk action on rows of a data table
對數據表的行執行批量操作
Single action on a row.
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.

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

Alignment of data in a column.
Data alignment in a column
列中的數據對齊
Group by a column value in a data table.
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 in a data table.
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
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 data table
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 撰寫

Image for post
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設計

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處: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,一經查實,立即刪除!

相關文章

hdu1728--------坑爹啊

尼瑪,就因為沒發現‘yes’寫成‘yrs’。整整讓哥找了一個小時的bug。有沒有..........此刻,內流滿面! 分析: 開始以為是單純的BFS,結果WA無數次!! 后來分析后發現是要找到不超過轉向次數的轉向路徑, 最重要…

狼叔直播 Reaction《學習指北:Node.js 2022 全解析》

大家好,我是若川。持續組織了6個月源碼共讀活動,感興趣的可以點此加我微信 ruochuan02 參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列本文是…

figma下載_Figma中的高級圖像處理

figma下載Figma is not exactly suited for image manipulation, and that’s completely fine. While it does provide an ample amount of tools that let you apply some basic changes to your raster images, for anything more complex you need to look someplace else.…

ToString格式化

在很多對象顯示為字符串的時候都會使用到ToString中的格式化,由于以前沒怎么注意到這個問題,想總結一下各個基礎結構對象的格式化,以便后備之用!!!Int.ToString(format): 格式字符串采用以下形式&#xff1…

xml學習4-dtd

1、DTD元素的定義 <?xml version"1.0" encoding"gb2312"?> <!--*表示0或者多個 表示至少要有一個 ?表示0個或者一個 內容模型 |表示只能包含分隔開中的一個 ,表示序列 下面是DTD元素的聲明 #PCDATA 表示字符數據 EMPTY表示 空元素…

指針和指針的指針_網絡上的iPad指針

指針和指針的指針a week ago I saw a new IPad Pointer presentation and was very excited about what they did. It was very interesting to see how they design different pointer modes and attention to details. Here is the presentation:一周前&#xff0c;我看到了一…

Vue 是如何用 Rollup 打包的?

大家好&#xff0c;我是若川。持續組織了6個月源碼共讀活動&#xff0c;感興趣的可以點此加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列Rollu…

leetcode 207課程表

class Solution { public:bool canFinish(int numCourses, vector<vector<int>>& prerequisites) {//驗證是否為DAG&#xff0c;每次驗證指向的是否已經存在于當前圖中//建圖vector<int> indegree(numCourses,0);//入度vector<vector<int>> …

2012-04-12

一.JS 中的return Return false&#xff1a;相當于一個終止符,用來阻止提交表單或繼續執行下面的代碼&#xff0c;只在當前函數有效&#xff0c;不會影響其他外部函數的執行 Eg: function a(){if(true) return false;} Function test{a();b();c();} //a方法中的return false 不…

sketch怎么傳到ps_2020年從Sketch移植到Figma的詳細指南

sketch怎么傳到psAs we’re locked up in our homes due to COVID-19 pandemic, many of us are working remotely and Figma is a go-to tool for designers for the same.由于COVID-19流行病使我們被關在家里&#xff0c;我們中的許多人都在遠程工作&#xff0c;而Figma是設計…

還沒搭建過Vue3.x項目?幾行代碼搞定~

大家好&#xff0c;我是若川。持續組織了6個月源碼共讀活動&#xff0c;感興趣的可以點此加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列相信現…

mysql 常用命令 匯總

參考閱讀 摘要 權限 允許公網訪問列操作 修改列名mysql 修改列屬性其他 登錄設置自動補全與utf-8編碼其他一次添加多條記錄修改表名字允許公網訪問 1,修改表,登錄mysql數據庫,切換到mysql數據庫,使用sql語句查看"select host,user from user ;" mysql -u root -pvmwa…

一步步創建 邊欄 Gadget(二)

相信使用上篇中創建的邊欄Gadget之后&#xff0c;大家會很郁悶。難道視頻窗口就那么小嗎&#xff1f;看起來真費勁。我能通過該Gadget看著一部電視劇。而不能夠定制自己需要的或者想要看的電視劇。 在上一篇一步步創建 邊欄 Gadget&#xff08;一&#xff09;中&#xff0c;我們…

tableau 自定義圖表_一種新的十六進制美國地圖布局的案例-Tableau中的自定義圖表

tableau 自定義圖表For whatever reason, 無論出于什么原因 maps are cool. Even though the earth has mostly been the same since those 地圖很酷 。 即使自Pangaea days, we humans make and remake maps constantly. It might be that old maps remind us of how things …

2022,前端工具鏈十年盤點

大家好&#xff0c;我是若川。持續組織了6個月源碼共讀活動&#xff0c;感興趣的可以點此加我微信 ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列2021 …

var result = ![] == []; console.log(result); // 結果是?為什么?

相等操作符會對操作值進行隱式轉換后進行比較&#xff0c;如果一個操作值為布爾值&#xff0c;則在比較之前先將其轉換為數值&#xff0c;這里 ![] 一定是布爾值了。 http://www.csser.com/board/4f3f516e38a5ebc9780004d3轉載于:https://www.cnblogs.com/anjey/archive/2012/0…

講講volatile的作用

講講volatile的作用 講講volatile的作用254推薦一個定義為volatile的變量是說這變量可能會被意想不到地改變&#xff0c;這樣&#xff0c;編譯器就不會去假設這個變量的值了。精確地說就是&#xff0c;優化器在用到這個變量時必須每次都小心地重新讀取這個變量的值&#xff0c;…

書籍排版學習心得_為什么排版是您可以學習的最佳技能

書籍排版學習心得重點 (Top highlight)I was introduced to design in a serpentine fashion. I don’t have any formal training. Instead, I’ve learned everything through the Web, books, and by interacting with designers daily.我被介紹為蛇形設計。 我沒有任何正規…

javascript專題:如何構建自己的js庫

首先看看這個&#xff1a; (function(){ //運行的代碼 })(); 紅色括號里面是一個匿名函數&#xff0c;紅色括號是分割&#xff0c;表示里面的函數是一個部分&#xff0c;綠色的括號表示一個運算符&#xff0c;表示紅色括號里面的函數要運行。 相當于定義完一個匿名函數后讓它直…

若川的 2021 年度總結,彈指之間

1前言從2014年開始&#xff0c;每一年都會寫年度總結&#xff0c;已經堅持了7個年頭。7年的光陰就是彈指之間&#xff0c;轉瞬即逝。正如孔子所說&#xff1a;逝者如斯夫&#xff0c;不舍晝夜。回顧2014&#xff0c;約定2015&#xff08;QQ空間日志&#xff09;2015年總結&…