中後臺產品的表格設計，看這一篇就夠了（原型規範下載）

通過了將近一年的後臺產品經歷，踩了不少坑，試了不少錯，也學習到了不少東西，目前也造成了本身的一套規範。本文將其中的部分收穫彙總成文，但願可以對你們有所幫助。前端

後臺產品有一個很重要、常見的元素，就是表格。表格承擔着詳情入口、數據展現的功能，看似簡單，其實裏面的細節特別多。在以效率爲最重要的需求的後臺產品中，如何設計一個可以高效率地進行查看和編輯的表格，考驗着每個後臺產品經理的基本功。經過本文的講解，按照本文的規範來設計表格，基本上能夠作出一個不會出錯的表格。wordpress

表格主要承擔着查看和編輯兩個基礎功能。如何可以讓用戶方便、高效、溫馨地查看數據和編輯數據，須要設計不少的輔助功能。下面，咱們就圍繞着這兩大功能，就具體的功能點來進行探討。post

原型預覽：http://www.pmgrow.top/sheet/學習

原型下載：https://pan.baidu.com/s/1eTxGbHgurl

第一部分：查看

一、行

（1）默認每頁行數spa

該行數太多時，會致使頁面加載速度變慢；行數太少時，會致使用戶須要不斷翻頁，瀏覽效率下降。默認每頁行數須要根據用戶的實際使用場景來肯定，穩妥的作法是使用20或50。設計

（2）默認每屏行數3d

每一屏能顯示的行數。該行數太多時，會致使行高值較小，單行的查看效果差；該行數太少時，會致使用戶須要不斷滾動頁面，瀏覽效率下降。該行數和頁面分辨率有關，需在考慮到主要用戶的使用場景（筆記本仍是臺式、屏幕大小、主要分辨率）後進行肯定。blog

（3）每頁行數多於每屏行數時的處理方式排序

大多數狀況下，每頁行數是多於每屏行數的。在這樣的場景下，用戶使用的時候會發現這樣一個問題：向下縱向滾動頁面查看錶格內容，滾動到頁面中部或底部時，表頭是沒法看到的。用戶在看到一個數據時，是不可以直觀地知道這是哪項數據，從而須要向上滾動查看錶頭。尤爲是面對列數較多的表格時，這樣的場景會常常發生，頁面不斷地上下滾動，查看效率及其低下。

解決這個問題，一般有兩種處理方式：

固定表頭：表頭在滾動到頁面頂部時，始終固定在該位置，用戶可以方便地看到表頭和數據的對應關係。
表格的豎向滾動條：爲表格添加豎向滾動條，經過拖動豎向滾動條查看錶格內容。表頭是不會被拖動影響的。

二、列

（1）列隱藏、排序

表格的列數較多時，在一屏內是沒法展現所有列的，用戶須要經過橫向的滾動條來拖動查看不一樣的列。不一樣的用戶在不一樣的場景下，關注的列是不盡相同的。爲了知足這一需求，咱們須要容許用戶對列的自定義：包括哪些列展現出來，哪些列排在前面。用戶能夠把本身不關心的列隱藏，把關心的列放到最左邊，從而可以在一進入頁面時就能看到本身最關心的內容。

（2）固定列

至少有一列是不容許用戶對其進行隱藏和排序的。該列一般是表格數據的惟一區別項，如訂單列表的訂單號等。

（3）列寬

列寬須要肯定一個合理的默認值，從而使表格內容有好的展現效果。不能太窄，大量數據會顯示不完整；不能太寬，大量留白會讓瀏覽效率下降。

列寬值的肯定通常聽從如下原則：

表頭不能換行，列寬應至少大於表頭。
列內容的長度固定時，如手機號（11位數字）等，列寬應大於該固定寬度。
列內容的長度不固定時，應考慮大多數狀況下的長度狀況。如個性簽名，咱們會容許10~50個字符，但通過數據分析發現，大多數個性簽名的長度是在20之內的，咱們能夠設定列寬爲20，從而保證大多數狀況的完整顯示。
在較少狀況下，咱們設定的默認列寬沒能知足數據的完整顯示，而該數據的完整顯示對於用戶是比較重要的。針對這一狀況，咱們提供自定義列寬的功能，容許用戶對列寬進行調整，從而達到本身想要的展現效果。

