中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

上一篇《2B產(chǎn)品設(shè)計(jì)套路一：表單設(shè)計(jì)》總結(jié)了“增刪改查顯”中的“增”和“改”對(duì)應(yīng)的表單設(shè)計(jì)，這一篇繼續(xù)講講“查”和“顯”。

我們可以通過(guò)數(shù)據(jù)統(tǒng)計(jì)、表格、詳情頁(yè)配合篩選、搜索實(shí)現(xiàn)查和顯的操作，達(dá)到從不同維度向用戶輸出的目的。

從數(shù)據(jù)的概括程度看：數(shù)據(jù)統(tǒng)計(jì)>表格>詳情頁(yè)。數(shù)據(jù)統(tǒng)計(jì)（或者叫dashboard、態(tài)勢(shì)展示）對(duì)數(shù)據(jù)的抽象程度最高、最概括，一般是對(duì)數(shù)據(jù)整體情況的概覽；其次是表格展現(xiàn)，可以逐條展示數(shù)據(jù)，顯示重要的信息，但是一般受限于屏幕大小，只能展示10個(gè)左右字段；最詳細(xì)的是數(shù)據(jù)詳情頁(yè)，可以詳細(xì)的展現(xiàn)某一實(shí)例相關(guān)的所有信息。

數(shù)據(jù)統(tǒng)計(jì)頁(yè)

數(shù)據(jù)表格頁(yè)

數(shù)據(jù)詳情頁(yè)

1. 表格&表格頁(yè)

表格是表格頁(yè)的主體，是展現(xiàn)數(shù)據(jù)的有效組織形式，可以展現(xiàn)大量的、比較詳細(xì)的數(shù)據(jù)。表格天然是結(jié)構(gòu)化的形式，所以在展示結(jié)構(gòu)化數(shù)據(jù)的時(shí)候，很自然的我們會(huì)想到用表格的形式。

表格頁(yè)包含了更豐富的元素，像樞紐站一樣，可以提供通往各個(gè)功能的入口，通過(guò)【新增】按鈕可以到達(dá)“增”功能的表單，通過(guò)【修改】/【編輯】按鈕可以額到達(dá)“改”功能的表單，通過(guò)【刪除】可以實(shí)現(xiàn)“刪”功能，其他按鈕也可以作為各式各樣的業(yè)務(wù)功能的入口。

所以在表格頁(yè)中，表格是展示的主體，配合一些按鈕就可以實(shí)現(xiàn)數(shù)據(jù)的增刪改查顯功能，從而實(shí)現(xiàn)數(shù)據(jù)的閉環(huán)。

2. 表格頁(yè)的組成

表格頁(yè)主要包括表格、搜索欄、操作欄以及分頁(yè)欄四個(gè)部分。

表格主要包括表頭和表體，表頭除了說(shuō)明每列數(shù)據(jù)的內(nèi)容外，還可以包含篩選、排序功能。

表體按列可以分為多選列、數(shù)據(jù)列、操作列，如果表格數(shù)據(jù)需要批量操作，就得通過(guò)多選框復(fù)選數(shù)據(jù)，所以需要一列專門展示選擇框；數(shù)據(jù)列則完全是根據(jù)業(yè)務(wù)展現(xiàn)需要的信息；操作列主要是顯示針對(duì)單行數(shù)據(jù)的操作按鈕，比如查看詳情、編輯信息等。

搜索欄的作用主要是方便用戶在大量的數(shù)據(jù)中精確地查找到自己想要的數(shù)據(jù)，是表格好伴侶。

一般搜索對(duì)流程是用戶輸入查詢條件，然后觸發(fā)搜索，表格刷新，只顯示符合查詢條件的數(shù)據(jù)。搜索欄可以是簡(jiǎn)單的關(guān)鍵詞輸入框（只能實(shí)現(xiàn)單字段搜索或者模糊搜索），也可以提供多字段聯(lián)合搜索功能（包括下拉框選擇字段+關(guān)鍵詞輸入框），也可以是高級(jí)搜索（針對(duì)搜索和篩選混合使用），但在這里我們暫不展開(kāi)討論搜索功能。

操作欄一般是多個(gè)按鈕組成的，比如說(shuō)常見(jiàn)的【新增】按鈕和各種批量操作按鈕。通過(guò)【新增】按鈕打開(kāi)新增表單，實(shí)現(xiàn)向表格增加一條數(shù)據(jù)。批量操作一般是業(yè)務(wù)功能，根據(jù)需求我們也可以把【刪除】作為一種批量操作。

