前言

眾所周知，設(shè)計師求職一般都要準(zhǔn)備一份個人簡歷+一份 PDF 作品集。不過在 LinkedIn 上可以發(fā)現(xiàn)國外的設(shè)計師求職很多都是分享自己的個人網(wǎng)站。

關(guān)于求職的成功率，絕大部分應(yīng)該在于作品集本身的質(zhì)量以及面試時設(shè)計師展現(xiàn)的個人技能和崗位要求之間的匹配度。

本文僅分享如何將原本投遞的靜態(tài) PDF 作品集升級為通過 Figma 制作成動態(tài)可交互作品集并通過個人域名網(wǎng)站的投遞技巧方面進(jìn)行分享，屬于附屬加分項。

PS：在文末會分享：【Figma 簡歷模板】和【Figma 可交互作品集模板】～

投遞作品集常見問題

設(shè)計師求職找工作的時候，投遞作品集是一個必須的選項。在投遞作品集的過程中，想必經(jīng)常會遇到以下問題：

作品集文件太大

很多同學(xué)做作品集的時候“框框”一頓做，導(dǎo)出的時候卻發(fā)現(xiàn)文件高達(dá)幾十上百 M 。準(zhǔn)備上傳到招聘平臺時，發(fā)現(xiàn)招聘平臺最多僅支持 20M。 BOSS 直聘和拉勾的作品集文件大小限制都為 20 M。

于是不得不對自己的作品集進(jìn)行壓縮，壓縮壓縮，使用了各種壓縮工具，最終終于將作品集壓縮到了 20 M以下投遞給公司，結(jié)果面試官打開一看完全模糊了，很多設(shè)計細(xì)節(jié)都看不清楚，進(jìn)而對設(shè)計師的能力產(chǎn)生質(zhì)疑，自己的作品集連最基本的清晰都做不到，又怎么放心能把產(chǎn)品設(shè)計得更好呢。

作品集更新迭代

當(dāng)我們通過招聘平臺投遞自己的 PDF 之后，如果后面突然發(fā)現(xiàn)有一些重要的細(xì)節(jié)需要修改調(diào)整，除非再次投遞，否則無法修改優(yōu)化。但再次投遞涉及到新舊 PDF 的文件替換，操作起來不是很便捷。并且如果是在一些公司的官網(wǎng)進(jìn)行投遞，很多時候是不允許再次投遞的，也就意味著面試官只會看到你之前投遞過的的作品集，如果掛了，可能就要等半年之后才允許再次投遞。

作品集無法展示動效

眾所周知，PDF 只能置入靜態(tài)圖片，沒辦法置入動態(tài)的 Gif 效果圖，那么就很難直接通過 PDF 來展示自己的交互動效能力，可以嘗試通過展示靜態(tài) AE 軟件制作過程截圖、靜幀畫面合集或者添加外部鏈接來展示，但總的來說并不能很直觀便捷地查看到交互動效。

作品集保密風(fēng)險

對于一些做 To B 或 To G 項目的同學(xué)而言，有一些項目涉及保密信息，不方便放作品集對外展示?；蛘哂袝r候自己的作品集需要放一些帶有保密性質(zhì)的工作文檔進(jìn)行展示。如果是 PDF 投遞的方式，PDF 很容易被復(fù)制本地化保存后帶來不可控的傳播，存在一定的泄密風(fēng)險。

作品集查看情況

在通過 BOSS 直聘、拉勾或公司招聘官網(wǎng)投遞了簡歷&作品集之后，有些時候 HR 進(jìn)行第一輪篩選的時候，可能會通過學(xué)歷、年齡、工作背景來篩選掉一部分人，這一部分可能是面試官壓根就沒有打開作品集看過的，但是作為求職者，并不能掌握自己的作品集是否真正被用人部門打開查看過的情況。如果是因為其他簡歷硬性條件掛了，可能再怎么優(yōu)化作品集也沒有辦法通過常規(guī)的投遞到面試官跟前。還有的時候 HR 可能為了刷 KPI 叫候選人去面試，作品集壓根沒有被打開過，這時我們在面試前可以提前和 HR 確認(rèn)用人部門是否已經(jīng)看過自己的簡歷和作品集，避免白跑一趟。

通過個站投遞的優(yōu)勢

接下來分享一些通過個人網(wǎng)站投遞作品集相對 PDF 投遞而言的一些優(yōu)勢。

文件再大都不怕

