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

編輯導(dǎo)語(yǔ)：不管是什么系統(tǒng)，都會(huì)有關(guān)于后臺(tái)的設(shè)計(jì)，后臺(tái)的業(yè)務(wù)比較復(fù)雜，數(shù)據(jù)也比較龐大；但是一個(gè)好的后臺(tái)設(shè)計(jì)可以方便使用，提高效率，特別是教育方面的課程系統(tǒng)；本文作者分享了關(guān)于后臺(tái)系統(tǒng)列表設(shè)計(jì)。

在后臺(tái)系統(tǒng)中，經(jīng)常有對(duì)某類(lèi)數(shù)據(jù)進(jìn)行查看、批量操作的需求，如：對(duì)還未上架的課程進(jìn)行審核、審核通過(guò)后進(jìn)行批量上架操作。

假設(shè)王老師要審核語(yǔ)文學(xué)科的課程，審核時(shí)會(huì)關(guān)注課程的名稱(chēng)、年份、學(xué)期、課程類(lèi)型、版本、難度是否是正確的；若正確，則進(jìn)行上架操作。

如果數(shù)據(jù)分散，且沒(méi)有批量操作的功能，那么試想一下王老師會(huì)如何操作呢？

• 找到語(yǔ)文學(xué)科的課程；
• 找到需要審核的信息；
• 進(jìn)行上架操作；
• 找到下一條數(shù)據(jù)，繼續(xù)以上操作；

如果操作一個(gè)課程，需要 1 分鐘，那么操作 30 節(jié)課，就需要 30 分鐘。

如果你是王老師，你可能就要瘋掉了，那如何通過(guò)產(chǎn)品方式提高王老師效率呢？

王老師問(wèn)題的本質(zhì)，是缺少批量上架的功能，而批量上架的前提，是將所有數(shù)據(jù)按照一定規(guī)則以列表形式有序地展示出來(lái)。

因此，列表的使用可以一定程度上提高工作效率。

在后臺(tái)系統(tǒng)中，最常見(jiàn)的數(shù)據(jù)展示方式就是列表，那如何設(shè)計(jì)一個(gè)后臺(tái)系統(tǒng)的列表呢？

列表通常有三大部分：數(shù)據(jù)查詢(xún)、批量操作、數(shù)據(jù)展示。

一、數(shù)據(jù)查詢(xún)

在后臺(tái)系統(tǒng)中，用戶(hù)會(huì)希望高效地查找到某條或某類(lèi)數(shù)據(jù)，如上述王老師審核課程，就需要高效定位到語(yǔ)文學(xué)科的課程；列表中的數(shù)據(jù)查詢(xún)功能就解決了用戶(hù)定向查找某類(lèi)數(shù)據(jù)效率低的問(wèn)題。

列表中的數(shù)據(jù)查詢(xún)一般通過(guò)搜索框、篩選項(xiàng)等實(shí)現(xiàn)。

1. 搜索框

搜索框解決了用戶(hù)定向查找某條數(shù)據(jù)的需求，比如王老師要找到2020年秋季三年級(jí)小A老師語(yǔ)文尖子班，那最快捷的方法就是能直接搜索該課程，出現(xiàn)目標(biāo)結(jié)果。

搜索框一般是輸入具體字段，點(diǎn)擊搜索或回車(chē)后，直接定位到某個(gè)/某類(lèi)數(shù)據(jù)。

搜索的規(guī)則有兩種：精準(zhǔn)搜索和模糊搜索——精準(zhǔn)搜索是根據(jù)輸入的條件，精準(zhǔn)地搜索到某條完全匹配的數(shù)據(jù)；模糊搜索則是指查詢(xún)到所有包含輸入條件的數(shù)據(jù)。

如電商后臺(tái)系統(tǒng)中的搜索框、輸入商品編號(hào)、查到某件商品；老師后臺(tái)系統(tǒng)中的搜索框、輸入學(xué)員姓名、查到某位學(xué)員等。

如下圖是微信公眾號(hào)的后臺(tái)系統(tǒng)——用戶(hù)管理模塊，搜索框支持搜索用戶(hù)昵稱(chēng)，以快速定位到某位用戶(hù)。

