APP產(chǎn)品經(jīng)理用的原型組件

這是Kevin的第 845 篇原創(chuàng)，

持續(xù)日更，做產(chǎn)品經(jīng)理的創(chuàng)業(yè)斜杠青年。

前段時(shí)間過(guò)小程序的原型組件，不少朋友在公眾號(hào)后臺(tái)下載了。如果你還沒(méi)有下載可以點(diǎn)擊下面的文章查看

產(chǎn)品經(jīng)理必用的小程序原型部件

---

移動(dòng)端產(chǎn)品經(jīng)理指的是，小程序、H5、app3個(gè)類(lèi)型。用戶在移動(dòng)設(shè)備完成的軟件操作，產(chǎn)品經(jīng)理分布最多的就是app產(chǎn)品經(jīng)理了。小程序、app都有一定的規(guī)范，一個(gè)是依據(jù)微信生態(tài)、另外一個(gè)是依據(jù)操作系統(tǒng)。

而H5則顯的自然較多，產(chǎn)品經(jīng)理可以對(duì)H5做任何大膽的設(shè)計(jì)都可，所以就沒(méi)有什么規(guī)范可言。

app的產(chǎn)品設(shè)計(jì)工作也有必用的原型組件，我也梳理了在app產(chǎn)品設(shè)計(jì)背景下常用并且必用的原型組件，在文章末尾可以直接下載

客戶端的產(chǎn)品工作在底層思考會(huì)區(qū)分IOS和安卓2系統(tǒng)的限制，再進(jìn)行可以開(kāi)發(fā)實(shí)現(xiàn)的產(chǎn)品設(shè)計(jì)方案。和小程序一樣，中小企業(yè)在app的早期版本產(chǎn)品設(shè)計(jì)里實(shí)際上是用的一套標(biāo)準(zhǔn)。這樣的結(jié)果是將原本需要2套的前端交互設(shè)計(jì)、UI設(shè)計(jì)減少為一套，快速驗(yàn)證。

同時(shí)也減少了用戶的認(rèn)知門(mén)檻、使用操作難度，在某種層度上也是提升用戶體驗(yàn)的策略。

開(kāi)發(fā)一個(gè)app和小程序有什么區(qū)別？

同一個(gè)需求站在后臺(tái)接口的角度上，兩者所需要的成本、和工作復(fù)雜程度是幾乎一樣的。但app的工作量成本仍然非常大的，具體的問(wèn)題我在之前有寫(xiě)過(guò)

到底是選擇開(kāi)發(fā)小程序還是APP？

APP常用、必用的原型組件

下面我羅列了10個(gè)app必用、常用的組件。要值得說(shuō)明的是下面的組件都可以通過(guò)axure自帶組件進(jìn)行繪制。所有的組件都可以通過(guò)基礎(chǔ)組件繪畫(huà)完成，所以就算不能下載，產(chǎn)品經(jīng)理你也可以自己編輯組合，也當(dāng)作提升自己的axure軟件使用能力。

對(duì)于不使用axure的產(chǎn)品經(jīng)理來(lái)說(shuō)，第三方原型工具也有現(xiàn)成的，直接選用即可。

1.app底部tab

▲  app的tab導(dǎo)航欄 

每個(gè)app都有底部tab，其圖標(biāo)、文案、數(shù)量都要嚴(yán)格控制。比如圖標(biāo)的大小尺寸、文案長(zhǎng)度、數(shù)量不要超過(guò)5個(gè)。用這個(gè)模版就可以快速通過(guò)更改文案即完成app的底部tab設(shè)計(jì)。

2.用app組件一定不要用手機(jī)殼

我見(jiàn)過(guò)很多產(chǎn)品新人在繪制原型工具的時(shí)候，都會(huì)帶上手機(jī)殼、iPad殼。就是想突出它是移動(dòng)端app的頁(yè)面

▲  原型下的手機(jī)殼 

實(shí)際上根本不需要

