網(wǎng)站web表格設(shè)計解析

在網(wǎng)頁或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中，越來越多的設(shè)計師需要和數(shù)據(jù)打交道，查詢和處理數(shù)據(jù)的能力是當(dāng)前正在設(shè)計的大多數(shù)產(chǎn)品的關(guān)鍵要求之一，表格被公認為是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。

表格，展示行列數(shù)據(jù)，既是一種可視化交流模式，又是一種整理數(shù)據(jù)的手段。表格幫助我們組織和展示信息，同時保證信息的可讀性，從大量信息中找到所需內(nèi)容；通過合理布局，感知不同信息間的關(guān)聯(lián)與區(qū)別，進行分析和比較；對數(shù)據(jù)進行排序、搜索、分頁、自定義操作等復(fù)雜行為。

1.1 表格的布局

表格的行元素和列元素行和相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調(diào)行、列、單元格。

水平型會弱化列的存在，強調(diào)行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描。垂直型是通過強化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統(tǒng)一的分割線，單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。

還有比較常用的表格類型層級型：

層級表

是表達結(jié)構(gòu)性關(guān)系的表格，表現(xiàn)得如同樹的分支，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息，也包含嵌套子表格。

層級表并不如矩陣表直觀，但通過結(jié)構(gòu)化的組織方式逐級展示表的數(shù)據(jù)內(nèi)容，讓整體信息架構(gòu)一目了然，非常適合大型數(shù)據(jù)表。

結(jié)合層級表的使用場景，多以查看為主，編輯需求較少。

同時還有特殊的表格類型，圖表型與卡片型：

圖表型

除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導(dǎo)致視覺的單調(diào)。

卡片型

可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進行排列。此外，卡片彼此之間又形成一個整體。

卡片是一種承載信息的容器，對可承載的內(nèi)容類型無過多限制，它讓一類信息集中化，增強區(qū)塊感的同時更易于操作；卡片通常以網(wǎng)格或矩陣的方式排列，傳達相互之間的層級關(guān)系。適合較為輕量級和個性化較強的信息區(qū)塊展示。

注：在有限的表格空間內(nèi)需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。

在實際工作中，上述表格類型還有可能互相結(jié)合，以更好的達到相應(yīng)的分析目的。比如垂直–層級，矩陣–數(shù)據(jù)立體表等。

1.2 表格的構(gòu)成

從視覺結(jié)構(gòu)的表現(xiàn)角度，個人將“表格”的構(gòu)成分為：標題、表上方篩選操作區(qū)、表頭、表體、底欄。由表頭、表體構(gòu)成內(nèi)部區(qū)域，由標題、篩選操作、底欄構(gòu)成外部區(qū)域。

標題

標題是對表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等)，以便用戶對表格內(nèi)容有整體認知。給數(shù)據(jù)表格起一個清晰簡明的標題，與其他的設(shè)計同等重要。有了好的標題，表格就可以獨立使用，如果導(dǎo)航菜單層級清晰，同樣能起到標題的作用。標題作為最重要的識別元素，默認展示在左上角。

篩選操作區(qū)域

這里特指位于表頭的上方的操作區(qū)域，包含篩選，操作按鈕等其他操作。篩選區(qū)包含模糊搜索和條件篩選，按鈕分為增刪改和其它業(yè)務(wù)處理操作，合理設(shè)計篩選區(qū)可以大大提高用戶的效率。

表頭

表頭對數(shù)據(jù)性質(zhì)的歸類。表頭按慣例要對數(shù)據(jù)的簡況做出反映，如被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟狀況等。表頭的字段名稱應(yīng)當(dāng)符合人們的思維習(xí)慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。表頭在這里也能指列行標簽，是對所屬行或列數(shù)據(jù)的描述。

除了容納行/列標簽之外，表頭也可以進行排序、搜索、篩選等。

表體

表體是表格的主體內(nèi)容，具體信息數(shù)據(jù)內(nèi)容的填充區(qū)域，由一個個基礎(chǔ)的單元格組成，單元格是表格呈現(xiàn)數(shù)據(jù)信息的基本單位，可以是計數(shù)、百分比、均值、"-"等任何數(shù)據(jù)。表體包含數(shù)據(jù)，分割線，背景，單元格數(shù)據(jù)可進行點擊操作，如鏈接跳轉(zhuǎn)(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。

底欄

底欄在表格最下方，主要展示正文中的數(shù)據(jù)量或單頁數(shù)據(jù)的概覽信息，也常提供統(tǒng)計功能，供用戶了解總體進展。底欄一般放統(tǒng)計信息、分頁控件、備注說明、操作按鈕(加載更多)等內(nèi)容。

底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計方案，比如有的時候并不需要定點跳轉(zhuǎn)。

文章標題：網(wǎng)站web表格設(shè)計解析
標題鏈接：http://www.bm7419.com/news18/157618.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、搜索引擎優(yōu)化、網(wǎng)站維護、虛擬主機、服務(wù)器托管、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)