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

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

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

1.1 表格的布局

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

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

還有比較常用的表格類型層級(jí)型：

層級(jí)表

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

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

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

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

圖表型

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

卡片型

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

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

注：在有限的表格空間內(nèi)需注意卡片信息之間的間距，若卡片信息過長(zhǎng)可做截?cái)嗵幚怼?/p>

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

1.2 表格的構(gòu)成

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

標(biāo)題

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

篩選操作區(qū)域

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

表頭

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

除了容納行/列標(biāo)簽之外，表頭也可以進(jìn)行排序、搜索、篩選等。

表體

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

底欄

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

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

文章標(biāo)題：網(wǎng)站web表格設(shè)計(jì)解析
標(biāo)題鏈接：http://muchs.cn/news18/157618.html

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

廣告

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