国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

后臺(tái)產(chǎn)品經(jīng)理在工作中常常會(huì)遇到表格，表格的合理設(shè)計(jì)才能給用戶帶來(lái)更高的獲取信息的效率、更快捷的計(jì)算。所以本文就總結(jié)了一些表格設(shè)計(jì)的方法。

表格長(zhǎng)啥樣

首先，我們先來(lái)看看一般的表格是長(zhǎng)什么樣的。

表格各區(qū)域介紹

表格主要分為五大區(qū)域，分別是：

1. 篩選區(qū)：主要負(fù)責(zé)篩選和搜索。
2. 操作區(qū)：是指針對(duì)表格整體進(jìn)行的操作。
3. 表頭：主要包括標(biāo)題，排序功能等。
4. 正文：數(shù)據(jù)展示區(qū)域。
5. 底欄：主要用于統(tǒng)計(jì)數(shù)據(jù)總條數(shù)和記錄當(dāng)前位置。

下面我對(duì)表格的各個(gè)區(qū)域進(jìn)行說明。

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í)，則可以考慮添加常用組合功能。常用組合篩選主要幫助用戶解決繁瑣的輸入問題，可以快捷的進(jìn)行查詢。

下圖是一種常用組合設(shè)計(jì)：

用戶可以通過點(diǎn)擊常用組合，自動(dòng)生成篩選條件，自動(dòng)查詢。如果要添加條件組合，可以通過保存當(dāng)前的搜索條件實(shí)現(xiàn)。復(fù)雜的條件篩選時(shí)，還需要添加重置按鈕，允許用戶一次清除所有篩選條件。如下圖。

（4）模糊搜索還是精確搜索

這里的模糊搜索是指根據(jù)用戶輸入的字符，模糊匹配數(shù)據(jù)。比如說，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)說，功能操作是遵從連續(xù)性原則，使整個(gè)操作過程流暢，符合邏輯。比如：“批量操作”是位于復(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í)慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加以說明。

一般來(lái)說，字段不超過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的原則，超過這個(gè)范圍時(shí)，用戶需要增加工具來(lái)幫助瀏覽表格內(nèi)的數(shù)據(jù)，不然一滾動(dòng)，用戶都不知道這列數(shù)據(jù)代表什么。此時(shí)固定表頭是一個(gè)很好的方法。

4. 表格正文

表格正文需要注意的點(diǎn)比較多，包括：對(duì)齊、分割、行高、信息完整、行內(nèi)操作、空白單元格、匯總計(jì)算、高亮與提示、信息層級(jí)等。下面一一說明。

（1）對(duì)齊

對(duì)齊的數(shù)據(jù)能大大提高瀏覽效率，人的視線也比較順暢自然。一般來(lái)說，文字靠左對(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條。可是后面用戶反饋說，即使每頁(yè)顯示50條也是太少了，因?yàn)樗牡赇佊猩锨€(gè)商品，頁(yè)數(shù)多的話，翻頁(yè)效率太低了。后面我們改成每頁(yè)最多可以顯示200條，這才算解決他的問題。

總結(jié)

至此，關(guān)于表格設(shè)計(jì)就大概講完了，表格不只是簡(jiǎn)單的呈現(xiàn)數(shù)據(jù)，如何設(shè)計(jì)表格，使表格內(nèi)容可理解性強(qiáng)、用戶瀏覽效率高也是產(chǎn)品經(jīng)理需要關(guān)心的問題。

關(guān)于表格設(shè)計(jì)，如果你有更好的建議，歡迎在評(píng)論留下你的建議哦~

本文由 @hao_4857 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議