之前講過如何用原型打造獨(dú)一無二的簡歷的理論，這篇文章具體講講方法。希望大家可以學(xué)會(huì)如何用Axure畫出PM簡歷。

目前大部分互聯(lián)網(wǎng)HR通過拉勾、Boss直聘等熱門軟件來招聘PM。除了像傳統(tǒng)的前程無憂智聯(lián)招聘網(wǎng)站一樣可以在電腦上查看，更方便的是支持在手機(jī)上查看。

它們的簡歷模板，不管是內(nèi)容布局還是視覺設(shè)計(jì)，相比于過去的招聘網(wǎng)站也有很大的提升。

如果利用Axure做出這樣的簡歷發(fā)給招聘產(chǎn)品經(jīng)理的HR，是不是秀了一下你的原型設(shè)計(jì)能力同時(shí)也極大的勾起了HR的好奇心？那么邀請你過來聊一聊豈不是再自然不過的。

為了站在HR的角度來查看簡歷，特地注冊了一個(gè)Boss直聘的招聘方賬號，通過這篇文章希望可以讓大家了解具體的操作步驟，照著做就可以畫出和Boss直聘一樣的簡歷效果。

預(yù)覽簡歷原型http://51prd.com/case/resume/index.html

畫出Web簡歷原型

1、獲取Web簡歷的分辨率

登錄Boss直聘Web后臺(tái)并查看投遞過來的簡歷張什么樣子。通過截圖簡歷區(qū)域知曉大概的分辨率為875×1080。

所以，我們的Web簡歷原型應(yīng)該是875寬，高度自適應(yīng)。位于畫布的(0,0)。

2、根據(jù)boss簡歷模仿畫出線框圖

依葫蘆畫瓢，照著boss直聘的簡歷，在Axure畫出一個(gè)個(gè)對應(yīng)的元件，完成靜態(tài)的線框圖全部內(nèi)容。

需注意的是有個(gè)交互。頁面下方固定了一個(gè)工具欄，需要使用動(dòng)態(tài)面板和固定到瀏覽器功能實(shí)現(xiàn)。

3、和簡歷中的每一元素對齊位置

使用頁面輔助線進(jìn)行對齊，一個(gè)元素一個(gè)元素的對齊。

4、和簡歷中的每一元素統(tǒng)一顏色

使用取色工具或者查看相應(yīng)頁面元素的css。

5、補(bǔ)充相應(yīng)的圖標(biāo)

boss簡歷里面有一些小圖標(biāo)，像工作經(jīng)驗(yàn)，學(xué)歷，薪水。建議從阿里巴巴矢量素材庫搜索相應(yīng)關(guān)鍵詞找到恰當(dāng)?shù)膱D標(biāo)，下載svg格式并使用圖片元件導(dǎo)入到Axure。最后縮放大小，調(diào)整顏色和位置就行了。

6、優(yōu)化細(xì)節(jié)

除了對齊位置，統(tǒng)一顏色這是最重要的細(xì)節(jié)。

可以繼續(xù)優(yōu)化的有：命名所有元件方便后續(xù)查找修改、檢查元件的層級是否合適、組合同類型元件到一起…

7、預(yù)覽Web原型

生成原型并查看效果，對比Boss直聘的HR賬號效果是不是相似度很高。

如果發(fā)現(xiàn)誤差很大，根據(jù)差異點(diǎn)去修改原型即可。

需要注意的是保證在不同電腦分辨率下面的查看效果是相似的。

修改原型適應(yīng)APP場景

做好了Web簡歷的原型，那么我們來做APP簡歷的原型。那么我們是不是需要和前者那樣完完全全的做一遍原型呢。答案是NO。

1、獲取APP簡歷的分辨率

建議以所有手機(jī)最大的邏輯分辨率來畫APP簡歷原型，利用Axure的視口標(biāo)簽設(shè)置去適應(yīng)其他手機(jī)。

通常來說就是414×736，減掉20px的狀態(tài)欄。

2、設(shè)置自定義視圖

新增一種視圖，設(shè)置為如下圖：

3、得到繼承的Web簡歷線框圖

點(diǎn)擊414圖標(biāo)，進(jìn)入到相應(yīng)的視圖。我們發(fā)現(xiàn)之前畫出的Web簡歷原型也復(fù)制到在這里。

4、修改Web簡歷視圖為APP簡歷原型

修改Web簡歷線框圖的內(nèi)容，盡量縮減至414×716區(qū)域內(nèi)，也就是紫色線條區(qū)域內(nèi)。

注意高度可不限制，因?yàn)轫撁鎯?nèi)容早已超過一屏幕。

5、和簡歷中的每一元素對齊位置

方法和Web簡歷原型一樣。

6、和簡歷中的每一元素統(tǒng)一顏色

方法和Web簡歷原型一樣。

7、補(bǔ)充相應(yīng)的圖標(biāo)

個(gè)別圖標(biāo)Web簡歷原型里面沒有，所以也需要進(jìn)行補(bǔ)充。

方法和Web簡歷原型一樣。

8、優(yōu)化細(xì)節(jié)

方法和Web簡歷原型一樣。

設(shè)置生成規(guī)則

生成原型的時(shí)候，請?jiān)O(shè)置自定義視圖并選中移動(dòng)設(shè)備里面的包含視口標(biāo)簽，其他默認(rèn)。

上傳原型到服務(wù)器并將網(wǎng)址發(fā)給HR

上傳原型html到自己的服務(wù)器或者新浪云等支持原型的網(wǎng)站，得到在線可以訪問的網(wǎng)址。

然后自己通過電腦瀏覽器和手機(jī)瀏覽器分別訪問查看簡歷的展示效果：http://51prd.com/case/resume/index.html。

將簡歷發(fā)給HR

將這個(gè)原型網(wǎng)址發(fā)給HR就可以了，不管HR是在電腦上還是在手機(jī)上都能夠看到你的個(gè)人簡歷，并且為你的原型設(shè)計(jì)水平而驚艷。

總結(jié)

對于PM來說，利用自己的專業(yè)能力“原型設(shè)計(jì)”結(jié)合自己的職業(yè)工具“Axure”，做成自己的簡歷模板，是一件很有成就感的事情。

#專欄作家#

浪子，業(yè)務(wù)型PM，浪子PRD系列51prd.com，公眾號langzisay。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議