設(shè)計(jì)后臺(tái)產(chǎn)品有句口訣：“展示列表優(yōu)，編輯彈窗佳，篩選下拉好，組合查詢棒”說(shuō)的就是后臺(tái)產(chǎn)品設(shè)計(jì)的小技巧。

后臺(tái)產(chǎn)品設(shè)計(jì)是一個(gè)產(chǎn)品經(jīng)理的核心能力，也是比較基本的能力，今天我用一篇文章給大家介紹一下后臺(tái)產(chǎn)品列表頁(yè)與添加頁(yè)的設(shè)計(jì)規(guī)則，將我這段時(shí)間在后臺(tái)產(chǎn)品設(shè)計(jì)中的方法和問(wèn)題分享給你，期待與你在評(píng)論區(qū)多多交流，一起碰撞出更多的火花。

做后臺(tái)能夠鍛煉一個(gè)人的邏輯思維，也能更好的幫助你了解公司的業(yè)務(wù)，做到快速上手。在設(shè)計(jì)后臺(tái)需求之前，你可能會(huì)收到來(lái)自老板，團(tuán)隊(duì)，業(yè)務(wù)部門等小伙伴的需求，面對(duì)這些需求，我們?cè)诤笈_(tái)設(shè)計(jì)的處理方式和前端設(shè)計(jì)基本是一樣的，同樣是遵循一個(gè)需求從0-1的設(shè)計(jì)法則：

關(guān)于后臺(tái)產(chǎn)品的頁(yè)面分類大致有這么幾個(gè)，列表頁(yè)，添加頁(yè)，詳情頁(yè)，接下來(lái)我就重點(diǎn)給大家介紹一下列表頁(yè)和添加頁(yè)的設(shè)計(jì)法則：

一、列表頁(yè)

每個(gè)后臺(tái)都有列表，列表頁(yè)在后臺(tái)設(shè)計(jì)中十分常見(jiàn)，在設(shè)計(jì)列表頁(yè)的時(shí)候，主要有以下幾個(gè)原則：

我們舉個(gè)簡(jiǎn)單的例子，下圖一張簡(jiǎn)單的列表頁(yè)

要設(shè)計(jì)這樣的列表頁(yè)，首先搞清楚我們這個(gè)列表叫什么，這樣的列表需要在后臺(tái)哪一個(gè)分類下面展示。

比如我們這個(gè)列表叫“流失用戶列表”，那么你先要搞清楚什么樣的用戶被稱之為流失用戶，如果流失用戶在不同的時(shí)間段的定義不同，那你還要明確流失用戶這個(gè)定義是寫(xiě)死的還是后臺(tái)配置的。在做CRM系統(tǒng)時(shí)，由于我們的流失用戶在不同的時(shí)間段定義不同，于是后臺(tái)就有了專門的流失用戶配置以及配置記錄列表。

假設(shè)你已經(jīng)很清楚流失用戶列表是什么了，也很清楚這部分用戶是電銷部門需要的用戶列表，你把它放在了后臺(tái)銷售中心-用戶列表的分類下，那么該看看這個(gè)列表的主干部分— —表頭了。

如果表頭由業(yè)務(wù)部門提供給你，那么你需要一個(gè)個(gè)和他們對(duì)，每一個(gè)字段是什么意思，每個(gè)字段的數(shù)據(jù)是如何展示的，這個(gè)環(huán)節(jié)中，你需要確保每一個(gè)表頭字段的定義清楚，且無(wú)歧義，并且要定義清楚這些字段展示在頁(yè)面上的展示形式。

搞清楚了這個(gè)列表的表頭，然后你需要一一去看每一個(gè)字段，這些字段需不需要篩選，需不需要排序，默認(rèn)排序是什么，你可以不去創(chuàng)造更多的排序，但需要讓開(kāi)發(fā)知道默認(rèn)排序和列表的初始狀態(tài)，比如，進(jìn)入列表是空，選擇時(shí)間后才展示數(shù)據(jù)還是進(jìn)來(lái)就按照默認(rèn)排序展示數(shù)據(jù)。

關(guān)于列表的顯示問(wèn)題，你要估計(jì)一下這個(gè)列表的數(shù)據(jù)量，可能會(huì)有多少條，再去想每頁(yè)展示多少條；如果列表涉及到導(dǎo)出數(shù)據(jù)，你需要確定導(dǎo)出數(shù)據(jù)的時(shí)間范圍是左開(kāi)右閉還是左閉右邊，并做到業(yè)務(wù)部門和開(kāi)發(fā)對(duì)時(shí)間范圍導(dǎo)出的認(rèn)知一致；如果列表涉及到導(dǎo)入數(shù)據(jù)，那么你要給開(kāi)發(fā)一個(gè)導(dǎo)入數(shù)據(jù)的excel表頭模板，告訴他們哪些數(shù)據(jù)是導(dǎo)入的，哪些數(shù)據(jù)是根據(jù)導(dǎo)入數(shù)據(jù)生成的。

