本文從表格的組成元素、優(yōu)秀表格的設(shè)計(jì)技巧、表格的操作交互等，給你一份全面的設(shè)計(jì)指南。
一、表格應(yīng)用
表格，是一種常見(jiàn)的信息組織整理手段，常用于信息收集（展示）、數(shù)據(jù)分析、歸納整理等活動(dòng)中，在互聯(lián)網(wǎng)產(chǎn)品應(yīng)用中，非常適合于：
1. 需要組織和展示大量信息數(shù)據(jù)
表格結(jié)構(gòu)簡(jiǎn)單，分隔歸納明確，特別適合組織和展示大量的信息內(nèi)容，且易于用戶瀏覽和獲取信息。
2. 當(dāng)信息數(shù)據(jù)需要進(jìn)行多種復(fù)雜操作時(shí)
需要對(duì)信息進(jìn)行排序、搜索、篩選、分頁(yè)、自定義選項(xiàng)等操作。
3. 信息上下間的對(duì)比
表格的歸納與分類，使信息之間易于對(duì)比，便于用戶快速查詢其中的差異與變化、關(guān)聯(lián)和區(qū)別。
二、表格組成要素
表格的基本組成：標(biāo)題+表頭+單元格。
- 標(biāo)題：表格信息內(nèi)容的整體概括；
- 表頭：表格信息的屬性分類或基本概括；
- 單元格：具體信息內(nèi)容的填充區(qū)域。
三、優(yōu)秀表格設(shè)計(jì)技巧
1. 行與列
表格的組成，就是行與列的組合，行與列的變化，賦予了表格多樣性的特點(diǎn)。
行與列構(gòu)成了單元格的長(zhǎng)與高，不同的長(zhǎng)高會(huì)有疏密之分，充實(shí)與透氣之感。
根據(jù)目的及信息主體的不同，可通過(guò)行與列的顯隱變化，來(lái)更好的滿足信息的傳達(dá)。
隱藏了縱向的線，更加強(qiáng)調(diào)行的特性，使橫向信息更加連續(xù)通暢，則不強(qiáng)調(diào)縱向上下信息之間的對(duì)比；
顯現(xiàn)縱向的線，使上下行之間的信息增加了對(duì)比性。
2. 對(duì)齊，高效的信息獲取方式
表格內(nèi)的信息通過(guò)對(duì)齊，會(huì)更加規(guī)范易理解，給用戶視覺(jué)上的統(tǒng)一感，且視線流動(dòng)順暢，能夠讓人快速的捕捉到所要的內(nèi)容。
- 文本信息左對(duì)齊，因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常的心智；
- 數(shù)據(jù)信息右對(duì)齊，更加方便數(shù)字大小的直觀對(duì)比；
- 固定內(nèi)容居中對(duì)齊，更好的信息呈現(xiàn)及表格空間的節(jié)；
- 表頭與信息內(nèi)容對(duì)齊方式一致，一致性以達(dá)到簡(jiǎn)化，降低視覺(jué)噪音。
3. 減少視覺(jué)噪音，有效傳達(dá)為本
信息內(nèi)容的有效傳達(dá)是表格的服務(wù)本質(zhì)，就表格本身而言應(yīng)該是隱形的，減少用戶注意力，在保證整體結(jié)構(gòu)的基礎(chǔ)上，盡量減少或削弱所謂的視覺(jué)裝飾。
4. 精簡(jiǎn)表頭，專業(yè)術(shù)語(yǔ)給予解釋
表頭在能夠概括的情況下，盡量簡(jiǎn)練、準(zhǔn)確，一般可根據(jù)上下文關(guān)系來(lái)進(jìn)行減短簡(jiǎn)化，以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用。
同樣，對(duì)于專業(yè)術(shù)語(yǔ)或用戶不常見(jiàn)的名詞應(yīng)給予一定的幫助說(shuō)明。
5. 減少計(jì)算，為用戶多想一步
根據(jù)當(dāng)前數(shù)據(jù)，并在歷史數(shù)據(jù)的基礎(chǔ)上給出差值、總計(jì)等處理性的結(jié)果，可以直達(dá)用戶所需即獲取信息的目標(biāo)，從而減少用戶心算或者線下處理的麻煩。一般在數(shù)據(jù)對(duì)比中較常用到，通過(guò)當(dāng)前數(shù)據(jù)和歷史數(shù)據(jù)進(jìn)行比較，來(lái)獲得更多的直觀信息，例如股票的數(shù)據(jù)變化、音樂(lè)排行榜排名變化等。
6. 空白數(shù)據(jù)，由「-」填充
表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無(wú)數(shù)據(jù)的情況，留白處理會(huì)給用戶造成一定的困惑和誤解，是系統(tǒng)沒(méi)有加載出來(lái)嗎？明智的做法，是用「-」來(lái)填充顯示。
7. 視覺(jué)層級(jí)
可通過(guò)背景、放大、顏色等處理，icon圖標(biāo)的應(yīng)用，可使重要信息突出，不同功能模塊區(qū)分（例如：表頭與信息內(nèi)容）、活躍表格氛圍，增加視覺(jué)層次感等效果。
四、表格的操作交互
1. 操作
對(duì)表格操作大體可分為顯性操作和隱形操作。顯性操作，指操作選項(xiàng)顯示在行內(nèi)，明顯直觀；
隱性操作，當(dāng)鼠標(biāo)懸停時(shí)或勾選才顯示操作選項(xiàng)，使界面簡(jiǎn)潔明快，可減輕空間壓力，減少干擾。
2. 排序，讓信息有序起來(lái)
可以讓無(wú)序信息內(nèi)容進(jìn)行有序排列，排序分為升序和降序，一般用在數(shù)據(jù)、時(shí)間、數(shù)量上。
3. 搜索和篩選，查找更方便
在大量的表格信息中，一一查找猶如大海撈針，但通過(guò)關(guān)鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。
4. 固定表頭，一目了然
當(dāng)閱讀豐富且繁多的表格時(shí)，由于屏幕有限，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息，固定表頭，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思，固定表頭，也是一種界面友好性的體現(xiàn)。
5. 分頁(yè)固定
若表格是分頁(yè)處理的，分頁(yè)會(huì)放在上部、下部或上下部均有，分頁(yè)固定省去了用戶需要翻到頂部或底部進(jìn)行操作的麻煩。
6. 全選操作，效率加倍
若表格是分頁(yè)，在某些情況下全選則需要考慮分為單頁(yè)全選和整表全選，瀑布流式的加載就不需要做區(qū)分了。
7. 操作即反饋
當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí)，給予變化提示，特別在信息列數(shù)較多的情況下更為重要，能夠讓人捕捉到所在的位置，而不至于視覺(jué)上的錯(cuò)行，能夠降低人的心理壓力和增加掌控感。
8. 調(diào)整列寬度，查看完整數(shù)據(jù)
允許調(diào)整列的寬度來(lái)查看更加完整的縮略數(shù)據(jù)。被截?cái)嗟臄?shù)據(jù)，默認(rèn)支持鼠標(biāo)懸停時(shí) tips 顯示完整數(shù)據(jù)。
9. 水平滾動(dòng)，固定首尾列
呈現(xiàn)大型數(shù)據(jù)集時(shí)，水平滾動(dòng)是不可避免的，通過(guò)橫向滾動(dòng)查看其它數(shù)據(jù)。將首列進(jìn)行固定（若包含勾選操作，則一起固定），以便用戶將數(shù)據(jù)與對(duì)象進(jìn)行對(duì)應(yīng)。
若尾列包含列表操作，也將其進(jìn)行固定，方便用戶直接操作。
10. 右側(cè)抽屜，更多詳情
單擊行鏈接，右側(cè)彈出抽屜顯示其他詳細(xì)信息。
11. 內(nèi)聯(lián)操作
允許用戶在表格中直接修改數(shù)據(jù)，而無(wú)需到單獨(dú)的編輯頁(yè)面。
12. 根據(jù)所需提供相應(yīng)的自定義和設(shè)置
服務(wù)于企業(yè)應(yīng)用的數(shù)據(jù)表格，本身信息項(xiàng)目繁多，且需要滿足不同行業(yè)不同角色的需求，默認(rèn)表格一般會(huì)提供通用的字段指標(biāo)，然后用戶可根據(jù)自身所需添加或調(diào)整系統(tǒng)所提供的其它字段指標(biāo)或進(jìn)行自定義操作，讓表格具有了彈性化的特征，以滿足個(gè)性需求。
總結(jié)
任何優(yōu)秀的表格，本質(zhì)上都是以用戶所需的角度去設(shè)計(jì)服務(wù)，并有效的傳達(dá)信息內(nèi)容。
良好的數(shù)據(jù)表格允許用戶對(duì)信息進(jìn)行掃描、分析、比較、過(guò)濾、排序和操作，以獲取洞察。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。