你只需要表達(dá)頁(yè)面的需求、文案、結(jié)構(gòu)布局即可，至于能不能放得下或者要幾個(gè)頁(yè)面才能放得下可以交給UI或交互設(shè)計(jì)師。當(dāng)然了如果有部分功能入口需要刻意在哪一個(gè)頁(yè)面上，需要單獨(dú)標(biāo)注。

3.信息流

▲  個(gè)人賬戶信息修改 

每個(gè)app都有個(gè)人中心，在個(gè)人中心里包含用戶的虛擬ID，需要給用戶提供基礎(chǔ)信息修改入口，這類(lèi)需求幾乎是一致的，非常標(biāo)準(zhǔn)。

4.個(gè)人主頁(yè)

▲  個(gè)人主頁(yè) 

和個(gè)人基礎(chǔ)信息修改一樣，個(gè)人主頁(yè)是最復(fù)雜的。包含了業(yè)務(wù)、通用功能。業(yè)務(wù)功能是企業(yè)自有的商業(yè)模式、通用功能包括消息通知、收藏、點(diǎn)贊等。使用這類(lèi)原型組件，可以快速搭建出產(chǎn)品的1.0版本，不用擔(dān)心個(gè)人中心少了必要功能。

5.登錄注冊(cè)

▲  app的登錄注冊(cè) 

登錄注冊(cè)是用戶在互聯(lián)網(wǎng)產(chǎn)品的入口，所包含的登錄、注冊(cè)、找回密碼是一定存在的。只是每個(gè)企業(yè)因?yàn)榘踩詥?wèn)題，可能會(huì)要求增加身份證、人臉識(shí)別等流程。通過(guò)此類(lèi)組件快速完成app1.0的登錄注冊(cè)設(shè)計(jì)

6.彈窗/toast/警告

▲  彈窗組件 

這類(lèi)組件是頁(yè)面的操作反饋、條件判斷必用的產(chǎn)品方案。使用這類(lèi)模版，可以快速切換文案、圖標(biāo)，完成產(chǎn)品設(shè)計(jì)。

7.導(dǎo)航欄

app的導(dǎo)航欄是可以區(qū)分安卓、IOS的。但由于為了節(jié)省資源、和減少用戶使用門(mén)檻。保持一致是常見(jiàn)的方案，同時(shí)頁(yè)面下還會(huì)有子選項(xiàng)，上面的導(dǎo)航欄分別是一級(jí)導(dǎo)航和頁(yè)面下的二級(jí)導(dǎo)航。

8.頁(yè)面交互

交互提示是用戶每個(gè)頁(yè)面的操作說(shuō)明。用這類(lèi)組件可減少前端開(kāi)發(fā)的需求認(rèn)識(shí)成本。

9.支付

▲  微信支付 

用這類(lèi)支付組件可以快速表達(dá)支付條件。當(dāng)然了由于微信等第三方支付都是標(biāo)準(zhǔn)的UI設(shè)計(jì)，所以也可以選擇截圖。

其他功能性組件

還有部分組件是產(chǎn)品經(jīng)理在app工作常用的，我就不單獨(dú)解釋了。大家記牢就可以了

1.輸入框

2. 搜索

3.聊天

4.上傳圖片

5.加載刷新

如何下載

在公眾號(hào)后臺(tái)回復(fù)：app原型

即可獲得下載地址

每天體驗(yàn)1款app知識(shí)星球

我創(chuàng)建了一個(gè)《每天體驗(yàn)1款app》知識(shí)星球，有超過(guò)20個(gè)行業(yè)嘉賓在圈子里。加入后365天，每天體驗(yàn)一款A(yù)PP。提升產(chǎn)品設(shè)計(jì)能力，同時(shí)有1500份體驗(yàn)報(bào)告幫助你找到競(jìng)品。

平均1天1塊錢(qián)，掃碼購(gòu)買(mǎi)即可加入

連續(xù)體驗(yàn)90款應(yīng)用，通過(guò)后原路退回