分頁(yè)是一次只展示少量的數(shù)據(jù)（十幾到幾十條），目的是防止數(shù)據(jù)量大的情況下瀏覽器響應(yīng)太慢或者瀏覽器內(nèi)存溢出，但分頁(yè)也會(huì)造成篩選、排序、多選時(shí)候的一些坑，后邊會(huì)詳細(xì)總結(jié)。

下邊圍繞幾個(gè)主題總結(jié)下我在設(shè)計(jì)表格頁(yè)時(shí)候遇到的一些問(wèn)題。

3. 兩個(gè)操作欄

細(xì)心的小讀者會(huì)發(fā)現(xiàn)，一個(gè)表格頁(yè)其實(shí)包括了兩個(gè)操作區(qū)：一個(gè)在表格外，一個(gè)在表格內(nèi)，那么很自然的我們會(huì)遇到一個(gè)問(wèn)題，一個(gè)功能該放在哪呢？

習(xí)慣上我們會(huì)認(rèn)為一行數(shù)據(jù)是對(duì)某一個(gè)對(duì)象實(shí)例的描述，比如在學(xué)生信息表格中，一行數(shù)據(jù)是對(duì)某個(gè)學(xué)生sam的描述，包括他的姓名、年齡、性別、成績(jī)等等。所以表格內(nèi)的操作也是針對(duì)某個(gè)對(duì)象實(shí)例的。

一般我會(huì)把一次只能針對(duì)一個(gè)對(duì)象操作的功能放在表格內(nèi)，比如【查看詳情】和【編輯】，因?yàn)椴榭丛斍椴惶赡芤淮尾榭炊鄠€(gè)對(duì)象，編輯修改信息也是

那么反過(guò)來(lái)，不屬于任何一個(gè)對(duì)象實(shí)例的功能就需要放在表格外的操作欄，比如說(shuō)【新增】。另外一種需要放在表格外的功能是批量操作，因?yàn)榕坎僮餍枰獙?duì)多行數(shù)據(jù)進(jìn)行同時(shí)操作，也不是屬于單個(gè)對(duì)象實(shí)例的。

一個(gè)反例

這個(gè)栗子中，就是把本來(lái)是只能單個(gè)數(shù)據(jù)操作的功能【修改】放在了表格外，首先會(huì)造成功能的操作步驟變多（如果放在表內(nèi)的操作列中該功能的步驟是1，放在表外操作步驟變?yōu)榱?），其次還要處理如果用戶多選數(shù)據(jù)后再點(diǎn)擊【修改】的邏輯。

刪除功能究竟該放在哪？

不知道大家有沒(méi)有想過(guò)這個(gè)問(wèn)題，我剛開(kāi)始當(dāng)pm時(shí)候這個(gè)問(wèn)題困擾了我好久。刪除可以作為行內(nèi)操作（我們暫時(shí)把這種叫做單個(gè)刪除），優(yōu)點(diǎn)是更便捷。也可以放在表外作為是批量操作（暫時(shí)叫做批量刪除），這樣更方便的同時(shí)刪除多個(gè)數(shù)據(jù)，但如果只刪除一個(gè)數(shù)據(jù)時(shí)就會(huì)增加用戶的操作步驟?；蛘邇煞N方式都提供，雖然更靈活但是會(huì)讓頁(yè)面比較冗余。

單個(gè)刪除

批量刪除

單個(gè)刪除+批量刪除

其實(shí)怎么選擇還是要根據(jù)具體業(yè)務(wù)場(chǎng)景來(lái)決定，首先判斷用戶批量刪除是不是高頻功能，如果是，顯然只有單個(gè)刪除功能就不能滿足需求；如果刪除是低頻操作，那么完全可以只提供單個(gè)刪除功能。

我一般不會(huì)在頁(yè)面中同時(shí)提供單個(gè)刪除和批量刪除，畢竟相對(duì)業(yè)務(wù)功能來(lái)說(shuō)，刪除本來(lái)就相對(duì)低頻，我們應(yīng)該把更多的空間留給用戶每天都要用到的功能。

4. 篩選和排序

我覺(jué)得篩選和排序?qū)Ρ砀駚?lái)說(shuō)甚至比搜索更重要，因?yàn)橛脩魧?duì)數(shù)據(jù)的查找可能沒(méi)有達(dá)到搜索那么精確，篩選和排序可以幫助他們縮小范圍以找到他們需要的數(shù)據(jù)。（就像表單輸入時(shí)選擇要好于輸入，給用戶幾個(gè)選項(xiàng)要比讓他們自己思考好一些）

