后臺產品入門:列表頁與添加頁的設計法則

11 評論 33002 瀏覽 233 收藏 10 分鐘

設計后臺產品有句口訣:“展示列表優,編輯彈窗佳,篩選下拉好,組合查詢棒”說的就是后臺產品設計的小技巧。

后臺產品設計是一個產品經理的核心能力,也是比較基本的能力,今天我用一篇文章給大家介紹一下后臺產品列表頁與添加頁的設計規則,將我這段時間在后臺產品設計中的方法和問題分享給你,期待與你在評論區多多交流,一起碰撞出更多的火花。

做后臺能夠鍛煉一個人的邏輯思維,也能更好的幫助你了解公司的業務,做到快速上手。在設計后臺需求之前,你可能會收到來自老板,團隊,業務部門等小伙伴的需求,面對這些需求,我們在后臺設計的處理方式和前端設計基本是一樣的,同樣是遵循一個需求從0-1的設計法則:

關于后臺產品的頁面分類大致有這么幾個,列表頁,添加頁,詳情頁,接下來我就重點給大家介紹一下列表頁和添加頁的設計法則:

一、列表頁

每個后臺都有列表,列表頁在后臺設計中十分常見,在設計列表頁的時候,主要有以下幾個原則:

我們舉個簡單的例子,下圖一張簡單的列表頁

要設計這樣的列表頁,首先搞清楚我們這個列表叫什么,這樣的列表需要在后臺哪一個分類下面展示。

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

假設你已經很清楚流失用戶列表是什么了,也很清楚這部分用戶是電銷部門需要的用戶列表,你把它放在了后臺銷售中心-用戶列表的分類下,那么該看看這個列表的主干部分— —表頭了。

如果表頭由業務部門提供給你,那么你需要一個個和他們對,每一個字段是什么意思,每個字段的數據是如何展示的,這個環節中,你需要確保每一個表頭字段的定義清楚,且無歧義,并且要定義清楚這些字段展示在頁面上的展示形式。

搞清楚了這個列表的表頭,然后你需要一一去看每一個字段,這些字段需不需要篩選,需不需要排序,默認排序是什么,你可以不去創造更多的排序,但需要讓開發知道默認排序和列表的初始狀態,比如,進入列表是空,選擇時間后才展示數據還是進來就按照默認排序展示數據。

關于列表的顯示問題,你要估計一下這個列表的數據量,可能會有多少條,再去想每頁展示多少條;如果列表涉及到導出數據,你需要確定導出數據的時間范圍是左開右閉還是左閉右邊,并做到業務部門和開發對時間范圍導出的認知一致;如果列表涉及到導入數據,那么你要給開發一個導入數據的excel表頭模板,告訴他們哪些數據是導入的,哪些數據是根據導入數據生成的。

此外,頁面的跳轉邏輯也是不能忘記的,后臺產品最重要的在于這些交互邏輯,列表頁如果不是純展示,有操作,你就要明確的告訴開發那些操作跳轉到哪里去,跳轉了需不需要再返回。

二、添加頁

列表頁是這樣,我們再來看一下添加頁,添加頁對一個后臺來說也是十分常見的。

比如下面這個頁面:

這個頁面可以理解為任務體系的一個添加任務的界面,用戶在某個環節觸發了這個任務,系統就會給用戶發放一個福利。

同樣的,添加頁也遵循幾個點:

關于頁面標題,你要先確定這個頁面標題是什么,你可能是從一個列表頁點入這個添加頁,也有可能是一個單獨的添加頁面。

關于添加內容,你需要注釋清楚頁面是添加什么的,比如我這個頁面就是“添加任務”的;添加的內容最好做一下分類,比如上面的“新增任務”頁面就分為“任務基本信息”、“任務條件”、“任務福利三大塊”;有時候我還會在最頂部加一個“任務說明”,主要是給內部人員看的,對內解釋這個頁面的功能以及注意事項,對內對外的內容需要可以區分出來。

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

信息填寫所需要的添加保存、重置、確定、取消、返回等按鈕,需要進行二次確認,避免信息誤填寫造成前臺展示的問題;有時候可以將全局的保存、重置、確定、取消、返回等按鈕在公共模塊頁面中專門列出來,如下圖:

至于詳情頁,其實它和添加頁差不太多,詳情頁面主要起到展示的作用,和列表頁添加頁有一些關聯關系。

以上就是我這篇文章的主要內容。

在文章的最后我提一點,做后臺產品,對于toC公司來說,你面對的用戶往往是公司的同事,很多需求都是他們基于自己的工作提出來的優化建議,而你實際上并不是十分了解各部門同事的業務,這個時候建議小伙伴們可以去其他部門輪崗。

對于產品經理來說,有幾個崗位我覺得還是要輪崗下的,比如客服,比如銷售。輪崗的方式可以讓你換位思考,站在需求方的角度上去思考問題,而不是機械的他們說需要什么我們做什么。

做后臺產品,邏輯思維固然重要,但要想去優化好一個業務同事的工作流程,你需要親自把這個業務流程在心里過好幾遍,或者你去操作好幾遍,再去想如何優化你的產品設計。

這是我在工作中對后臺設計的部分小總結,文章中或許還有些疏忽之處,希望讀此文的小伙伴們在評論區不吝指教,謝謝。

 

小紅帽,互金產品經理,坐標上海,公眾號:遇見產品

本文由 @小紅帽 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 問個問題哈
    我是一個開發
    我們公司的PM在設計后臺訂單列表頁面的時候,要求把用戶的手機號顯示上去,而且要用手機號進行搜索
    這個你怎么看?

    來自廣東 回復
    1. 可能是方便查詢某個用戶吧,就看手機號要不要脫敏顯示

      回復
    2. 常見的需求,應該是合理的

      來自湖北 回復
  2. 關于列表頁:
    我認為還需要考慮的是:優先級的問題。哪些需要展示、哪些不需要,前后的順序。

    關于添加頁:
    1. 添加頁是選擇大模態框還是一個頁面如何選擇
    2. 添加頁的保存是否需要二次確認?
    3. 添加頁的返回,是瀏覽器的返回還是頁面中的返回?

    來自北京 回復
    1. 關于添加頁的幾點結合具體頁面來看,保存這塊疏忽了,不一定二次確認,一直覺得個人的觀點還有些幼稚,大寶想的比我周到些,感謝大寶評論指點

      來自上海 回復
    2. 我每次都很糾結這些點,但是又沒有參考,很多時候都憑自己感覺,哎

      來自四川 回復
    3. 我也正在做這些添加頁面 有時候添加頁面還要跳到別的列表頁面去選擇一條記錄再回去。。。好糾結惆悵 不知道怎么弄好

      來自上海 回復
  3. 小紅帽不錯哦

    來自北京 回復
    1. ?? 一起進步

      來自上海 回復
    2. hello,我是李二

      來自北京 回復
    3. 我最喜歡李二,積極,一直的鼓勵我,有感染力,有主人翁意識,能夠帶動大家,說話一針見血,還有奉獻精神,謝謝你,親愛的李二

      回復