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

經(jīng)過了將近一年的后臺產(chǎn)品經(jīng)歷，踩了很多坑，試了很多錯，也學(xué)習(xí)到了很多東西，目前也形成了自己的一套規(guī)范。本文將其中的部分收獲匯總成文，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

后臺產(chǎn)品有一個很重要、常見的元素，就是表格。表格承擔(dān)著詳情入口、數(shù)據(jù)展示的功能，看似簡單，其實里面的細節(jié)特別多。在以效率為最重要的需求的后臺產(chǎn)品中，如何設(shè)計一個能夠高效率地進行查看和編輯的表格，考驗著每一個后臺產(chǎn)品經(jīng)理的基本功。通過本文的講解，按照本文的規(guī)范來設(shè)計表格，基本上可以做出一個不會出錯的表格。

表格主要承擔(dān)著查看和編輯兩個基礎(chǔ)功能。如何能夠讓用戶方便、高效、舒適地查看數(shù)據(jù)和編輯數(shù)據(jù)，需要設(shè)計很多的輔助功能。下面，我們就圍繞著這兩大功能，就具體的功能點來進行探討。

原型預(yù)覽：http://www.pmgrow.top/sheet/

原型下載：https://pan.baidu.com/s/1eTxGbHg

第一部分：查看

1、行

（1）默認每頁行數(shù)

該行數(shù)太多時，會導(dǎo)致頁面加載速度變慢；行數(shù)太少時，會導(dǎo)致用戶需要不斷翻頁，瀏覽效率降低。默認每頁行數(shù)需要根據(jù)用戶的實際使用場景來確定，穩(wěn)妥的做法是使用20或50。

（2）默認每屏行數(shù)

每一屏能顯示的行數(shù)。該行數(shù)太多時，會導(dǎo)致行高值較小，單行的查看效果差；該行數(shù)太少時，會導(dǎo)致用戶需要不斷滾動頁面，瀏覽效率降低。該行數(shù)和頁面分辨率有關(guān)，需在考慮到主要用戶的使用場景（筆記本還是臺式、屏幕大小、主要分辨率）后進行確定。

（3）每頁行數(shù)多于每屏行數(shù)時的處理方式

大多數(shù)情況下，每頁行數(shù)是多于每屏行數(shù)的。在這樣的場景下，用戶使用的時候會發(fā)現(xiàn)這樣一個問題：向下縱向滾動頁面查看表格內(nèi)容，滾動到頁面中部或底部時，表頭是無法看到的。用戶在看到一個數(shù)據(jù)時，是不能夠直觀地知道這是哪項數(shù)據(jù)，從而需要向上滾動查看表頭。尤其是面對列數(shù)較多的表格時，這樣的場景會經(jīng)常發(fā)生，頁面不斷地上下滾動，查看效率及其低下。

解決這個問題，通常有兩種處理方式：

1. 固定表頭：表頭在滾動到頁面頂部時，始終固定在該位置，用戶能夠方便地看到表頭和數(shù)據(jù)的對應(yīng)關(guān)系。
2. 表格的豎向滾動條：為表格添加豎向滾動條，通過拖動豎向滾動條查看表格內(nèi)容。表頭是不會被拖動影響的。

2、列

（1）列隱藏、排序

表格的列數(shù)較多時，在一屏內(nèi)是無法展示全部列的，用戶需要通過橫向的滾動條來拖動查看不同的列。不同的用戶在不同的場景下，關(guān)注的列是不盡相同的。為了滿足這一需求，我們需要允許用戶對列的自定義：包括哪些列展示出來，哪些列排在前面。用戶可以把自己不關(guān)心的列隱藏，把關(guān)心的列放到最左邊，從而能夠在一進入頁面時就能看到自己最關(guān)心的內(nèi)容。

（2）固定列

至少有一列是不允許用戶對其進行隱藏和排序的。該列通常是表格數(shù)據(jù)的唯一區(qū)別項，如訂單列表的訂單號等。

（3）列寬

列寬需要確定一個合理的默認值，從而使表格內(nèi)容有好的展示效果。不能太窄，大量數(shù)據(jù)會顯示不完整；不能太寬，大量留白會讓瀏覽效率降低。

列寬值的確定一般遵從以下原則：

• 表頭不能換行，列寬應(yīng)至少大于表頭。
• 列內(nèi)容的長度固定時，如手機號（11位數(shù)字）等，列寬應(yīng)大于該固定寬度。
• 列內(nèi)容的長度不固定時，應(yīng)考慮大多數(shù)情況下的長度情況。如個性簽名，我們會允許10~50個字符，但經(jīng)過數(shù)據(jù)分析發(fā)現(xiàn)，大多數(shù)個性簽名的長度是在20以內(nèi)的，我們可以設(shè)定列寬為20，從而保證大多數(shù)情況的完整顯示。
• 在較少情況下，我們設(shè)定的默認列寬沒能滿足數(shù)據(jù)的完整顯示，而該數(shù)據(jù)的完整顯示對于用戶是比較重要的。針對這一情況，我們提供自定義列寬的功能，允許用戶對列寬進行調(diào)整，從而達到自己想要的展示效果。

（4）數(shù)據(jù)截斷

在數(shù)據(jù)長度大于列寬度時，我們需要對數(shù)據(jù)內(nèi)容進行截斷處理。截斷以后，末尾加……鼠標移入時在附近顯示浮層顯示完整內(nèi)容。

浮層的位置：數(shù)據(jù)在縱向上的結(jié)合緊密時，浮層顯示在左右；數(shù)據(jù)在橫向上結(jié)合緊密時，浮層顯示在上下。這樣能夠避免浮層對需要結(jié)合來看的數(shù)據(jù)造成遮擋。

3、分頁

分頁的功能較為簡單，一般滿足這些功能就可以了：上一頁、下一頁、首頁、末頁、快速跳轉(zhuǎn)到某一頁、每頁數(shù)量的調(diào)整（20,50，100,200）

4、排序

（1）初始排序

頁面載入后，數(shù)據(jù)排列的順序，叫做初始排序。初始排序應(yīng)為用戶最關(guān)心的排序。如在時效性較強的列表，默認排序就應(yīng)該是時間降序。金額比較重要的列表，默認排序就應(yīng)該是金額降序。

（2）排序切換規(guī)則

當表格內(nèi)的多列都具有排序功能時，需要考慮排序切換的邏輯。同時只能應(yīng)用一種排序，在應(yīng)用新的排序時，舊排序應(yīng)該失效。

排序需通過單擊進行激活和切換。激活新排序時，默認是升序還是降序，需要根據(jù)用戶的關(guān)注點來確定（一般默認用降序）。新排序激活后，通過單擊切換升降序，排序應(yīng)在“降序升序”中進行循環(huán)切換。

（3）不同字段的升降序邏輯

字段類型通常包括文本、數(shù)值、日期。文本升序以“數(shù)字-特殊符號-a-z-A-Z-漢字-其他字符“來執(zhí)行，數(shù)值則以數(shù)值大小來執(zhí)行，日期以時間值先后執(zhí)行，降序反之則可以。需要注意的，有一些數(shù)值的升降序邏輯是需要特殊處理的，如排名。普通的數(shù)值的降序時大數(shù)在前，小數(shù)在后，但排名的降序應(yīng)是小數(shù)在前，大數(shù)在后。

5、查找

（1）查找范圍

查找值需要匹配的范圍。如一個表格具有訂單號、收件人兩個字段，我們可以設(shè)置查找范圍為這兩個字段。輸入查找值后，可以查找到訂單號或收件人能和查找值匹配的內(nèi)容。

（2）匹配方式