試想沒(méi)有定向搜索的功能的話(huà)，要找到一條數(shù)據(jù)，只能通過(guò)對(duì)每一條進(jìn)行翻找，如果列表中有50條數(shù)據(jù)，一條條數(shù)據(jù)進(jìn)行查看的話(huà)，要找到某條數(shù)據(jù)可能要花30秒的時(shí)間；而通過(guò)定向搜索只需要3秒時(shí)間。

（示例來(lái)自：微信公眾平臺(tái)）

2. 篩選項(xiàng)

篩選項(xiàng)是通過(guò)系統(tǒng)已有的搜索條件快速搜索某類(lèi)符合該條件結(jié)果的功能，如淘寶網(wǎng)首頁(yè)的導(dǎo)航欄，就是一個(gè)個(gè)篩選項(xiàng)。

篩選項(xiàng)解決了用戶(hù)查找某類(lèi)有共同特性數(shù)據(jù)的需求，比如王老師要查找三年級(jí)語(yǔ)文周六 9:00 ~ 11:00 的課，那么就可以通過(guò)篩選項(xiàng)，分別選出以上條件；點(diǎn)擊搜索，直接搜索出三年級(jí)語(yǔ)文周六上午 9:00 ~ 11:00 所有的課程。

篩選項(xiàng)分為單級(jí)篩選、級(jí)聯(lián)篩選、日期/時(shí)間選擇器等。

• 單級(jí)篩選：即只有一層篩選項(xiàng)，如篩選學(xué)科，篩選項(xiàng)包括：語(yǔ)文、數(shù)學(xué)、英語(yǔ)，均為同一層級(jí)的篩選項(xiàng)；
• 級(jí)聯(lián)篩選：篩選項(xiàng)層級(jí)較多時(shí)使用，如篩選學(xué)科的知識(shí)點(diǎn)，那么篩選項(xiàng)就有兩層：第一層級(jí)為學(xué)科，第二層級(jí)為學(xué)科對(duì)應(yīng)的知識(shí)點(diǎn)；
• 日期/時(shí)間選擇器：即篩選一段日期/時(shí)間，解決用戶(hù)查找一段日期/時(shí)間內(nèi)數(shù)據(jù)的需求；

如下圖，分別是三種篩選類(lèi)型的示例：

（示例來(lái)自：Ant Design Vue）

了解了三種類(lèi)型的篩選形式之后，我們還需要知道，每個(gè)篩選項(xiàng)的篩選方式又會(huì)分為：?jiǎn)芜x、多選。

單選：給定固定幾個(gè)篩選條件，用戶(hù)一次只能選擇一個(gè)篩選條件；單選條件下，篩選結(jié)果符合該篩選條件，即可被篩選出來(lái)。

多選：用戶(hù)可以選中多個(gè)篩選條件，用戶(hù)選中多個(gè)篩選項(xiàng)后的篩選邏輯也需要根據(jù)實(shí)際場(chǎng)景進(jìn)行設(shè)計(jì)，如：用戶(hù)選中多個(gè)篩選項(xiàng)后，篩選結(jié)果是包含所選選項(xiàng)，還是說(shuō)必須命中所選全部選項(xiàng)才可被篩選出來(lái)，需要提前進(jìn)行設(shè)計(jì)和思考。

綜合來(lái)講，通過(guò)定向搜索，以及篩選項(xiàng)，來(lái)滿(mǎn)足用戶(hù)快速且定向地查詢(xún)某個(gè)/某類(lèi)數(shù)據(jù)的需求。

二、批量操作

用戶(hù)在系統(tǒng)中進(jìn)行數(shù)據(jù)查詢(xún)后的目的之一是對(duì)數(shù)據(jù)進(jìn)行操作，如上文中的王老師在查到某類(lèi)課程后，要對(duì)課程進(jìn)行上架的操作，對(duì)同類(lèi)的數(shù)據(jù)進(jìn)行相同的操作是B端用戶(hù)的工作場(chǎng)景之一；那么批量操作的功能則可以在此場(chǎng)景下提高用戶(hù)的工作效率。

批量操作的功能一般包含兩部分：多選功能、操作功能。

1. 多選

