網(wǎng)頁表格設(shè)計(jì)的六種打開方式文中，文主要從提升表格的閱讀效率的角度給出網(wǎng)頁設(shè)計(jì)方法。在設(shè)計(jì)數(shù)據(jù)類產(chǎn)品、后臺(tái)配置產(chǎn)品時(shí)，PD 常常會(huì)指著一塊地方說「這兒放個(gè)表格，需要有balabala…」，而表格的結(jié)構(gòu)不外乎這幾種類型：

• 垂直布局
• 水平布局
• 矩陣布局

水平布局：郵箱是一種典型的強(qiáng)調(diào)行的表格設(shè)計(jì)，它弱化了列的概念，閱讀信息的視覺流是從左到右，一條一條的閱讀信息。這種排列方式強(qiáng)調(diào)信息的連貫性，適合大量信息的瀏覽。大多數(shù)的表格設(shè)計(jì)都屬于這種類型。

而垂直布局的表格比較講究行與行信息的對比，多數(shù)在數(shù)據(jù)統(tǒng)計(jì)中出現(xiàn)。

矩形布局的表格則是橫豎都有明確的分割線，區(qū)塊比較明顯。適用于列信息較多的情況下，沒有足夠的空間用來分割信息時(shí)。

對于像 CRM、數(shù)據(jù)后臺(tái)類產(chǎn)品等-，表格的目的是為了滿足用戶瀏覽信息的需求。然而現(xiàn)實(shí)中的設(shè)計(jì)場景往往面臨了許多情況：信息量過大，信息量過少等。同時(shí)設(shè)計(jì)師需要在表格的設(shè)計(jì)中思考如何讓表格更易于閱讀、在視覺上更適合現(xiàn)在的設(shè)計(jì)趨勢。下面就主要從提升表格的閱讀效率的角度給出設(shè)計(jì)方法。

1、不要吝嗇表格的行高，給頁面「喘氣」的空間

適宜的行高使得數(shù)據(jù)更易于被閱讀，但這不代表行高越大越利于閱讀，行高的大小應(yīng)該是與字體成比例的，在單行文字的情況下表格間距一般在字符大小的三倍以內(nèi)。

2、齊方式形成的引導(dǎo)線提升閱讀效率

表格內(nèi)的信息縱向列對齊是能夠很好的形成視覺引導(dǎo)線，這樣的表格即使沒有分割線也能在視覺上起到很好的分割作用。

3、斑馬線明確區(qū)分信息組

4、在排序的方式上采取提示說明

上圖為一種最常見的表格排序方式，是默認(rèn)為上下空心箭頭，上箭頭為升序，下箭頭為降序，這種排序方式的好處是比較節(jié)省空間，但是由于在使用中帶來的許多認(rèn)知上的問題，多數(shù)網(wǎng)站對其進(jìn)行了改造。

就如淘寶的價(jià)格排序，采用下拉選擇不同的排序方式，反饋的信息更直接有效，減少反復(fù)操作的次數(shù)。

5、區(qū)分信息獲取的優(yōu)先級，通過下拉表格顯示過多信息

對用戶閱讀信息的行為方式進(jìn)行分析提煉出常被閱覽的信息，區(qū)分優(yōu)先級，對整體信息進(jìn)行聚類排放，這樣做的好處是隱藏不必要指標(biāo)，減少干擾，對用戶的使用情景進(jìn)行判斷從而根據(jù)不同的情景下提供相應(yīng)的信息。

6、信息卡片化

在信息量較少或特別多的情況下可以盡量不用表格，用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單獨(dú)卡片內(nèi)的內(nèi)容可看做一個(gè)小組根據(jù)視覺的優(yōu)先級進(jìn)行排列，不受外部排列方式的影響，組內(nèi)的信息關(guān)系更緊密?？ㄆc卡片間又形成一個(gè)整體，不影響組與組之間的聯(lián)系，如下圖的卡片方式。

以上就是為你帶來的，網(wǎng)頁表格設(shè)計(jì)的六種打開方式，還有網(wǎng)站設(shè)計(jì)知識。文章下載，點(diǎn)擊：網(wǎng)頁表格設(shè)計(jì)的六種打開方式