• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 表格在網(wǎng)站設(shè)計(jì)中的表現(xiàn)方式分析

表格在網(wǎng)站設(shè)計(jì)中的表現(xiàn)方式分析

網(wǎng)站工程師 于2020-04-25 11:55發(fā)表 閱讀次數(shù) 2553次

表格在青島網(wǎng)站設(shè)計(jì)是用的比較多的一種方式，他的好處就是制作快捷，后期維護(hù)方便，樣式控制也可通過css統(tǒng)一控制。網(wǎng)站前臺(tái)設(shè)計(jì)，特別是產(chǎn)品展示上，如果產(chǎn)品參數(shù)較多，這時(shí)候通過表格展現(xiàn)，也許是一個(gè)不錯(cuò)的選擇。表格的邊線粗細(xì)，行高，以及表格線格式，都直接會(huì)影響到用戶瀏覽與使用的體驗(yàn)。在后臺(tái)界面，表格對(duì)數(shù)據(jù)的維護(hù)和體現(xiàn)是最常見的，順便推薦幾種不錯(cuò)的表現(xiàn)方式。 　　斑馬線更好的引導(dǎo)閱讀 　　斑馬線和懸停時(shí)的整行變化也是表格中能引起視覺變化的重要元素，斑馬線會(huì)使得行與行的界限更為分明，尤其對(duì)數(shù)據(jù)列較多時(shí)的橫向引導(dǎo)得到加強(qiáng)，這樣看行內(nèi)的內(nèi)容時(shí)不容易錯(cuò)行，而懸停變色行主要是配合操作交互，為了明確區(qū)分出光標(biāo)所在的行。 　　行高是表格瀏覽時(shí)的重要參數(shù) 　　行高是表格非常重要的參數(shù)，行高間距直接影響著閱讀的體驗(yàn)，有如同Omniture為了最大限度的放置數(shù)據(jù)內(nèi)容，強(qiáng)化數(shù)據(jù)顯示效果而降低行高的情況，也有SugarCRM一樣的行高較高可以放置更多文本信息的表格。 　　選擇和操作提升使用效率 　　對(duì)表格數(shù)據(jù)的選擇會(huì)有單選多選或者全選的情況，如果遇到數(shù)據(jù)項(xiàng)很多有翻頁，全選的位置就會(huì)增加一些選項(xiàng)來確定是當(dāng)頁全選還是整表全選，如同Gmail和SugarCrm里的效果，這種表格是將選擇區(qū)域放置在表格的左側(cè)第一列，也有表格的設(shè)計(jì)是將選擇放在右側(cè)最后一列，像CampaignMonitor就是這樣設(shè)計(jì)的，好處在于瀏覽完一行的信息就可以確定是否需要選擇該行內(nèi)容進(jìn)行下一步操作。 　　排序使表格活起來 　　排序是表格里經(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)，你是否也知道？ 　　重點(diǎn)在于行或者列 　　表格是由最簡(jiǎn)單的行、列、單元格構(gòu)成的，根據(jù)瀏覽的目的和希望突出的信息不同，行、列、單元格都可以通過一些變化進(jìn)行強(qiáng)調(diào)，這是將信息通過表格傳達(dá)出去的最為根本的使用方式。 　　郵箱產(chǎn)品就是強(qiáng)調(diào)行的表格設(shè)計(jì)的典范，像Gmail、YahooMail、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)化。 　　減少用戶心算 　　對(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ì)。 　　條理的對(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ì)降低效率。 　　表頭固定提升使用 　　隨著表格的行和列都增加，這時(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ǔ)。 　　雖然現(xiàn)在div用的比較普及，但是表格也將在較長(zhǎng)的時(shí)間里扮演著網(wǎng)頁設(shè)計(jì)的重要角色，兩種方式并不能完全代替，而是相互搭配的，完美協(xié)調(diào)的關(guān)系。

表格在網(wǎng)站設(shè)計(jì)中的表現(xiàn)方式分析相關(guān)標(biāo)簽：網(wǎng)站規(guī)劃，網(wǎng)站建設(shè)，設(shè)計(jì)網(wǎng)站，網(wǎng)站規(guī)劃

相關(guān)熱點(diǎn)推薦

用戶體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對(duì) 手機(jī)建站時(shí)容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識(shí)別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁不到首頁 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框 關(guān)于網(wǎng)站優(yōu)化五大技巧 如何進(jìn)行網(wǎng)站首頁改版 web設(shè)計(jì)師可以走得更 專業(yè)設(shè)計(jì)網(wǎng)站的公司哪里 青島網(wǎng)站設(shè)計(jì)的幾點(diǎn)知識(shí) 青島網(wǎng)站制作哪家強(qiáng) 交互設(shè)計(jì)的8項(xiàng)黃金法則 設(shè)計(jì)良好網(wǎng)頁的4項(xiàng)原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡(luò)營(yíng)銷的五個(gè)階段 青島網(wǎng)站設(shè)計(jì)成功要素 小型企業(yè)網(wǎng)站維護(hù) 奈薇建站網(wǎng)科技2016 國(guó)內(nèi)網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)談 微信營(yíng)銷推廣的特性-奈 什么是自助建站？ 如何從營(yíng)銷的角度策劃建 建網(wǎng)站必備六步

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