經過了將近一年的后臺產品經歷，踩了很多坑，試了很多錯，也學習到了很多東西，目前也形成了自己的一套規(guī)范。本文將其中的部分收獲匯總成文，希望能夠對大家有所幫助。

后臺產品有一個很重要、常見的元素，就是表格。表格承擔著詳情入口、數(shù)據(jù)展示的功能，看似簡單，其實里面的細節(jié)特別多。在以效率為最重要的需求的后臺產品中，如何設計一個能夠高效率地進行查看和編輯的表格，考驗著每一個后臺產品經理的基本功。通過本文的講解，按照本文的規(guī)范來設計表格，基本上可以做出一個不會出錯的表格。

表格主要承擔著查看和編輯兩個基礎功能。如何能夠讓用戶方便、高效、舒適地查看數(shù)據(jù)和編輯數(shù)據(jù)，需要設計很多的輔助功能。下面，我們就圍繞著這兩大功能，就具體的功能點來進行探討。

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

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

第一部分：查看

1、行

（1）默認每頁行數(shù)

該行數(shù)太多時，會導致頁面加載速度變慢；行數(shù)太少時，會導致用戶需要不斷翻頁，瀏覽效率降低。默認每頁行數(shù)需要根據(jù)用戶的實際使用場景來確定，穩(wěn)妥的做法是使用20或50。

（2）默認每屏行數(shù)

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

（3）每頁行數(shù)多于每屏行數(shù)時的處理方式

大多數(shù)情況下，每頁行數(shù)是多于每屏行數(shù)的。在這樣的場景下，用戶使用的時候會發(fā)現(xiàn)這樣一個問題：向下縱向滾動頁面查看表格內容，滾動到頁面中部或底部時，表頭是無法看到的。用戶在看到一個數(shù)據(jù)時，是不能夠直觀地知道這是哪項數(shù)據(jù)，從而需要向上滾動查看表頭。尤其是面對列數(shù)較多的表格時，這樣的場景會經常發(fā)生，頁面不斷地上下滾動，查看效率及其低下。

解決這個問題，通常有兩種處理方式：

1. 固定表頭：表頭在滾動到頁面頂部時，始終固定在該位置，用戶能夠方便地看到表頭和數(shù)據(jù)的對應關系。
2. 表格的豎向滾動條：為表格添加豎向滾動條，通過拖動豎向滾動條查看表格內容。表頭是不會被拖動影響的。

2、列

（1）列隱藏、排序

表格的列數(shù)較多時，在一屏內是無法展示全部列的，用戶需要通過橫向的滾動條來拖動查看不同的列。不同的用戶在不同的場景下，關注的列是不盡相同的。為了滿足這一需求，我們需要允許用戶對列的自定義：包括哪些列展示出來，哪些列排在前面。用戶可以把自己不關心的列隱藏，把關心的列放到最左邊，從而能夠在一進入頁面時就能看到自己最關心的內容。

（2）固定列

至少有一列是不允許用戶對其進行隱藏和排序的。該列通常是表格數(shù)據(jù)的唯一區(qū)別項，如訂單列表的訂單號等。

（3）列寬

列寬需要確定一個合理的默認值，從而使表格內容有好的展示效果。不能太窄，大量數(shù)據(jù)會顯示不完整；不能太寬，大量留白會讓瀏覽效率降低。

列寬值的確定一般遵從以下原則：

• 表頭不能換行，列寬應至少大于表頭。
• 列內容的長度固定時，如手機號（11位數(shù)字）等，列寬應大于該固定寬度。
• 列內容的長度不固定時，應考慮大多數(shù)情況下的長度情況。如個性簽名，我們會允許10~50個字符，但經過數(shù)據(jù)分析發(fā)現(xiàn)，大多數(shù)個性簽名的長度是在20以內的，我們可以設定列寬為20，從而保證大多數(shù)情況的完整顯示。
• 在較少情況下，我們設定的默認列寬沒能滿足數(shù)據(jù)的完整顯示，而該數(shù)據(jù)的完整顯示對于用戶是比較重要的。針對這一情況，我們提供自定義列寬的功能，允許用戶對列寬進行調整，從而達到自己想要的展示效果。

（4）數(shù)據(jù)截斷

在數(shù)據(jù)長度大于列寬度時，我們需要對數(shù)據(jù)內容進行截斷處理。截斷以后，末尾加……鼠標移入時在附近顯示浮層顯示完整內容。

