表格间学，又稱為表饵筑，即是一種可視化交流模式错洁，又是一種組織整理數(shù)據(jù)的手段猴凹。人們在通訊交流、科學(xué)研究以及數(shù)據(jù)分析活動當(dāng)中廣泛采用著形形色色的表格桑滩∥瑁——百度百科

在處理一些信息時(shí)，為了更好地展示和傳遞數(shù)據(jù)信息岖是，將表格作為載體來承載信息帮毁，使信息更易于閱讀與理解。

在一些企業(yè)級的復(fù)雜應(yīng)用里（訂單系統(tǒng)豺撑、銷售系統(tǒng)等）烈疚，表格更是起著舉足輕重的作用，它的易讀性聪轿，便捷性爷肝、易操作性等對產(chǎn)品的體驗(yàn)都會產(chǎn)生重要影響。

問題來了陆错，如何設(shè)計(jì)好表格呢灯抛？

一、主體構(gòu)成

在寫報(bào)告音瓷、文章对嚼、郵件、PPT等地方都會經(jīng)常用到表格绳慎。使用時(shí)纵竖，要讓表格能夠“獨(dú)立存在”，即每個(gè)表格除了主體內(nèi)容外杏愤，還要包含標(biāo)題靡砌、數(shù)據(jù)來源等內(nèi)容，在被用到其它地方時(shí)珊楼，即使沒有上下文通殃，仍能夠被正確的解讀。普通的表格（二維表格）通常由6個(gè)部分構(gòu)成：標(biāo)題厕宗、行標(biāo)題邓了、列標(biāo)題、數(shù)據(jù)內(nèi)容媳瞪、腳注骗炉，數(shù)據(jù)來源。

• 標(biāo)題蛇受，對數(shù)據(jù)內(nèi)容準(zhǔn)確而清晰的描述句葵，簡明扼要。
• 行標(biāo)題兢仰，位于表格第一列乍丈，用于標(biāo)識表格中每一行的數(shù)據(jù)。
• 列標(biāo)題把将，位于表格第一行轻专，用于標(biāo)識表格中每一列的數(shù)據(jù)。
• 腳注察蹲，位于表格底部请垛，用于對表格信息的補(bǔ)充（例如：表格中N/A表示數(shù)據(jù)值為空）
• 數(shù)據(jù)來源催训，位于表格底部，表明數(shù)據(jù)的來源或數(shù)據(jù)的采集方法宗收。

但是在企業(yè)級產(chǎn)品中漫拭，用的更多的是簡化版表格（一維表格），本文對表格展開的相關(guān)討論也主要是建立在一維表格的基礎(chǔ)上混稽。一維表格的構(gòu)成很簡單采驻，主要由2個(gè)部分構(gòu)成：列標(biāo)題和數(shù)據(jù)內(nèi)容。

單線表格

雙線表格

點(diǎn)擊看大圖

下面以雙線表格為樣表型豁，從視覺設(shè)計(jì)和交互體驗(yàn)兩個(gè)方面來具體談?wù)勅绾巫龊帽砀裨O(shè)計(jì)。

二尚蝌、視覺設(shè)計(jì)

首先需要明確的是迎变，這邊的視覺設(shè)計(jì)，并不是指對表格進(jìn)行一些花哨飘言，炫酷的色彩修飾衣形，而是從用戶的閱讀、體驗(yàn)角度來對表格采取的顏色設(shè)計(jì)姿鸿，輔助表格更好的展示與傳遞數(shù)據(jù)信息谆吴。

顏色

1倒源、列標(biāo)題顏色
表格的“列標(biāo)題”與“數(shù)據(jù)內(nèi)容”需要使用不同的背景色塊，這樣建立起來的內(nèi)容分區(qū)纪铺，讓用戶對表格的結(jié)構(gòu)一目了然相速，更易于對數(shù)據(jù)的閱讀碟渺、識別鲜锚。

