移動(dòng)APP設(shè)計(jì)入門級(jí):真實(shí)的前后端原型長啥樣?
只會(huì)畫功能原型圖的不是產(chǎn)品經(jīng)理,不過產(chǎn)品經(jīng)理如果不會(huì)畫原型那戰(zhàn)斗力也是打了不少折扣,不僅僅因?yàn)樵褪菍?duì)功能展示上的設(shè)計(jì),更由于產(chǎn)品原型實(shí)際是用戶實(shí)際需求、業(yè)務(wù)流程、系統(tǒng)規(guī)范等多種過程產(chǎn)物的結(jié)晶。本文適合入門級(jí)的移動(dòng)端產(chǎn)品經(jīng)理,在思考、設(shè)計(jì)、制作客戶端及后臺(tái)原型時(shí)可做參考
產(chǎn)品原型是產(chǎn)品的重要保密文檔,因此選取了一個(gè)目前已中止且相對(duì)簡單的產(chǎn)品做介紹,便于剛?cè)腴T的初級(jí)產(chǎn)品經(jīng)理盡快上手。之后會(huì)陸續(xù)針對(duì)較為復(fù)雜,或是多插件APP進(jìn)行進(jìn)階型的產(chǎn)品設(shè)計(jì)說明。
一、在做原型之前
需求調(diào)研、需求獲取、各種溝通、各種材料這里就不多說了,產(chǎn)品設(shè)計(jì)相關(guān)文章或書籍一把一把的,大家可以主動(dòng)去看看。這里強(qiáng)調(diào)一點(diǎn):
用戶想要的,并非都是用戶需要的。
舉個(gè)栗子:用戶想要給單據(jù)加關(guān)鍵字,其實(shí)只是需要個(gè)標(biāo)簽分類;用戶要修改提交的內(nèi)容,其實(shí)有時(shí)候只是缺少草稿功能。抓準(zhǔn)用戶真實(shí)需求,才是設(shè)計(jì)過程中的首要。
所以,少年,請(qǐng)先不要急著打開Axure。
二、原型長什么樣?
原型內(nèi)容基本包括:流程圖、頁面展示、字段說明、交互操作、規(guī)則說明、特殊備注等。
業(yè)務(wù)流程圖:
業(yè)務(wù)流程是產(chǎn)品設(shè)計(jì)的核心,如果連要實(shí)現(xiàn)什么目的、如何實(shí)現(xiàn)都沒搞清楚,那產(chǎn)品也沒啥意義了。至于是需要做業(yè)務(wù)流程圖、泳道圖、序列圖、頁面流程圖等,則根據(jù)不同項(xiàng)目產(chǎn)品實(shí)際情況,關(guān)鍵是:要能看懂!不少流程圖,洋洋灑灑幾大頁,不明覺厲,到需求評(píng)審的時(shí)候,解釋個(gè)流程都要花半天,就更別指望敬愛的程序猿能在開發(fā)的時(shí)候細(xì)看了。
頁面導(dǎo)航:
根據(jù)菜單或核心功能塊設(shè)置產(chǎn)品導(dǎo)航,我個(gè)人習(xí)慣再根據(jù)不同業(yè)務(wù)狀態(tài)區(qū)分頁面,這樣自己和開發(fā)都能比較清楚是在什么層級(jí)頁面、頁面目的等,這個(gè)看自己的習(xí)慣,能清楚表達(dá)功能結(jié)構(gòu)即可。
內(nèi)容與說明:
比較簡單的頁面,可直接在頁面上標(biāo)注內(nèi)容、條件、交互及具體說明。如果是比較復(fù)雜的邏輯流程模塊,建議針對(duì)模塊,獨(dú)立設(shè)計(jì)流程圖、模塊全局說明、規(guī)則描述、字段說明等,這個(gè)會(huì)在后續(xù)針對(duì)較復(fù)雜流程的產(chǎn)品設(shè)計(jì)中細(xì)說。
在這個(gè)過程中,當(dāng)你做完一個(gè)模塊的關(guān)聯(lián)頁面設(shè)計(jì),可以閉著眼睛在腦海中,模擬自己作為用戶在各個(gè)頁面上實(shí)際操作,可以幫助你發(fā)現(xiàn)并及時(shí)修改一些小問題。
管理后臺(tái)設(shè)計(jì):
經(jīng)??吹接蟹窒硪苿?dòng)端設(shè)計(jì)的文章,不過很少看到介紹移動(dòng)端的同時(shí)有提到后臺(tái)的,難道大家移動(dòng)端和管理后臺(tái)是不同的人設(shè)計(jì)的嗎?反正作為移動(dòng)產(chǎn)品經(jīng)理的本汪一直都是自己默默做后臺(tái)原型的(心酸臉)。
移動(dòng)APP的后端核心功能集中在數(shù)據(jù)類或業(yè)務(wù)操作類,該APP主要功能是實(shí)現(xiàn)某類商城的在線訂購、訂單售后等目的,而后端主要用戶是平臺(tái)運(yùn)營人員,核心目標(biāo)是對(duì)前端訂單進(jìn)行操作,因此后端設(shè)計(jì)的重點(diǎn)就在于:
- 前端基礎(chǔ)數(shù)據(jù)配置
- 業(yè)務(wù)數(shù)據(jù)分類聚合
- 單據(jù)流轉(zhuǎn)處理(重點(diǎn))
- 用戶權(quán)限
- 報(bào)表分析
建議入門級(jí)的產(chǎn)品經(jīng)理同步多考慮后臺(tái)的實(shí)現(xiàn),對(duì)業(yè)務(wù)邏輯梳理很有好處。一般情況下我會(huì)先設(shè)計(jì)移動(dòng)端,然后再設(shè)計(jì)對(duì)應(yīng)管理后臺(tái),最后再迭代調(diào)整以實(shí)現(xiàn)前后端業(yè)務(wù)打通順暢。
最后的一些話:
- 產(chǎn)品原型其實(shí)只是用來表達(dá)自己設(shè)計(jì)想法的,即便沒有Axure,使用普通紙筆一樣可以拿出實(shí)用的產(chǎn)品原型圖(當(dāng)然能提高效率,何樂而不為?)。
- 多思考多練習(xí),一定沒壞處。
- 少喝“不明覺厲”的產(chǎn)品雞湯。要不就徹底弄懂它們?yōu)榧核?,不然若干年后可能?huì)有一種“聽過很多道理,卻依然過不好這一生”的感覺。
- 產(chǎn)品經(jīng)理有時(shí)容易走上“雖然我什么都不會(huì),但其實(shí)我很牛逼”的歪路,乖,踏實(shí)些,好嗎?
作者:臨公子(微信號(hào)公眾號(hào):臨公子的后花園),一枚喜歡理財(cái)、健身、不愛灌雞湯喜歡喝咖啡的美汪。
本文由 @臨公子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
留個(gè)印
請(qǐng)問作者:文章提到的 “APP 后端” 一般是 PC web系統(tǒng)嗎? 有沒有 把APP后端 也做在APP端的?
用axure做過幾款前后臺(tái)的原型,看了文章后突然有了共鳴!
摩客的官網(wǎng)上有很多的手機(jī)app原型demo,可以去看看
樓主分享的是純干貨,很棒!支持學(xué)習(xí)了
真在做前后端設(shè)計(jì),求參考,感激不盡??!398212019@qq.com
大神原型圖給發(fā)一下唄。謝謝!1564324131@qq.com
去摩客的官網(wǎng)看看,列子很多的
很實(shí)用,再也喝不下雞湯了!帥哥哪里高就啊?我在重慶,運(yùn)營轉(zhuǎn)產(chǎn)品,學(xué)習(xí)中。
我是技術(shù)轉(zhuǎn)產(chǎn)品學(xué)習(xí)中,希望可以多交流。加我微信znj234
本汪是在福建的一枚普通產(chǎn)品汪,繼續(xù)在慢慢長路上學(xué)習(xí)中,哈哈!
求助,大牛文章中的后前臺(tái)demo和后臺(tái)管理demo全部是用axure 畫出來的嗎 感謝
感覺畫的和成稿都差不多了啊
是哦,個(gè)人習(xí)慣用axure,偶爾一些原始的雛形也會(huì)用用Balsamiq Mockups。
這種低保其實(shí)和成品還有不小差距,不過個(gè)人覺得足夠向開發(fā)團(tuán)隊(duì)表達(dá)清楚就可以了。
一些展示上的細(xì)節(jié)就交給UI了。
最后兩句話簡直精髓
因?yàn)樵诠ぷ饕娺^牛逼的人,也見過裝逼的人,各有值得自己學(xué)習(xí)或警醒的地方。哈哈 ??
個(gè)人覺得,流程圖應(yīng)該再嚴(yán)謹(jǐn)一些。打個(gè)比方,用戶下完訂單過后,訂單提交失敗或者用戶取消訂單會(huì)怎么樣?或者遇到一些極為特殊的情況,導(dǎo)致用戶無法正常操作的界面顯示和交互。
兄臺(tái)說的有道理:)。其實(shí)這個(gè)是主干流程圖,關(guān)聯(lián)的分支流程圖沒有截圖出來。。
承讓,承讓!看過你寫的另一篇文字,也吐露了我的心聲。個(gè)人也覺得產(chǎn)品經(jīng)理水分太大,從業(yè)人員職業(yè)素質(zhì)參差不齊。隨便用個(gè)axure隨便拷貝一個(gè)應(yīng)用就覺得自己已經(jīng)是產(chǎn)品經(jīng)理了。真的是人人都是產(chǎn)品經(jīng)理的時(shí)代阿 ?
你說的應(yīng)該是屬于異常流的情況了,一般情況下先選擇梳理正常流,把正常流梳理出來之后再考慮異常流的情況會(huì)好一些。
看到前后臺(tái)的文檔,如獲至寶。自己寫的prd,總是浮于業(yè)務(wù)層面,無法從開發(fā)的角度系統(tǒng)化深入分析,網(wǎng)上也很少該類文章。能否分享下作者寫的文檔,或者關(guān)于某個(gè)模塊的前后端prd【詳細(xì)】文檔 學(xué)習(xí)下 不勝感激 bigisones@gmail.com
執(zhí)行層面的干貨,不錯(cuò)
太感性的寫不出,只好寫寫干貨了,哈哈~ :)
好棒阿 已關(guān)注 謝分享
多謝兄臺(tái)支持~ ??
認(rèn)認(rèn)真真記在本子上了。 ?
記得回頭去看哦。
我曾經(jīng)有個(gè)惡習(xí),喜歡寫筆記,但很少去看,后來發(fā)現(xiàn)原來我一直都在自己感動(dòng)自己 (僵硬微笑臉)。
學(xué)習(xí)了。第一次做產(chǎn)品原型,費(fèi)了好大功夫,卻還是被領(lǐng)導(dǎo)批評(píng)。看了樓主分享的內(nèi)容,有所領(lǐng)悟。
?? 雖說臨陣磨刀不快也光,但平時(shí)多練習(xí),到需要用的時(shí)候才會(huì)更從容。
想想自己第一次原型派上用場居然是因?yàn)榈?天要去演示,而開發(fā)和UI來不做DEMO,于是我加班做了一個(gè)可演示的原型。。 ??
? 說的好有道理。不明覺厲!
“厲”沒啥價(jià)值,“明”比較重要。
對(duì)于沒做過產(chǎn)品經(jīng)理而又希望成為一名產(chǎn)品經(jīng)理的人很希望能看到自己如何才能成為一名產(chǎn)品經(jīng)理。
嗯,有空我也整理一些相關(guān)內(nèi)容,畢竟最開始我也不是產(chǎn)品經(jīng)理的。
如果一定要說如何能轉(zhuǎn)行成為一名產(chǎn)品經(jīng)理,有個(gè)簡單的方法:
去招聘網(wǎng)站上看看產(chǎn)品經(jīng)理的工作范圍和要求,哪里不會(huì)學(xué)哪里,加油。
謝謝
http://m.22none.com/pmd/350082.html
希望可以對(duì)你有一丟丟的幫助。加油少年。 ??
好棒,加個(gè)微信或者QQ吧
難得有個(gè)平臺(tái)能讓我說些正經(jīng)事。。就在這里多關(guān)注努力變正經(jīng)的本汪吧! ??
喜歡這樣的文章。。。實(shí)在
?? 多謝兄臺(tái)支持~以后會(huì)繼續(xù)多寫一些實(shí)在的、接地氣的內(nèi)容的~