浮層的位置：數(shù)據(jù)在縱向上的結合緊密時，浮層顯示在左右；數(shù)據(jù)在橫向上結合緊密時，浮層顯示在上下。這樣能夠避免浮層對需要結合來看的數(shù)據(jù)造成遮擋。

3、分頁

分頁的功能較為簡單，一般滿足這些功能就可以了：上一頁、下一頁、首頁、末頁、快速跳轉到某一頁、每頁數(shù)量的調整（20,50，100,200）

4、排序

（1）初始排序

頁面載入后，數(shù)據(jù)排列的順序，叫做初始排序。初始排序應為用戶最關心的排序。如在時效性較強的列表，默認排序就應該是時間降序。金額比較重要的列表，默認排序就應該是金額降序。

（2）排序切換規(guī)則

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

排序需通過單擊進行激活和切換。激活新排序時，默認是升序還是降序，需要根據(jù)用戶的關注點來確定（一般默認用降序）。新排序激活后，通過單擊切換升降序，排序應在“降序升序”中進行循環(huán)切換。

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

字段類型通常包括文本、數(shù)值、日期。文本升序以“數(shù)字-特殊符號-a-z-A-Z-漢字-其他字符“來執(zhí)行，數(shù)值則以數(shù)值大小來執(zhí)行，日期以時間值先后執(zhí)行，降序反之則可以。需要注意的，有一些數(shù)值的升降序邏輯是需要特殊處理的，如排名。普通的數(shù)值的降序時大數(shù)在前，小數(shù)在后，但排名的降序應是小數(shù)在前，大數(shù)在后。

5、查找

（1）查找范圍

查找值需要匹配的范圍。如一個表格具有訂單號、收件人兩個字段，我們可以設置查找范圍為這兩個字段。輸入查找值后，可以查找到訂單號或收件人能和查找值匹配的內容。

（2）匹配方式

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

（3）排序規(guī)則

當我們使用模糊查找girl時，可能會查找到很多符合的內容。如果我們只是想找girl，可能需要翻頁去找到girl。為了解決這個問題，一種方案是允許用戶選擇本次查找是精確還是模糊；另一種方案是用模糊查找后，將完全一樣的結果放到首行，其余內容按原有方式排序。

6、對齊方式

為了使表格內容的展示更美觀和高效，我們需要確定表格內容的對齊方式。通常使用文本左對齊、數(shù)值右對齊的方式。

7、詳情入口

表格有時候會承擔詳情入口的作用。表格展示簡要數(shù)據(jù)，通過點擊進入新的頁面查看詳情數(shù)據(jù)。所以，我們需要設計一個點擊區(qū)域，讓用戶點擊后觸發(fā)進入詳情頁的操作。一般有兩種解決方案：1、以具有區(qū)別性的字段為鏈接（視覺上要有所不同），如訂單號。2、在表格內設置單獨的“查看”入口。前者節(jié)省空間，但存在感弱；后者存在感強，但需要占用單獨空間。我們需要根據(jù)具體場景來確定方案。

8、篩選

表格默認通常展示所有數(shù)據(jù)。當我們只需要查找符合某些條件的內容時，就需要使用到篩選了。

篩選通常由多個條件構成。

（1）條件

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

【收件人】【是】【張三、李四】等。比較關系通常包括 是，不是，在，不在，大于，小于，等于，大于等于，小于等于，介于等。

（2）組合篩選

篩選由多個條件構成，我們執(zhí)行一個篩選需要添加多個條件。當這個篩選內的條件是比較固定，經常使用的情況下，每次都重新選擇條件都比較低效了。所以，我們需要提供篩選的保存功能。篩選在配置好后，可以保存下來，下次使用無需重新編輯即可應用。篩選保存需要提供命名、重命名、編輯條件的配合功能。

（3）篩選的可見性

篩選以后，需要將使用的條件讓用戶可見。用戶能夠直觀地在篩選條件和篩選后的內容之間形成對應關系。當然，篩選條件較多時，會占用比較大的頁面空間，我們也應該提供隱藏篩選的功能。

第二部分：操作

1、單項操作

對單項的操作，如刪除、啟動、暫停等。這些操作應放置在最表格右側，為固定列。如果操作比較多時，需將多余的操作折疊為‘更多’，表面上只保留1到2個常用操作。

