在日常的設(shè)計過程中蛉谜，我們往往會遇到一些比較棘手的設(shè)計板塊，它們與你所對接的業(yè)務(wù)緊密相連崇堵，復(fù)雜度高型诚，超出你腦海中的設(shè)計模式版圖，于是隱隱抓狂鸳劳，比如復(fù)雜業(yè)務(wù)的表格設(shè)計狰贯。今天，我們就來探討一下針對表格設(shè)計的應(yīng)對策略赏廓。希望對您在未來面對類似的情況時涵紊，有所幫助。

一幔摸、什么時候需要選擇表格設(shè)計

在面對設(shè)計任務(wù)的時候摸柄，首先思考的不應(yīng)該是執(zhí)行層面，而應(yīng)該盡量向戰(zhàn)略層面靠攏既忆。不了解輸入驱负，一切皆是空談嗦玖。這是了解和探索需求的部分宇挫。在面對信息展示設(shè)計板塊的時候，即使板塊再小，也應(yīng)遵循同樣的道理，并不是客戶說需要一個表格就能使用表格的耻涛。

當(dāng)你在面對有一大堆維度的、包含復(fù)雜信息點的數(shù)據(jù)的時候，不妨考慮使用表格設(shè)計去做表現(xiàn)奏赘。表格用于把復(fù)雜的信息維度清晰化的展現(xiàn)。且通常來說表格比較重要的優(yōu)勢有：
1. 信息展現(xiàn)全面性與完整性
2. 直觀的對比性
3. 快捷的可編輯性

但還是需要記住，依然有大把可以表現(xiàn)數(shù)據(jù)的方法，具體的決定需要根據(jù)實際的需求來定淤翔。如果你要展現(xiàn)的信息，采用可視化圖表更為清晰和明確裁奇，那么還是盡量選擇可視化圖表免胃。如果不需要一些細(xì)節(jié)的展示躺涝，不需要完整性，只要結(jié)果，只求變化值碟绑，大可以選用數(shù)據(jù)可視化去呈現(xiàn)蜈敢。所以在選擇使用表格作為設(shè)計的時候伯病，需要你對索要呈現(xiàn)的業(yè)務(wù)惭蟋，有一個明確的認(rèn)知。

表格與可視化圖表

二便锨、應(yīng)對表格設(shè)計的思路

當(dāng)你決定選擇表格作為你的設(shè)計目標(biāo)的時候，不要剛開始就停留在執(zhí)行的層面。應(yīng)該首先梳理原始數(shù)據(jù)的信息維度友雳，然后再考慮用怎樣的表格形式去呈現(xiàn)考杉。

1枕稀、數(shù)據(jù)的重要性

想直接找一個所謂酷炫的形式去展開設(shè)計，想撇開業(yè)務(wù)數(shù)據(jù)谜嫉，想讓業(yè)務(wù)數(shù)據(jù)追隨形式萎坷，是妄念。任何設(shè)計的開始沐兰，必然是理解業(yè)務(wù)哆档，規(guī)劃業(yè)務(wù)，表格亦然住闯。所以當(dāng)拿到一組數(shù)據(jù)的時候瓜浸，我們應(yīng)該充分從數(shù)據(jù)價值入手去考慮，規(guī)劃出對業(yè)務(wù)有價值和意義的數(shù)據(jù)比原，另外還應(yīng)該結(jié)合用戶的需求來綜合決定插佛。

“思考是最難的部分，這就是為什么參與思考的部分往往很少的原因量窘」涂埽”
——Henry Ford

嚴(yán)謹(jǐn)?shù)淖龇ㄊ侵话褜τ脩糇钪匾摹I(yè)務(wù)最具價值的信息展示出來，其余的隱去锨侯，并讓你的列與列之間保持適當(dāng)?shù)拈g距嫩海。當(dāng)然，如果你的表格的列過于的少识腿，少到讓人看起來感覺留白過多出革，那么才可以考慮適當(dāng)?shù)募由弦恍┐渭壷匾男畔ⅰ?/p>

2、數(shù)據(jù)類別

我們在分析業(yè)務(wù)數(shù)據(jù)的時候渡讼，需要留意的一點是數(shù)據(jù)的類別骂束。比如彼此間的界限。如果有界限成箫，就需要考慮把他們拆分成兩個表格來展示展箱。比如每一部分的內(nèi)容中是否有一個統(tǒng)攬主題的標(biāo)題。再比如數(shù)據(jù)的維度蹬昌，數(shù)據(jù)名稱等等混驰。

