藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

作者：hardwear

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

藍(lán)藍(lán)覺得在界面設(shè)計(jì)中，優(yōu)秀的表格設(shè)計(jì)技巧是非常基礎(chǔ)，也非常重要的。所以從網(wǎng)上搜集轉(zhuǎn)載了此主題的一些文章，來學(xué)習(xí)～～這是第二篇！感謝原作者。

hardwear：想必多數(shù)同學(xué)曾經(jīng)學(xué)習(xí)計(jì)算機(jī)就是從Word開始，其中一項(xiàng)重要的學(xué)習(xí)任務(wù)就是創(chuàng)建表格，如今在網(wǎng)絡(luò)頁面里表格隨處可見，尤其是商業(yè)產(chǎn)品里充滿了大量的數(shù)據(jù)，要沒有這些表格估計(jì)看內(nèi)容得吐血…… 表格形形色色，默默無聞的呈現(xiàn)著數(shù)據(jù)，閱讀起來如何最為順暢，如何才能從表格里發(fā)掘出重要信息，有哪些可以對(duì)表格進(jìn)行的操作，梳理一下以供參考。

在后臺(tái)界面，表格對(duì)數(shù)據(jù)的維護(hù)和體現(xiàn)是最常見的，那么也推薦您看看一組驚艷的后臺(tái)管理界面設(shè)計(jì)

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

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

2.斑馬線更好的引導(dǎo)閱讀

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

3.選擇和操作提升使用效率

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

4.排序使表格活起來

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

也會(huì)出現(xiàn)這種多重排序的表，其實(shí)是將列的數(shù)據(jù)排序區(qū)域作為單獨(dú)的控制區(qū)進(jìn)行操作，以實(shí)現(xiàn)多個(gè)維度的排序。

看似簡(jiǎn)單的表格真要設(shè)計(jì)好還是需要花些氣力的，看看下面這些細(xì)節(jié)設(shè)計(jì)點(diǎn)，你是否也知道？

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

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

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

而將橫向的行內(nèi)信息再次擴(kuò)充就成了如同淘寶商品頁一樣的，行區(qū)分弱化的表格形式，既滿足了豐富信息的呈現(xiàn)，也能很快速的進(jìn)行與行之間的如同價(jià)格等關(guān)鍵信息的對(duì)比。

像GA、百度涅槃這種強(qiáng)調(diào)列的表也同樣廣泛使用，尤其這種縱列的強(qiáng)化是配合表格列排序功能而使用的，數(shù)據(jù)列多時(shí)需要根據(jù)某一列數(shù)據(jù)進(jìn)行排序，作為主鍵進(jìn)行提示強(qiáng)化。

6.條理的對(duì)齊

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

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

 

7.表頭固定提升使用

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

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

除了表頭行的固定，表格的列進(jìn)行固定也經(jīng)常被采用，像就是百度統(tǒng)計(jì)這樣，第一列是時(shí)間需要進(jìn)行對(duì)比，固定了第一列使得閱讀起來存在一個(gè)基礎(chǔ)。

8.減少用戶心算

對(duì)于進(jìn)行對(duì)比分析的數(shù)據(jù)，給出差值、總計(jì)便于用戶閱讀，而盡量減少用戶心算或者線下處理的過程，當(dāng)前很多表格都會(huì)提示升降變化或者總計(jì)值提升，信息的理解和閱讀效率。

表格的細(xì)節(jié)需要考慮的地方不少，是一種形式需要靈活的根據(jù)實(shí)際需求來進(jìn)行設(shè)計(jì)，的突出用戶關(guān)注的信息，對(duì)其他信息進(jìn)行弱化，同時(shí)考慮用戶的行為預(yù)期給予引導(dǎo)和幫助才能最大化的發(fā)揮表格的優(yōu)勢(shì)。

 
原文地址：ued.baidu
作者：hardwear