移動APP設計入門級:真實的前后端原型長啥樣?

38 評論 78342 瀏覽 579 收藏 7 分鐘

只會畫功能原型圖的不是產品經理,不過產品經理如果不會畫原型那戰斗力也是打了不少折扣,不僅僅因為原型是對功能展示上的設計,更由于產品原型實際是用戶實際需求、業務流程、系統規范等多種過程產物的結晶。本文適合入門級的移動端產品經理,在思考、設計、制作客戶端及后臺原型時可做參考

產品原型是產品的重要保密文檔,因此選取了一個目前已中止且相對簡單的產品做介紹,便于剛入門的初級產品經理盡快上手。之后會陸續針對較為復雜,或是多插件APP進行進階型的產品設計說明。

一、在做原型之前

需求調研、需求獲取、各種溝通、各種材料這里就不多說了,產品設計相關文章或書籍一把一把的,大家可以主動去看看。這里強調一點:

用戶想要的,并非都是用戶需要的。

舉個栗子:用戶想要給單據加關鍵字,其實只是需要個標簽分類;用戶要修改提交的內容,其實有時候只是缺少草稿功能。抓準用戶真實需求,才是設計過程中的首要。

所以,少年,請先不要急著打開Axure。

二、原型長什么樣?

原型內容基本包括:流程圖、頁面展示、字段說明、交互操作、規則說明、特殊備注等。

業務流程圖:

liucheng

業務流程是產品設計的核心,如果連要實現什么目的、如何實現都沒搞清楚,那產品也沒啥意義了。至于是需要做業務流程圖、泳道圖、序列圖、頁面流程圖等,則根據不同項目產品實際情況,關鍵是:要能看懂!不少流程圖,洋洋灑灑幾大頁,不明覺厲,到需求評審的時候,解釋個流程都要花半天,就更別指望敬愛的程序猿能在開發的時候細看了。

頁面導航:

mulu

根據菜單或核心功能塊設置產品導航,我個人習慣再根據不同業務狀態區分頁面,這樣自己和開發都能比較清楚是在什么層級頁面、頁面目的等,這個看自己的習慣,能清楚表達功能結構即可。

內容與說明:

yemian1

比較簡單的頁面,可直接在頁面上標注內容、條件、交互及具體說明。如果是比較復雜的邏輯流程模塊,建議針對模塊,獨立設計流程圖、模塊全局說明、規則描述、字段說明等,這個會在后續針對較復雜流程的產品設計中細說。

在這個過程中,當你做完一個模塊的關聯頁面設計,可以閉著眼睛在腦海中,模擬自己作為用戶在各個頁面上實際操作,可以幫助你發現并及時修改一些小問題。

管理后臺設計:

經??吹接蟹窒硪苿佣嗽O計的文章,不過很少看到介紹移動端的同時有提到后臺的,難道大家移動端和管理后臺是不同的人設計的嗎?反正作為移動產品經理的本汪一直都是自己默默做后臺原型的(心酸臉)。

houtai1

houtai2

移動APP的后端核心功能集中在數據類或業務操作類,該APP主要功能是實現某類商城的在線訂購、訂單售后等目的,而后端主要用戶是平臺運營人員,核心目標是對前端訂單進行操作,因此后端設計的重點就在于:

  1. 前端基礎數據配置
  2. 業務數據分類聚合
  3. 單據流轉處理(重點)
  4. 用戶權限
  5. 報表分析

建議入門級的產品經理同步多考慮后臺的實現,對業務邏輯梳理很有好處。一般情況下我會先設計移動端,然后再設計對應管理后臺,最后再迭代調整以實現前后端業務打通順暢。

最后的一些話:

  • 產品原型其實只是用來表達自己設計想法的,即便沒有Axure,使用普通紙筆一樣可以拿出實用的產品原型圖(當然能提高效率,何樂而不為?)。
  • 多思考多練習,一定沒壞處。
  • 少喝“不明覺厲”的產品雞湯。要不就徹底弄懂它們為己所用,不然若干年后可能會有一種“聽過很多道理,卻依然過不好這一生”的感覺。
  • 產品經理有時容易走上“雖然我什么都不會,但其實我很牛逼”的歪路,乖,踏實些,好嗎?

 

