在日常的設(shè)計(jì)過程中，我們往往會(huì)遇到一些比較棘手的設(shè)計(jì)板塊，它們與你所對(duì)接的業(yè)務(wù)緊密相連，復(fù)雜度高，超出你腦海中的設(shè)計(jì)模式版圖，于是隱隱抓狂，比如復(fù)雜業(yè)務(wù)的表格設(shè)計(jì)。今天，我們就來探討一下針對(duì)表格設(shè)計(jì)的應(yīng)對(duì)策略。希望對(duì)您在未來面對(duì)類似的情況時(shí)，有所幫助。
一、什么時(shí)候需要選擇表格設(shè)計(jì)
在面對(duì)設(shè)計(jì)任務(wù)的時(shí)候，首先思考的不應(yīng)該是執(zhí)行層面，而應(yīng)該盡量向戰(zhàn)略層面靠攏。不了解輸入，一切皆是空談。這是了解和探索需求的部分。在面對(duì)信息展示設(shè)計(jì)板塊的時(shí)候，即使板塊再小，也應(yīng)遵循同樣的道理，并不是客戶說需要一個(gè)表格就能使用表格的。
當(dāng)你在面對(duì)有一大堆維度的、包含復(fù)雜信息點(diǎn)的數(shù)據(jù)的時(shí)候，不妨考慮使用表格設(shè)計(jì)去做表現(xiàn)。表格用于把復(fù)雜的信息維度清晰化的展現(xiàn)。且通常來說表格比較重要的優(yōu)勢(shì)有：
1. 信息展現(xiàn)全面性與完整性
2. 直觀的對(duì)比性
3. 快捷的可編輯性
但還是需要記住，依然有大把可以表現(xiàn)數(shù)據(jù)的方法，具體的決定需要根據(jù)實(shí)際的需求來定。如果你要展現(xiàn)的信息，采用可視化圖表更為清晰和明確，那么還是盡量選擇可視化圖表。如果不需要一些細(xì)節(jié)的展示，不需要完整性，只要結(jié)果，只求變化值，大可以選用數(shù)據(jù)可視化去呈現(xiàn)。所以在選擇使用表格作為設(shè)計(jì)的時(shí)候，需要你對(duì)索要呈現(xiàn)的業(yè)務(wù)，有一個(gè)明確的認(rèn)知。
二、應(yīng)對(duì)表格設(shè)計(jì)的思路
當(dāng)你決定選擇表格作為你的設(shè)計(jì)目標(biāo)的時(shí)候，不要?jiǎng)傞_始就停留在執(zhí)行的層面。應(yīng)該首先梳理原始數(shù)據(jù)的信息維度，然后再考慮用怎樣的表格形式去呈現(xiàn)。
1、數(shù)據(jù)的重要性
想直接找一個(gè)所謂酷炫的形式去展開設(shè)計(jì)，想撇開業(yè)務(wù)數(shù)據(jù)，想讓業(yè)務(wù)數(shù)據(jù)追隨形式，是妄念。任何設(shè)計(jì)的開始，必然是理解業(yè)務(wù)，規(guī)劃業(yè)務(wù)，表格亦然。所以當(dāng)拿到一組數(shù)據(jù)的時(shí)候，我們應(yīng)該充分從數(shù)據(jù)價(jià)值入手去考慮，規(guī)劃出對(duì)業(yè)務(wù)有價(jià)值和意義的數(shù)據(jù)，另外還應(yīng)該結(jié)合用戶的需求來綜合決定。
“思考是最難的部分，這就是為什么參與思考的部分往往很少的原因?！?br> ——Henry Ford
嚴(yán)謹(jǐn)?shù)淖龇ㄊ侵话褜?duì)用戶最重要的、對(duì)業(yè)務(wù)最具價(jià)值的信息展示出來，其余的隱去，并讓你的列與列之間保持適當(dāng)?shù)拈g距。當(dāng)然，如果你的表格的列過于的少，少到讓人看起來感覺留白過多，那么才可以考慮適當(dāng)?shù)募由弦恍┐渭?jí)重要的信息。
2、數(shù)據(jù)類別
我們?cè)诜治鰳I(yè)務(wù)數(shù)據(jù)的時(shí)候，需要留意的一點(diǎn)是數(shù)據(jù)的類別。比如彼此間的界限。如果有界限，就需要考慮把他們拆分成兩個(gè)表格來展示。比如每一部分的內(nèi)容中是否有一個(gè)統(tǒng)攬主題的標(biāo)題。再比如數(shù)據(jù)的維度，數(shù)據(jù)名稱等等。
你需要先定義清楚不同類別的數(shù)據(jù)是什么。一般來說復(fù)雜的業(yè)務(wù)數(shù)據(jù)會(huì)有如下幾種類別：標(biāo)題、層級(jí)、組別、名稱、具體細(xì)節(jié)、擴(kuò)展性（是否可以編輯）。表格很容易就會(huì)提煉到這些類別，并排布到位，這是一種匹配，也會(huì)是一種巧合。但不要把希望寄托在能把表格的屬性分類套在業(yè)務(wù)數(shù)據(jù)上，那樣只能得出刻板的嵌套，忽略了業(yè)務(wù)數(shù)據(jù)的可拓展性。正確的思考順序是自上而下的（從數(shù)據(jù)到表格），而不是自下而上的（從表格導(dǎo)數(shù)據(jù)），要把希望建立在思考和分析業(yè)務(wù)數(shù)據(jù)上，把標(biāo)題、層級(jí)、組別、具體細(xì)節(jié)、擴(kuò)展性自己分析出來，然后再使用表格去展示他們。這個(gè)過程的重點(diǎn)，一定是分析、思考，不要被嵌套迷惑。
完成了這部分的內(nèi)容，你會(huì)得到一個(gè)表格數(shù)據(jù)的框架，接下來還需要的部分，是細(xì)細(xì)打磨。
3、數(shù)據(jù)層級(jí)
當(dāng)已經(jīng)有了一個(gè)表格的框架以后，你就有了表格的標(biāo)題、行、列、數(shù)據(jù)維度這些內(nèi)容。其中在“行”的這層維度中，需要我們深度去思考具體可能存在的層級(jí)結(jié)構(gòu)。是否分層，以及層級(jí)的架構(gòu)，還是要依據(jù)業(yè)務(wù)數(shù)據(jù)的信息從屬關(guān)系以及它們的重要程度來定奪。文章中有總分總，設(shè)計(jì)中亦然。本文主要是講思路，那么體現(xiàn)層級(jí)的方法，在視覺層面上，可以用顏色、位置、區(qū)域等來區(qū)別。另外還要注意整體的視覺屬性，比如你為一個(gè)商業(yè)公司制作一套表格，顏色就不宜過多，商務(wù)色的考慮也應(yīng)在思路范圍內(nèi)。
舉例，在展示多級(jí)數(shù)據(jù)的的時(shí)候，需要用視覺元素的部分把他們區(qū)分開來。
這一部分的重點(diǎn)在于體現(xiàn)出層級(jí)與層級(jí)之間的關(guān)聯(lián)性，運(yùn)用的法則仍然是視覺四原則：親密、對(duì)齊、重復(fù)、對(duì)比。這四個(gè)原則運(yùn)用好了，任何復(fù)雜的問題都會(huì)迎刃而解，后邊會(huì)繼續(xù)講到。但是關(guān)鍵環(huán)節(jié)還是在于先把層級(jí)關(guān)系分析和拆解出來。
三、呈現(xiàn)
表格的最終的呈現(xiàn)需要考慮視覺關(guān)聯(lián)，建立視覺關(guān)聯(lián)需要考慮的點(diǎn)仍然會(huì)回到：對(duì)齊、重復(fù)、親密、對(duì)比。你會(huì)發(fā)現(xiàn)，原來一切設(shè)計(jì)最終遵循的都會(huì)是最初最簡單的規(guī)則。所以，一切設(shè)計(jì)的重點(diǎn)，仍然還是在于思考，剩下的部分才有所謂的原則。
1. 對(duì)齊原則
對(duì)于多層級(jí)的表格來說，將他們的不同層級(jí)之間錯(cuò)落排布，并且同一個(gè)層級(jí)之間遵循左對(duì)齊原則，可以讓層級(jí)關(guān)系一目了然。另外要做一點(diǎn)說明的是，表格中如果是文本的內(nèi)容，建議使用左對(duì)齊，因?yàn)槲淖值呐挪挤绞绞菑淖笾劣?，視覺對(duì)文本的路線是從左邊開始的。如果是數(shù)字內(nèi)容，建議使用右對(duì)齊，因?yàn)閿?shù)字的遞增方式為個(gè)十百千萬，是從右往左遞增的，右對(duì)齊有助于對(duì)數(shù)字更好的識(shí)別和比較，一下子就能辨別出他們的數(shù)量級(jí)。
2. 重復(fù)原則
重復(fù)的目的是統(tǒng)一并增強(qiáng)視覺效果。對(duì)多層級(jí)的表格來說，為了凸顯不同層級(jí)之間的顯示效果，可以為不同的層級(jí)添加視覺屬性，比如給第三級(jí)的內(nèi)容前增加藍(lán)灰色的方格，那么所有的第三層級(jí)前都有藍(lán)灰方格做標(biāo)記，使其清晰。比如給第四級(jí)的內(nèi)容前添加藍(lán)灰短線，那么所有的第四層及表格都會(huì)直觀清晰的被辨別出來。
3. 親密原則
對(duì)于多層級(jí)的表格來說，表格的列往往承載了不同維度的數(shù)據(jù)，維度與維度之間往往存在對(duì)比的關(guān)系，所以在視覺上，要將列的感覺凸顯出來，就要使用親密原則，讓數(shù)列的關(guān)系通過間距就能展示出來。
4. 對(duì)比原則
在多層級(jí)的表格中，對(duì)比原則可以通過顏色、樣式、線條、形狀等來實(shí)現(xiàn)。比如表頭和第一層級(jí)都是用藍(lán)灰色底色，第二層級(jí)都用灰色底色，第三層級(jí)左端錯(cuò)位開并使用藍(lán)灰色方格，第四層級(jí)都是用白色底色，用這樣的方式，用戶可以一下子就辨別出來不同層級(jí)之間的關(guān)系。
5. 其他小策
Hover：
對(duì)于表格來說，因?yàn)樾袛?shù)眾多，雖縱列數(shù)據(jù)體現(xiàn)對(duì)比，但橫行數(shù)據(jù)亦是一家，所以建議在交互效果上增加鼠標(biāo)Hover效果，來讓用戶可以一下子定位到想要仔細(xì)考察的行。
簡潔：
這是一個(gè)微妙的小原則。開始設(shè)計(jì)的時(shí)候，我們往往會(huì)因?yàn)檫^于專注于理性本身而為每行內(nèi)容添加過多的元素，比如每行都想有一個(gè)橫線（通過橫線的不同屬性來標(biāo)記所屬層級(jí)）來將他們從視覺上區(qū)分開。但是，在一整行里，如果你不看最左邊的部分，直接看右邊的那些“實(shí)線”和“虛線”（如下圖），是不能夠區(qū)分那些實(shí)線和虛線是屬于哪一個(gè)層級(jí)的，而且他們看起來好像也并沒有什么標(biāo)記屬性，反而還增加了視覺負(fù)擔(dān)。你看第二級(jí)和第三級(jí)，好像光看右邊是沒有辦法區(qū)別到底是虛線代表第三級(jí)還是實(shí)線代表第三級(jí)。那么在這種時(shí)刻，就要斷舍離，干掉自己的強(qiáng)迫癥，使頁面簡潔是第一要義。也就是說，如果不是必要，就不要隨便把他們展示出來。
更改后，只給擁有第四級(jí)的第三層級(jí)標(biāo)記虛線就可以了。這樣使標(biāo)記規(guī)則變得簡單好記。
附加值：
如果你發(fā)現(xiàn)有些共用的部分因?yàn)樾枨蟮淖兓荒茉俟灿昧?，那么可以為其添加附加值，以期?yōu)秀。比如在表格中，本來所有列都會(huì)有一個(gè)共用的列的單位，但是唯獨(dú)其中一列改變了需求——他們擁有自己行的獨(dú)特單位，那么可以選擇換行、對(duì)比的方式把數(shù)據(jù)和其單位展示在一起。這樣設(shè)計(jì)既可以完善表格的細(xì)節(jié)，又可以明確的表現(xiàn)出不同類別的內(nèi)容。所以，你可以選擇合適的方式把不同的需求合理的排布在其中，就是好的附加值設(shè)計(jì)。
四、總結(jié)
所以，在表格設(shè)計(jì)的執(zhí)行層面，其實(shí)有很多種方法，遵循的原則都是一致的。最難的部分是在于最初的數(shù)據(jù)分析和業(yè)務(wù)分析。思考大于行動(dòng)，很多人一看到要做表格，看到一大堆數(shù)據(jù)和需求，忽然些許懵逼，于是二話不說先上網(wǎng)找圖找表格資源，所謂尋求靈感。其實(shí)不然，要先攻克難的部分，先思考和拆解，然后再去行動(dòng)，才是好的。
