表格頁面是B端項目中最重要的頁面類型，以項目實用角度來講，使用相同樣式的表格開發起來成本很低，效率很高。但是，站在設計師的立場，表格足不了作品集包裝的規格，或者挑剔的甲方和上司的評審。下面這篇文章作者就為我們講解了如何進行表格優化。趕緊看看吧。
即使我們使用正确的标準和方法完成了表格的設計，依舊會産生一個問題，就是整個項目的所有表格頁面似乎都長得一樣！尤其在表格占據項目 80% 以上比例的時候，整個項目看起來似乎隻有 “一種” 頁面，觀感特别不好。
如果以項目實用角度來講，使用相同樣式的表格開發起來成本很低，效率很高的，隻要對應的場景下使用者使用起來不覺得有問題，那全是表格就沒有什麼不合理的地方。
但是，站在設計師的立場，所有頁面都是複制粘貼的形式即使能滿足項目落地需求，也滿足不了作品集包裝的規格，或者挑剔的甲方和上司的評審（沒有設計感）。
是以，作為設計師必須要具備更多樣的表格頁面設計思路，以應對評審和最終作品集輸出的場景。是以這篇要站在政治不正确的角度出發，不再思考體驗和價值，完全就是圍繞設計師“保命”方式展開。
這次的分享，就圍繞怎麼優化表格頁的設計展開，下面是一個基礎的表格案例，我們會用它來完成一系列的調整示範。
一、表格的優化
表格頁面本身可以優化的内容是不少的，在我們切換表格頁面都是類型之前，首先要在固有基礎上做努力。 可以調整的内容包含3種：
1. 增加頁面子產品
這個功能說起，有時候一些枯燥、簡單的頁面是很難做出設計感的，設計元素過少就很難有施展的餘地，是以需要人為去增加一點細節。
雖然子產品、字段通常是需要根據業務需求制作的，但不代表設計師不能根據自己的想法去提出一些新的需求建議，尤其是在優化自己的作品集時。
例如增加和功能關聯性不大的數字統計子產品，和地圖相關的場景中增加地圖子產品，針對層級篩選的側邊樹狀選擇欄，或者和本頁面相關的其它子產品。
2. 優化篩選子產品
讓篩選和頁面樣式結合的更合理一點。最基礎也最簡單的篩選就是獨立一個子產品來放置篩選選項和矩形框，我們可以打破這種形式，一方面優化選項數量，另一方面可以将它們和表格元件進行合并。
3. 元件自身的優化
也是頁面最關鍵的因素。如果真的有關注過表格的樣式，就應該知道表格的每個細節都可以成為設計點。包括表頭、分割線、斑馬紋、堆疊、字段對比、字段樣式、操作列、互動回報等等。
即使是一個本身很枯燥的表格，我們也根據想要實作的效果，适當的增減對應的字段資訊，來達到指定的效果。
以評審和作品集的角度來看，表格頁面需要盡量能輸出一些有 “設計感” 的樣式出來，不然免不了被指出或者低看。是以掌握越多的設計思路，就能帶給我們越多的收益。
二、清單形式應用
除了表格本身的樣式拓展和優化，還必須關注一個問題，就是表格頁面并不是一定要做表格！我們不是隻能用表格的形式來呈現資料資訊的，還有别的選項可以用。 第一個選項，就是轉換成清單的形式。
這是很多人都會搞混的兩種形式，表格是指使用橫縱坐标來劃分單元格排布内容的形式，而清單則是依序排列同級資訊的方式，沒有固定的樣式。
B端的表格本質上也是清單的一種，隻是清單并不是隻能當表格，還可以當卡片，當圖示，當畫闆，當圖冊來展示。這是非常關鍵的認知，決定了我們怎麼在表格的基礎上轉換出其它的樣式。
首先我們就說基礎清單模式，和表格比較起來最大的差別，就是一個資料編組下的字段不用放進單元格内，無法直接用表頭對資料進行辨識和排序。
而優點是字段資訊不用再使用這麼固化的模式，可以更自由的進行組合和排版，在一些不需要大量進行表頭排序控制的頁面中，往往使用體驗更佳。
是以，當資料的條目數不是非常龐大，且字段資訊過多難以辨識的情況，就可以嘗試使用基礎清單的模式來完成頁面類型的切換。
至于基礎清單還能拓展出什麼花樣，建議大家多線上上的網站中參考，而不要把目光局限在 B 端産品中。
三、卡片樣式應用
清單的第二種形式，就是卡片樣式類型了，通過卡片化的設計，來實作橫 / 縱向排列而不是隻有縱向的排列模式。
卡片的設計具有更強的獨立性，來突出每個對象的特征和資訊。同時也因為不受表格本身的限制，卡片的設計也就具有更靈活的發揮空間。
而在設計卡片的過程中，一定要凸出标題，同時要在卡片中應用比較豐富的字段樣式，而不是僅僅把一堆文字換種排版堆到一個卡片裡面。
比如下面是我們根據案例完成的調整：
四、畫闆模式應用
除了基本的卡片樣式外，還有一種以展示圖檔為主的卡片類型 —— 畫闆模式。
這在以圖檔為主導的資料對象中非常常見，比如少量的新聞、商品、人員、門店對象的管理中，往往圖形的識别效率是遠高于普通表格的。
而當我們使用畫闆模式的時候，就要確定資料中原本就包含易于識别的圖檔内容，如果沒有是沒辦法強行使用這種模式的，比如上方的案例中，強行使用圖檔效果是不太理想的，因為資料對象沒有能易于識别的圖檔對象。
同時，站在作品集角度，如果封面圖檔本身品質太差（甚至同類找不出好的），那麼使用這種模式的設計效果就不會特别理想，一定要注意。
五、圖示模式應用
最後一種，就是圖示模式的應用了，這在電腦資料總管中最常見的顯示模式。它和畫闆模式類似，但差別是每個資料對象的辨識從獨有的圖檔切換成了更有指向性和寓意的圖示。
這種模式适用于資源檔案的管理，或者子產品、功能、元件、項目等資料内容的羅列。
同理，圖示模式的使用得符合圖示識别的特性，如果資料對象本身沒有易于識别或有實際意義的圖示，那麼強行使用這種模式的效果也就不會太好。
包括這次我們使用的案例，應用代碼類型、危害等級、風險情況任意一個字段作為展示的圖示，都沒有太大的意義。是以能了解這個意思就可以，我就不在這裡展示出來了。
六、結尾
總結起來，以上的“表格”頁面設計思路，本質就是拿到需求以後，思考該頁面适合使用哪種形式展示，是隻适合表格還是适合清單。
如果隻能用表格，那麼在表格的基礎上可以按頁面實際情況做優化。如果适合做清單，那麼使用基礎的，還是卡片、畫闆、圖示模式。
這種設計的思路和能力是B端設計師必備的能力，雖然不是每個項目都一定得這麼輸出，但它能幫助我們打開思路，應對更複雜多樣的設計要求。
作者：酸梅幹超人；公衆号：超人的電話亭（ID：Superman_Call）
本文由 @超人的電話亭 原創釋出于人人都是産品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協定。
該文觀點僅代表作者本人，人人都是産品經理平台僅提供資訊存儲空間服務。