后臺產品設計系列:原型設計五大要點(四)

16 評論 38706 瀏覽 319 收藏 15 分鐘

原型對于產品經理來說是一門必修課,本篇文章作者總結了后臺原型設計五大要點,主要針對剛入行后臺設計經驗不太豐富的同學。

對于很多初次設計后臺的產品經理而言,原型是個很大的問題,因為平時接觸的少,競品又難以獲取,連個抄的地方都沒有,所以即使胸中需求千千萬,也不知道怎么表現。

在此,筆者針對后臺設計經驗不太豐富的同學,總結了后臺原型設計五大要點,與大家分享。

原型是表現產品經理想法的重要工具,當我們調研清楚需求和流程后,需要原型幫助我們整理思路,用具象化的方式與需求提出方、開發人員、測試人員溝通。

無論公司是否有專業的交互設計師,對于產品經理而言,這都是一項必備的基本功。

但是,它只是一個表現手段,無論你是用Axure還是墨刀,甚至手繪,通過原型整理你的思路,然后表達清楚才是重點,切莫本末倒置,把時間精力過多的花在所謂的高保真和花里胡哨的動效上,最后需求評審的時候一頓亂秀猛如虎,一看邏輯二百五。

產品經理更重要的是:思考清楚每個需求的用戶、場景及其合理性;反復核對流程是否有問題;每個字段的來源及用途是否清晰;細節是否完善。

一、頁面常見布局

后臺相比于前端,更側重功能與邏輯,在頁面布局上,都大同小異,整體來講,分為logo、頂部導航、個人中心、側面導航、內容區五個部分。

1. logo

放置企業logo,可以作為回到首頁的快速入口。如果我們設計的是一個To B的SaaS產品,為了滿足付費企業的個性化需求,這里需要靈活配置,以放置客戶的企業logo;

2. 頂部導航和側面導航:

頂部導航與側面導航可共存也可獨立。

當產品層級大于等于三級時,可采用頂部導航+側面導航,頂部導航做一二級,側面導航做三級及以上;但當產品層級超過三級時,說明產品復雜度很高,對用戶會造成很大的學習和記憶負擔,需要簡化并重新設計產品層級;當產品層級僅為一兩級時,即可使用單獨使用頂部導航或側面導航。

需要注意的是,兩種導航共存時,我們一般把頂部導航作為更高級別,當單獨使用一種導航時,我們又更多的使用側面導航,這主要是因為人的閱讀習慣和更好的拓展性。

3. 個人中心:

相較于前端產品,后臺產品的個人中心要簡單很多,主要用于賬號退出和切換,在個人中心入口旁邊,可以作為很多全局性功能的入口,如:搜索、消息中心等。

4. 內容區

正文內容區域,是我們信息展示和操作的主要區域。

二、首頁設計

在后臺產品中,首頁是一個非常重要的功能,但在很多產品中又容易把它忽略,尤其是內部使用的后臺,可能根本不會做這個功能,但實際上,一個好的首頁,能極大的提升產品的使用體驗和工作效率。

將首頁上的功能以面向用戶為維度劃分,可以分為面向全部用戶的功能和面向單個用戶的功能。

1. 面向全部用戶功能

面向全部用戶的功能在原型上主要體現為數據監控、資訊信息、其他功能入口三種。

數據監控:

在首頁上,根據產品性質不同,需要顯示整體、關鍵性數據及相關走勢。

例如:統計產品總用戶數、總銷售額、日活、月活、轉化率以及對應數據的同比、環比等。目的是讓產品所有相關人對產品現狀及發展情況有一個直觀的認識。

資訊信息:

這個功能在SaaS產品中使用較多,會把當下與產品相關的資訊、動態等信息以文章鏈接的形式推送顯示出來。

對于公司內部使用后臺,一般不會做這個功能,但當有全局消息通知的需求時,可采用頂部跑馬燈的形式告知。

其他功能入口:

這個功能的設計有兩種應用場景:

  1. 一是應用于一個大系統包含多個小系統時。在系列的第二篇文章中,筆者介紹過當一個系統過大時,需要采用領域設計的方式將一個大型系統分拆為多個小系統,當分拆的小系統功能也很多時,可以獨立成一個新的子產品,然后在這個大的系統的首頁給一個功能入口,這樣新的產品就可以采用新的交互和UI,而無需與父產品保持完全統一;
  2. 另外一種應用場景是我們的產品需要包含已有的某個系統同時不對包含系統做改動時。例如我們要做一個新的電商管理后臺,而前面因為業務優先級已經開發了一套商品庫存管理系統,暫時又不想對這套系統進行改動,這個時候就可以在新的電商管理后臺的首頁加一個商品庫存管理系統的入口,既方便操作,也體現了兩個產品的包含關系;

2. 面向單個用戶功能

主要包括該用戶的待辦事項、流程進度等。

待辦事項:

將用戶在系統中所需處理的事項快速展現出來,能極大的提高工作效率。

事項列表增加排序、分組、篩選這些附加功能,能幫助用戶更方便的找到自己想要的;對于一些可快速操作的事項,如審批等,可以直接在列表中加上操作按鈕,就不用再次點擊到對應模塊去操作了。

流程進度:

在首頁展現的流程進度主要是這個用戶發起的流程,其他關聯性不那么強的流程則放在其他模塊