（4）數據截斷

在數據長度大於列寬度時，咱們須要對數據內容進行截斷處理。截斷之後，末尾加……鼠標移入時在附近顯示浮層顯示完整內容。

浮層的位置：數據在縱向上的結合緊密時，浮層顯示在左右；數據在橫向上結合緊密時，浮層顯示在上下。這樣可以避免浮層對須要結合來看的數據形成遮擋。

三、分頁

分頁的功能較爲簡單，通常知足這些功能就能夠了：上一頁、下一頁、首頁、末頁、快速跳轉到某一頁、每頁數量的調整（20,50，100,200）

四、排序

（1）初始排序

頁面載入後，數據排列的順序，叫作初始排序。初始排序應爲用戶最關心的排序。如在時效性較強的列表，默認排序就應該是時間降序。金額比較重要的列表，默認排序就應該是金額降序。

（2）排序切換規則

當表格內的多列都具備排序功能時，須要考慮排序切換的邏輯。同時只能應用一種排序，在應用新的排序時，舊排序應該失效。

排序需經過單擊進行激活和切換。激活新排序時，默認是升序仍是降序，須要根據用戶的關注點來肯定（通常默認用降序）。新排序激活後，經過單擊切換升降序，排序應在「降序升序」中進行循環切換。

（3）不一樣字段的升降序邏輯

字段類型一般包括文本、數值、日期。文本升序以「數字-特殊符號-a-z-A-Z-漢字-其餘字符「來執行，數值則以數值大小來執行，日期以時間值前後執行，降序反之則能夠。須要注意的，有一些數值的升降序邏輯是須要特殊處理的，如排名。普通的數值的降序時大數在前，小數在後，但排名的降序應是小數在前，大數在後。

五、查找

（1）查找範圍

查找值須要匹配的範圍。如一個表格具備訂單號、收件人兩個字段，咱們能夠設置查找範圍爲這兩個字段。輸入查找值後，能夠查找到訂單號或收件人能和查找值匹配的內容。

（2）匹配方式

查找值和查找到的內容之間的匹配關係，包括精確、模糊、前綴等。一樣是查girl，精確只會查到girl，模糊能夠查到girl friend、pretty gril等，前綴只能查到pretty girl。

（3）排序規則

當咱們使用模糊查找girl時，可能會查找到不少符合的內容。若是咱們只是想找girl，可能須要翻頁去找到girl。爲了解決這個問題，一種方案是容許用戶選擇本次查找是精確仍是模糊；另外一種方案是用模糊查找後，將徹底同樣的結果放到首行，其他內容按原有方式排序。

六、對齊方式

爲了使表格內容的展現更美觀和高效，咱們須要肯定表格內容的對齊方式。一般使用文本左對齊、數值右對齊的方式。

七、詳情入口

表格有時候會承擔詳情入口的做用。表格展現簡要數據，經過點擊進入新的頁面查看詳情數據。因此，咱們須要設計一個點擊區域，讓用戶點擊後觸發進入詳情頁的操做。通常有兩種解決方案：一、以具備區別性的字段爲連接（視覺上要有所不一樣），如訂單號。二、在表格內設置單獨的「查看」入口。前者節省空間，但存在感弱；後者存在感強，但須要佔用單獨空間。咱們須要根據具體場景來肯定方案。

八、篩選

表格默認一般展現全部數據。當咱們只須要查找符合某些條件的內容時，就須要使用到篩選了。

篩選一般由多個條件構成。

（1）條件

使用【字段】-【比較關係】-【值】的方式來構成。如【訂單金額】【大於】【100】，

【收件人】【是】【張3、李四】等。比較關係一般包括是，不是，在，不在，大於，小於，等於，大於等於，小於等於，介於等。

（2）組合篩選

篩選由多個條件構成，咱們執行一個篩選須要添加多個條件。當這個篩選內的條件是比較固定，常用的狀況下，每次都從新選擇條件都比較低效了。因此，咱們須要提供篩選的保存功能。篩選在配置好後，能夠保存下來，下次使用無需從新編輯便可應用。篩選保存須要提供命名、重命名、編輯條件的配合功能。

（3）篩選的可見性

