表格設(shè)計攻略

在日常的設(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)找圖找表格資源柱衔,所謂尋求靈感。其實不然愉棱,要先攻克難的部分唆铐,先思考和拆解,然后再去行動奔滑,才是好的艾岂。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市朋其,隨后出現(xiàn)的幾起案子王浴,更是在濱河造成了極大的恐慌脆炎,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氓辣,死亡現(xiàn)場離奇詭異秒裕,居然都是意外死亡,警方通過查閱死者的電腦和手機钞啸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門簇爆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人爽撒,你說我怎么就攤上這事∠烊兀” “怎么了硕勿?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枫甲。 經(jīng)常有香客問我源武,道長,這世上最難降的妖魔是什么想幻? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任粱栖,我火速辦了婚禮,結(jié)果婚禮上脏毯,老公的妹妹穿的比我還像新娘闹究。我一直安慰自己,他們只是感情好食店,可當(dāng)我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布渣淤。 她就那樣靜靜地躺著,像睡著了一般吉嫩。 火紅的嫁衣襯著肌膚如雪价认。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天自娩,我揣著相機與錄音用踩,去河邊找鬼。 笑死忙迁,一個胖子當(dāng)著我的面吹牛脐彩,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播姊扔,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼丁屎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了旱眯?” 一聲冷哼從身側(cè)響起晨川,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤证九,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后共虑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡妈拌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年拥坛,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猜惋。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡著摔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出摹察,到底是詐尸還是另有隱情,我是刑警寧澤倡鲸,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布峭状,位于F島的核電站查坪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏宁炫。R本人自食惡果不足惜偿曙,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望羔巢。 院中可真熱鬧望忆,春花似錦、人聲如沸竿秆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽幽钢。三九已至歉备,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間匪燕,已是汗流浹背蕾羊。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工喧笔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人龟再。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓书闸,卻偏偏與公主長得像,于是被迫代替她去往敵國和親利凑。 傳聞我的和親對象是個殘疾皇子浆劲,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容