3凰兑、數(shù)據(jù)內(nèi)容顏色
表格中，數(shù)據(jù)內(nèi)容的顏色一般都采用黑色审丘，對于有操作功能的數(shù)據(jù)吏够，或者是需要引起用戶注意的關(guān)鍵數(shù)據(jù)，可以用不同的顏色來進(jìn)行標(biāo)識滩报」科學(xué)研究表明，相比于文字脓钾，人對顏色的辨認(rèn)售睹、感知力更強(qiáng)。

點(diǎn)擊看大圖

對齊

1可训、居左對齊
列標(biāo)題由一個(gè)個(gè)字段組成侣姆，因字段值的長短不一，所以通常會采用居左的對齊方式沉噩。例如“物品名稱”捺宗、“規(guī)格型號”，“單位”等川蒙，同一個(gè)字段的字段值有長有短蚜厉，左對齊一方面不會顯得亂（相對于居中對齊），另一方面也符合人們從左往右的閱讀習(xí)慣畜眨。

3脊另、居右對齊
居右對齊只適用于一些字段值是數(shù)字類型的字段导狡，例如“單價(jià)”、“數(shù)量”偎痛、“金額”等字段旱捧。為什么這類字段要居右對齊呢？

三茁计、交互體驗(yàn)

為了提高表格的可用性料皇，滿足用戶對表格使用的深層次需求，需要對表格進(jìn)行適當(dāng)?shù)墓δ軘U(kuò)展星压，提供更好的交互體驗(yàn)践剂。

操作反饋

當(dāng)查閱表格數(shù)據(jù)時(shí)，很容在數(shù)據(jù)的海洋中“迷失”（容易看岔行娜膘，數(shù)據(jù)間的定位逊脯、跳躍讓眼睛很疲勞），這時(shí)需要幫助用戶去定位竣贪、聚焦數(shù)據(jù)军洼。可采用通過背景色對當(dāng)前定位的行和鼠標(biāo)懸停的行進(jìn)行標(biāo)識演怎。

點(diǎn)擊看大圖

內(nèi)容擴(kuò)展

1匕争、列擴(kuò)展
使用表格時(shí)，A類型用戶（例如：領(lǐng)導(dǎo)）只需要看一小部分?jǐn)?shù)據(jù)爷耀，而B類型用戶（例如：員工）需要看更多更詳細(xì)的數(shù)據(jù)甘桑，怎么兼顧A、B類型用戶的需求？如果表格只展示少量數(shù)據(jù)跑杭，B的需求得不到滿足铆帽；如果展示更多更全的數(shù)據(jù)，對于A來說德谅，會帶來較大的閱讀負(fù)擔(dān)爹橱。

比較好的方法是，讓用戶自己去設(shè)置表格顯示的內(nèi)容窄做，只看自己需要的數(shù)據(jù)愧驱。

點(diǎn)擊看大圖

2、行擴(kuò)展
因屏幕空間的限制浸策，通常一個(gè)頁面中顯示10行的數(shù)據(jù)內(nèi)容冯键，更多的數(shù)據(jù)是通過翻頁來查看的惹盼。但是當(dāng)快速查找數(shù)據(jù)庸汗，或?qū)Ρ炔榭磾?shù)據(jù)時(shí)，翻頁就顯得非常不方便手报。此時(shí)蚯舱，需要提供在一個(gè)頁面上查看更多數(shù)據(jù)的功能。

點(diǎn)擊看大圖

排序功能

用過Excel的人對“排序”功能一定不陌生掩蛤，通過排序可以很方便的切換數(shù)據(jù)的閱讀維度枉昏。例如上學(xué)時(shí)的成績單，可以對“學(xué)號”排序揍鸟，以“學(xué)號”的維度來查看成績兄裂，也可以對“總分”排序，以“總分”的維度來查看同學(xué)的排名阳藻。

點(diǎn)擊看大圖

設(shè)計(jì)表格晰奖，并不是要將上述說的內(nèi)容都加進(jìn)去，而是要根據(jù)表格的數(shù)據(jù)類型腥泥，以及用戶的使用需求匾南，來做出最合適、最合理的設(shè)計(jì)蛔外。