那么設(shè)計(jì)功能時(shí)就要確定哪些字段需要被篩選和排序。一個(gè)簡(jiǎn)單粗暴的解決方案是給所有字段都加上篩選、排序，但這樣表頭看起來(lái)就會(huì)非常亂。

有幾種改進(jìn)方案：

• 一是只保留重要的那些字段的篩選排序功能，但這樣很考驗(yàn)pm對(duì)業(yè)務(wù)的理解，如果一些用戶關(guān)心的字段沒(méi)有篩選和排序功能可能會(huì)被吐槽。
• 二是在默認(rèn)模式時(shí)候隱藏篩選和排序的按鈕，通過(guò)表格外的按鈕觸發(fā)顯示，這樣會(huì)犧牲一點(diǎn)用戶體驗(yàn)，讓操作步驟+1。

• 三是如果你的產(chǎn)品恰好設(shè)計(jì)了“高級(jí)搜索”功能，可以把篩選功能放在高級(jí)搜索里，表頭只留排序按鈕。

5. 分頁(yè)造成的影響

前邊我們講了分頁(yè)帶來(lái)的好處，頁(yè)面不用一次加載出全部數(shù)據(jù)，加快了頁(yè)面的響應(yīng)速度，這在數(shù)據(jù)量大時(shí)是非常要必要的。但分頁(yè)也帶來(lái)了一些坑，因?yàn)闉g覽器前端拿到的數(shù)據(jù)只是當(dāng)前頁(yè)的，而不是全量數(shù)據(jù)，這就可能會(huì)對(duì)篩選、排序、多選功能產(chǎn)生影響。

有時(shí)篩選和排序是前端來(lái)實(shí)現(xiàn)的，這時(shí)只能對(duì)當(dāng)前頁(yè)的數(shù)據(jù)進(jìn)行篩選或排序。但我們或者用戶想要的效果往往是全局?jǐn)?shù)據(jù)的篩選或排序，所以和RD溝通時(shí)候務(wù)必向他們說(shuō)明你想要的效果。

類似的，多選時(shí)如果用戶在第1頁(yè)選中了一些數(shù)據(jù)，然后翻到第2頁(yè)繼續(xù)選擇，我們要考慮第1頁(yè)選擇的數(shù)據(jù)是不是應(yīng)該被保留（多數(shù)情況下我覺(jué)得是應(yīng)該的），如果是，確保RD小哥哥明白這一點(diǎn)，否則結(jié)果很可能不是你想要的（別問(wèn)我怎么知道的）。

6. 友好的表格

對(duì)齊

這里對(duì)齊主要指表格的每列數(shù)據(jù)的對(duì)齊，對(duì)齊方式有左對(duì)齊、右對(duì)齊和居中三種，數(shù)據(jù)類型可以分為文本、數(shù)字和標(biāo)簽三種。不同的數(shù)據(jù)使用恰當(dāng)?shù)膶?duì)齊方式可以幫助用戶更方便、快速的理解數(shù)據(jù)。

一般的對(duì)齊處理方式：文本使用左對(duì)齊，數(shù)字右對(duì)齊，標(biāo)簽、按鈕、序號(hào)等居中。因?yàn)槲覀兊拈喿x習(xí)慣是從左到右，文本左對(duì)齊可以利用用戶的視覺(jué)流提高閱讀效率，這和表單標(biāo)簽的對(duì)齊原則是一樣的。數(shù)字右對(duì)齊是因?yàn)樵谛?shù)點(diǎn)保存相同位數(shù)的情況下，用戶可以通過(guò)數(shù)字的長(zhǎng)短來(lái)判斷大小，更加直觀、效率更高。

缺失數(shù)據(jù)顯示

當(dāng)頁(yè)面上沒(méi)有顯示出來(lái)一個(gè)數(shù)據(jù)的時(shí)候，有兩種情況：一是數(shù)據(jù)庫(kù)中沒(méi)有存儲(chǔ)，二是由于各種錯(cuò)誤數(shù)據(jù)無(wú)法加載。如果我們不加以區(qū)分，用戶是無(wú)法判斷是哪一種情況造成沒(méi)有數(shù)據(jù)的，所以友好的表格應(yīng)該將兩者區(qū)分開(kāi)，我們通常會(huì)將數(shù)據(jù)庫(kù)中沒(méi)有數(shù)據(jù)的字段顯示為’-’

固定行列