你需要先定義清楚不同類別的數(shù)據(jù)是什么。一般來說復(fù)雜的業(yè)務(wù)數(shù)據(jù)會有如下幾種類別：標(biāo)題皂贩、層級栖榨、組別、名稱明刷、具體細(xì)節(jié)婴栽、擴展性（是否可以編輯）。表格很容易就會提煉到這些類別辈末，并排布到位愚争，這是一種匹配，也會是一種巧合挤聘。但不要把希望寄托在能把表格的屬性分類套在業(yè)務(wù)數(shù)據(jù)上轰枝，那樣只能得出刻板的嵌套，忽略了業(yè)務(wù)數(shù)據(jù)的可拓展性组去。正確的思考順序是自上而下的（從數(shù)據(jù)到表格）鞍陨，而不是自下而上的（從表格導(dǎo)數(shù)據(jù)），要把希望建立在思考和分析業(yè)務(wù)數(shù)據(jù)上从隆，把標(biāo)題诚撵、層級、組別广料、具體細(xì)節(jié)、擴展性自己分析出來幼驶，然后再使用表格去展示他們艾杏。這個過程的重點，一定是分析盅藻、思考购桑，不要被嵌套迷惑畅铭。

完成了這部分的內(nèi)容，你會得到一個表格數(shù)據(jù)的框架勃蜘，接下來還需要的部分硕噩，是細(xì)細(xì)打磨。

表格數(shù)據(jù)維度分類

3缭贡、數(shù)據(jù)層級

當(dāng)已經(jīng)有了一個表格的框架以后炉擅，你就有了表格的標(biāo)題、行阳惹、列谍失、數(shù)據(jù)維度這些內(nèi)容。其中在“行”的這層維度中莹汤，需要我們深度去思考具體可能存在的層級結(jié)構(gòu)快鱼。是否分層，以及層級的架構(gòu)纲岭，還是要依據(jù)業(yè)務(wù)數(shù)據(jù)的信息從屬關(guān)系以及它們的重要程度來定奪抹竹。文章中有總分總，設(shè)計中亦然止潮。本文主要是講思路窃判，那么體現(xiàn)層級的方法，在視覺層面上沽翔，可以用顏色兢孝、位置、區(qū)域等來區(qū)別仅偎。另外還要注意整體的視覺屬性跨蟹，比如你為一個商業(yè)公司制作一套表格，顏色就不宜過多橘沥，商務(wù)色的考慮也應(yīng)在思路范圍內(nèi)窗轩。

舉例，在展示多級數(shù)據(jù)的的時候座咆，需要用視覺元素的部分把他們區(qū)分開來痢艺。

表格層級

這一部分的重點在于體現(xiàn)出層級與層級之間的關(guān)聯(lián)性，運用的法則仍然是視覺四原則：親密介陶、對齊堤舒、重復(fù)、對比哺呜。這四個原則運用好了舌缤，任何復(fù)雜的問題都會迎刃而解，后邊會繼續(xù)講到。但是關(guān)鍵環(huán)節(jié)還是在于先把層級關(guān)系分析和拆解出來国撵。

三陵吸、呈現(xiàn)

表格的最終的呈現(xiàn)需要考慮視覺關(guān)聯(lián)，建立視覺關(guān)聯(lián)需要考慮的點仍然會回到：對齊介牙、重復(fù)壮虫、親密、對比环础。你會發(fā)現(xiàn)囚似，原來一切設(shè)計最終遵循的都會是最初最簡單的規(guī)則。所以喳整，一切設(shè)計的重點谆构，仍然還是在于思考，剩下的部分才有所謂的原則框都。

視覺設(shè)計四原則

1. 對齊原則

對于多層級的表格來說搬素，將他們的不同層級之間錯落排布，并且同一個層級之間遵循左對齊原則魏保，可以讓層級關(guān)系一目了然熬尺。另外要做一點說明的是，表格中如果是文本的內(nèi)容谓罗，建議使用左對齊粱哼，因為文字的排布方式是從左至右，視覺對文本的路線是從左邊開始的檩咱。如果是數(shù)字內(nèi)容揭措，建議使用右對齊，因為數(shù)字的遞增方式為個十百千萬刻蚯，是從右往左遞增的绊含，右對齊有助于對數(shù)字更好的識別和比較，一下子就能辨別出他們的數(shù)量級炊汹。

對齊原則

