表格頁(yè)面是B端項(xiàng)目中最重要的頁(yè)面類型，以項(xiàng)目實(shí)用角度來(lái)講，使用相同樣式的表格開(kāi)發(fā)起來(lái)成本很低，效率很高。但是，站在設(shè)計(jì)師的立場(chǎng)，表格足不了作品集包裝的規(guī)格，或者挑剔的甲方和領(lǐng)導(dǎo)的評(píng)審。下面這篇文章作者就為我們講解了如何進(jìn)行表格優(yōu)化。趕緊看看吧。

即使我們使用正確的標(biāo)準(zhǔn)和方法完成了表格的設(shè)計(jì)，依舊會(huì)產(chǎn)生一個(gè)問(wèn)題，就是整個(gè)項(xiàng)目的所有表格頁(yè)面似乎都長(zhǎng)得一樣！尤其在表格占據(jù)項(xiàng)目 80% 以上比例的時(shí)候，整個(gè)項(xiàng)目看起來(lái)似乎只有 “一種” 頁(yè)面，觀感特別不好。

如果以項(xiàng)目實(shí)用角度來(lái)講，使用相同樣式的表格開(kāi)發(fā)起來(lái)成本很低，效率很高的，只要對(duì)應(yīng)的場(chǎng)景下用戶使用起來(lái)不覺(jué)得有問(wèn)題，那全是表格就沒(méi)有什么不合理的地方。

但是，站在設(shè)計(jì)師的立場(chǎng)，所有頁(yè)面都是復(fù)制粘貼的形式即使能滿足項(xiàng)目落地需求，也滿足不了作品集包裝的規(guī)格，或者挑剔的甲方和領(lǐng)導(dǎo)的評(píng)審（沒(méi)有設(shè)計(jì)感）。

所以，作為設(shè)計(jì)師必須要具備更多樣的表格頁(yè)面設(shè)計(jì)思路，以應(yīng)對(duì)評(píng)審和最終作品集輸出的場(chǎng)景。所以這篇要站在政治不正確的角度出發(fā)，不再思考體驗(yàn)和價(jià)值，完全就是圍繞設(shè)計(jì)師“保命”方式展開(kāi)。

這次的分享，就圍繞怎么優(yōu)化表格頁(yè)的設(shè)計(jì)展開(kāi)，下面是一個(gè)基礎(chǔ)的表格案例，我們會(huì)用它來(lái)完成一系列的調(diào)整演示。

一、表格的優(yōu)化

表格頁(yè)面本身可以優(yōu)化的內(nèi)容是不少的，在我們切換表格頁(yè)面都是類型之前，首先要在固有基礎(chǔ)上做努力。
可以調(diào)整的內(nèi)容包含3種：

• 增加頁(yè)面模塊
• 優(yōu)化篩選模塊
• 豐富表格組件

1. 增加頁(yè)面模塊

這個(gè)功能說(shuō)起，有時(shí)候一些枯燥、簡(jiǎn)單的頁(yè)面是很難做出設(shè)計(jì)感的，設(shè)計(jì)元素過(guò)少就很難有施展的余地，所以需要人為去增加一點(diǎn)細(xì)節(jié)。

雖然模塊、字段通常是需要根據(jù)業(yè)務(wù)需求制作的，但不代表設(shè)計(jì)師不能根據(jù)自己的想法去提出一些新的需求建議，尤其是在優(yōu)化自己的作品集時(shí)。

例如增加和功能關(guān)聯(lián)性不大的數(shù)字統(tǒng)計(jì)模塊，和地圖相關(guān)的場(chǎng)景中增加地圖模塊，針對(duì)層級(jí)篩選的側(cè)邊樹(shù)狀選擇欄，或者和本頁(yè)面相關(guān)的其它模塊。

2. 優(yōu)化篩選模塊

讓篩選和頁(yè)面樣式結(jié)合的更合理一點(diǎn)。最基礎(chǔ)也最簡(jiǎn)單的篩選就是獨(dú)立一個(gè)模塊來(lái)放置篩選選項(xiàng)和矩形框，我們可以打破這種形式，一方面優(yōu)化選項(xiàng)數(shù)量，另一方面可以將它們和表格組件進(jìn)行合并。

3. 組件自身的優(yōu)化

也是頁(yè)面最關(guān)鍵的因素。如果真的有關(guān)注過(guò)表格的樣式，就應(yīng)該知道表格的每個(gè)細(xì)節(jié)都可以成為設(shè)計(jì)點(diǎn)。包括表頭、分割線、斑馬紋、堆疊、字段對(duì)比、字段樣式、操作列、交互反饋等等。

即使是一個(gè)本身很枯燥的表格，我們也根據(jù)想要實(shí)現(xiàn)的效果，適當(dāng)?shù)脑鰷p對(duì)應(yīng)的字段信息，來(lái)達(dá)到指定的效果。

以評(píng)審和作品集的角度來(lái)看，表格頁(yè)面需要盡量能輸出一些有 “設(shè)計(jì)感” 的樣式出來(lái)，不然免不了被指出或者低看。所以掌握越多的設(shè)計(jì)思路，就能帶給我們?cè)蕉嗟氖找妗?/p>

二、列表形式應(yīng)用

除了表格本身的樣式拓展和優(yōu)化，還必須關(guān)注一個(gè)問(wèn)題，就是表格頁(yè)面并不是一定要做表格！我們不是只能用表格的形式來(lái)呈現(xiàn)數(shù)據(jù)信息的，還有別的選項(xiàng)可以用。
第一個(gè)選項(xiàng)，就是轉(zhuǎn)換成列表的形式。

