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