用戶(hù)通過(guò)查詢(xún)功能篩選出符合某些規(guī)則的目標(biāo)數(shù)據(jù)后，若要對(duì)這些數(shù)據(jù)進(jìn)行操作，首先需要選中這些數(shù)據(jù)，即告訴程序——我要對(duì)這些數(shù)據(jù)進(jìn)行相應(yīng)操作。

那么多選功能，能夠提高用戶(hù)進(jìn)行選擇的效率，一鍵/多次點(diǎn)擊，即可選中一批數(shù)據(jù)。

如下圖，選擇列可以對(duì)數(shù)據(jù)進(jìn)行全選、也可以只選擇幾條數(shù)據(jù)；

（示例來(lái)自：Ant Design Vue）

2. 操作功能

幫助完成用戶(hù)的最終需求的是操作功能，即用戶(hù)要做什么，需要通過(guò)操作功能來(lái)實(shí)現(xiàn)訴求，如：課程上架/下架、用戶(hù)刪除、微信公眾號(hào)后臺(tái)的打標(biāo)簽和加入黑名單等。

如下圖所示，選中一條數(shù)據(jù)后，打標(biāo)簽和加入黑名單的按鈕才可點(diǎn)擊，對(duì)數(shù)據(jù)進(jìn)行相應(yīng)操作。

（示例來(lái)自：微信公眾平臺(tái)）

三、數(shù)據(jù)展示

后臺(tái)系統(tǒng)的列表中，數(shù)據(jù)的展示是整個(gè)列表頁(yè)的主體內(nèi)容，用來(lái)展示用戶(hù)所需的數(shù)據(jù)信息。

如王老師通過(guò)數(shù)據(jù)查詢(xún)得到了符合要求的語(yǔ)文學(xué)科的課程后，要對(duì)查到的每個(gè)課程進(jìn)行審核，驗(yàn)證每個(gè)課程的信息是否準(zhǔn)確；因此，列表形式的數(shù)據(jù)展示可以提高用戶(hù)查看數(shù)據(jù)的效率。

列表在我們實(shí)際生活中也經(jīng)常用到，如高中畢業(yè)后班里同學(xué)的通訊錄、高中時(shí)同學(xué)們的成績(jī)單等，這些都是以列表形式進(jìn)行的數(shù)據(jù)展示。

列表中包含：表頭、數(shù)據(jù)、分頁(yè)器等，如下圖，是列表的示例圖：

（示例來(lái)自：Ant Design Vue）

1. 表頭

表頭一般包含三部分信息：標(biāo)題、注釋說(shuō)明、排序功能。

標(biāo)題：標(biāo)題用來(lái)說(shuō)明這一列數(shù)據(jù)是什么，能提供什么信息。

標(biāo)題需滿(mǎn)足一個(gè)條件，即用最簡(jiǎn)潔的語(yǔ)言說(shuō)清楚這列數(shù)據(jù)是什么，可用來(lái)做什么；標(biāo)題的字?jǐn)?shù)以“不能刪減任何一個(gè)字”為原則。

如下圖第3列，展示的是學(xué)生購(gòu)買(mǎi)的下個(gè)季度的長(zhǎng)期課的課程，那么“下季長(zhǎng)期課”就是最簡(jiǎn)潔且一個(gè)字也不能少的表達(dá)方式了。

注釋?zhuān)鹤⑨屖菍?duì)標(biāo)題或者此列數(shù)據(jù)的解釋說(shuō)明。

注釋可以在標(biāo)題的左右一側(cè)，一般用嘆號(hào)或問(wèn)號(hào)來(lái)代表，鼠標(biāo)浮上去，出現(xiàn)浮窗，展示對(duì)該數(shù)據(jù)列的字段的解釋說(shuō)明。

解釋說(shuō)明的編寫(xiě)原則為“是什么，能做什么”，同時(shí)也遵循標(biāo)題簡(jiǎn)潔的原則。

目的是：用戶(hù)看到之后能清楚地知道是什么，用戶(hù)能用來(lái)做什么；比如，對(duì)下季長(zhǎng)期課的解釋為“學(xué)生下個(gè)季度報(bào)名的長(zhǎng)期課的科目；實(shí)時(shí)更新；可用于轉(zhuǎn)化溝通?！?/p>