通過個人網(wǎng)站投遞作品集，只要有網(wǎng)絡(luò)便能夠打開，即使要展示的內(nèi)容很多，也不會因為 PDF 文件太大而無法上傳而導(dǎo)致的尷尬。并且通過鏈接打開的作品集都是高清的，不需要對作品集做一些過度的壓縮。通過網(wǎng)站投遞的作品集也可以做一些交互跳轉(zhuǎn)，不一定需要像 PDF 一頁一頁往下翻頁才能看全。面試官可以在任意頁面跳轉(zhuǎn)到其他感興趣的頁面進(jìn)行查看。

隨時更新迭代

作品集可以當(dāng)作是設(shè)計師的一個敏捷迭代的產(chǎn)品，起初我們大概制作了 1.0 版本其實就可以投遞一些小公司，通過面試來尋找面試官對個人和作品集的評價與反饋，再根據(jù)收集的反饋一步一步迭代到 2.0、3.0版本。在每一次更新迭代的過程中，通過鏈接都能夠?qū)崟r更新。設(shè)想一個場景，假設(shè)今天面試 A 公司，明天面試 B 公司。在今天面試 A 公司時，面試官給到了一些很有價值的反饋，這時候可以立即更新到自己的作品集當(dāng)中進(jìn)行迭代。明天面試官再打開你的作品集鏈接的時候，就已經(jīng)是最新版本，面試官也能夠從側(cè)面感知到候選人對作品集的鉆研精神。

展示交互動效

通過 Figma 制作作品集可以通過兩種方式展示交互動效能力。一是最簡單的直接直接插入 Gif 格式的動圖，在預(yù)覽播放時，就能直接展示動態(tài)效果。二是通過 Figma 的 Smart animate 功能直接制作交互動效，并且給以添加相應(yīng)的懸停、點擊等交互效果，能夠更加真實的展示交互動效能力。文章后面會給大家具體介紹 Smart animate 功能的使用。

應(yīng)對保密風(fēng)險

當(dāng)我們在求職過程中發(fā)現(xiàn)作品集有特殊情況時，可以隨時關(guān)閉后臺的鏈接訪問?；蛘弋?dāng)我們已經(jīng)成功入職新公司時，也可以隨時關(guān)閉自己的作品集鏈接訪問。可以讓自 己作品集鏈接的可訪問性隨時掌控在自己手中。同時通過鏈接投遞的作品集也能在一定程度上防止作品集被盜用，F(xiàn)igma 、在線文檔都有相應(yīng)的防復(fù)制拷貝的權(quán)限的功能。

查看記錄報表

個人注冊的域名可以通過第三方工具【小碼短鏈接】添加自定義域名的形式管理自己的域名。例如我注冊了一個域名叫 abc.com。通過這個工具可以自定義域名后綴同時定向跳轉(zhuǎn)到自定義的鏈接。例如通過 訪問 abc.com/123 即可定向跳轉(zhuǎn)訪問你分享的 Figma 鏈接查看作品集。所有用戶通過 abc.com/123 訪問都可以在 小碼短鏈接 后臺查看到訪問記錄，如下圖所示，這樣我們就能清晰的知道 HR、面試官 有沒有查看你的作品集，一般都在什么時間查看你的作品集，查看你作品集的頻率大概是多少以及通過什么設(shè)備訪問？（側(cè)面便可了解到公司用的是 win還是mac，哈哈）

裝酷

例如你的 ID 叫 Jack，那么可以注冊一個域名叫 jack.com ，更容易被大家記住，同時設(shè)計師有一個自己專屬域名的個人網(wǎng)站，也是一件很酷的事呢～

使用工具生成作品集鏈接

接下來到了落地環(huán)節(jié)，教大家如何將自己的作品集通過鏈接投遞。這里主要分享兩種方式，第一種方式是進(jìn)階版通過 Figma 制作可交互動態(tài)作品集。第二種方式是比較基礎(chǔ)的通過一些在線文檔工具的 PPT 在線編輯分享，后面會給大家分享 騰訊文檔、飛書文檔、石墨文檔、Google Drive 等用來放作品集的差異以及推薦哪一個工具。

Figma 可制作交互作品集

關(guān)于如何使用 Figma 制作可交互作品集，需要提前學(xué)習(xí) Figma 的 Prototype 功能?？梢圆榭次抑胺窒淼囊黄〗坛蹋?a href="http://www.htnj110.cn/detail/609117.html?nopop=1">http://www.htnj110.cn/detail/609117.html?nopop=1

制作好靜態(tài)作品集

