表格頁面是B端項(xiàng)目中最重要的頁面類型，所以我們?cè)谇懊娣窒砹瞬簧訇P(guān)于表格相關(guān)的規(guī)范和設(shè)計(jì)思路。

案例解析 | 10個(gè)表格加分項(xiàng)設(shè)計(jì)（加了億點(diǎn)點(diǎn)細(xì)節(jié)

年前最后一篇長(zhǎng)干貨，B端表格規(guī)范最終集奉上

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

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

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

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

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

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

可以調(diào)整的內(nèi)容包含3種，增加頁面模塊，優(yōu)化篩選模塊，豐富表格組件。

首先圍繞增加頁面模塊這個(gè)功能說起，有時(shí)候一些枯燥、簡(jiǎn)單的頁面是很難做出設(shè)計(jì)感的，設(shè)計(jì)元素過少就很難有施展的余地，所以需要人為去增加一點(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è)邊樹狀選擇欄，或者和本頁面相關(guān)的其它模塊。

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

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

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

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

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

第一個(gè)選項(xiàng)，就是轉(zhuǎn)換成列表的形式。

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

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

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

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

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

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

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

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

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

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

除了基本的卡片樣式外，還有一種以展示圖片為主的卡片類型 ——?畫板模式。

這在以圖片為主導(dǎo)的數(shù)據(jù)對(duì)象中非常常見，比如少量的新聞、商品、人員、門店對(duì)象的管理中，往往圖形的識(shí)別效率是遠(yuǎn)高于普通表格的。

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

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

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

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

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

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

結(jié)尾

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

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

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

本次分享就到這里！

我們下篇再賤～