查找值和查找到的內(nèi)容之間的匹配關(guān)系，包括精確、模糊、前綴等。同樣是查girl，精確只會查到girl，模糊可以查到girl friend、pretty gril等，前綴只能查到pretty girl。

（3）排序規(guī)則

當我們使用模糊查找girl時，可能會查找到很多符合的內(nèi)容。如果我們只是想找girl，可能需要翻頁去找到girl。為了解決這個問題，一種方案是允許用戶選擇本次查找是精確還是模糊；另一種方案是用模糊查找后，將完全一樣的結(jié)果放到首行，其余內(nèi)容按原有方式排序。

6、對齊方式

為了使表格內(nèi)容的展示更美觀和高效，我們需要確定表格內(nèi)容的對齊方式。通常使用文本左對齊、數(shù)值右對齊的方式。

7、詳情入口

表格有時候會承擔(dān)詳情入口的作用。表格展示簡要數(shù)據(jù)，通過點擊進入新的頁面查看詳情數(shù)據(jù)。所以，我們需要設(shè)計一個點擊區(qū)域，讓用戶點擊后觸發(fā)進入詳情頁的操作。一般有兩種解決方案：1、以具有區(qū)別性的字段為鏈接（視覺上要有所不同），如訂單號。2、在表格內(nèi)設(shè)置單獨的“查看”入口。前者節(jié)省空間，但存在感弱；后者存在感強，但需要占用單獨空間。我們需要根據(jù)具體場景來確定方案。

8、篩選

表格默認通常展示所有數(shù)據(jù)。當我們只需要查找符合某些條件的內(nèi)容時，就需要使用到篩選了。

篩選通常由多個條件構(gòu)成。

（1）條件

使用【字段】-【比較關(guān)系】-【值】的方式來構(gòu)成。如【訂單金額】【大于】【100】，

【收件人】【是】【張三、李四】等。比較關(guān)系通常包括 是，不是，在，不在，大于，小于，等于，大于等于，小于等于，介于等。

（2）組合篩選

篩選由多個條件構(gòu)成，我們執(zhí)行一個篩選需要添加多個條件。當這個篩選內(nèi)的條件是比較固定，經(jīng)常使用的情況下，每次都重新選擇條件都比較低效了。所以，我們需要提供篩選的保存功能。篩選在配置好后，可以保存下來，下次使用無需重新編輯即可應(yīng)用。篩選保存需要提供命名、重命名、編輯條件的配合功能。

（3）篩選的可見性

篩選以后，需要將使用的條件讓用戶可見。用戶能夠直觀地在篩選條件和篩選后的內(nèi)容之間形成對應(yīng)關(guān)系。當然，篩選條件較多時，會占用比較大的頁面空間，我們也應(yīng)該提供隱藏篩選的功能。

第二部分：操作

1、單項操作

對單項的操作，如刪除、啟動、暫停等。這些操作應(yīng)放置在最表格右側(cè)，為固定列。如果操作比較多時，需將多余的操作折疊為‘更多’，表面上只保留1到2個常用操作。

2、編輯

在瀏覽表格內(nèi)容時，有些數(shù)據(jù)我們在查看以后是需要進行編輯的。此時，我們需要提供給用戶快捷的編輯方式。如果需要編輯的項較少時，我們可以在鼠標移入編輯項時顯示編輯樣式，單擊編輯項時

進入編輯狀態(tài)，直接修改保存即可。當需要編輯的項較多時，可以在操作欄放置編輯。點擊編輯，使所有編輯項進入編輯狀態(tài)。修改后，點擊保存，統(tǒng)一保存。值得注意的一點是，最好能夠響應(yīng)鍵盤操作，鍵盤的enter能夠觸發(fā)保存操作。

3、勾選

（1）全選

全選選中后，可以對全部項目進行批量選中。但在多頁的情況下，全選通常有兩種需求：選中當前頁和選中全部。我們應(yīng)提供給用戶選擇，可以分別實現(xiàn)這兩種選擇。

