2022-05-24 分類(lèi): 網(wǎng)站建設(shè)
在網(wǎng)頁(yè)或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中,越來(lái)越多的設(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ò)合理布局,感知不同信息間的關(guān)聯(lián)與區(qū)別,進(jìn)行分析和比較;對(duì)數(shù)據(jù)進(jìn)行排序、搜索、分頁(yè)、自定義操作等復(fù)雜行為。
1.1 表格的布局
表格的行元素和列元素行和相交就會(huì)形成一個(gè)簡(jiǎn)單的二維表,行,列元素的空間組合就確定了一個(gè)個(gè)單元格。常見(jiàn)的表格布局有水平型、垂直型和矩陣型三種基本布局,分別強(qiáng)調(diào)行、列、單元格。
水平型會(huì)弱化列的存在,強(qiáng)調(diào)行信息的連貫性,適用于用戶閱讀信息時(shí)是從左到右,然后自上而下逐條掃描。垂直型是通過(guò)強(qiáng)化列的視覺(jué)特征來(lái)突出不同列信息的對(duì)比。矩陣型的表格有均勻統(tǒng)一的分割線,單元格比較明顯,適用于列信息較多而沒(méi)有足夠空間用留白來(lái)分割信息的表格,同時(shí)我認(rèn)為單元格合并的情況也屬于矩陣型。
還有比較常用的表格類(lèi)型層級(jí)型:
層級(jí)表
是表達(dá)結(jié)構(gòu)性關(guān)系的表格,表現(xiàn)得如同樹(shù)的分支,所以又叫樹(shù)列表。每一個(gè)條目可展開(kāi)或折疊包含的更詳細(xì)的行信息,也包含嵌套子表格。
層級(jí)表并不如矩陣表直觀,但通過(guò)結(jié)構(gòu)化的組織方式逐級(jí)展示表的數(shù)據(jù)內(nèi)容,讓整體信息架構(gòu)一目了然,非常適合大型數(shù)據(jù)表。
結(jié)合層級(jí)表的使用場(chǎng)景,多以查看為主,編輯需求較少。
同時(shí)還有特殊的表格類(lèi)型,圖表型與卡片型:
圖表型
除了在單元格中引用圖表之外,很多時(shí)候都會(huì)提供圖表/表格視圖切換,便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時(shí)也會(huì)有“圖表+表格”的形式,這時(shí)候,表格往往只作為明細(xì)放在頁(yè)面底部。大量的表格也會(huì)導(dǎo)致視覺(jué)的單調(diào)。
卡片型
可以用卡片的形式來(lái)展示信息,將信息以組的概念呈現(xiàn),單張卡片內(nèi)的信息按優(yōu)先級(jí)進(jìn)行排列。此外,卡片彼此之間又形成一個(gè)整體。
卡片是一種承載信息的容器,對(duì)可承載的內(nèi)容類(lèi)型無(wú)過(guò)多限制,它讓一類(lèi)信息集中化,增強(qiáng)區(qū)塊感的同時(shí)更易于操作;卡片通常以網(wǎng)格或矩陣的方式排列,傳達(dá)相互之間的層級(jí)關(guān)系。適合較為輕量級(jí)和個(gè)性化較強(qiáng)的信息區(qū)塊展示。
注:在有限的表格空間內(nèi)需注意卡片信息之間的間距,若卡片信息過(guò)長(zhǎng)可做截?cái)嗵幚怼?/p>
在實(shí)際工作中,上述表格類(lèi)型還有可能互相結(jié)合,以更好的達(dá)到相應(yīng)的分析目的。比如垂直–層級(jí),矩陣–數(shù)據(jù)立體表等。
1.2 表格的構(gòu)成
從視覺(jué)結(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ù)來(lái)源及屬性(日期、地區(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ì)的歸類(lèi)。表頭按慣例要對(duì)數(shù)據(jù)的簡(jiǎn)況做出反映,如被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟(jì)狀況等。表頭的字段名稱應(yīng)當(dāng)符合人們的思維習(xí)慣,保證用戶理解。如果有需要解釋,則在字段名稱旁邊加說(shuō)明小圖標(biāo)(小問(wèn)號(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)目或者商品等)、展開(kāi)嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。
底欄
底欄在表格最下方,主要展示正文中的數(shù)據(jù)量或單頁(yè)數(shù)據(jù)的概覽信息,也常提供統(tǒng)計(jì)功能,供用戶了解總體進(jìn)展。底欄一般放統(tǒng)計(jì)信息、分頁(yè)控件、備注說(shuō)明、操作按鈕(加載更多)等內(nèi)容。
底欄最常見(jiàn)的元素就是分頁(yè),分頁(yè)可以放在頭部或底部,常見(jiàn)的還是放到底部,分頁(yè)固定能省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。分頁(yè)可分為整體頁(yè)碼平鋪式、全功能版、簡(jiǎn)易版等,需要根據(jù)不同的場(chǎng)景選擇最優(yōu)的設(shè)計(jì)方案,比如有的時(shí)候并不需要定點(diǎn)跳轉(zhuǎn)。
文章標(biāo)題:網(wǎng)站web表格設(shè)計(jì)解析
標(biāo)題鏈接:http://m.rwnh.cn/news18/157618.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開(kāi)發(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í)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容