將近一年，我都浸泡在設(shè)計(jì)數(shù)據(jù)表格的相關(guān)需求中，踩過(guò)很多坑;深深地體會(huì)到建立完整的知識(shí)體系的重要性，不然就是這個(gè)坑踩著上一個(gè)坑，萬(wàn)劫不復(fù)。在這里，我總結(jié)并分享自己的經(jīng)驗(yàn)，希望助各位完美避開(kāi)各種坑。
我將從功能、交互、UI三個(gè)維度對(duì)表格設(shè)計(jì)進(jìn)行全方位總結(jié)分析。
表格，又稱為表，既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。人們?cè)谕ㄓ嵔涣?、科學(xué)研究以及數(shù)據(jù)分析活動(dòng)當(dāng)中廣泛采用著形形色色的表格。表的結(jié)構(gòu)如下圖：
那表格的使用場(chǎng)景：
展現(xiàn)信息全面性。很多圖表類(lèi)型無(wú)法展示數(shù)據(jù)特點(diǎn)。表格無(wú)疑是組織大量信息通用性最高的一種表達(dá)方式，既可陳列信息，又可以表達(dá)信息之間的關(guān)系。
編輯性大于易讀性。需要對(duì)數(shù)據(jù)進(jìn)行增刪改查。
需要對(duì)比數(shù)據(jù)。比如對(duì)比行與行之間的數(shù)據(jù)，了解兩者差異。
一個(gè)簡(jiǎn)簡(jiǎn)單單的表格功能其實(shí)非常強(qiáng)大，也是非常復(fù)雜的。但是不管怎么樣，我們不變的原則是：
更直觀地對(duì)比。通過(guò)交互和視覺(jué)對(duì)冗雜的信息進(jìn)行優(yōu)化，從而更直觀形象地對(duì)比。比如隔行使用斑馬線增強(qiáng)橫向?qū)б暋?
更精準(zhǔn)地計(jì)算。對(duì)于大數(shù)據(jù)量的表格，數(shù)據(jù)的精準(zhǔn)度非常重要。比如根據(jù)提供的精準(zhǔn)度要求，定義展示數(shù)據(jù)的小數(shù)位數(shù)。
更快速地決策。比如在行列末尾增加匯總信息(總計(jì)或平均值)，在每個(gè)分類(lèi)里增加小計(jì)，可以讓管理者一目了然地了解數(shù)據(jù)，快速?zèng)Q策。
1、添加數(shù)據(jù)
用戶在原有的表結(jié)構(gòu)中，增加一行數(shù)據(jù)。
2、導(dǎo)出數(shù)據(jù)
根據(jù)業(yè)務(wù)對(duì)數(shù)據(jù)精準(zhǔn)度的需求，定義一個(gè)導(dǎo)出規(guī)則。
不保留數(shù)據(jù)格式化。比如該數(shù)值有五位小數(shù)，導(dǎo)入我們系統(tǒng)格式化為兩位小數(shù)，這種方式導(dǎo)出后還是五位小數(shù)。
保留數(shù)據(jù)格式化。比如該數(shù)值有五位小數(shù)，導(dǎo)入我們系統(tǒng)格式化為兩位小數(shù)，這種方式導(dǎo)出后還是兩位小數(shù)。
3、顯示字段
列數(shù)過(guò)多時(shí)，可以隱藏重要性低的列，更好的突出重要性高的列，主次分明，減少干擾。
4、搜索和篩選
按預(yù)定目標(biāo)過(guò)濾出某種具有特定性質(zhì)的數(shù)據(jù)的操作過(guò)程，幫助我們實(shí)現(xiàn)對(duì)信息的快速分析。
(1)簡(jiǎn)易搜索
適合篩選條件不明確和篩選頻率不高的表格。盡量采用模糊搜索，降低操作成本。
優(yōu)點(diǎn)：靈活選擇關(guān)鍵詞，節(jié)省空間。
缺點(diǎn)：可篩選信息不明顯。
(2)高級(jí)篩選器
適合篩選條件明確和篩選頻率高的表格。
優(yōu)點(diǎn)：曝光度高，操作成本低。
缺點(diǎn)：占用空間大，不易擴(kuò)展。
(3)組合篩選器
適合篩選條件不明確但篩選頻率高的表格。
優(yōu)點(diǎn)：主次分明，搜索框可滿足大部分用戶需求，更高的要求有較深的入口，減少干擾。
缺點(diǎn)：如果搜索不能滿足大部分用戶需求而需要高級(jí)篩選，必然增加了用戶的操作步驟。
(4)列篩選器
適合篩選條件單一的表格。
優(yōu)點(diǎn)：篩選當(dāng)前列，更直觀。
缺點(diǎn)：只能選擇單列篩選。
5、排序
設(shè)置查看數(shù)據(jù)優(yōu)先級(jí)順序，快速發(fā)掘最關(guān)注的信息。
(1)文本排序
以首字母A-Z規(guī)則進(jìn)行升序或降序。
(2)數(shù)值排序
以數(shù)值大小規(guī)則進(jìn)行升序或降序。
6、匯總信息
在原始數(shù)據(jù)上增加匯總信息(合計(jì)值或平均值)，可以減少用戶的計(jì)算，達(dá)到快速?zèng)Q策的目的。
(1)行總計(jì)和行小計(jì)
在每個(gè)匯總類(lèi)別的左側(cè)或右側(cè)增加一條總計(jì)列。
(2)列總計(jì)和列小計(jì)
在每個(gè)匯總類(lèi)別的頂部或底部增加一條總計(jì)行。如上圖。
7、加載方式
避免全部鋪開(kāi)大量信息而影響頁(yè)面的加載速度，影響用戶體驗(yàn)。
(1)復(fù)雜分頁(yè)條
可以設(shè)置每頁(yè)顯示條數(shù)，適合大數(shù)據(jù)量。
優(yōu)點(diǎn)：用戶不僅對(duì)于數(shù)據(jù)量有宏觀上的把握，還可以靈活設(shè)置每頁(yè)顯示條數(shù)。
缺點(diǎn)：分頁(yè)條占用空間大。
(2)簡(jiǎn)單分頁(yè)條
不可以設(shè)置每頁(yè)顯示條數(shù)，適合較大數(shù)據(jù)量。
優(yōu)點(diǎn)：用戶對(duì)于數(shù)據(jù)量有宏觀上的把握。
缺點(diǎn)：分頁(yè)條占用空間較大。
(3)加載更多
適合小數(shù)據(jù)量。
優(yōu)點(diǎn)：節(jié)省空間，沉浸式閱覽。
缺點(diǎn)：對(duì)數(shù)據(jù)量難以把握，操作不靈活。
1、固定行列
根據(jù)7±2的原則，隨著行列數(shù)增加，如果表頭不固定，超負(fù)荷記憶信息會(huì)使用戶遺忘信息。
(1)固定行
行數(shù)過(guò)多，出現(xiàn)縱向滾動(dòng)條時(shí)，用戶需要了解行中每個(gè)數(shù)據(jù)對(duì)應(yīng)的列字段名。
(2)固定列
列數(shù)過(guò)多，出現(xiàn)橫向滾動(dòng)條時(shí)，用戶需要了解列中每個(gè)數(shù)據(jù)對(duì)應(yīng)的行字段名。
2、批量操作
批量選擇記錄進(jìn)行操作。
(1)記錄條數(shù)
適用于所選數(shù)據(jù)較多，不重要的數(shù)據(jù)。
優(yōu)點(diǎn)：節(jié)省空間，直觀了解所選條數(shù)。
缺點(diǎn)：無(wú)法直觀查看所選項(xiàng)。
(2)記錄所選項(xiàng)
適用于所選數(shù)據(jù)較少，重要的數(shù)據(jù)。
優(yōu)點(diǎn)：可以直觀查看所選項(xiàng)。
缺點(diǎn)：占用空間，無(wú)法直觀了解所選條數(shù)。
3、查看詳情
創(chuàng)建信息層級(jí)，只展現(xiàn)核心內(nèi)容，非重點(diǎn)內(nèi)容需要用戶通過(guò)更深的入口查看。主次分明地展示信息，方便用戶快速定位所需信息。
(1)跳轉(zhuǎn)
把 ID、名稱等唯一性標(biāo)志的指加上超鏈接，點(diǎn)擊可以查看該條記錄的詳情。
(2)查看
在操作列中增加“查看”功能，點(diǎn)擊可以查看該條記錄的詳情。
4、編輯
對(duì)表格內(nèi)容進(jìn)行編輯。
(1)直接編輯
點(diǎn)擊內(nèi)容直接編輯，適合易編輯性大于易讀性的數(shù)據(jù)。
優(yōu)點(diǎn)：編輯時(shí)不影響查看其他內(nèi)容。
缺點(diǎn)：編輯空間有限，不適合編輯內(nèi)容較多的數(shù)據(jù)。
(2)懸浮層編輯
點(diǎn)擊單元格的“編輯”按鈕，編輯該項(xiàng)內(nèi)容。
優(yōu)點(diǎn)：編輯空間較大，編輯內(nèi)容的自由度比直接編輯高一點(diǎn)。
缺點(diǎn)：遮擋部分界面，無(wú)法看到上下文。
(3)彈窗編輯
點(diǎn)擊操作列的“編輯”按鈕，彈出編輯窗口。
優(yōu)點(diǎn)：聚焦操作，可編輯內(nèi)容多的數(shù)據(jù)。
缺點(diǎn)：遮擋全部頁(yè)面，無(wú)法看到其他內(nèi)容。
5、反饋
鼠標(biāo)懸停高亮底色，使得該行與行界限分明。強(qiáng)化了橫向?qū)б?，解決列數(shù)過(guò)多引起數(shù)據(jù)錯(cuò)行的問(wèn)題。
6、精簡(jiǎn)表頭
簡(jiǎn)明扼要的列名可以節(jié)省表頭空間，避免“頭重腳輕”的表格布局。
7、顯示長(zhǎng)內(nèi)容
當(dāng)前頁(yè)面信息無(wú)法展示完全。
(1)浮層查看
適合查看較少內(nèi)容。
優(yōu)點(diǎn)：靈活查看內(nèi)容，操作成本低。
缺點(diǎn)：影響查看其他內(nèi)容。
(2)下拉查看
適合查看較多內(nèi)容。
優(yōu)點(diǎn)：不影響查看其他內(nèi)容。
缺點(diǎn)：不能靈活查看內(nèi)容，操作成本高。
8、空單元格
要避免空單元格會(huì)給用戶帶來(lái)困惑，是零值還是空值呢?
數(shù)據(jù)為零值，則單元格顯示為0，而且數(shù)據(jù)格式(小數(shù)位數(shù)等)要與同列數(shù)據(jù)相同處理，方便與其他數(shù)據(jù)進(jìn)行計(jì)算。
數(shù)據(jù)為空值，則單元格顯示為短橫線“-”，表示空值。
9、數(shù)據(jù)格式化
絕對(duì)精確的數(shù)據(jù)影響人們的閱讀。我們可以根據(jù)客戶需求和場(chǎng)景決定數(shù)據(jù)精確度范圍。
顯示為數(shù)值，設(shè)置小數(shù)位數(shù)，千分位和數(shù)值單位(比如萬(wàn))等。
顯示為百分比，設(shè)置小數(shù)位數(shù)。
10、對(duì)齊規(guī)范
信息更加規(guī)整，方便對(duì)比同列數(shù)據(jù)，提高閱讀速度。
(1)文本左對(duì)齊
符合從左到右的閱讀文字習(xí)慣。
(2)數(shù)值右對(duì)齊
符合從右到左的對(duì)比數(shù)字習(xí)慣。有小數(shù)點(diǎn)按小數(shù)點(diǎn)對(duì)齊?？梢苑奖阌脩暨M(jìn)行心算，不需要轉(zhuǎn)換閱讀思維。
(3)固定操作按鈕居中
(4)表頭與信息內(nèi)容一致
(視情況而定，比如筆者設(shè)計(jì)的表格要考慮交叉表，選擇了表頭居中，交叉表的定義請(qǐng)看“復(fù)雜表格-交叉表”部分。)
由于交叉表會(huì)在數(shù)值上套上好幾層表頭，所以下圖錯(cuò)誤示例中頁(yè)面重量往右下角拉扯，造成頁(yè)面不平衡，而且這個(gè)情況會(huì)隨著套的表頭層數(shù)越來(lái)越嚴(yán)重，所以我們選擇了統(tǒng)一所有表頭居中。
信息可視化
視覺(jué)元素能提高閱讀速度。
(1)狀態(tài)顯示
根據(jù)“7±2”原則，狀態(tài)個(gè)數(shù)不能太多，不然人的記憶負(fù)擔(dān)超負(fù)荷會(huì)適得其反。
(2)告警顯示
超出閾值需要突出顯示，提醒用戶超標(biāo)。
(3)變動(dòng)顯示
比如同步環(huán)比的正負(fù)值。
(4)感受顯示
有些表達(dá)用戶的感官評(píng)價(jià)，用icon更符合用戶的心智模型，比如“滿意”用笑臉icon，“不滿意”用苦臉icon，總比用文字闡述直觀吧。
構(gòu)建F型視覺(jué)流
通過(guò)視覺(jué)重量和視覺(jué)方向的組合來(lái)引導(dǎo)用戶查看信息的軌跡。
突出表頭。
突出匯總信息。
增加合適的對(duì)比度，區(qū)分行與行之間的數(shù)據(jù)。
打造頁(yè)面呼吸感
有利于控制用戶的閱讀速度，做到張弛有度，好像正在“呼吸”。避免大量信息毫無(wú)差異的堆積，從而使用戶在閱讀時(shí)視覺(jué)疲勞。
(1)網(wǎng)格
通過(guò)物理實(shí)線割據(jù)內(nèi)容。
優(yōu)點(diǎn)：更加直觀，節(jié)省空間。
缺點(diǎn)：物理割據(jù)顯得不自然流暢。
強(qiáng)調(diào)行。隱藏了縱向的線，不強(qiáng)調(diào)同列數(shù)據(jù)的上下對(duì)比，更加關(guān)注同條記錄的閱讀。
強(qiáng)調(diào)列。隱藏了橫向的線，不強(qiáng)調(diào)同行數(shù)據(jù)的左右對(duì)比，更加關(guān)注同個(gè)屬性的對(duì)比。
強(qiáng)調(diào)組。隱藏了同組的線，不強(qiáng)調(diào)同行和同列數(shù)據(jù)的對(duì)比，更加關(guān)注同組數(shù)據(jù)的對(duì)比。
(2)斑馬線
通過(guò)填充底色割據(jù)內(nèi)容。
優(yōu)點(diǎn)：在大量數(shù)據(jù)的表格中可以引導(dǎo)用戶的視覺(jué)。
缺點(diǎn)：在少量數(shù)據(jù)的表格中運(yùn)用斑馬線設(shè)計(jì)，用戶可能會(huì)對(duì)高亮顯示行產(chǎn)生困惑。
(3)留白
通過(guò)加大留白區(qū)域割據(jù)內(nèi)容。
優(yōu)點(diǎn)：舒適自然，閱讀流暢。
缺點(diǎn)：留白區(qū)域不好控制，太小達(dá)不到效果，太大浪費(fèi)空間。
保證字體的可讀性
避免全大寫(xiě)字體，因?yàn)樗茈y讀，需要轉(zhuǎn)化思維。
避免使用襯線字體，因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音，不利于用戶對(duì)數(shù)據(jù)的理解和思考。
避免使用斜體。易引起視線疲勞，影響閱讀。
避免使用多種字體。保持風(fēng)格統(tǒng)一。
消除視覺(jué)噪音
用戶在處理數(shù)據(jù)時(shí)已接收大量的信息，多余的視覺(jué)符號(hào)容易對(duì)用戶造成干擾。
避免不必要的視覺(jué)元素，無(wú)關(guān)的邊框和底色。
避免不必要的視覺(jué)效果，3D效果，陰影等酷炫效果。
復(fù)雜表格
圖表結(jié)合
在表格內(nèi)嵌入圖表，可實(shí)現(xiàn)部分?jǐn)?shù)據(jù)可視化。
在表格旁增加圖表，根據(jù)表格數(shù)據(jù)與圖表聯(lián)動(dòng)。
交叉表
交叉報(bào)表是報(bào)表當(dāng)中常見(jiàn)的類(lèi)型，屬于基本的報(bào)表，是行、列方向都有分組的報(bào)表。
在大多數(shù)產(chǎn)品中，我們見(jiàn)到的都是直聯(lián)表(只在行方向有分組)，基本可以滿足大部分用戶。交叉表出現(xiàn)的場(chǎng)景很少，復(fù)雜度極高，只要你的系統(tǒng)出現(xiàn)交叉表，很多規(guī)則要重新考慮。
表格的內(nèi)容其實(shí)我才講了一點(diǎn)點(diǎn)，只是給予各位一點(diǎn)啟發(fā)，還有大多場(chǎng)景需要各位隨機(jī)應(yīng)變了，這里有幾點(diǎn)想說(shuō)的：
沒(méi)有絕對(duì)的規(guī)范，只有相對(duì)的規(guī)范。要適應(yīng)自己產(chǎn)品的場(chǎng)景，選擇最適合自己的規(guī)范。比如我的產(chǎn)品要考慮交叉表，然而制定對(duì)齊規(guī)范的文章作者從頭到尾沒(méi)講到交叉表，我就要重新考慮這個(gè)規(guī)則的可用性。
沒(méi)有完全的規(guī)范，只有基本的原則。任何文章都不可能把所有的情況羅列出來(lái)，所以我們要理解規(guī)范背后的原則，推導(dǎo)出適應(yīng)其他場(chǎng)景的規(guī)范，要知道很多事“萬(wàn)變不離其宗”。
沒(méi)有組合的規(guī)范，只有總結(jié)的規(guī)范。規(guī)范向來(lái)都是有理有據(jù)，比如“搜索和篩選”功能，很多人會(huì)將遇到的篩選的情況羅列出來(lái)作為類(lèi)別，比如“時(shí)間篩選器+簡(jiǎn)易搜索”作為一類(lèi)，下次遇到“時(shí)間篩選+下拉框”就分為一類(lèi)，其實(shí)這是很片面的排列組合規(guī)范，而不是總結(jié)性的規(guī)范。
以上就是上海網(wǎng)站建設(shè)公司——海淘科技為你整理的《【數(shù)據(jù)表格設(shè)計(jì)】從功能、交互和UI進(jìn)行全方位分析》全部?jī)?nèi)容。如果想要觀看網(wǎng)站建設(shè)案例：教育培訓(xùn)網(wǎng)站設(shè)計(jì)案例，以及其他精彩的建站基礎(chǔ)知識(shí)可直接點(diǎn)擊查看。