在制作動態(tài)可交互作品集之前，首先需要制作好個人靜態(tài)的作品集，這里可以按照常規(guī) PDF 的形式去做，推薦使用 Figma 制作，尺寸推薦 1920*1080，方便瀏覽。

制作全局導(dǎo)航欄

這里分享的可交互作品集的思路是將作品集以網(wǎng)頁的思維方式去做，最基礎(chǔ)的是在任意頁面都能夠自由跳轉(zhuǎn)回到首頁。由于是用于面試的作品集，不做成常見的企業(yè)門戶官網(wǎng)一樣要一直往下滑，而是做成單篇 1920*1080 的尺寸，提高受眾的閱讀效率。

那么接下來就需要給每頁作品集的頂部都添加一個固定的導(dǎo)航欄，以確?？梢匀我忭撁媲袚Q至其他項目或者回到首頁?？赡苊宽撟髌芳猩钌灿袦\色，那么導(dǎo)航欄也可以做深色和亮色背景下的兩個版本。

制作子項的可交互組件

Figma 的組件功能可以運(yùn)用在常規(guī)的圖層樣式上，也可以運(yùn)用在給組件賦予了交互屬性的涂層上，那么我們就可以給全局導(dǎo)航欄的子項增加交互效果，例如可以增加懸停效果。這樣我們在所有的作品集頁面都可以通過鼠標(biāo)懸停來引導(dǎo)受眾這里能夠點擊跳轉(zhuǎn)。

導(dǎo)航欄主組件串聯(lián)項目

接下來我們可以在導(dǎo)航欄的主組件上選中對應(yīng)的「項目一」、「項目二」、「項目三」，將其直接通過 On click 跳轉(zhuǎn)至對應(yīng)項目的介紹頁。將「HOME」跳轉(zhuǎn)至作品集的首頁。通過這樣一個簡單的設(shè)置，我們就能實現(xiàn)在作品集的任意頁面進(jìn)行跳轉(zhuǎn)。對于受眾而言，假設(shè)對作品集的第三個項目比較感興趣，下次再看的時候，就不需要一頁一頁翻到第三個項目，而是直接在作品集中點擊項目三就能夠跳轉(zhuǎn)到項目三對應(yīng)的頁面，提高瀏覽效率。

運(yùn)用 Smart animate 制作頁面過渡

Smart animate 是 Prototype 里的一個非常實用的功能，能夠通過識別圖層結(jié)構(gòu)和同層命名一致的情況下，自動進(jìn)行位置、大小、顏色、旋轉(zhuǎn)等過渡，與 Keynote 的神奇移動效果類似。通過 Smart animate 我們可以給作品集增加很多酷炫的效果，例如我們在數(shù)碼產(chǎn)品發(fā)布會上看到的 PPT， 一定不是一頁一頁靜態(tài)切換，通過 Smart animate 可以給作品集賦予更加有趣的靈魂。同時，通過 Smart animate 效果制作作品集的也能夠側(cè)面表現(xiàn)出候選人在實際工作中是具備制作高保真可交互原型的能力。

舉個例子，下面是從作品集「首頁」到「個人介紹頁」一個簡單的過渡效果，首頁有「樣機(jī)」圖層組，我們只需要將首頁的「樣機(jī)」復(fù)制到「個人介紹頁」，然后移動位置到畫板外面，注意這里移動的時候需要按住「空格」鍵，就能夠使圖層移出了畫板區(qū)域還能夠保證在左側(cè)圖層結(jié)構(gòu)上是屬于「個人介紹頁」下。然后給這兩頁添加一個 On click 交互事件，效果設(shè)置為 Smart animate。點擊預(yù)覽，就能夠看到非常自然的過渡效果。這里是一個簡單的例子，在具體的使用場景中還可以進(jìn)行緩入緩出、時間等屬性設(shè)置來滿足需求。

掃描二維碼動效

接下來分享掃描二維碼動效的制作方式。也是運(yùn)用 Smart animate 的原理，在兩個二維碼之間需要動態(tài)的圖層都使用相同的命名和圖層結(jié)構(gòu)，交互事件互相都設(shè)置為 After delay ，就能夠?qū)崿F(xiàn)掃描二維碼的動態(tài)效果了。具體的演示效果和文件可以在文章末尾處領(lǐng)取。

Figma 分享設(shè)置