2. 重復(fù)原則

重復(fù)的目的是統(tǒng)一并增強視覺效果躬充。對多層級的表格來說，為了凸顯不同層級之間的顯示效果讨便，可以為不同的層級添加視覺屬性充甚，比如給第三級的內(nèi)容前增加藍(lán)灰色的方格，那么所有的第三層級前都有藍(lán)灰方格做標(biāo)記霸褒，使其清晰伴找。比如給第四級的內(nèi)容前添加藍(lán)灰短線，那么所有的第四層及表格都會直觀清晰的被辨別出來废菱。

重復(fù)原則

3. 親密原則

對于多層級的表格來說技矮，表格的列往往承載了不同維度的數(shù)據(jù)眉反，維度與維度之間往往存在對比的關(guān)系，所以在視覺上穆役，要將列的感覺凸顯出來，就要使用親密原則梳凛，讓數(shù)列的關(guān)系通過間距就能展示出來耿币。

親密原則

4. 對比原則

在多層級的表格中，對比原則可以通過顏色韧拒、樣式淹接、線條、形狀等來實現(xiàn)叛溢。比如表頭和第一層級都是用藍(lán)灰色底色塑悼，第二層級都用灰色底色，第三層級左端錯位開并使用藍(lán)灰色方格楷掉，第四層級都是用白色底色厢蒜，用這樣的方式，用戶可以一下子就辨別出來不同層級之間的關(guān)系烹植。

對比原則

5. 其他小策

Hover：

對于表格來說斑鸦，因為行數(shù)眾多，雖縱列數(shù)據(jù)體現(xiàn)對比草雕，但橫行數(shù)據(jù)亦是一家巷屿，所以建議在交互效果上增加鼠標(biāo)Hover效果，來讓用戶可以一下子定位到想要仔細(xì)考察的行墩虹。

Hover

簡潔：

這是一個微妙的小原則嘱巾。開始設(shè)計的時候，我們往往會因為過于專注于理性本身而為每行內(nèi)容添加過多的元素诫钓，比如每行都想有一個橫線（通過橫線的不同屬性來標(biāo)記所屬層級）來將他們從視覺上區(qū)分開旬昭。但是，在一整行里尖坤，如果你不看最左邊的部分稳懒，直接看右邊的那些“實線”和“虛線”（如下圖），是不能夠區(qū)分那些實線和虛線是屬于哪一個層級的慢味，而且他們看起來好像也并沒有什么標(biāo)記屬性场梆，反而還增加了視覺負(fù)擔(dān)。你看第二級和第三級纯路，好像光看右邊是沒有辦法區(qū)別到底是虛線代表第三級還是實線代表第三級或油。那么在這種時刻，就要斷舍離驰唬，干掉自己的強迫癥顶岸，使頁面簡潔是第一要義腔彰。也就是說，如果不是必要辖佣，就不要隨便把他們展示出來霹抛。

分割線

更改后，只給擁有第四級的第三層級標(biāo)記虛線就可以了卷谈。這樣使標(biāo)記規(guī)則變得簡單好記杯拐。

簡化分割線

附加值：

如果你發(fā)現(xiàn)有些共用的部分因為需求的變化不能再共用了，那么可以為其添加附加值世蔗，以期優(yōu)秀端逼。比如在表格中，本來所有列都會有一個共用的列的單位污淋，但是唯獨其中一列改變了需求——他們擁有自己行的獨特單位顶滩，那么可以選擇換行、對比的方式把數(shù)據(jù)和其單位展示在一起寸爆。這樣設(shè)計既可以完善表格的細(xì)節(jié)礁鲁，又可以明確的表現(xiàn)出不同類別的內(nèi)容。所以赁豆，你可以選擇合適的方式把不同的需求合理的排布在其中救氯，就是好的附加值設(shè)計。

附加值

四歌憨、總結(jié)

所以着憨，在表格設(shè)計的執(zhí)行層面，其實有很多種方法务嫡，遵循的原則都是一致的甲抖。最難的部分是在于最初的數(shù)據(jù)分析和業(yè)務(wù)分析。思考大于行動心铃，很多人一看到要做表格准谚，看到一大堆數(shù)據(jù)和需求，忽然些許懵逼去扣，于是二話不說先上網(wǎng)找圖找表格資源柱衔，所謂尋求靈感。其實不然愉棱，要先攻克難的部分唆铐，先思考和拆解，然后再去行動奔滑，才是好的艾岂。