這次我找了我之前用 Axure 做的一個(gè)簡(jiǎn)歷，給大家做一個(gè)分享。簡(jiǎn)歷較為簡(jiǎn)約，可以自行添加內(nèi)容。這個(gè)我之前在面試的時(shí)候有用過(guò)，對(duì)于產(chǎn)品經(jīng)理、交互設(shè)計(jì)師……當(dāng)你用這個(gè) Axure 做簡(jiǎn)歷用時(shí)，別人一下子就知道你 Axure 基礎(chǔ)不錯(cuò)，些許可以加點(diǎn)印象分。

點(diǎn)擊鏈接觀看：https://4hkorl.axshare.com? 或者看看下面的 Gif 圖：

做這個(gè)的由來(lái)：之前都是用 word 、PPT 的方式做簡(jiǎn)歷，在一段期間內(nèi)比較閑，所以就想用 Axure 的方式做一個(gè)簡(jiǎn)歷，因?yàn)?Axure 是產(chǎn)品經(jīng)理、交互設(shè)計(jì)師經(jīng)常用到的軟件（也不是說(shuō)必須用到，可以用其他原型制作軟件），所以想著這么做一個(gè)簡(jiǎn)歷，是否可以讓面試官眼前一亮呢？

（說(shuō)不定還是加分項(xiàng)）后面我自己做了一個(gè)之后，然后又做出一個(gè)模板出來(lái)，讓覺(jué)得我這個(gè)模板可以用的小伙伴們使用，自己也有點(diǎn)成就感。

簡(jiǎn)歷采用瀑布流，多模塊的方式制作。頂部添加個(gè)人的聯(lián)系方式，左側(cè)采用類(lèi)似電商網(wǎng)站的側(cè)邊導(dǎo)航，這樣可以在別人第一次看你簡(jiǎn)歷的時(shí)候，有一個(gè)“全局”導(dǎo)航可切換觀看不同的內(nèi)容，右側(cè)在界面滾動(dòng)到一定位置時(shí)顯示，點(diǎn)擊直接放回到頂部。其實(shí)也可以左右兩側(cè)做在一起的，只是我覺(jué)得不好看就放右側(cè)了。

下面開(kāi)始講解步驟，解剖整一個(gè)制作流程。

一、準(zhǔn)備元件

首先制作我們的界面，還有排版 … 我們需要在每一塊需要填寫(xiě)的內(nèi)容，以及在每一個(gè)模塊的背景上做一個(gè)命名用于后面做點(diǎn)擊側(cè)邊欄頁(yè)面跟隨。

這一步需要完成幾個(gè)點(diǎn)：

1. 界面設(shè)計(jì)排版（標(biāo)題、關(guān)于本人、自我介紹、優(yōu)勢(shì)特長(zhǎng)、工作經(jīng)驗(yàn)、所做項(xiàng)目、教育/培訓(xùn)經(jīng)歷）
2. 模塊背景命名（用戶(hù)后面做側(cè)邊欄點(diǎn)擊滾動(dòng)的設(shè)置）

第二步我們把一些需要把第一個(gè)板塊隱藏起來(lái)的內(nèi)容給畫(huà)好，這里可以放你自己的微信二維碼、手機(jī)號(hào)碼之類(lèi)的聯(lián)系方式。

這一步需要完成幾個(gè)點(diǎn)：

添加聯(lián)系方式（二維碼、微信、QQ、微博 …）

把元件畫(huà)好之后就進(jìn)行下一步 ~

二、設(shè)置交互樣式/動(dòng)態(tài)面板

我們把側(cè)邊欄給做一下，這里我們需要畫(huà)一個(gè)小矩形，然后我們把相對(duì)應(yīng)的圖標(biāo)放進(jìn)去，還有在右側(cè)放一個(gè)標(biāo)識(shí)如下圖。

這一步需要完成幾個(gè)點(diǎn)：

1. 畫(huà)矩形；
2. 添加圖標(biāo)；
3. 文字標(biāo)識(shí)。

上面就說(shuō)了左側(cè)欄的步驟，右側(cè)欄只要按照同樣的邏輯走即可，就不一一簡(jiǎn)述了。

三、設(shè)置交互用例

第一步，把界面第一個(gè)模塊右上角二維碼做一個(gè)點(diǎn)擊顯示的效果，我直接放設(shè)置交互用例：

效果也看一下：

第二步設(shè)置左側(cè)欄交互用例如下圖，鼠標(biāo)單擊時(shí)則跳轉(zhuǎn)至某個(gè)模塊、鼠標(biāo)移入移出的用例。在這里簡(jiǎn)單說(shuō)明一下：因?yàn)槭亲约阂荒昵岸嗟暮?jiǎn)歷，有些效果沒(méi)有簡(jiǎn)化可能會(huì)比較復(fù)雜一點(diǎn)。如果小伙伴有更好更簡(jiǎn)單的方式實(shí)現(xiàn)這個(gè)效果，那是最好的。右側(cè)的制作步驟一樣，位置換一換就可以了，這里不重新講解。

這一步需要完成幾個(gè)點(diǎn)：

1. 設(shè)置鼠標(biāo)單擊時(shí)的交互用例；
2. 鼠標(biāo)移入移出時(shí)的交互用例。

再來(lái)看一下效果：

基本上的制作已經(jīng)做完啦，下面可以看看其他進(jìn)階操作。

四、進(jìn)階

我們?cè)陧?yè)面的空白處設(shè)置窗口滾動(dòng)時(shí)，當(dāng)瀏覽窗口 Y 軸滑動(dòng)的值大于500時(shí)，顯示左側(cè)欄；當(dāng)瀏覽窗口 Y 軸滑動(dòng)的值大于1000時(shí)，顯示右側(cè)欄；否則將隱藏左/右側(cè)欄。

根據(jù)以上的設(shè)置，就可以展示出文章上下滾動(dòng)時(shí)，側(cè)邊欄顯示/隱藏的效果了。

如果有想要 Axure 源文件、有什么想要內(nèi)容想要我以教程的形式寫(xiě)出來(lái)的的小伙伴可以私信我~

end

#專(zhuān)欄作家#

Donny，微信公眾號(hào)：UE_diary，人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。工作兩年多的產(chǎn)品交互設(shè)計(jì)師，不定分享一些產(chǎn)品交互細(xì)節(jié)。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議