此外，頁(yè)面的跳轉(zhuǎn)邏輯也是不能忘記的，后臺(tái)產(chǎn)品最重要的在于這些交互邏輯，列表頁(yè)如果不是純展示，有操作，你就要明確的告訴開(kāi)發(fā)那些操作跳轉(zhuǎn)到哪里去，跳轉(zhuǎn)了需不需要再返回。

二、添加頁(yè)

列表頁(yè)是這樣，我們?cè)賮?lái)看一下添加頁(yè)，添加頁(yè)對(duì)一個(gè)后臺(tái)來(lái)說(shuō)也是十分常見(jiàn)的。

比如下面這個(gè)頁(yè)面：

這個(gè)頁(yè)面可以理解為任務(wù)體系的一個(gè)添加任務(wù)的界面，用戶在某個(gè)環(huán)節(jié)觸發(fā)了這個(gè)任務(wù)，系統(tǒng)就會(huì)給用戶發(fā)放一個(gè)福利。

同樣的，添加頁(yè)也遵循幾個(gè)點(diǎn)：

關(guān)于頁(yè)面標(biāo)題，你要先確定這個(gè)頁(yè)面標(biāo)題是什么，你可能是從一個(gè)列表頁(yè)點(diǎn)入這個(gè)添加頁(yè)，也有可能是一個(gè)單獨(dú)的添加頁(yè)面。

關(guān)于添加內(nèi)容，你需要注釋清楚頁(yè)面是添加什么的，比如我這個(gè)頁(yè)面就是“添加任務(wù)”的；添加的內(nèi)容最好做一下分類，比如上面的“新增任務(wù)”頁(yè)面就分為“任務(wù)基本信息”、“任務(wù)條件”、“任務(wù)福利三大塊”；有時(shí)候我還會(huì)在最頂部加一個(gè)“任務(wù)說(shuō)明”，主要是給內(nèi)部人員看的，對(duì)內(nèi)解釋這個(gè)頁(yè)面的功能以及注意事項(xiàng)，對(duì)內(nèi)對(duì)外的內(nèi)容需要可以區(qū)分出來(lái)。

你還要定義清楚添加頁(yè)內(nèi)容的字段，和列表頁(yè)一樣的是，添加頁(yè)也有很多字段，只是這些都需要一個(gè)個(gè)填寫(xiě)，有了填寫(xiě)，就要有一些解釋說(shuō)明，比如上圖中“選擇福利”，就在選擇福利的框內(nèi)給了操作的解釋說(shuō)明；此外，每一個(gè)字段是否必填，也要明確清楚，如果不填寫(xiě)需要給出錯(cuò)誤提示。

信息填寫(xiě)所需要的添加保存、重置、確定、取消、返回等按鈕，需要進(jìn)行二次確認(rèn)，避免信息誤填寫(xiě)造成前臺(tái)展示的問(wèn)題；有時(shí)候可以將全局的保存、重置、確定、取消、返回等按鈕在公共模塊頁(yè)面中專門列出來(lái)，如下圖：

至于詳情頁(yè)，其實(shí)它和添加頁(yè)差不太多，詳情頁(yè)面主要起到展示的作用，和列表頁(yè)添加頁(yè)有一些關(guān)聯(lián)關(guān)系。

以上就是我這篇文章的主要內(nèi)容。

在文章的最后我提一點(diǎn)，做后臺(tái)產(chǎn)品，對(duì)于toC公司來(lái)說(shuō)，你面對(duì)的用戶往往是公司的同事，很多需求都是他們基于自己的工作提出來(lái)的優(yōu)化建議，而你實(shí)際上并不是十分了解各部門同事的業(yè)務(wù)，這個(gè)時(shí)候建議小伙伴們可以去其他部門輪崗。

對(duì)于產(chǎn)品經(jīng)理來(lái)說(shuō)，有幾個(gè)崗位我覺(jué)得還是要輪崗下的，比如客服，比如銷售。輪崗的方式可以讓你換位思考，站在需求方的角度上去思考問(wèn)題，而不是機(jī)械的他們說(shuō)需要什么我們做什么。

做后臺(tái)產(chǎn)品，邏輯思維固然重要，但要想去優(yōu)化好一個(gè)業(yè)務(wù)同事的工作流程，你需要親自把這個(gè)業(yè)務(wù)流程在心里過(guò)好幾遍，或者你去操作好幾遍，再去想如何優(yōu)化你的產(chǎn)品設(shè)計(jì)。

這是我在工作中對(duì)后臺(tái)設(shè)計(jì)的部分小總結(jié)，文章中或許還有些疏忽之處，希望讀此文的小伙伴們?cè)谠u(píng)論區(qū)不吝指教，謝謝。

小紅帽，互金產(chǎn)品經(jīng)理，坐標(biāo)上海，公眾號(hào)：遇見(jiàn)產(chǎn)品

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

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議