人
已閱讀
已閱讀
網(wǎng)站和APP開(kāi)發(fā)中的表格的設(shè)計(jì)
來(lái)源:lexintech.com ?? ?? 發(fā)布時(shí)間:2019-05-17
表格是展示數(shù)據(jù)類(lèi)信息的一種常用方式,在網(wǎng)站設(shè)計(jì)或者APP設(shè)計(jì)中,如何才能把表格設(shè)計(jì)好,讓用戶(hù)閱讀時(shí)可讀性強(qiáng)。
表格的結(jié)構(gòu)一般有幾種類(lèi)型:垂直布局、水平布局、矩陣布局。
水平布局:郵箱是一種典型的強(qiáng)調(diào)行的表格設(shè)計(jì),它弱化了列的概念,閱讀信息的視覺(jué)流是從左到右,一條一條的閱讀信息。這種排列方式強(qiáng)調(diào)信息的連貫性,適合大量信息的瀏覽。大多數(shù)的表格設(shè)計(jì)都屬于這種類(lèi)型。
而垂直布局的表格比較講究行與行信息的對(duì)比,多數(shù)在數(shù)據(jù)統(tǒng)計(jì)中出現(xiàn)。
矩形布局的表格則是橫豎都有明確的分割線,區(qū)塊比較明顯。適用于列信息較多的情況下,沒(méi)有足夠的空間用來(lái)分割信息時(shí)。
對(duì)于像 CRM、數(shù)據(jù)后臺(tái)類(lèi)產(chǎn)品等,表格的目的是為了滿足用戶(hù)瀏覽信息的需求。然而現(xiàn)實(shí)中的設(shè)計(jì)場(chǎng)景往往面臨了許多情況:信息量過(guò)大,信息量過(guò)少等。同時(shí)設(shè)計(jì)師需要在表格的設(shè)計(jì)中思考如何讓表格更易于閱讀、在視覺(jué)上更適合現(xiàn)在的設(shè)計(jì)趨勢(shì)。下面就主要從提升表格的閱讀效率的角度給出設(shè)計(jì)方法。
1、不要吝嗇表格的行高,給頁(yè)面「喘氣」的空間
適宜的行高使得數(shù)據(jù)更易于被閱讀,但這不代表行高越大越利于閱讀,行高的大小應(yīng)該是與字體成比例的,在單行文字的情況下表格間距一般在字符大小的三倍以?xún)?nèi)。
2、對(duì)齊方式形成的引導(dǎo)線提升閱讀效率
表格內(nèi)的信息縱向列對(duì)齊是能夠很好的形成視覺(jué)引導(dǎo)線,這樣的表格即使沒(méi)有分割線也能在視覺(jué)上起到很好的分割作用。
3、區(qū)分信息獲取的優(yōu)先級(jí),通過(guò)下拉表格顯示過(guò)多信息
對(duì)用戶(hù)閱讀信息的行為方式進(jìn)行分析提煉出常被閱覽的信息,區(qū)分優(yōu)先級(jí),對(duì)整體信息進(jìn)行聚類(lèi)排放,這樣做的好處是隱藏不必要指標(biāo),減少干擾,對(duì)用戶(hù)的使用情景進(jìn)行判斷從而根據(jù)不同的情景下提供相應(yīng)的信息。
4、信息卡片化
在信息量較少或特別多的情況下可以盡量不用表格,用卡片的形式來(lái)展示信息,將信息以組的概念呈現(xiàn),單獨(dú)卡片內(nèi)的內(nèi)容可看做一個(gè)小組根據(jù)視覺(jué)的優(yōu)先級(jí)進(jìn)行排列,不受外部排列方式的影響,組內(nèi)的信息關(guān)系更緊密??ㄆc卡片間又形成一個(gè)整體,不影響組與組之間的聯(lián)系。
水平布局:郵箱是一種典型的強(qiáng)調(diào)行的表格設(shè)計(jì),它弱化了列的概念,閱讀信息的視覺(jué)流是從左到右,一條一條的閱讀信息。這種排列方式強(qiáng)調(diào)信息的連貫性,適合大量信息的瀏覽。大多數(shù)的表格設(shè)計(jì)都屬于這種類(lèi)型。
而垂直布局的表格比較講究行與行信息的對(duì)比,多數(shù)在數(shù)據(jù)統(tǒng)計(jì)中出現(xiàn)。
矩形布局的表格則是橫豎都有明確的分割線,區(qū)塊比較明顯。適用于列信息較多的情況下,沒(méi)有足夠的空間用來(lái)分割信息時(shí)。
對(duì)于像 CRM、數(shù)據(jù)后臺(tái)類(lèi)產(chǎn)品等,表格的目的是為了滿足用戶(hù)瀏覽信息的需求。然而現(xiàn)實(shí)中的設(shè)計(jì)場(chǎng)景往往面臨了許多情況:信息量過(guò)大,信息量過(guò)少等。同時(shí)設(shè)計(jì)師需要在表格的設(shè)計(jì)中思考如何讓表格更易于閱讀、在視覺(jué)上更適合現(xiàn)在的設(shè)計(jì)趨勢(shì)。下面就主要從提升表格的閱讀效率的角度給出設(shè)計(jì)方法。
1、不要吝嗇表格的行高,給頁(yè)面「喘氣」的空間
適宜的行高使得數(shù)據(jù)更易于被閱讀,但這不代表行高越大越利于閱讀,行高的大小應(yīng)該是與字體成比例的,在單行文字的情況下表格間距一般在字符大小的三倍以?xún)?nèi)。
2、對(duì)齊方式形成的引導(dǎo)線提升閱讀效率
表格內(nèi)的信息縱向列對(duì)齊是能夠很好的形成視覺(jué)引導(dǎo)線,這樣的表格即使沒(méi)有分割線也能在視覺(jué)上起到很好的分割作用。
3、區(qū)分信息獲取的優(yōu)先級(jí),通過(guò)下拉表格顯示過(guò)多信息
對(duì)用戶(hù)閱讀信息的行為方式進(jìn)行分析提煉出常被閱覽的信息,區(qū)分優(yōu)先級(jí),對(duì)整體信息進(jìn)行聚類(lèi)排放,這樣做的好處是隱藏不必要指標(biāo),減少干擾,對(duì)用戶(hù)的使用情景進(jìn)行判斷從而根據(jù)不同的情景下提供相應(yīng)的信息。
4、信息卡片化
在信息量較少或特別多的情況下可以盡量不用表格,用卡片的形式來(lái)展示信息,將信息以組的概念呈現(xiàn),單獨(dú)卡片內(nèi)的內(nèi)容可看做一個(gè)小組根據(jù)視覺(jué)的優(yōu)先級(jí)進(jìn)行排列,不受外部排列方式的影響,組內(nèi)的信息關(guān)系更緊密??ㄆc卡片間又形成一個(gè)整體,不影響組與組之間的聯(lián)系。