http://www.woshipm.com/pd/1716706.html?????? 寫的很好朦前！直接去看。
后臺(tái)產(chǎn)品經(jīng)理在工作中常常會(huì)遇到表格，表格的合理設(shè)計(jì)才能給用戶帶來(lái)更高的獲取信息的效率、更快捷的計(jì)算汞斧。所以本文就總結(jié)了一些表格設(shè)計(jì)的方法。
表格長(zhǎng)啥樣
首先什燕，我們先來(lái)看看一般的表格是長(zhǎng)什么樣的粘勒。
表格各區(qū)域介紹
表格主要分為五大區(qū)域，分別是：
篩選區(qū)：主要負(fù)責(zé)篩選和搜索屎即。
操作區(qū)：是指針對(duì)表格整體進(jìn)行的操作庙睡。
表頭：主要包括標(biāo)題，排序功能等技俐。
正文：數(shù)據(jù)展示區(qū)域乘陪。
底欄：主要用于統(tǒng)計(jì)數(shù)據(jù)總條數(shù)和記錄當(dāng)前位置。
下面我對(duì)表格的各個(gè)區(qū)域進(jìn)行說(shuō)明雕擂。
1. 篩選區(qū)
篩選區(qū)主要的功能是篩選和搜索啡邑，表格數(shù)據(jù)類型多于兩種時(shí)，就需要篩選功能了井赌。合理設(shè)計(jì)篩選區(qū)可以大大提高用戶的效率谤逼。設(shè)計(jì)篩選區(qū)時(shí)，應(yīng)該考慮如下幾點(diǎn)仇穗。
（1）手動(dòng)查詢還是自動(dòng)查詢
如果常用的查詢條件是組合幾個(gè)條件森缠，那么這種情況下，一般是填好全部條件再讓用戶點(diǎn)擊查詢按鈕仪缸。因?yàn)槿绻脩粢樵兊哪愁悅€(gè)體具有多個(gè)屬性，組合條件的查詢顯然是更合理的列肢。
如下圖所示：
如果篩選操作通常是單個(gè)條件獨(dú)立查詢恰画，各個(gè)篩選條件都是相互獨(dú)立的宾茂，那么一般設(shè)計(jì)是填好一個(gè)條件便自動(dòng)查詢。
如下圖所示：
（2）單選框or下拉框拴还？
篩選條件有些需要匯總數(shù)據(jù)的跨晴，有些只需看單一條件下的數(shù)據(jù)。
比如狀態(tài)包含“已開啟片林、已暫停和已歸檔”端盆，除了需要統(tǒng)計(jì)各狀態(tài)的數(shù)據(jù)，還需匯總數(shù)據(jù)费封，此時(shí)則是做成單選框比較好焕妙，如下圖所示。
如果不需要匯總數(shù)據(jù)弓摘，則可以是下拉框或者Tab顯示焚鹊，如下圖。這里有個(gè)小Tip韧献，如果篩選值少于5個(gè)末患，則一般是Tab顯示；多于5個(gè)锤窑，則是下拉框比較好璧针；如果多于10個(gè)，那么下拉框最好也加上搜索功能渊啰。
（3）關(guān)于常用組合
如果用戶的篩選條件比較復(fù)雜探橱，而且條件的值比較固定時(shí)，則可以考慮添加常用組合功能虽抄。常用組合篩選主要幫助用戶解決繁瑣的輸入問(wèn)題走搁，可以快捷的進(jìn)行查詢。
下圖是一種常用組合設(shè)計(jì)：
用戶可以通過(guò)點(diǎn)擊常用組合迈窟，自動(dòng)生成篩選條件私植，自動(dòng)查詢。如果要添加條件組合车酣，可以通過(guò)保存當(dāng)前的搜索條件實(shí)現(xiàn)曲稼。復(fù)雜的條件篩選時(shí)，還需要添加重置按鈕湖员，允許用戶一次清除所有篩選條件贫悄。如下圖。
（4）模糊搜索還是精確搜索
這里的模糊搜索是指根據(jù)用戶輸入的字符娘摔，模糊匹配數(shù)據(jù)窄坦。比如說(shuō)，SKU編碼輸入“K1234”，則系統(tǒng)需要搜出SKU編碼中包含“1234”鸭津，諸如“K123402彤侍、K123403、L123401”等等逆趋；如果要完全匹配“1234”盏阶，那則是精確匹配。
模糊匹配一般用于標(biāo)題闻书、自定義的字符串名斟，篩選出相似結(jié)果的場(chǎng)景，因?yàn)橛脩魧?duì)于自定義的字符串不會(huì)記得那么清楚魄眉，模糊匹配會(huì)更加方便砰盐。
所以，精確匹配一般用于標(biāo)準(zhǔn)編碼杆融、唯一標(biāo)識(shí)的字符串楞卡，篩選出精確結(jié)果的場(chǎng)景。比如脾歇，商品ID蒋腮，廣告關(guān)鍵詞等，因?yàn)橛脩糁恍枰P(guān)心的是精確匹配的結(jié)果藕各。
2. 表格操作區(qū)
表格操作區(qū)主要承載對(duì)表格的功能操作池摧，比如增刪改查或者表格結(jié)構(gòu)的修改，如下圖激况。
一般來(lái)說(shuō)作彤，功能操作是遵從連續(xù)性原則，使整個(gè)操作過(guò)程流暢乌逐，符合邏輯竭讳。比如：“批量操作”是位于復(fù)選框上方，是為了讓用戶勾選完后浙踢，很自然的移到上方繼續(xù)操作绢慢；另外，重要的操作最好用顏色加以區(qū)分洛波，并設(shè)置在視線容易抵達(dá)處胰舆，比如“新建Campaign”是核心功能，所以用橙色標(biāo)識(shí)蹬挤，并放在左邊缚窿，用戶一打開頁(yè)面，視線很容易便落到該處焰扳。
3. 表格標(biāo)題區(qū)
表格標(biāo)題區(qū)也叫表頭倦零，主要包括字段名稱误续、排序、伸展表格等功能扫茅。表頭的重要作用之一就是對(duì)數(shù)據(jù)進(jìn)行解釋女嘲，所以表頭的信息傳遞要清晰準(zhǔn)確。
（1）字段名稱
表頭的字段名稱應(yīng)當(dāng)符合用戶思維習(xí)慣诞帐，保證用戶理解。如果有需要解釋爆雹，則在字段名稱旁邊加以說(shuō)明停蕉。
一般來(lái)說(shuō)，字段不超過(guò)10個(gè)的時(shí)候钙态，可以在一屏顯示完全慧起；當(dāng)字段大于10個(gè)時(shí)，則建議使用自定義列功能册倒。如非必要蚓挤，不建議設(shè)計(jì)左右滾動(dòng)，列表的作用滾動(dòng)對(duì)于用戶來(lái)講驻子，體驗(yàn)不好灿意，操作也不方便。
在自定義列設(shè)置時(shí)崇呵，可以根據(jù)字段的屬性進(jìn)行分類缤剧，用戶檢索信息效率更高。
（2）排序
排序是一個(gè)非常重要的功能，如何從海量數(shù)據(jù)中篩選出符合要求的數(shù)據(jù)，排序是一個(gè)必不可缺的步驟烦磁。產(chǎn)品經(jīng)理前期可收集用戶需求凭涂，得知哪些字段需要排序。
（3）表頭固定
隨著表格的行和列都增加佛呻，這時(shí)候用戶的瞬時(shí)記憶會(huì)遭遇閾限，根據(jù)7±2的原則，超過(guò)這個(gè)范圍時(shí)李皇，用戶需要增加工具來(lái)幫助瀏覽表格內(nèi)的數(shù)據(jù)，不然一滾動(dòng)座云，用戶都不知道這列數(shù)據(jù)代表什么疙赠。此時(shí)固定表頭是一個(gè)很好的方法。
4. 表格正文
表格正文需要注意的點(diǎn)比較多朦拖，包括：對(duì)齊圃阳、分割、行高璧帝、信息完整捍岳、行內(nèi)操作、空白單元格、匯總計(jì)算锣夹、高亮與提示页徐、信息層級(jí)等。下面一一說(shuō)明银萍。
（1）對(duì)齊
對(duì)齊的數(shù)據(jù)能大大提高瀏覽效率变勇，人的視線也比較順暢自然。一般來(lái)說(shuō)贴唇，文字靠左對(duì)齊搀绣，符合人的閱讀習(xí)慣；數(shù)字靠右對(duì)齊戳气，方便比較大辛椿肌；對(duì)于固定長(zhǎng)度的按鈕或文字瓶您，一般可以居中對(duì)齊麻捻。
（2）分割
正確使用斑馬線和鼠標(biāo)懸停高亮底色可以很好的引導(dǎo)用戶瀏覽數(shù)據(jù)，避免出現(xiàn)錯(cuò)行呀袱、迷失的情況贸毕。 斑馬線是幫助用戶區(qū)分行與行之間的數(shù)據(jù)，避免混淆压鉴；鼠標(biāo)懸停高亮底色是用戶交互時(shí)的輔助工具崖咨，輔助用戶明確數(shù)據(jù)所在行。
（3）行高
正文的行高也是重要參數(shù)之一油吭，如果強(qiáng)調(diào)在一屏盡可能顯示多一點(diǎn)數(shù)據(jù)的話击蹲，行高可以設(shè)置小一點(diǎn)；如果強(qiáng)調(diào)行內(nèi)信息比較多的話婉宰，行高可以設(shè)置大一點(diǎn)歌豺。
（4）信息完整
由于表格寬度有限，有些字段的數(shù)據(jù)比較長(zhǎng)時(shí)心包，會(huì)無(wú)法完整顯示在表格內(nèi)类咧，此時(shí)需要省略部分信息，用戶鼠標(biāo)懸停時(shí)可以查看完整信息蟹腾。
（5）行內(nèi)操作
行內(nèi)操作對(duì)比彈窗編輯或新打開標(biāo)簽頁(yè)編輯有非常高的效率痕惋，所以對(duì)于頻繁修改的數(shù)據(jù)，建議使用行內(nèi)編輯娃殖。
編輯的內(nèi)容比較少時(shí)值戳，
可以直接編輯修改，如下圖：
如果需要同時(shí)編輯的內(nèi)容比較多時(shí)炉爆，為提高效率堕虹，可以采用批量填寫再保存卧晓，如下圖：
（6）空白單元格
最好不要留空白格，會(huì)使用戶迷惑赴捞，是程序出Bug了逼裆，還是數(shù)據(jù)為空。建議產(chǎn)品經(jīng)理跟開發(fā)協(xié)商好空數(shù)據(jù)的顯示方式赦政，一般不為了引起歧義胜宇，空數(shù)據(jù)用“-”顯示，為零數(shù)據(jù)使用“0”表示恢着。
（7）匯總計(jì)算
表格字段多掸屡、數(shù)據(jù)之間需要計(jì)算時(shí)，為了減少用戶心算的負(fù)擔(dān)然评，應(yīng)該在表格中幫助用戶匯總計(jì)算對(duì)應(yīng)的數(shù)據(jù)。
（8）高亮與提示
對(duì)重點(diǎn)信息進(jìn)行高亮顯示狈究，提示用戶注意碗淌，幫助用戶快速找到重點(diǎn)是提高用戶體驗(yàn)的手段之一。
（9）信息層級(jí)
表格數(shù)據(jù)有些是具有深度的抖锥，可以進(jìn)行分析的亿眠，這類數(shù)據(jù)的信息層級(jí)應(yīng)該在設(shè)計(jì)表格的時(shí)候體現(xiàn)出來(lái)。比如下圖中的“花費(fèi)”磅废，還可以對(duì)單條數(shù)據(jù)的“花費(fèi)”進(jìn)行分析纳像，體現(xiàn)了信息的層級(jí)。
5. 底欄
最后是表格的底欄拯勉，底欄也是不可缺少的一部分竟趾，承載的作用主要是告訴用戶數(shù)據(jù)條數(shù)以及當(dāng)前位置。
合理的設(shè)置每頁(yè)的顯示條數(shù)需要產(chǎn)品經(jīng)理前期去調(diào)研宫峦，我們之前做了一個(gè)顯示店鋪所有商品的表格岔帽，默認(rèn)每頁(yè)顯示15條，最多可設(shè)置每頁(yè)顯示50條导绷∠眨可是后面用戶反饋說(shuō)，即使每頁(yè)顯示50條也是太少了妥曲，因?yàn)樗牡赇佊猩锨€(gè)商品贾费，頁(yè)數(shù)多的話，翻頁(yè)效率太低了檐盟。后面我們改成每頁(yè)最多可以顯示200條褂萧，這才算解決他的問(wèn)題。
總結(jié)
至此遵堵，關(guān)于表格設(shè)計(jì)就大概講完了箱玷，表格不只是簡(jiǎn)單的呈現(xiàn)數(shù)據(jù)怨规，如何設(shè)計(jì)表格，使表格內(nèi)容可理解性強(qiáng)锡足、用戶瀏覽效率高也是產(chǎn)品經(jīng)理需要關(guān)心的問(wèn)題波丰。
關(guān)于表格設(shè)計(jì)，如果你有更好的建議舶得，歡迎在評(píng)論留下你的建議哦~