最后，我們需要對 Figma 的分享進(jìn)行設(shè)置，選擇 Anyone with the link+can view prototypes only，這樣一來就能夠確保其他人在打開這個鏈接時，只會看到播放預(yù)覽時候?qū)撁?，同時也能夠防止 Figma 源文件被拷貝。

通過在線文檔生成鏈接

接下來分享的一種方式是通過在線文檔生成鏈接，測試了市面上常見的幾款支持插入 PPT 的文檔工具，包括騰訊文檔、飛書文檔、金山文檔、石墨文檔、Google Drive。（語雀由于現(xiàn)在不支持導(dǎo)入 PPT ，暫不列入）

測試的方式為通過在線文檔新建 PPT 然后通過圖片導(dǎo)入的進(jìn)行插入，同時也測試了對于 Gif 動圖的兼容性。測試的版本版本均為「免費版」。以下附上簡單的測試總結(jié)。

最終的結(jié)論是：在使用 PPT 分享作品集的場景當(dāng)中，推薦使用「騰訊文檔」。

域名注冊和定向轉(zhuǎn)發(fā)

通過上面的方法得到了鏈接之后，其實直接通過 Figma 鏈接或者在線文檔鏈接分享也能夠?qū)崿F(xiàn)通過鏈接訪問作品集的效果。但是直接生成的鏈接是比較長的，一些招聘平臺很可能會屏蔽。例如之前就測試過 BOSS 直聘的常用語當(dāng)中會屏蔽 騰訊文檔的分享鏈接。

接下來就給大家分享怎么樣注冊一個自己的域名，并且不需要學(xué)習(xí)前端知識自己寫網(wǎng)頁，無需高深的域名知識，就能夠通過自己的域名訪問事先準(zhǔn)備好的作品集鏈接當(dāng)中，并且通過第三方工具綁定托管域名，還能夠自定義編輯域名后綴，和查看域名被訪問的記錄等。

阿里云注冊域名（收費）

網(wǎng)址：https://wanwang.aliyun.com/

輸入域名，選擇后綴

輸入想要注冊的域名，可以是自己的英文名，例如這里輸入 bobbyl，然后選擇域名后綴。關(guān)于域名后綴的選擇，大部分同學(xué)常見的應(yīng)該是 .com 域名，但是我們實際注冊的時候會發(fā)現(xiàn)很多 .com 域名已經(jīng)被注冊過了，或者說費用比較高。這里推薦各位設(shè)計師可以嘗試注冊 .design 域名，比較符合設(shè)計師的氣質(zhì)，并且相比 .com 域名而言，費用也低了不少。

域名解析

注冊完成之后，就能在自己的域名列表里面看到剛剛注冊好的域名，這里點擊域名【解析】，頁面暫時先不關(guān)，后面會用到。

小碼短鏈接注冊

打開網(wǎng)站 https://xiaomark.com/ ，根據(jù)提示注冊一個賬號之后。點擊頂部的自定義域名-立即綁定域名。再輸入剛剛在阿里云注冊好的個人域名點擊綁定。

最后網(wǎng)站會反饋一個 CNAME 記錄類型，將記錄值復(fù)制下來，準(zhǔn)備粘貼到阿里云域名后臺。

域名解析 CNAME 記錄值

點擊添加記錄，選擇 CNAME，然后在主機(jī)記錄處粘貼剛剛在小碼短鏈接復(fù)制的記錄值即可。

創(chuàng)建短鏈

在小碼短鏈接找到我的空間，點擊創(chuàng)建短鏈，跳轉(zhuǎn)鏈接輸入已經(jīng)準(zhǔn)備好的 Figma 鏈接或在線文檔鏈接，然后可以自定義后綴。這里演示一下我要跳轉(zhuǎn)的鏈接是我個人的語雀主頁：https://www.yuque.com/bobbyhe。輸入短鏈域名的后綴是 blog，點擊確認(rèn)。之后我就可以通過訪問 http://bobbyhe.design/blog 來打開我的語雀主頁。同理，我們只需要在「跳轉(zhuǎn)鏈接」處輸入自己前面準(zhǔn)備好的 Figma 鏈接。

Freenom 注冊域名（免費）

接下來分享一個注冊免費域名的方法。不花一分錢獲得一個永久免費的域名，5分鐘讓你快速擁有一個頂級的免費域名。

首先我們進(jìn)入官網(wǎng)：http://freenom.com，這是一個國外的域名服務(wù)商，如果不靠提供免費域名，可能很難和Godaddy，Namesilo等頂級域名服務(wù)商競爭，目前 Freenom 也提供了付費的域名，com 域名售價8.38美元/年。