作者:臨公子(微信號公眾號:臨公子的后花園),一枚喜歡理財、健身、不愛灌雞湯喜歡喝咖啡的美汪。

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

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

    回復
  2. 請問作者:文章提到的 “APP 后端” 一般是 PC web系統嗎? 有沒有 把APP后端 也做在APP端的?

    來自廣東 回復
  3. 用axure做過幾款前后臺的原型,看了文章后突然有了共鳴!

    來自廣東 回復
  4. 摩客的官網上有很多的手機app原型demo,可以去看看

    來自四川 回復
  5. 樓主分享的是純干貨,很棒!支持學習了

    來自上海 回復
  6. 真在做前后端設計,求參考,感激不盡??!398212019@qq.com

    來自廣東 回復
  7. 大神原型圖給發一下唄。謝謝!1564324131@qq.com

    來自北京 回復
    1. 去摩客的官網看看,列子很多的

      來自四川 回復
  8. 很實用,再也喝不下雞湯了!帥哥哪里高就???我在重慶,運營轉產品,學習中。

    回復
    1. 我是技術轉產品學習中,希望可以多交流。加我微信znj234

      來自北京 回復
    2. 本汪是在福建的一枚普通產品汪,繼續在慢慢長路上學習中,哈哈!

      來自福建 回復
  9. 求助,大牛文章中的后前臺demo和后臺管理demo全部是用axure 畫出來的嗎 感謝

    感覺畫的和成稿都差不多了啊

    來自安徽 回復
    1. 是哦,個人習慣用axure,偶爾一些原始的雛形也會用用Balsamiq Mockups。
      這種低保其實和成品還有不小差距,不過個人覺得足夠向開發團隊表達清楚就可以了。
      一些展示上的細節就交給UI了。

      來自福建 回復
  10. 最后兩句話簡直精髓

    回復
    1. 因為在工作見過牛逼的人,也見過裝逼的人,各有值得自己學習或警醒的地方。哈哈 ??

      來自福建 回復
  11. 個人覺得,流程圖應該再嚴謹一些。打個比方,用戶下完訂單過后,訂單提交失敗或者用戶取消訂單會怎么樣?或者遇到一些極為特殊的情況,導致用戶無法正常操作的界面顯示和交互。

    來自四川 回復
    1. 兄臺說的有道理:)。其實這個是主干流程圖,關聯的分支流程圖沒有截圖出來。。

      來自福建 回復
    2. 承讓,承讓!看過你寫的另一篇文字,也吐露了我的心聲。個人也覺得產品經理水分太大,從業人員職業素質參差不齊。隨便用個axure隨便拷貝一個應用就覺得自己已經是產品經理了。真的是人人都是產品經理的時代阿 ?

      來自四川 回復
    3. 你說的應該是屬于異常流的情況了,一般情況下先選擇梳理正常流,把正常流梳理出來之后再考慮異常流的情況會好一些。

      來自本機地址 回復
  12. 看到前后臺的文檔,如獲至寶。自己寫的prd,總是浮于業務層面,無法從開發的角度系統化深入分析,網上也很少該類文章。能否分享下作者寫的文檔,或者關于某個模塊的前后端prd【詳細】文檔 學習下 不勝感激 bigisones@gmail.com

    來自江蘇 回復
  13. 執行層面的干貨,不錯

    回復
    1. 太感性的寫不出,只好寫寫干貨了,哈哈~ :)

      來自福建 回復
  14. 好棒阿 已關注 謝分享

    回復
    1. 多謝兄臺支持~ ??

      來自福建 回復
  15. 認認真真記在本子上了。 ?

    來自北京 回復
    1. 記得回頭去看哦。
      我曾經有個惡習,喜歡寫筆記,但很少去看,后來發現原來我一直都在自己感動自己 (僵硬微笑臉)。

      來自福建 回復
  16. 學習了。第一次做產品原型,費了好大功夫,卻還是被領導批評??戳藰侵鞣窒淼膬热?,有所領悟。

    來自北京 回復
    1. ?? 雖說臨陣磨刀不快也光,但平時多練習,到需要用的時候才會更從容。
      想想自己第一次原型派上用場居然是因為第2天要去演示,而開發和UI來不做DEMO,于是我加班做了一個可演示的原型。。 ??

      來自福建 回復
  17. ? 說的好有道理。不明覺厲!

    來自江蘇 回復
    1. “厲”沒啥價值,“明”比較重要。 :mrgreen:

      來自福建 回復
  18. 對于沒做過產品經理而又希望成為一名產品經理的人很希望能看到自己如何才能成為一名產品經理。

    來自北京 回復
    1. 嗯,有空我也整理一些相關內容,畢竟最開始我也不是產品經理的。
      如果一定要說如何能轉行成為一名產品經理,有個簡單的方法:
      去招聘網站上看看產品經理的工作范圍和要求,哪里不會學哪里,加油。

      來自福建 回復
    2. 謝謝

      來自北京 回復
    3. http://www.aharts.cn/pmd/350082.html
      希望可以對你有一丟丟的幫助。加油少年。 ??

      來自福建 回復
  19. 好棒,加個微信或者QQ吧

    來自北京 回復
    1. 難得有個平臺能讓我說些正經事。。就在這里多關注努力變正經的本汪吧! ??

      來自福建 回復
  20. 喜歡這樣的文章。。。實在

    來自重慶 回復
    1. ?? 多謝兄臺支持~以后會繼續多寫一些實在的、接地氣的內容的~

      來自福建 回復