Axure 教程:用 Axure 製作個人簡歷

這次我找了我之前用 Axure 做的一個簡歷,給大家做一個分享。簡歷較為簡約,可以自行添加內容。這個我之前在面試的時候有用過,對於產品經理、交互設計師……當你用這個 Axure 做簡歷用時,別人一下子就知道你 Axure 基礎不錯,些許可以加點印象分。

Axure 教程:用 Axure 制作个人简历

點擊鏈接觀看:https://4hkorl.axshare.com 或者看看下面的 Gif 圖:

Axure 教程:用 Axure 制作个人简历

做這個的由來:之前都是用 word 、PPT 的方式做簡歷,在一段期間內比較閒,所以就想用 Axure 的方式做一個簡歷,因為 Axure 是產品經理、交互設計師經常用到的軟件(也不是說必須用到,可以用其他原型製作軟件),所以想著這麼做一個簡歷,是否可以讓面試官眼前一亮呢?

(說不定還是加分項)後面我自己做了一個之後,然後又做出一個模板出來,讓覺得我這個模板可以用的小夥伴們使用,自己也有點成就感。

簡歷採用瀑布流,多模塊的方式製作。頂部添加個人的聯繫方式,左側採用類似電商網站的側邊導航,這樣可以在別人第一次看你簡歷的時候,有一個“全局”導航可切換觀看不同的內容,右側在界面滾動到一定位置時顯示,點擊直接放回到頂部。其實也可以左右兩側做在一起的,只是我覺得不好看就放右側了。

下面開始講解步驟,解剖整一個製作流程。

一、準備元件

首先製作我們的界面,還有排版 … 我們需要在每一塊需要填寫的內容,以及在每一個模塊的背景上做一個命名用於後面做點擊側邊欄頁面跟隨。

這一步需要完成幾個點:

  1. 界面設計排版(標題、關於本人、自我介紹、優勢特長、工作經驗、所做項目、教育/培訓經歷)
  2. 模塊背景命名(用戶後面做側邊欄點擊滾動的設置)
Axure 教程:用 Axure 制作个人简历

第二步我們把一些需要把第一個板塊隱藏起來的內容給畫好,這裡可以放你自己的微信二維碼、手機號碼之類的聯繫方式。

這一步需要完成幾個點:

添加聯繫方式(二維碼、微信、QQ、微博 …)

Axure 教程:用 Axure 制作个人简历

把元件畫好之後就進行下一步 ~

二、設置交互樣式/動態面板

我們把側邊欄給做一下,這裡我們需要畫一個小矩形,然後我們把相對應的圖標放進去,還有在右側放一個標識如下圖。

這一步需要完成幾個點:

  1. 畫矩形;
  2. 添加圖標;
  3. 文字標識。
Axure 教程:用 Axure 制作个人简历

上面就說了左側欄的步驟,右側欄只要按照同樣的邏輯走即可,就不一一簡述了。

三、設置交互用例

第一步,把界面第一個模塊右上角二維碼做一個點擊顯示的效果,我直接放設置交互用例:

Axure 教程:用 Axure 制作个人简历

效果也看一下:

Axure 教程:用 Axure 制作个人简历

第二步設置左側欄交互用例如下圖,鼠標單擊時則跳轉至某個模塊、鼠標移入移出的用例。在這裡簡單說明一下:因為是自己一年前多的簡歷,有些效果沒有簡化可能會比較複雜一點。如果小夥伴有更好更簡單的方式實現這個效果,那是最好的。右側的製作步驟一樣,位置換一換就可以了,這裡不重新講解。

這一步需要完成幾個點:

  1. 設置鼠標單擊時的交互用例;
  2. 鼠標移入移出時的交互用例。
Axure 教程:用 Axure 制作个人简历

再來看一下效果:

Axure 教程:用 Axure 制作个人简历

基本上的製作已經做完啦,下面可以看看其他進階操作。

四、進階

我們在頁面的空白處設置窗口滾動時,當瀏覽窗口 Y 軸滑動的值大於500時,顯示左側欄;當瀏覽窗口 Y 軸滑動的值大於1000時,顯示右側欄;否則將隱藏左/右側欄。

Axure 教程:用 Axure 制作个人简历

根據以上的設置,就可以展示出文章上下滾動時,側邊欄顯示/隱藏的效果了。

如果有想要 Axure 源文件、有什麼想要內容想要我以教程的形式寫出來的的小夥伴可以私信我~

end

#專欄作家#

Donny,微信公眾號:UE_diary,人人都是產品經理專欄作家。工作兩年多的產品交互設計師,不定分享一些產品交互細節。

題圖來自Unsplash,基於CC0協議


分享到:


相關文章: