PM如何使用Axure製作電腦手機通用的Boss簡歷

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

目前大部分互聯網HR通過拉勾、Boss直聘等熱門軟體來招聘PM。除了像傳統的前程無憂智聯招聘網站一樣可以在電腦上查看，更方便的是支持在手機上查看。

它們的簡歷模板，不管是內容布局還是視覺設計，相比於過去的招聘網站也有很大的提升。

如果利用Axure做出這樣的簡歷發給招聘產品經理的HR，是不是秀了一下你的原型設計能力同時也極大的勾起了HR的好奇心？那麼邀請你過來聊一聊豈不是再自然不過的。

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

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

畫出Web簡歷原型

1、獲取Web簡歷的解析度

登錄Boss直聘Web後台並查看投遞過來的簡歷張什麼樣子。通過截圖簡歷區域知曉大概的解析度為875x1080。

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

2、根據boss簡歷模仿畫出線框圖

依葫蘆畫瓢，照著boss直聘的簡歷，在Axure畫出一個個對應的元件，完成靜態的線框圖全部內容。

需注意的是有個交互。頁面下方固定了一個工具欄，需要使用動態面板和固定到瀏覽器功能實現。

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

使用頁面輔助線進行對齊，一個元素一個元素的對齊。

4、和簡歷中的每一元素統一顏色

使用取色工具或者查看相應頁面元素的css。

5、補充相應的圖標

boss簡歷裡面有一些小圖標，像工作經驗，學歷，薪水。建議從阿里巴巴矢量素材庫搜索相應關鍵詞找到恰當的圖標，下載svg格式並使用圖片元件導入到Axure。最後縮放大小，調整顏色和位置就行了。

6、優化細節

除了對齊位置，統一顏色這是最重要的細節。

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

7、預覽Web原型

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

如果發現誤差很大，根據差異點去修改原型即可。

需要注意的是保證在不同電腦解析度下面的查看效果是相似的。

修改原型適應APP場景

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

1、獲取APP簡歷的解析度

建議以所有手機最大的邏輯解析度來畫APP簡歷原型，利用Axure的視口標籤設置去適應其他手機。

通常來說就是414x736，減掉20px的狀態欄。

2、設置自定義視圖

新增一種視圖，設置為如下圖：

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

點擊414圖標，進入到相應的視圖。我們發現之前畫出的Web簡歷原型也複製到在這裡。

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

修改Web簡歷線框圖的內容，盡量縮減至414x716區域內，也就是紫色線條區域內。

注意高度可不限制，因為頁面內容早已超過一屏幕。

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

方法和Web簡歷原型一樣。

6、和簡歷中的每一元素統一顏色

方法和Web簡歷原型一樣。

7、補充相應的圖標

個別圖標Web簡歷原型裡面沒有，所以也需要進行補充。

方法和Web簡歷原型一樣。

8、優化細節

方法和Web簡歷原型一樣。

設置生成規則

生成原型的時候，請設置自定義視圖並選中移動設備裡面的包含視口標籤，其他默認。

上傳原型到伺服器並將網址發給HR

上傳原型html到自己的伺服器或者新浪雲等支持原型的網站，得到在線可以訪問的網址。

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

將簡歷發給HR

將這個原型網址發給HR就可以了，不管HR是在電腦上還是在手機上都能夠看到你的個人簡歷，並且為你的原型設計水平而驚艷。

總結

對於PM來說，利用自己的專業能力「原型設計」結合自己的職業工具「Axure」，做成自己的簡歷模板，是一件很有成就感的事情。

#專欄作家#

浪子，業務型PM，浪子PRD系列http://51prd.com，公眾號langzisay。

本文由 @浪子 原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基於 CC0 協議