這是很多人都會(huì)搞混的兩種形式，表格是指使用橫縱坐標(biāo)來(lái)劃分單元格排布內(nèi)容的形式，而列表則是依序排列同級(jí)信息的方式，沒(méi)有固定的樣式。

B端的表格本質(zhì)上也是列表的一種，只是列表并不是只能當(dāng)表格，還可以當(dāng)卡片，當(dāng)圖標(biāo)，當(dāng)畫(huà)板，當(dāng)圖冊(cè)來(lái)展示。這是非常關(guān)鍵的認(rèn)知，決定了我們?cè)趺丛诒砀竦幕A(chǔ)上轉(zhuǎn)換出其它的樣式。

首先我們就說(shuō)基礎(chǔ)列表模式，和表格比較起來(lái)最大的區(qū)別，就是一個(gè)數(shù)據(jù)編組下的字段不用放進(jìn)單元格內(nèi)，無(wú)法直接用表頭對(duì)數(shù)據(jù)進(jìn)行辨識(shí)和排序。

而優(yōu)點(diǎn)是字段信息不用再使用這么固化的模式，可以更自由的進(jìn)行組合和排版，在一些不需要大量進(jìn)行表頭排序控制的頁(yè)面中，往往使用體驗(yàn)更佳。

所以，當(dāng)數(shù)據(jù)的條目數(shù)不是非常龐大，且字段信息過(guò)多難以辨識(shí)的情況，就可以嘗試使用基礎(chǔ)列表的模式來(lái)完成頁(yè)面類型的切換。

至于基礎(chǔ)列表還能拓展出什么花樣，建議大家多在線上的網(wǎng)站中參考，而不要把目光局限在 B 端產(chǎn)品中。

三、卡片樣式應(yīng)用

列表的第二種形式，就是卡片樣式類型了，通過(guò)卡片化的設(shè)計(jì)，來(lái)實(shí)現(xiàn)橫 / 縱向排列而不是只有縱向的排列模式。

卡片的設(shè)計(jì)具有更強(qiáng)的獨(dú)立性，來(lái)突出每個(gè)對(duì)象的特征和信息。同時(shí)也因?yàn)椴皇鼙砀癖旧淼南拗疲ㄆ脑O(shè)計(jì)也就具有更靈活的發(fā)揮空間。

而在設(shè)計(jì)卡片的過(guò)程中，一定要凸出標(biāo)題，同時(shí)要在卡片中應(yīng)用比較豐富的字段樣式，而不是僅僅把一堆文字換種排版堆到一個(gè)卡片里面。

比如下面是我們根據(jù)案例完成的調(diào)整：

四、畫(huà)板模式應(yīng)用

除了基本的卡片樣式外，還有一種以展示圖片為主的卡片類型 —— 畫(huà)板模式。
這在以圖片為主導(dǎo)的數(shù)據(jù)對(duì)象中非常常見(jiàn)，比如少量的新聞、商品、人員、門(mén)店對(duì)象的管理中，往往圖形的識(shí)別效率是遠(yuǎn)高于普通表格的。

而當(dāng)我們使用畫(huà)板模式的時(shí)候，就要確保數(shù)據(jù)中原本就包含易于識(shí)別的圖片內(nèi)容，如果沒(méi)有是沒(méi)辦法強(qiáng)行使用這種模式的，比如上方的案例中，強(qiáng)行使用圖片效果是不太理想的，因?yàn)閿?shù)據(jù)對(duì)象沒(méi)有能易于識(shí)別的圖片對(duì)象。

同時(shí)，站在作品集角度，如果封面圖片本身質(zhì)量太差（甚至同類找不出好的），那么使用這種模式的設(shè)計(jì)效果就不會(huì)特別理想，一定要注意。

五、圖標(biāo)模式應(yīng)用

最后一種，就是圖標(biāo)模式的應(yīng)用了，這在電腦資源管理器中最常見(jiàn)的顯示模式。它和畫(huà)板模式類似，但區(qū)別是每個(gè)數(shù)據(jù)對(duì)象的辨識(shí)從獨(dú)有的圖片切換成了更有指向性和寓意的圖標(biāo)。

這種模式適用于資源文件的管理，或者模塊、功能、組件、項(xiàng)目等數(shù)據(jù)內(nèi)容的羅列。

同理，圖標(biāo)模式的使用得符合圖標(biāo)識(shí)別的特性，如果數(shù)據(jù)對(duì)象本身沒(méi)有易于識(shí)別或有實(shí)際意義的圖標(biāo)，那么強(qiáng)行使用這種模式的效果也就不會(huì)太好。

包括這次我們使用的案例，應(yīng)用代碼類型、危害等級(jí)、風(fēng)險(xiǎn)情況任意一個(gè)字段作為展示的圖標(biāo)，都沒(méi)有太大的意義。所以能理解這個(gè)意思就可以，我就不在這里展示出來(lái)了。

六、結(jié)尾

總結(jié)起來(lái)，以上的“表格”頁(yè)面設(shè)計(jì)思路，本質(zhì)就是拿到需求以后，思考該頁(yè)面適合使用哪種形式展示，是只適合表格還是適合列表。

如果只能用表格，那么在表格的基礎(chǔ)上可以按頁(yè)面實(shí)際情況做優(yōu)化。如果適合做列表，那么使用基礎(chǔ)的，還是卡片、畫(huà)板、圖標(biāo)模式。

這種設(shè)計(jì)的思路和能力是B端設(shè)計(jì)師必備的能力，雖然不是每個(gè)項(xiàng)目都一定得這么輸出，但它能幫助我們打開(kāi)思路，應(yīng)對(duì)更復(fù)雜多樣的設(shè)計(jì)要求。