三、列表及表單頁設計

1. 列表頁設計

列表頁是后臺最為常見的頁面形式之一,用于分條展現同類數據。它包括表格列表、卡片列表兩種。

表格列表:

表格列表其實是一個后臺頁面上的Excel表格,除簡單的羅列一些字段外,可以做一些更為豐富的排序、橫向進度條拖動、隱藏等功能,以應對表格數據過多的情況。

操作方面,不同的功能需要進行單個操作或批量操作,例如存在批量刪除列表中數據情況,需要在表格數據前加上復選框和全選按鈕。

卡片列表:

卡片列表主要應用于列表字段少、字段內容固定、視覺樣式要求高的場景,例如教育產品中的課程列表。

卡片列表最大的優勢在于利用圖片或短視頻讓頁面美觀豐富,不至于像其他后臺頁面,但這也導致這種形式拓展性不強、維護成本高,所以一定要根據使用場景而定。

2. 表單頁設計

表單頁是后臺產品的另一種常用頁面,多用于新增、編輯功能。常用表單主要是基礎表單分步表單。

四、可視化設計

可視化設計的重要性已經不必強調了,千言萬語不如一張圖有效,尤其在后臺產品中,各種數據統計、報表、行為路徑等,都需要借助可視化設計將他們直觀、漂亮的展示出來。

在可視化設計中,主要可分成數據可視化、關系可視化、時間空間可視化三種類型。

1. 數據可視化

在數據可視化設計中,數據本身不重要,重要的是采用哪種方式更為合理,所以當我們需要將數據用可視化的方式展現時,需要先搞清楚有哪些圖表,每種圖表的作用,然后用這些圖去體現數據。

常用圖形包括:條形(柱狀)圖、餅圖、折線圖、散點圖、熱力圖、雷達圖、旭日圖等,在這里推薦百度的EChart:http://www.echartsjs.com/index.html,所有你想到想不到的圖都可以找到。

2. 關系可視化

關系可視化體現了不同角色間錯綜復雜、難以語言描述的關系。常見于各種架構設計、產品結構設計中。

3. 時間空間可視化

時間可視化:

時間的可視化在上面“工作臺的設計”中已經提到了,是以時間軸的形式,將各個關鍵時間點的相關事項展現出來,用來體現各事項發生的先后順序及相對計劃時間的進度情況。

空間可視化:

空間可視化應該是我們日常生活中接觸最多的一種可視化設計,例如各種地圖、地鐵線路圖等。

五、幫助中心

幫助中心是很多產品經理容易忽視但其實非常重要的一個模塊。

大部分的后臺、To B產品由于業務和邏輯的復雜性,不可能做得像前端產品那樣易用,同時又沒有統一的交互規范,用戶使用類似產品不多,導致產品推出后需要花大量的時間、人力做培訓、講解,即使給出了相應的文檔,也會由于各種原因沒有保存或忽略。

所以后臺產品需要一個更加優質的幫助中心來幫助他人,幫助自己。

  1. 頁面布局上大多是左側目錄,右側為對應的正文說明;
  2. 幫助文檔不應僅從功能上介紹產品,由于后臺產品需求、場景與角色關聯性大,所以還需要增加按不同角色介紹產品的使用;
  3. 正文除了圖文形式,如果是對外的系統產品,還應補充視頻形式,結合語音進行講解,才能更清晰的將產品介紹給客戶

 

作者:周翔,起點學院深圳1609期產品經理實戰訓練營學員

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

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 學習了

    來自上海 回復
  2. 學習了

    來自中國 回復
  3. 后臺產品設計系列:認識后臺(一)http://www.aharts.cn/pd/1053728.html
    后臺產品設計系列:產品設計方式(二)http://www.aharts.cn/pd/1202556.html
    后臺產品設計系列:流程設計(三)http://www.aharts.cn/pd/1329615.html
    前往主頁,查看更多

    來自廣東 回復
  4. 寫的還可以

    回復
  5. 最近在看后臺設計,學習了 ??

    來自浙江 回復
    1. 主頁有系列文章,可以看看有沒有對你有用 ??

      來自廣東 回復
  6. 跟螞蟻的交互規范很像

    來自四川 回復
    1. 螞蟻的交互規范之前沒接觸過,后面找機會看看 ?? ,文中的原型圖基本是工作中實際項目處理后的圖

      來自廣東 回復
    2. 就是antdesign

      來自上海 回復
  7. 學習了

    來自北京 回復
    1. ?? ??

      來自廣東 回復
  8. 這種后臺可以2B了。平時公司里自己用的后臺,能做完前2步就謝天謝地了。

    來自廣東 回復
    1. 是的,如果是小團隊的內部使用不需要做這么多。但是即使是公司內部自己用,如果公司規模比較大的話,后面的那些也要做

      來自廣東 回復
    2. 現在B端產品都是在做C端話,畢竟是市場在推動。 而且這種準確來講 應該叫中臺。這種中臺的使用就像文章內的參考??梢钥匆幌挛浵伣鸱? ant design 。 設計語言和實現方法都很系統和規范。希望對你有幫助。

      來自廣東 回復
    3. 非常謝謝,提高了我對視覺的理解和想象力,學習了。

      來自廣東 回復