網(wǎng)站表格制作的七種常見(jiàn)方法

表格形形色色，默默無(wú)聞的呈現(xiàn)著數(shù)據(jù)，閱讀起來(lái)如何最為順暢，如何才能從表格里發(fā)掘出重要信息。

行高是表格瀏覽時(shí)的重要參數(shù)

行高是表格非常重要的參數(shù)，行高間距直接影響著閱讀的體驗(yàn)，有如同Omniature為了大限度的放置數(shù)據(jù)內(nèi)容，強(qiáng)化數(shù)據(jù)顯示效果而降低行高的情況，也有SugarCRM一樣的行高較高可以放置更多文本信息的表格。

斑馬線(xiàn)更好的引導(dǎo)閱讀

斑馬線(xiàn)和懸停時(shí)的整行變化也是表格中能引起視覺(jué)變化的重要元素，斑馬線(xiàn)會(huì)使得行與行的界限更為分明，尤其對(duì)數(shù)據(jù)列較多時(shí)的橫向引導(dǎo)得到加強(qiáng)，這樣看行內(nèi)的內(nèi)容時(shí)不容易錯(cuò)行，而懸停變色行主要是配合操作交互，為長(zhǎng)沙網(wǎng)站公司了明確區(qū)分出光標(biāo)所在的行。

選擇和操作提升使用效率

對(duì)表格數(shù)據(jù)的選擇會(huì)有單選多選或者全選的情況，如果遇到數(shù)據(jù)項(xiàng)很多有翻頁(yè)，全選的位置就會(huì)增加一些選項(xiàng)來(lái)確定是當(dāng)頁(yè)全選還是整表全選，如同Gmail和SugarCrm里的效果，這種表格是將選擇區(qū)域放置在表格的左側(cè)第一列，也有表格的設(shè)計(jì)是將選擇放在右側(cè)最后一列，像Campaign Monitor就是這樣設(shè)計(jì)的，好處在于瀏覽完一行的信息就可以確定是否需要選擇該行內(nèi)容進(jìn)行下一步操作。

排序使表格活起來(lái)

排序是表格里經(jīng)常需要使用的操作，可以更為快捷的發(fā)掘出關(guān)注的信息，一般會(huì)有升序和降序兩種，當(dāng)前比較常見(jiàn)的是上下空心箭頭默認(rèn)，上箭頭為升序，下箭頭為降序，也有通過(guò)明確說(shuō)明來(lái)提示排序的方式。

重點(diǎn)在于行或者列

表格是由最簡(jiǎn)單的行、列、單元格構(gòu)成的，根據(jù)瀏覽的目的和希望突出的信息不同，行、列、單元格都可以通過(guò)一些變化進(jìn)行強(qiáng)調(diào)，這是將信息通過(guò)表格傳達(dá)出去的最為根本的使用方式。

郵箱產(chǎn)品就是強(qiáng)調(diào)行的表格設(shè)計(jì)的典范，像Gmail、Yahoo Mail、126郵箱，這些表格沒(méi)有縱向的線(xiàn)條，用橫線(xiàn)構(gòu)架出行的視覺(jué)，數(shù)據(jù)信息均勻分布，更強(qiáng)調(diào)每一行內(nèi)的信息連續(xù)性，不強(qiáng)調(diào)行與行的數(shù)據(jù)對(duì)比情況。同時(shí)，輔助于背景線(xiàn)條和底色，能夠很好的提升閱讀的連續(xù)性和效率。

條理的對(duì)齊

表格內(nèi)的信息縱向列對(duì)齊是能夠很好的形成視覺(jué)引導(dǎo)線(xiàn)，符合格式塔心理學(xué)中相近原則，一般常見(jiàn)的是文本信息左對(duì)齊，數(shù)字左對(duì)齊，金額右對(duì)齊，同時(shí)表格最右一列右對(duì)齊，這樣的表格縱向列即長(zhǎng)春網(wǎng)站建設(shè)哪家價(jià)格低？使沒(méi)有分割線(xiàn)也能很好的起到分隔作用。

對(duì)比的數(shù)據(jù)如果有了明確的對(duì)齊方式，會(huì)大大提升數(shù)據(jù)的瀏覽效率，增加對(duì)比的效果，像下面的圖中，如果數(shù)據(jù)居中對(duì)齊沒(méi)有明確的邊界，閱讀起來(lái)就會(huì)降低效率。

表頭固定提升使用

隨著表格的行和列都增加，這時(shí)候用戶(hù)的瞬時(shí)記憶會(huì)遭遇閾限，根據(jù)7±2的原則超過(guò)這個(gè)范圍時(shí)，用戶(hù)需要增加信息來(lái)幫助瀏覽表格內(nèi)的數(shù)據(jù)，比如百度的涅槃系統(tǒng)提供了豐富的數(shù)據(jù)列，而如果缺少表頭的說(shuō)明恐怕會(huì)很快遺忘掉該列數(shù)據(jù)是什么。

表頭固定的另一種用途是可以將操作和表格的信息更好的進(jìn)行聯(lián)系，選擇了表格內(nèi)的數(shù)據(jù)行就可以進(jìn)行相應(yīng)的操作，提升了使用效率，不用再耗時(shí)耗力的尋找操作區(qū)域。

當(dāng)前文章：網(wǎng)站表格制作的七種常見(jiàn)方法
瀏覽地址：http://www.bm7419.com/news23/194823.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、用戶(hù)體驗(yàn)、服務(wù)器托管、網(wǎng)站策劃、面包屑導(dǎo)航、手機(jī)網(wǎng)站建設(shè)

廣告

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