在數(shù)據(jù)行、列較多的情況下，表格需要滾動(dòng)才能看到被隱藏的數(shù)據(jù)。但滾動(dòng)時(shí)有一些重要的信息會(huì)被隱藏掉，比如表頭、名稱列、操作列，這樣用戶就可能會(huì)發(fā)出我是誰(shuí)，我在哪，我在看什么的疑問(wèn)三連。

作為友好的表格，我們需要保證在不論在什么情況下，用戶都能輕易的定位到自己所在的位置，完整自己想做的操作，一個(gè)有效的方法就是把重要的信息固定下來(lái)，不要讓它們隨著表格滾動(dòng)。

新增數(shù)據(jù)的處理

新增一條數(shù)據(jù)后，這條數(shù)據(jù)應(yīng)該被放在表格的哪里呢？

這是個(gè)和表格默認(rèn)排序有關(guān)的問(wèn)題，表格數(shù)據(jù)應(yīng)該默認(rèn)按添加的時(shí)間排序，還是應(yīng)該按某個(gè)字段的名稱排序？

如果我們默認(rèn)按某個(gè)字段排序，比方說(shuō)資產(chǎn)名稱，當(dāng)增加一條新數(shù)據(jù)后它會(huì)被插入到表格中相應(yīng)的位置，比如增加的數(shù)據(jù)的資產(chǎn)名稱叫“飲水機(jī)”，它會(huì)被插入到首字母y的數(shù)據(jù)附近，而首字母y的數(shù)據(jù)很可能不在所有數(shù)據(jù)的靠前位置。

這時(shí)就會(huì)出現(xiàn)一個(gè)問(wèn)題，用戶要在茫茫數(shù)據(jù)中找到剛增加的那一條數(shù)據(jù)，或者用戶根本不知道自己增加的數(shù)據(jù)已經(jīng)被插入在了表格里了，這會(huì)讓他們覺(jué)得自己的操作失敗了。解決這個(gè)問(wèn)題的一個(gè)方法就是按照數(shù)據(jù)添加時(shí)間默認(rèn)排序，這樣新增的數(shù)據(jù)會(huì)出現(xiàn)在表格的第一條，用戶很容易就能發(fā)現(xiàn)它。

導(dǎo)入導(dǎo)出

導(dǎo)入導(dǎo)出也是友好表格的一種常見(jiàn)的輔助功能，核心是“批量”的思想。

導(dǎo)入主要是指從excel表格批量導(dǎo)入數(shù)據(jù)至軟件，我覺(jué)得導(dǎo)入功能很多情況下是很必要的：

一是因?yàn)?B業(yè)務(wù)中數(shù)據(jù)量真的很大，有時(shí)候用戶需要一下增加幾十幾百條數(shù)據(jù)，一條一條錄入很快就會(huì)讓人想砸鍵盤，從excel導(dǎo)入數(shù)據(jù)是個(gè)可行的解決方案；

二是2B業(yè)務(wù)涉及到歷史數(shù)據(jù)的導(dǎo)入，如果用戶之前沒(méi)有用信息化軟件管理的話，那么他們的數(shù)據(jù)多半存在excel表格中，如果直接能把歷史數(shù)據(jù)導(dǎo)入新軟件，用戶會(huì)對(duì)產(chǎn)品有個(gè)不錯(cuò)的印象。

導(dǎo)出數(shù)據(jù)主要是為了方便和其他軟件、系統(tǒng)的數(shù)據(jù)交互，以及滿足用戶報(bào)告、存檔等需求。導(dǎo)出數(shù)據(jù)可以是excel文件，也可以是根據(jù)需求定義的其他格式。我也遇到過(guò)根據(jù)數(shù)據(jù)生成word報(bào)告的需求，雖然不是通用需求，但是的確幫用戶解決了問(wèn)題。

盡量使用已有樣式

我想說(shuō)的最后一點(diǎn)：2B產(chǎn)品應(yīng)該著眼于業(yè)務(wù)，對(duì)產(chǎn)品的表現(xiàn)層要求其實(shí)不高，為了提升開(kāi)發(fā)效率，我們?cè)谠O(shè)計(jì)產(chǎn)品時(shí)最好盡量采用團(tuán)隊(duì)正在使用的樣式庫(kù)中已有的樣式（常見(jiàn)的elementUI、antDesign組件庫(kù)中的表格組件已經(jīng)很全面了，可以滿足80%的需求），這樣可以大大的縮短開(kāi)發(fā)周期、提高開(kāi)發(fā)效率。

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

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