作為剛?cè)肼毜漠a(chǎn)品新人，目前的主要任務(wù)是熟悉業(yè)務(wù)。當(dāng)然leader也布置了任務(wù)，其中頻率最高的就是制作元件庫。我已經(jīng)做了兩套元件庫，一套用于PC端，一套用于移動(dòng)端。作為一個(gè)在制作元件庫上已經(jīng)非常“有經(jīng)驗(yàn)”的人，我想跟大家分享一下產(chǎn)品新人如何用做產(chǎn)品的方法制作元件庫。
作為產(chǎn)品經(jīng)理，畫原型是日常工作中的重要部分。最讓人頭大的莫過于需要畫一些復(fù)雜的界面原型，有可能畫原型的頻率還非常高。所以這個(gè)時(shí)候針對(duì)一個(gè)系統(tǒng)定制元件庫顯得非常重要。如果將一個(gè)系統(tǒng)的元件庫做出來，分享出來，各個(gè)產(chǎn)品線的產(chǎn)品經(jīng)理在畫原型時(shí)都能使用這個(gè)組件庫。這樣的話，能夠在很大程度上方便產(chǎn)品經(jīng)理畫原型，節(jié)省工作時(shí)間，提高工作效率。
對(duì)產(chǎn)品新人來說，元件庫就是自己做的第一個(gè)產(chǎn)品。做元件庫的過程也是鍛煉自己做產(chǎn)品的過程。那如何用做產(chǎn)品的方法制作元件庫呢？
一、確定產(chǎn)品規(guī)范，明確產(chǎn)品目的
在制作元件庫之前，首先要從設(shè)計(jì)那里拿到頁面的規(guī)范。頁面里的每一個(gè)控件的寬度、高度、顏色、字體都有規(guī)定。我們?cè)谥谱髟斓臅r(shí)候就是依照設(shè)計(jì)給的規(guī)范來進(jìn)行制作。
同時(shí)還有明確元件庫的目的是方便產(chǎn)品經(jīng)理畫原型，所以做的時(shí)候還需要思考他們的使用習(xí)慣，適當(dāng)?shù)貙?duì)元件庫進(jìn)行拆分、組合，讓產(chǎn)品經(jīng)理在用起來時(shí)能夠更順手。
二、明確產(chǎn)品的使用場(chǎng)景和區(qū)別
不同的元件庫有不同的使用場(chǎng)景，這會(huì)使得元件庫的形式會(huì)有一些區(qū)別。就拿我做過的兩個(gè)元件庫舉例。
PC端系統(tǒng)的頁面會(huì)比較詳細(xì)、復(fù)雜，但是PC端的頁面更新迭代頻率較低，所以元件庫的樣式會(huì)是比較固定的。在制作過程中只需要按照設(shè)計(jì)規(guī)范去做，整個(gè)頁面的元件會(huì)比較多，這樣產(chǎn)品經(jīng)理在畫原型時(shí)直接拖拽使用整個(gè)頁面就很方便了；
而移動(dòng)端的元件庫相對(duì)來說是比較簡(jiǎn)單的，但是由于移動(dòng)端頁面更新較快，制作整個(gè)頁面的元件庫其實(shí)沒多大必要，所以在做移動(dòng)端元件庫的時(shí)候，設(shè)計(jì)的要求是要拆分得足夠細(xì)致。整個(gè)元件庫更需要的是“按鈕”、“搜索框”、“輪播圖”這種偏基本的元件。這樣產(chǎn)品經(jīng)理在用的時(shí)候，能夠根據(jù)實(shí)際情況自己組合整個(gè)頁面。
三，產(chǎn)品開發(fā)—制作元件庫
1、首先在元件庫中心“創(chuàng)建元件庫”。
2、命名元件庫，保存。
保存完之后，元件庫會(huì)出現(xiàn)在元件庫中心，但里面沒有元件。
3、這時(shí)候關(guān)閉Axure，點(diǎn)開保存在桌面的.rplib文件。
4、打開元件庫后，就開始根據(jù)規(guī)范制作元件庫。
5、制作完成，點(diǎn)擊保存。關(guān)閉Axure后重新打開，點(diǎn)擊“載入元件庫”，把剛做好的元件庫載入到Axure元件庫中心。
6、元件庫制作完成。
四、產(chǎn)品測(cè)試
制作完元件庫后，為了保證元件庫的質(zhì)量，還需要自己“測(cè)試”元件庫。
先要核對(duì)元件庫里的元件是不是都符合規(guī)范。再嘗試自己導(dǎo)入元件庫，拖拽使用一下，看是否有比較大的問題。
還有一個(gè)最重要也最容易忽視的問題，由于大家的電腦型號(hào)不一樣，同一個(gè)元件庫有可能在自己電腦上顯示正常，但是在別人電腦上就可能會(huì)出現(xiàn)換行、頁面亂七八糟等問題。所以還需要在不同的電腦上進(jìn)行“測(cè)試”，看看哪些元件出現(xiàn)了問題，將文本框的寬度拉長一些，以保證在其他的電腦上顯示的時(shí)候一切正常。
最后再將元件庫發(fā)給設(shè)計(jì)或者目標(biāo)使用人，請(qǐng)他們看看元件庫是否符合實(shí)際使用習(xí)慣，還有哪些地方有問題，再進(jìn)行修改。
五、收集用戶反饋，進(jìn)行迭代
當(dāng)一個(gè)產(chǎn)品發(fā)布之后，任務(wù)并沒有結(jié)束，還需要后續(xù)的跟蹤和迭代。元件庫也一樣。
在各位產(chǎn)品經(jīng)理使用元件庫后，還需要進(jìn)行用戶調(diào)研，收集元件庫的使用情況。這些可以通過問卷調(diào)查、當(dāng)面詢問等方式來得到反饋。當(dāng)然由于用戶都集中在一個(gè)公司，所以當(dāng)面詢問是最有效的方法。收集到了用戶使用中的問題，還需要對(duì)元件庫進(jìn)行修改，推出更好的版本。
當(dāng)上述流程都做完了，一個(gè)元件庫才算真正地制作完成。
任何小的任務(wù)都可以當(dāng)作產(chǎn)品來看待，都可以用做產(chǎn)品的方法來進(jìn)行。如果每一次都懷著“產(chǎn)品雖小，流程俱全”的心態(tài)去完成任務(wù)，相信有一天在面對(duì)較大產(chǎn)品的時(shí)候，也可以穩(wěn)妥地將工作流程推進(jìn)下去。
本文由 @?異彩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議
愛盈利-運(yùn)營小咖秀(www.jza6.com) 始終堅(jiān)持研究分享移動(dòng)互聯(lián)網(wǎng)App運(yùn)營推廣經(jīng)驗(yàn)、策略、全案、渠道等純干貨知識(shí)內(nèi)容；是廣大App運(yùn)營從業(yè)者的知識(shí)啟蒙、成長指導(dǎo)、進(jìn)階學(xué)習(xí)的集聚平臺(tái)；
想了解更多移動(dòng)互聯(lián)網(wǎng)干貨知識(shí)，請(qǐng)關(guān)注微信公眾號(hào)運(yùn)營小咖秀（ID: yunyingshow）