篩選之後，須要將使用的條件讓用戶可見。用戶可以直觀地在篩選條件和篩選後的內容之間造成對應關係。固然，篩選條件較多時，會佔用比較大的頁面空間，咱們也應該提供隱藏篩選的功能。

第二部分：操做

一、單項操做

對單項的操做，如刪除、啓動、暫停等。這些操做應放置在最表格右側，爲固定列。若是操做比較多時，需將多餘的操做摺疊爲‘更多’，表面上只保留1到2個經常使用操做。

二、編輯

在瀏覽表格內容時，有些數據咱們在查看之後是須要進行編輯的。此時，咱們須要提供給用戶快捷的編輯方式。若是須要編輯的項較少時，咱們能夠在鼠標移入編輯項時顯示編輯樣式，單擊編輯項時

進入編輯狀態，直接修改保存便可。當須要編輯的項較多時，能夠在操做欄放置編輯。點擊編輯，使全部編輯項進入編輯狀態。修改後，點擊保存，統一保存。值得注意的一點是，最好可以響應鍵盤操做，鍵盤的enter可以觸發保存操做。

三、勾選

（1）全選

全選選中後，能夠對所有項目進行批量選中。但在多頁的狀況下，全選一般有兩種需求：選中當前頁和選中所有。咱們應提供給用戶選擇，能夠分別實現這兩種選擇。

（2）跨頁選擇

有些時候，咱們須要勾選的項目在不一樣頁。在第一頁勾選幾項後，翻頁再去勾選其餘項時，每每沒法快速獲知已選項的狀況。因此，咱們在跨頁勾選時，在切換到其餘頁面時，須要在表格頂部顯示已選項的狀況，容許刪除其中某一項和清空全部。

（3）勾選狀態的保持

在一些場景下，咱們須要對同一批勾選項進行多個操做。因此，勾選完成後，執行第一個操做之後，咱們須要保持勾選狀態，以便執行接下來的操做。

四、按鈕

在表格頂部放置按鈕，執行經常使用操做，通常優先放在左側（勾選之後進行操做的鼠標移動路徑短）。若是按鈕較多，須要根據按鈕類型，將具備相同功能的按鈕摺疊組合。有一些按鈕是配合着勾選進行批量操做的，當沒有勾選項時，須要禁用該按鈕。

五、導出數據

表格一般用來展現數據，用戶每每會有將數據導出的需求。導出數據的功能設計時，咱們須要考慮這些。

（1）文件格式

一般使用xlsx。該格式展現效果好，兼容性好，便於後期處理。但當數量量較大的狀況下，基於導出速度的考慮，可使用csv格式。

（2）文件名

文件名要可以表達數據內容，一般使用【頁面】【表名】【時間】等字段來肯定表名。

（3）模板

導出的文件的模板。一般狀況下，咱們導出所有列的數據，縱使頁面上展現的是部分列的數據。部分狀況下，咱們須要對模板進行一些樣式上的處理，以達到美觀的效果。

（4）導出耗時

導出數據的過程是先生成該數據，而後在下載該數據。當導出的數據量較大的狀況下，生成數據耗時較長，咱們須要考慮導出耗時。一種簡單的設計方法是，點擊導出數據後，變爲導出中，以告知用戶數據正在導出。

結語

肯定規範的意義，在於可以減小協做中的溝通成本。當產品、UI、前端都對同一套規範達成共識時，開發效率會成倍的提升。產品在原型圖中無需添加常規的交互操做，也不用考慮前端的可實現性。UI和開發在看到你的原型圖時，能迅速地根據以前的規範，明白你想表達的意思。這樣，產品的精力就能更多地放在需求上。

在學習的過程當中，大量參考了螞蟻設計。推薦你們能夠去了解一下。

本文有大量內容是從交互設計角度說明的。因爲我以前是一直專一於需求，對於交互上的知識不是很充分，結果致使開發出來的產品的交互體驗太差。因此本身去主動學習了相關的內容。對於中後臺產品經理，尤爲是團隊內的開發資源不是很足夠的狀況下，引入一套規範來實現自家產品的標準化，是頗有做用的。若是你的團隊已經有成型的規範，請對本文中的內容適當採用。產品經理的主要精力仍是應該放在需求上。