（2）跨頁選擇

有些時候，我們需要勾選的項目在不同頁。在第一頁勾選幾項后，翻頁再去勾選其他項時，往往無法快速獲知已選項的情況。所以，我們在跨頁勾選時，在切換到其他頁面時，需要在表格頂部顯示已選項的情況，允許刪除其中某一項和清空所有。

（3）勾選狀態(tài)的保持

在一些場景下，我們需要對同一批勾選項進行多個操作。所以，勾選完成后，執(zhí)行第一個操作以后，我們需要保持勾選狀態(tài)，以便執(zhí)行接下來的操作。

4、按鈕

在表格頂部放置按鈕，執(zhí)行常用操作，一般優(yōu)先放在左側(cè)（勾選以后進行操作的鼠標移動路徑短）。如果按鈕較多，需要根據(jù)按鈕類型，將具有相同功能的按鈕折疊組合。有一些按鈕是配合著勾選進行批量操作的，當沒有勾選項時，需要禁用該按鈕。

5、導(dǎo)出數(shù)據(jù)

表格通常用來展示數(shù)據(jù)，用戶往往會有將數(shù)據(jù)導(dǎo)出的需求。導(dǎo)出數(shù)據(jù)的功能設(shè)計時，我們需要考慮這些。

（1）文件格式

通常使用xlsx。該格式展示效果好，兼容性好，便于后期處理。但當數(shù)量量較大的情況下，基于導(dǎo)出速度的考慮，可以使用csv格式。

（2）文件名

文件名要能夠表達數(shù)據(jù)內(nèi)容，通常使用【頁面】【表名】【時間】等字段來確定表名。

（3）模板

導(dǎo)出的文件的模板。通常情況下，我們導(dǎo)出全部列的數(shù)據(jù)，縱使頁面上展示的是部分列的數(shù)據(jù)。部分情況下，我們需要對模板進行一些樣式上的處理，以達到美觀的效果。

（4）導(dǎo)出耗時

導(dǎo)出數(shù)據(jù)的過程是先生成該數(shù)據(jù)，然后在下載該數(shù)據(jù)。當導(dǎo)出的數(shù)據(jù)量較大的情況下，生成數(shù)據(jù)耗時較長，我們需要考慮導(dǎo)出耗時。一種簡單的設(shè)計方法是，點擊導(dǎo)出數(shù)據(jù)后，變?yōu)閷?dǎo)出中，以告知用戶數(shù)據(jù)正在導(dǎo)出。

結(jié)語

確定規(guī)范的意義，在于能夠減少協(xié)作中的溝通成本。當產(chǎn)品、UI、前端都對同一套規(guī)范達成共識時，開發(fā)效率會成倍的提高。產(chǎn)品在原型圖中無需添加常規(guī)的交互操作，也不用考慮前端的可實現(xiàn)性。UI和開發(fā)在看到你的原型圖時，能迅速地根據(jù)之前的規(guī)范，明白你想表達的意思。這樣，產(chǎn)品的精力就能更多地放在需求上。

在學(xué)習(xí)的過程中，大量參考了螞蟻設(shè)計。推薦大家可以去了解一下。

本文有大量內(nèi)容是從交互設(shè)計角度說明的。由于我之前是一直專注于需求，對于交互上的知識不是很充分，結(jié)果導(dǎo)致開發(fā)出來的產(chǎn)品的交互體驗太差。所以自己去主動學(xué)習(xí)了相關(guān)的內(nèi)容。對于中后臺產(chǎn)品經(jīng)理，尤其是團隊內(nèi)的開發(fā)資源不是很足夠的情況下，引入一套規(guī)范來實現(xiàn)自家產(chǎn)品的標準化，是很有作用的。如果你的團隊已經(jīng)有成型的規(guī)范，請對本文中的內(nèi)容適當采用。產(chǎn)品經(jīng)理的主要精力還是應(yīng)該放在需求上。

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

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