輸入域名

方法也很簡單，首先可以注冊一個賬號或者使用 Google 登錄，就直接在搜索框輸入自己想要的域名。然后選擇想要的域名后綴，再點擊 「Checkout」

選擇有效期

如下圖，我一下子加入了一個域名到購物車?yán)锩?，有效期選擇了 12 個月，然后點擊 「Continue」。這里注意默認(rèn)的有效期限是 3 個月，需要自己手動選擇 12 個月。（能多白嫖就多白嫖，哈哈）到期后也不用慌，可以再次免費續(xù)期。

0 元付款

最后進(jìn)入付款頁面，0 元良心價！點擊「Complete Order」即可成功注冊。

域名管理

然后進(jìn)入「My Domains」我的域名管理，找到剛剛注冊的域名，點擊「Manage Domain」 

URL 轉(zhuǎn)發(fā)

找到 「Management Tools」下的「URL Forwarding」，然后「URL Forwarding」處輸入自己準(zhǔn)備好的作品集鏈接，例如我在這里輸入的是我的語雀主頁鏈接 https://www.yuque.com/bobbyhe，在「Forward mode」處選擇「Frame (cloaking) (default) 」，大概等個1～2分鐘，就能通過前面注冊好的 bobbyued.tk 訪問自己設(shè)置的目標(biāo)網(wǎng)站了。

其他投遞技巧

使用 Figma 制作簡歷

上面講了如何使用 Figma 制作可交互作品集，其實制作個人簡歷也完全可以使用 Figma 制作。只要熟悉 Figma 的基礎(chǔ)操作，做一個 A4 的簡歷完全灑灑水。支持插入超鏈接并導(dǎo)出 PDF 。同時在這里分享下方的簡歷模板，有需要的同學(xué)可以在文章末尾領(lǐng)取哦～

將作品鏈接置入簡歷中

上面生成的 短鏈接可以直接置入 PDF 中，并且是鏈接屬性，這樣當(dāng)我們投遞一份 2 M 大小的個人簡歷出去，hr或面試官便能夠直接通過簡歷中的鏈接直接觸達(dá)到我們的作品集，不再需要一次性發(fā)兩個文件了。

簡歷的格式及命名

我見過很多設(shè)計求職者，在給 HR 發(fā)電子版簡歷的時候竟然是一張 JPG 或 PNG 格式的圖片，因為圖片對于設(shè)計師來說更好發(fā)揮。

即便如此，我依然不建議大家用圖片形式，因為在這種格式下你的個人信息是無法被復(fù)制的。

想一想如果 HR 要把你的個人信息錄入到公司系統(tǒng)、或做人才儲備時，每個字都要一個一個的敲，是種什么感覺？

所以我建議個人簡歷盡量保存為 Word、PDF 格式，一方面這兩種格式穩(wěn)定，不會出現(xiàn)亂碼、板面錯位等問題；另一方面是信息可復(fù)制。

說完格式，下面再來說說命名。這也是很多人容易出錯的地方，像 “個人簡歷” 這樣的命名是最讓人頭疼的，幾十份簡歷不點進(jìn)去都不知道誰是誰。

所以我建議大家簡歷命名格式：應(yīng)聘職位 + 工作年限 + 姓名，不管是 HR 還是部門負(fù)責(zé)人看到都是一目了然，給人的感覺也很專業(yè)。

結(jié)語

本文僅從投遞技巧中為大家分享，具體的求職場景中可能也需要隨機(jī)應(yīng)變，并不是固定的。最后希望大家看完后能夠有所收獲，早日找到滿意的崗位，如有疑問可以評論或主頁添加我的聯(lián)系方式進(jìn)行交流。與大家共同進(jìn)步，共勉~~

我是設(shè)計師波波 Bobby He，深耕 B端體驗設(shè)計，持續(xù)學(xué)習(xí)輸出中，歡迎關(guān)注～

資源領(lǐng)取

關(guān)注公眾號【波波設(shè)計室】，發(fā)送【簡歷模板】、【作品集模板】即可領(lǐng)取對應(yīng)的源文件～根據(jù)各平臺規(guī)則編寫內(nèi)容。

公眾號

關(guān)注公眾號【波波設(shè)計室】，發(fā)送【簡歷模板】、【作品集模板】即可領(lǐng)取對應(yīng)的源文件～

簡歷模板 Resume Template

Figma 可交互作品集模板  Portfolio-Prototype

Powered by Froala Editor