2、編輯

在瀏覽表格內容時，有些數(shù)據(jù)我們在查看以后是需要進行編輯的。此時，我們需要提供給用戶快捷的編輯方式。如果需要編輯的項較少時，我們可以在鼠標移入編輯項時顯示編輯樣式，單擊編輯項時

進入編輯狀態(tài)，直接修改保存即可。當需要編輯的項較多時，可以在操作欄放置編輯。點擊編輯，使所有編輯項進入編輯狀態(tài)。修改后，點擊保存，統(tǒng)一保存。值得注意的一點是，最好能夠響應鍵盤操作，鍵盤的enter能夠觸發(fā)保存操作。

3、勾選

（1）全選

全選選中后，可以對全部項目進行批量選中。但在多頁的情況下，全選通常有兩種需求：選中當前頁和選中全部。我們應提供給用戶選擇，可以分別實現(xiàn)這兩種選擇。

（2）跨頁選擇

有些時候，我們需要勾選的項目在不同頁。在第一頁勾選幾項后，翻頁再去勾選其他項時，往往無法快速獲知已選項的情況。所以，我們在跨頁勾選時，在切換到其他頁面時，需要在表格頂部顯示已選項的情況，允許刪除其中某一項和清空所有。

（3）勾選狀態(tài)的保持

在一些場景下，我們需要對同一批勾選項進行多個操作。所以，勾選完成后，執(zhí)行第一個操作以后，我們需要保持勾選狀態(tài)，以便執(zhí)行接下來的操作。

4、按鈕

在表格頂部放置按鈕，執(zhí)行常用操作，一般優(yōu)先放在左側（勾選以后進行操作的鼠標移動路徑短）。如果按鈕較多，需要根據(jù)按鈕類型，將具有相同功能的按鈕折疊組合。有一些按鈕是配合著勾選進行批量操作的，當沒有勾選項時，需要禁用該按鈕。

5、導出數(shù)據(jù)

表格通常用來展示數(shù)據(jù)，用戶往往會有將數(shù)據(jù)導出的需求。導出數(shù)據(jù)的功能設計時，我們需要考慮這些。

（1）文件格式

通常使用xlsx。該格式展示效果好，兼容性好，便于后期處理。但當數(shù)量量較大的情況下，基于導出速度的考慮，可以使用csv格式。

（2）文件名

文件名要能夠表達數(shù)據(jù)內容，通常使用【頁面】【表名】【時間】等字段來確定表名。

（3）模板

導出的文件的模板。通常情況下，我們導出全部列的數(shù)據(jù)，縱使頁面上展示的是部分列的數(shù)據(jù)。部分情況下，我們需要對模板進行一些樣式上的處理，以達到美觀的效果。

（4）導出耗時

導出數(shù)據(jù)的過程是先生成該數(shù)據(jù)，然后在下載該數(shù)據(jù)。當導出的數(shù)據(jù)量較大的情況下，生成數(shù)據(jù)耗時較長，我們需要考慮導出耗時。一種簡單的設計方法是，點擊導出數(shù)據(jù)后，變?yōu)閷С鲋?，以告知用戶?shù)據(jù)正在導出。

結語

確定規(guī)范的意義，在于能夠減少協(xié)作中的溝通成本。當產品、UI、前端都對同一套規(guī)范達成共識時，開發(fā)效率會成倍的提高。產品在原型圖中無需添加常規(guī)的交互操作，也不用考慮前端的可實現(xiàn)性。UI和開發(fā)在看到你的原型圖時，能迅速地根據(jù)之前的規(guī)范，明白你想表達的意思。這樣，產品的精力就能更多地放在需求上。

在學習的過程中，大量參考了螞蟻設計。推薦大家可以去了解一下。

本文有大量內容是從交互設計角度說明的。由于我之前是一直專注于需求，對于交互上的知識不是很充分，結果導致開發(fā)出來的產品的交互體驗太差。所以自己去主動學習了相關的內容。對于中后臺產品經理，尤其是團隊內的開發(fā)資源不是很足夠的情況下，引入一套規(guī)范來實現(xiàn)自家產品的標準化，是很有作用的。如果你的團隊已經有成型的規(guī)范，請對本文中的內容適當采用。產品經理的主要精力還是應該放在需求上。

本文由 @流風 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協(xié)議