但不是所有的數(shù)據(jù)都需要注釋?zhuān)裁辞闆r需要注釋呢？

如果是一項(xiàng)基礎(chǔ)屬性的數(shù)據(jù)，所有人對(duì)此理解一致，且不會(huì)產(chǎn)生疑問(wèn)或異議，那不需要注釋?zhuān)蝗纾盒彰?、序?hào)、性別、家庭地址等；如果數(shù)據(jù)是一個(gè)看到后會(huì)產(chǎn)生疑問(wèn)的字段，或者是通過(guò)一些復(fù)雜的計(jì)算得來(lái)的，那么最好在表頭增加注釋?zhuān)瑴p少用戶(hù)學(xué)習(xí)成本。

排序功能：列表中的數(shù)據(jù)，會(huì)按照固定的默認(rèn)排序進(jìn)行排列，但當(dāng)用戶(hù)想要按其他排序進(jìn)行排列時(shí)，如按照數(shù)據(jù)大小排列，那么就需要通過(guò)排序功能進(jìn)行操作；而我們需要提前設(shè)定好排序的邏輯，如點(diǎn)擊排序按照從小到大順序排列，若數(shù)據(jù)相同，則按照id從小到大排列；再次點(diǎn)擊則按從大到小排列；再次點(diǎn)擊則回歸原始排列。

2. 數(shù)據(jù)

列表中的數(shù)據(jù)分為行、列，每行數(shù)據(jù)以第一列數(shù)據(jù)為主體，每列數(shù)據(jù)是一個(gè)數(shù)據(jù)分類(lèi)；而標(biāo)題則就是數(shù)據(jù)分類(lèi)的名稱(chēng)，直接了當(dāng)告訴用戶(hù)這列數(shù)據(jù)是什么；比如：高中成績(jī)單，一行是一個(gè)同學(xué)的所有成績(jī)，一列則是一個(gè)學(xué)科的成績(jī)。

列表的所有數(shù)據(jù)，來(lái)自于詳情頁(yè)，那么在列表中，應(yīng)該展示數(shù)據(jù)主體的哪些數(shù)據(jù)呢？在列表中應(yīng)該按照什么優(yōu)先級(jí)進(jìn)行排列呢？這些也需要我們提前結(jié)合使用場(chǎng)景及數(shù)據(jù)的重要程度進(jìn)行提前設(shè)計(jì)。

還是我們開(kāi)頭提到的 “王老師上架課程” 的場(chǎng)景，王老師在列表中關(guān)注哪些數(shù)據(jù)呢？

• 課程主體信息：課程id、課程名稱(chēng)，這兩個(gè)信息用來(lái)定位是哪個(gè)課；
• 課程基本屬性：主講老師、上課時(shí)間、學(xué)年學(xué)期等；
• 課程的狀態(tài)：是否上架。

通過(guò)分析，我們基本能夠判斷出需要展示哪些數(shù)據(jù)，以及數(shù)據(jù)的優(yōu)先級(jí)是什么。

在列表中也會(huì)有針對(duì)當(dāng)條數(shù)據(jù)的操作，如刪除、編輯等；所以在列表中，一般最后一列是操作列，可懸浮設(shè)計(jì)，在操作列增加對(duì)此條數(shù)據(jù)的各種操作功能。

3. 分頁(yè)器

如果列表數(shù)據(jù)過(guò)多，基于接口性能的考慮，一般會(huì)采用分頁(yè)的形式展示，而不是一次性展示所有的數(shù)據(jù)；分頁(yè)時(shí)，要提前規(guī)定好一頁(yè)展示多少條數(shù)據(jù)，序號(hào)的展示規(guī)則，上下翻頁(yè)以及快速調(diào)轉(zhuǎn)等。

四、總結(jié)

列表是后臺(tái)系統(tǒng)中最為常見(jiàn)的一種數(shù)據(jù)展示形式，通過(guò)對(duì)列表的使用，能夠避免用戶(hù)在一些重復(fù)勞動(dòng)上的時(shí)間浪費(fèi)，提高用戶(hù)的工作效率。

凱麗，在線(xiàn)教育后臺(tái)產(chǎn)品經(jīng)理，公眾號(hào)：凱麗的思考。

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

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