中後臺產品的表格設計，看這一篇就夠了（原型規範下載）
中後臺產品的表格設計，看這一篇就夠了（原型規範下載）
中後臺產品的表格設計，看這一篇就夠了（原型規範下載）
經過了將近一年的後臺產品經歷，踩了很多坑，試了很多錯，也學習到了很多東西，目前也形成了自己的一套規範。本文將其中的部分收穫彙總成文，希望能夠對大家有所幫助。
後臺產品有一個很重要、常見的元素，就是表格。表格承擔著詳情入口、資料展示的功能，看似簡單，其實裡面的細節特別多。在以效率為最重要的需求的後臺產品中，如何設計一個能夠高效率地進行檢視和編輯的表格，考驗著每一個後臺產品經理的基本功。通過本文的講解，按照本文的規範來設計表格，基本上可以做出一個不會出錯的表格。
表格主要承擔著檢視和編輯兩個基礎功能。如何能夠讓使用者方便、高效、舒適地檢視資料和編輯資料，需要設計很多的輔助功能。下面，我們就圍繞著這兩大功能，就具體的功能點來進行探討。
原型預覽：http://www.pmgrow.top/sheet/
原型下載：https://pan.baidu.com/s/1eTxGbHg
第一部分：檢視
1、行
（1）預設每頁行數
該行數太多時，會導致頁面載入速度變慢；行數太少時，會導致使用者需要不斷翻頁，瀏覽效率降低。預設每頁行數需要根據使用者的實際使用場景來確定，穩妥的做法是使用20或50。
（2）預設每屏行數
每一屏能顯示的行數。該行數太多時，會導致行高值較小，單行的檢視效果差；該行數太少時，會導致使用者需要不斷滾動頁面，瀏覽效率降低。該行數和頁面解析度有關，需在考慮到主要使用者的使用場景（筆記本還是臺式、螢幕大小、主要解析度）後進行確定。
（3）每頁行數多於每屏行數時的處理方式
大多數情況下，每頁行數是多於每屏行數的。在這樣的場景下，使用者使用的時候會發現這樣一個問題：向下縱向滾動頁面查看錶格內容，滾動到頁面中部或底部時，表頭是無法看到的。使用者在看到一個數據時，是不能夠直觀地知道這是哪項資料，從而需要向上滾動查看錶頭。尤其是面對列數較多的表格時，這樣的場景會經常發生，頁面不斷地上下滾動，檢視效率及其低下。
解決這個問題，通常有兩種處理方式：
-
固定表頭：表頭在滾動到頁面頂部時，始終固定在該位置，使用者能夠方便地看到表頭和資料的對應關係。
-
表格的豎向滾動條：為表格新增豎向滾動條，通過拖動豎向滾動條查看錶格內容。表頭是不會被拖動影響的。
2、列
（1）列隱藏、排序
表格的列數較多時，在一屏內是無法展示全部列的，使用者需要通過橫向的滾動條來拖動檢視不同的列。不同的使用者在不同的場景下，關注的列是不盡相同的。為了滿足這一需求，我們需要允許使用者對列的自定義：包括哪些列展示出來，哪些列排在前面。使用者可以把自己不關心的列隱藏，把關心的列放到最左邊，從而能夠在一進入頁面時就能看到自己最關心的內容。
（2）固定列
至少有一列是不允許使用者對其進行隱藏和排序的。該列通常是表格資料的唯一區別項，如訂單列表的訂單號等。
（3）列寬
列寬需要確定一個合理的預設值，從而使表格內容有好的展示效果。不能太窄，大量資料會顯示不完整；不能太寬，大量留白會讓瀏覽效率降低。
列寬值的確定一般遵從以下原則：
-
表頭不能換行，列寬應至少大於表頭。
-
列內容的長度固定時，如手機號（11位數字）等，列寬應大於該固定寬度。
-
列內容的長度不固定時，應考慮大多數情況下的長度情況。如個性簽名，我們會允許10~50個字元，但經過資料分析發現，大多數個性簽名的長度是在20以內的，我們可以設定列寬為20，從而保證大多數情況的完整顯示。
-
在較少情況下，我們設定的預設列寬沒能滿足資料的完整顯示，而該資料的完整顯示對於使用者是比較重要的。針對這一情況，我們提供自定義列寬的功能，允許使用者對列寬進行調整，從而達到自己想要的展示效果。
（4）資料截斷
在資料長度大於列寬度時，我們需要對資料內容進行截斷處理。截斷以後，末尾加……滑鼠移入時在附近顯示浮層顯示完整內容。
浮層的位置：資料在縱向上的結合緊密時，浮層顯示在左右；資料在橫向上結合緊密時，浮層顯示在上下。這樣能夠避免浮層對需要結合來看的資料造成遮擋。
3、分頁
分頁的功能較為簡單，一般滿足這些功能就可以了：上一頁、下一頁、首頁、末頁、快速跳轉到某一頁、每頁數量的調整（20,50，100,200）
4、排序
（1）初始排序
頁面載入後，資料排列的順序，叫做初始排序。初始排序應為使用者最關心的排序。如在時效性較強的列表，預設排序就應該是時間降序。金額比較重要的列表，預設排序就應該是金額降序。
（2）排序切換規則
當表格內的多列都具有排序功能時，需要考慮排序切換的邏輯。同時只能應用一種排序，在應用新的排序時，舊排序應該失效。
排序需通過單擊進行啟用和切換。啟用新排序時，預設是升序還是降序，需要根據使用者的關注點來確定（一般預設用降序）。新排序啟用後，通過單擊切換升降序，排序應在“降序升序”中進行迴圈切換。
（3）不同欄位的升降序邏輯
欄位型別通常包括文字、數值、日期。文字升序以“數字-特殊符號-a-z-A-Z-漢字-其他字元“來執行，數值則以數值大小來執行，日期以時間值先後執行，降序反之則可以。需要注意的，有一些數值的升降序邏輯是需要特殊處理的，如排名。普通的數值的降序時大數在前，小數在後，但排名的降序應是小數在前，大數在後。
5、查詢
（1）查詢範圍
查詢值需要匹配的範圍。如一個表格具有訂單號、收件人兩個欄位，我們可以設定查詢範圍為這兩個欄位。輸入查詢值後，可以查詢到訂單號或收件人能和查詢值匹配的內容。
（2）匹配方式
查詢值和查詢到的內容之間的匹配關係，包括精確、模糊、字首等。同樣是查girl，精確只會查到girl，模糊可以查到girl friend、pretty gril等，字首只能查到pretty girl。
（3）排序規則
當我們使用模糊查詢girl時，可能會查詢到很多符合的內容。如果我們只是想找girl，可能需要翻頁去找到girl。為了解決這個問題，一種方案是允許使用者選擇本次查詢是精確還是模糊；另一種方案是用模糊查詢後，將完全一樣的結果放到首行，其餘內容按原有方式排序。
6、對齊方式
為了使表格內容的展示更美觀和高效，我們需要確定表格內容的對齊方式。通常使用文字左對齊、數值右對齊的方式。
7、詳情入口
表格有時候會承擔詳情入口的作用。表格展示簡要資料，通過點選進入新的頁面檢視詳情資料。所以，我們需要設計一個點選區域，讓使用者點選後觸發進入詳情頁的操作。一般有兩種解決方案：1、以具有區別性的欄位為連結（視覺上要有所不同），如訂單號。2、在表格內設定單獨的“檢視”入口。前者節省空間，但存在感弱；後者存在感強，但需要佔用單獨空間。我們需要根據具體場景來確定方案。
8、篩選
表格預設通常展示所有資料。當我們只需要查詢符合某些條件的內容時，就需要使用到篩選了。
篩選通常由多個條件構成。
（1）條件
使用【欄位】-【比較關係】-【值】的方式來構成。如【訂單金額】【大於】【100】，
【收件人】【是】【張三、李四】等。比較關係通常包括 是，不是，在，不在，大於，小於，等於，大於等於，小於等於，介於等。
（2）組合篩選
篩選由多個條件構成，我們執行一個篩選需要新增多個條件。當這個篩選內的條件是比較固定，經常使用的情況下，每次都重新選擇條件都比較低效了。所以，我們需要提供篩選的儲存功能。篩選在配置好後，可以儲存下來，下次使用無需重新編輯即可應用。篩選儲存需要提供命名、重新命名、編輯條件的配合功能。
（3）篩選的可見性
篩選以後，需要將使用的條件讓使用者可見。使用者能夠直觀地在篩選條件和篩選後的內容之間形成對應關係。當然，篩選條件較多時，會佔用比較大的頁面空間，我們也應該提供隱藏篩選的功能。
第二部分：操作
1、單項操作
對單項的操作，如刪除、啟動、暫停等。這些操作應放置在最表格右側，為固定列。如果操作比較多時，需將多餘的操作摺疊為‘更多’，表面上只保留1到2個常用操作。
2、編輯
在瀏覽表格內容時，有些資料我們在檢視以後是需要進行編輯的。此時，我們需要提供給使用者快捷的編輯方式。如果需要編輯的項較少時，我們可以在滑鼠移入編輯項時顯示編輯樣式，單擊編輯項時
進入編輯狀態，直接修改儲存即可。當需要編輯的項較多時，可以在操作欄放置編輯。點選編輯，使所有編輯項進入編輯狀態。修改後，點選儲存，統一儲存。值得注意的一點是，最好能夠響應鍵盤操作，鍵盤的enter能夠觸發儲存操作。
3、勾選
（1）全選
全選選中後，可以對全部專案進行批量選中。但在多頁的情況下，全選通常有兩種需求：選中當前頁和選中全部。我們應提供給使用者選擇，可以分別實現這兩種選擇。
（2）跨頁選擇
有些時候，我們需要勾選的專案在不同頁。在第一頁勾選幾項後，翻頁再去勾選其他項時，往往無法快速獲知已選項的情況。所以，我們在跨頁勾選時，在切換到其他頁面時，需要在表格頂部顯示已選項的情況，允許刪除其中某一項和清空所有。
（3）勾選狀態的保持
在一些場景下，我們需要對同一批勾選項進行多個操作。所以，勾選完成後，執行第一個操作以後，我們需要保持勾選狀態，以便執行接下來的操作。
4、按鈕
在表格頂部放置按鈕，執行常用操作，一般優先放在左側（勾選以後進行操作的滑鼠移動路徑短）。如果按鈕較多，需要根據按鈕型別，將具有相同功能的按鈕摺疊組合。有一些按鈕是配合著勾選進行批量操作的，當沒有勾選項時，需要禁用該按鈕。
5、匯出資料
表格通常用來展示資料，使用者往往會有將資料匯出的需求。匯出資料的功能設計時，我們需要考慮這些。
（1）檔案格式
通常使用xlsx。該格式展示效果好，相容性好，便於後期處理。但當數量量較大的情況下，基於匯出速度的考慮，可以使用csv格式。
（2）檔名
檔名要能夠表達資料內容，通常使用【頁面】【表名】【時間】等欄位來確定表名。
（3）模板
匯出的檔案的模板。通常情況下，我們匯出全部列的資料，縱使頁面上展示的是部分列的資料。部分情況下，我們需要對模板進行一些樣式上的處理，以達到美觀的效果。
（4）匯出耗時
匯出資料的過程是先生成該資料，然後在下載該資料。當匯出的資料量較大的情況下，生成資料耗時較長，我們需要考慮匯出耗時。一種簡單的設計方法是，點選匯出資料後，變為匯出中，以告知使用者資料正在匯出。
結語
確定規範的意義，在於能夠減少協作中的溝通成本。當產品、UI、前端都對同一套規範達成共識時，開發效率會成倍的提高。產品在原型圖中無需新增常規的互動操作，也不用考慮前端的可實現性。UI和開發在看到你的原型圖時，能迅速地根據之前的規範，明白你想表達的意思。這樣，產品的精力就能更多地放在需求上。
在學習的過程中，大量參考了螞蟻設計。推薦大家可以去了解一下。
本文有大量內容是從互動設計角度說明的。由於我之前是一直專注於需求，對於互動上的知識不是很充分，結果導致開發出來的產品的互動體驗太差。所以自己去主動學習了相關的內容。對於中後臺產品經理，尤其是團隊內的開發資源不是很足夠的情況下，引入一套規範來實現自家產品的標準化，是很有作用的。如果你的團隊已經有成型的規範，請對本文中的內容適當採用。產品經理的主要精力還是應該放在需求上。