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

2020-12-11 人人都是產品經理

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

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

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

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

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

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

一、準備元件

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

這一步需要完成幾個點:

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

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

這一步需要完成幾個點:

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

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

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

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

這一步需要完成幾個點:

  1. 畫矩形;
  2. 添加圖標;
  3. 文字標識。

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

三、設置交互用例

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

效果也看一下:

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

這一步需要完成幾個點:

  1. 設置滑鼠單擊時的交互用例;
  2. 滑鼠移入移出時的交互用例。

再來看一下效果:

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

四、進階

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

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

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

end

#專欄作家#

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

本文原創發布於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

相關焦點

  • Axure 3D教程:製作3D地圖原型(三維世界地圖)
    編輯導語:很多時候我們會用到3D的效果,今天筆者教大家用axure做一個3D的效果,本文以三維世界地圖為案例,簡單的闡述axure製作3D原型的技巧,我們一起來看一下。
  • 用Axure做一個產品需求文檔(PRD)模板
    製作方法簡單,只需要用axure自帶的表格原件,樣式修改的好看一點即可。3. 產品概述這部分主要是介紹產品的背景、功能、價值、架構,以及解決了用戶哪些痛點,以及產品是如何解決這些痛點的。這部分製作也簡單,只需要做文本標籤即可。(2)產品用戶這部分主要介紹一下,該產品的目標用戶。主要可以從以下方面介紹,包括用戶類型,用戶的地區、性別和年齡分布。用戶類型:用axure自帶表格即可製作。
  • Axure教程:原型設計之轉盤抽獎
    這一章就教大家如何使用axure原型工具製作轉盤抽獎原型。效果圖:axure原型設計之轉盤抽獎附件下載:轉盤抽獎rp文件作者:維度,個人博客:http://weidublog.com本文由 @維度 原創發布於人人都是產品經理。未經許可,禁止轉載。
  • 【視頻教學】遊戲策劃視頻教學第三講:Axure如何設計UI
    Axure基礎圖文教學  名詞解釋:  線框圖:一般就是指產品原型,比如:把線框圖儘快畫出來和把原型儘快做出來是一個意思。  axure元件:也叫axure組件或axure部件,系統自帶了一部分最基礎常用的,網上也有很多別人做好的,軟體使用到一定階段可以考慮自己製作元件,以便提高產品原型的製作速度。  生成原型:是指把繪製好的原型通過axure rp生成靜態的html頁面,檢查原型是否正確,同時,方便演示。
  • Axure教程:同一錨點等比例縮放並同時改變內容的效果
    enjoy~相比於用各種變量來做複雜的動態交互,我在這裡分享一種不需要設置變量做出的實用動態交互效果。首先,我們來看一下效果:1.我們都知道,在axure中要想控制變量,一定要把元素轉化成動態面版,而這裡一個點擊動作對應了兩個變量的同時改變,我們先用傳統的方法來試一次看看會出現什麼效果:(1)畫兩個矩形,一個小尺寸(黃色),一個大尺寸(藍色)(2)將黃色的矩形轉化為動態面版(不要忘記命名,這裡將其命名為面版1
  • 有趣的Axure案例:打地鼠遊戲的設計
    一個有趣的實例,通過axure製作一個打地鼠的遊戲,可以進行難度選擇。雖然小遊戲很簡單,但其中用到的axure技能並不簡單,接下來將為大家介紹其製作方法。之前已經發布過一個釣魚的小遊戲《有趣的Axure案例:釣魚遊戲的設計》,該遊戲也有難度的變化等功能,某種程度上講,那一個實例的難度反而要大一些,因為涉及到小魚的往復運動以及自動轉身。
  • Axure教程:banner輪播最簡單的實現方法
    正巧今天看到網站上有教程教如何做一個輪播banner ,點開略看了一下,教程做的很複雜。其實使用axure做交互一般都比較簡單,但由於其各種小窗口太多了,各種截圖放一起,看上去很容易亂。之前小樓老師發布的一個教程,居然也被人吐槽講的這麼亂怎麼做產品(扶額)。原型連結:http://eta1id.axshare.com/1.
  • Axure教程-錨點滾動效果
    今天給大家分享一個axure案例,錨點滾動效果,看到名字,大家可能覺得有些陌生,相信這個效果大家並不陌生,在許多html5,click,hover分別表示正常,點擊,滑鼠移動的狀態,其他的菜單動態面板相應的編輯;3.拖入編輯區4個矩形,並相應命名為菜單1,菜單2 ,菜單3代表所在板塊,在用一個大矩形包含
  • Axure教程:登錄滑動拼圖驗證交互教學
    用戶可以不需要填寫複雜的驗證碼,而是用滑鼠去拖動滑塊便能通過驗證。下面為今日頭條的滑動拼圖驗證,接下來將為大家講解:一、界面元件搭建(教程為axure 8)首先,需要下面這些元件。熱區1和熱區2是用來校驗小圖的位置是否正確,作為左右的重合區間。
  • 玩轉Axure並不難,這5次實操練習,讓你快速做出標準原型
    1、沒人監督指導,自學還沒到一個周,就想放棄2、按教程操作,卻出不了效果,又不知錯在哪裡3、難的知識內容看著費勁,不會技巧,效率低浪費時間推薦起點學院&騰訊課堂聯合打造給產品經理的Axure課程已有2500多位同學學習,學習效果顯著
  • Axure教程:轉盤抽獎交互原型
    本文跟大家分享,如何使用axure製作轉盤抽獎交互原型,不帶登錄流程。次數交互設置:target.text-1,表示用次數(cishu)文本減1。禁用當前元件[開始抽獎]:避免重複單擊按鈕,影響次數文本遞減、以及轉盤重複旋轉。等待10010毫秒:為了能在旋轉結束以後,再出抽獎結果。所以這個時間可以等於或稍大一點旋轉的時間。
  • Axure教程:如何實現頂部tab式導航欄?
    2)設置X、Y的位置先了解一下以下即將用到的函數的含義(以下函數解釋內容來自axure非官方中文網:https://www.axure.com.cn/5068/)This :獲取當前元件對象。點擊fx和fy分別編輯x,y的值,如下圖:其基本語法是用雙方括號包含,變量值和函數用英文句號連接,例如:[[This. width]] 當前元件的寬度。變量值和函數不要拼寫錯誤,大小寫不敏感~y值同理。
  • 墨刀原型設計教程:碾壓axure和mockplus第一次畫原型圖就上手!
    作為一個產品經理或者互動設計師,甚至是一個產品運營,不會畫原型圖簡直會被鄙視,面對市面上的墨刀原型、axure和mockplus,到底哪一款原型設計軟體和服務更好呢?今天就教大家第一次用墨刀原型畫原型圖就上手!最後還有彩蛋哦!
  • Axure高階教程:利用JavaScript製作實時天氣顯示APP
    當大家用Axure製作APP原型時,即使高保真效果也只是在視覺層面上實現了原型效果,但頁面中的數據內容還都只是預先設定好的,例如:使用中繼器、表格等,模擬真實作品。那麼有沒有一種方法,讓我們製作的原型也能獲取到真實數據呢?
  • .| 「有原型作品展示優先考慮」,新人不會Axure原型怎麼拿offer?
    為什麼公司都要求Axure原型,用不好Axure,畫不好原型會有什麼樣的問題?但因為之前沒怎麼用過Axure,大多以粘貼複製為主,頁面邏輯也很亂,被開發吐槽看不懂。她現在每天最擔心的,就是被老大問原型修改的進度情況;還有就是開始自我懷疑,對未來的產品路有些迷茫了。(2)蛋蛋,產品工作2年做產品兩年的蛋蛋,最近遇到一件糟心事。公司來了個新人,應屆畢業生,產品助理崗位。
  • Axure交流分享:根據在表格中自定義的數據生成統計柱狀圖
    因為經常會涉及到統計圖、表格這些東西,一般沒有時間做高保真的情況下,會直接用axure拉幾個框或者貼張圖片簡單製作一個。為了不再被開發哥哥噴,這次就用工作之餘做了一個復用性還算高的統計圖以及數據表格原型。作為一個經常潛水的產品小白,第一次發文章,如有不足之處,還望指正。生成不同的柱狀圖
  • Axure教程:製作一個APP原型,第一步是什麼?
    剛開始製作一個APP的原型時,頁面布局很簡單,狀態切換也不難,預覽時也得到了想要的效果,但是後來卻發現根本沒有把框架搭建好,導致一切都做在了一個頁面裡,嵌套了太多的動態面板。本文記錄下我自己製作APP原型的第一步,希望對於剛接觸Axure的產品小白們有所幫助。
  • Axure教程:如何用Axure實現進棧和遍歷效果
    那些技術們用ppt可以做到的效果,我們用Axure也可以嘗試實現。接下來,我們開始練習吧深度遍歷、棧簡介用Axure實現之前,我們先來學習下深度遍歷和棧的知識: 深度遍歷:深度優先遍歷 沿著樹的深度遍歷結點,儘可能深的搜索樹的分支。