編輯推薦：絕對是打開新思路的一篇分享！「即時設(shè)計」這款國產(chǎn)在線設(shè)計工具的熱度越來越高，在不久地將來勢必會成為更多 UI 設(shè)計師的主力工具，和本地工具相比，云端存儲、多人實時協(xié)作，團(tuán)隊一站式交付，還有上次提到的一鍵使用在線設(shè)計資源等等，都是它所具備的優(yōu)勢。

而這次，又為大家?guī)砹颂厥獾摹冈诰€可交互作品集」制作方法，而且不占空間，隨時修改……相信會讓你對這款工具產(chǎn)生更不一樣的看法~

「即時設(shè)計」官網(wǎng)地址： https://js.design

分享了那么多作品集案例、點(diǎn)評、包裝的經(jīng)驗，這次準(zhǔn)備說點(diǎn)不一樣的，大綱如下：

1. 作品集的意義
2. 常見作品集形式
3. 新的作品集形式
4. 如何制作我的新型作品集
5. 總結(jié)

作品集的意義

作品集永遠(yuǎn)是能最直觀地體現(xiàn)設(shè)計師個人能力和審美的東西，而且它不僅可以作為我們對自己創(chuàng)作和成長的總結(jié)，更是面試時他人對我們進(jìn)行評判的重要依據(jù)。

所以，一份足夠優(yōu)秀，足夠新穎的作品集，對于每一個設(shè)計師來說都非常重要，他可能決定著我們機(jī)會的多少，也可能決定著我們的工資……

想知道如何讓作品集更優(yōu)秀的話，可以直接從以往的相關(guān)文章借鑒經(jīng)驗，而如果想試著讓我們的作品集變得更新穎，更與眾不同的話，就跟我一起往下看吧~

常見作品集形式

1. PDF

應(yīng)該是目前最普遍的形式，沒有字體和兼容問題，對于偏向圖文展示的設(shè)計師來說基本夠用，不過也只能滿足縱向瀏覽的靜態(tài)圖文了，而且需要發(fā)送文件，控制文件大小也是個很頭痛的事情；

2. 設(shè)計網(wǎng)站個人主頁

很多設(shè)計師也會通過分享自己在各大設(shè)計類網(wǎng)站的個人主頁地址的形式展示作品，這樣優(yōu)勢是可以直接一個鏈接搞定，不用考慮文件大小，但實際內(nèi)容要么和 PDF 類似地整理在同一個頁面，要么就需要他人反復(fù)跳轉(zhuǎn)加載新頁面來查看；

3. 個人網(wǎng)站

一種比較理想的形式，既具備了鏈接優(yōu)勢，又可以不局限于圖文，完整地按照自己的思路整理作品甚至演示交互，但是有一定的開發(fā)難度和維護(hù)成本，對設(shè)計師的綜合能力要求較高。

與眾不同的在線作品集

當(dāng)然，形式是一方面，一個合格的面試官也絕對不會只因為形式就拒絕一位優(yōu)秀的設(shè)計師，但是如果每天要篩選成百上千份簡歷和作品集的話，瀏覽體驗和展示效果必然還是會有不小的影響。

接下來，就為大家打開思路，為什么我們不能找一種方式，既能保證我們的內(nèi)容展示，又能不局限于文件大小和圖文效果，同時還不需要進(jìn)行過多額外工作，來展示我們的作品集呢？

沒錯，我還真找到了這么一種不但滿足以上優(yōu)點(diǎn)，還非常新穎的作品集展現(xiàn)形式——即時設(shè)計。

上次安利它的時候就已經(jīng)有想法了，后來去實際測試了一番，發(fā)現(xiàn)它的功能意外地非常適合做這個事情，而且最終實現(xiàn)的效果相當(dāng)不錯，所以決定給大家好好分享一下，怎么？已經(jīng)有點(diǎn)好奇了？那就來看下吧：

1. 在線作品集，云端存儲分享

首先，作為一款在線 UI 設(shè)計工具，即時設(shè)計可以將我們的作品完整地存在云端，直接通過鏈接的形式分享出去，他人便能查看到你想展示的全部內(nèi)容，完全沒有文件大小限制。

2. 工具和內(nèi)容一體，展現(xiàn)形式多樣

當(dāng)作品集本身和作品集的制作、瀏覽、演示都在設(shè)計工具之中時，我們可展現(xiàn)的部分必定會更多，形式也自然與以往有很大不同。

1）圖文

如果你依然需要常規(guī) PDF 形式的圖文內(nèi)容做介紹，那沒有任何問題，就像我們在 Sketch 上做 PPT 做一樣，即時設(shè)計也可以非常輕松地搞定圖文排版。

而且相比 PDF 文檔，在無限畫布的設(shè)計工具中，也不再局限于單一的縱向瀏覽，排版形式更加豐富，既可以直接全局瀏覽查看整體效果，還能自由縮放移動聚焦感興趣的信息。

2）圖文+設(shè)計稿

除了圖文，還可以利用設(shè)計工具的特性做出更多花樣，比如圖文和設(shè)計稿結(jié)合，提高作品集的真實性和說服力，每個設(shè)計師按照場景進(jìn)行不同的組合排列，肯定會產(chǎn)生與普通圖文差異更大的效果。

3）交互稿

不止設(shè)計稿，即時設(shè)計同樣還支持原型交互，所以你完全可以用這種比線框圖直觀數(shù)倍的方式展示你的邏輯性和對交互的理解程度，當(dāng)然，兩者結(jié)合也 OK。

另外，你還可以利用它的智能動畫功能，在演示完整交互的同時展現(xiàn)你的動效創(chuàng)作能力，并允許他人直接在線預(yù)覽和操作。

4）模擬真實網(wǎng)站

在簡單的交互展示上更進(jìn)一步，通過即時設(shè)計強(qiáng)大的原型功能，給設(shè)計好的網(wǎng)頁加入各種點(diǎn)擊、懸停、拖拽事件，我們甚至能完全模擬出一個真實的網(wǎng)站，每個動效，每個頁面的跳轉(zhuǎn)，每個彈層、浮窗，包括外鏈，幾乎可以以假亂真。

3. 功能全面，制作維護(hù)成本低

剛剛提到了即時設(shè)計的原型功能，事件全，還有智能動畫，滿足大多數(shù)交互和動效需求，而設(shè)計功能也是相當(dāng)完整，基本跟 Sketch、XD 和 Figma 一致，加上本土化的優(yōu)勢，讓你使用起來幾乎沒有門檻甚至更容易上手，所以平時創(chuàng)作的任何內(nèi)容，都可以在即時設(shè)計上快速完成并進(jìn)行編輯維護(hù)。

如何制作我的第一份在線作品集？

好了，既然已經(jīng)看到這里，那想來你一定已經(jīng)對這種作品集的形式產(chǎn)生了濃厚的興趣，可能也忍不住要把作品集放上去感受下了吧？

當(dāng)然，這些都是我用小伙伴的作品和官方資源做的一些簡單演示和總結(jié)，以展示為主，與真正的作品集依然有很大區(qū)別，那介紹完形式，下面我會繼續(xù)從制作方法和相關(guān)功能方面分享一下，相信各位在看完后，絕對能憑借著自己的作品和創(chuàng)造力，打造出足夠驚艷的線上作品集。

1. 作品導(dǎo)入上傳

第一步不用說，自然是把自己以往的作品上傳到云端了，或者也可以從零開始。

對于 UI 的設(shè)計師來說，最多的應(yīng)該就是 Sketch 或者 XD 格式的文件，而即時設(shè)計同時支持了這兩種格式，你可以直接導(dǎo)入到里面進(jìn)行編輯和調(diào)整，非常方便。

如果你還有 PS 文件的話，可以先通過 XD 打開，保存為 XD 文件后再進(jìn)行導(dǎo)入；其他的像 C4D 這種文件就算了，還是當(dāng)成圖片用吧……

2. 作品整理

要將不同作品整理到一起，直接復(fù)制粘貼即可。

你可以根據(jù)自己的需求，把不同類型的作品集分文件整理，也可以整合到一個文件里，但是建議分頁面管理，盡量不要把所有作品都堆在同一個頁面。

3. 文本超鏈接

整理好作品后，我們可以將自己常規(guī)的作品集介紹放在首頁做一個完整的展示，最優(yōu)秀的作品也可以選擇放在首頁做好排版，如果要跳轉(zhuǎn)其他作品的話，就可以通過即時設(shè)計的文本超鏈接功能來完成了。

這是一個非常實用的功能，它不是簡單地跳轉(zhuǎn)外鏈，而是可以一鍵跳轉(zhuǎn)到設(shè)計稿中的任意一個頁面甚至單個畫板。

只要在頁面或者畫板處右鍵，復(fù)制鏈接，并添加到文本的超鏈中，就能實現(xiàn)在文件內(nèi)或不同文件之間的跳轉(zhuǎn)，也可以用來跳轉(zhuǎn)預(yù)覽頁面，直接進(jìn)行交互動效演示。

4. 排版優(yōu)化和動效

即時設(shè)計已經(jīng)支持了很多進(jìn)階的功能，讓我們可以更方便地優(yōu)化內(nèi)容排版并對作品集進(jìn)行動效加持：

• 「自動布局」，可以用在自適應(yīng)的圖文、列表、卡片中，既能快速保證不同內(nèi)容的對齊，還能大幅減少后續(xù)排版調(diào)整和設(shè)計稿維護(hù)修改時的手動操作；
• 「變體」，將已有的引用組件整理成變體之后，不僅在維護(hù)設(shè)計稿時可以更快速地一鍵切換組件狀態(tài)，在實現(xiàn)組件間的交互時對效率的提升也尤為明顯；
• 「智能動畫」，除了前面比較簡易的交互動效外，還可以將它自動補(bǔ)間的特性用在更為細(xì)節(jié)的內(nèi)容如 LOGO、圖標(biāo)、Loading 等動效展示上，提高作品集的精致度。

5. 字體授權(quán)

字體，在作品集里的作用顯而易見，正是它讓設(shè)計師選擇了 PDF 而不是 PPT，所以當(dāng)用設(shè)計工具來承載作品集時，必然也躲不開字體問題，盡管自帶了數(shù)十款云端字體，但對于大量的文字內(nèi)容來說，肯定還是無法滿足的~

而即時設(shè)計完美地解決了這個問題，不管我們想用什么字體，都可以通過「導(dǎo)入本地字體」并「授權(quán)」給作品集文件的方式實現(xiàn)，讓所有查看作品集的人都能正常顯示任意文本，完全不用考慮對方電腦里有沒有某個字體！

上次講資源的時候就已經(jīng)提到了，即時設(shè)計同時滿足本地、云端、個人導(dǎo)入三種字體使用方案，這也是即時設(shè)計最特殊的優(yōu)勢之一。

6. 在線資源

在豐富我們的作品集時，也可以嘗試?yán)孟录磿r設(shè)計資源廣場里的大量設(shè)計資源，不管是參考作品模板、畫線框圖，還是使用樣機(jī)模型，都能提供不小的便利。

至于這些資源具體怎么用，可以看上一篇分享：《值得收藏！一套你從沒見過的在線資源使用方法》

7. 實時更新同步

線上作品集還有一個優(yōu)勢，就是實時更新。

這也意味著，如果你在簡歷和作品集郵件已經(jīng)發(fā)出去之后，突然想要補(bǔ)充或調(diào)整，可以直接在即時設(shè)計中完成，所有的修改都會實時同步到云端，保證對方隨時看到的都是最新的內(nèi)容，這一點(diǎn)也是 PDF 做不到的。

8. 導(dǎo)出 PDF

誒~ 沒想到吧？！繞了一圈又回來了。

即時設(shè)計已經(jīng)支持了導(dǎo)出 PDF，所以就算你在里面做完了各種炫酷的作品集之后，遇到?jīng)]辦法使用或者不方便用的情況，依然可以通過導(dǎo)出最為常規(guī)的 PDF 文件來投遞簡歷，怎么樣，是不是很周到？

總結(jié)

好了，以上就是今天分享的最新形式的作品集內(nèi)容，如果你能看到最后，那相信不管你會不會用這樣的作品集去面試，一定已經(jīng)收獲了不少新的作品集思路或者對「即時設(shè)計」這款新工具的不同認(rèn)知和理解，可以預(yù)見的是，它還有很多有待我們挖掘的可能性。

最后，希望大家都可以做出更優(yōu)秀的作品集，找到更適合自己的工作~

「即時設(shè)計」官網(wǎng)地址： https://js.design

歡迎關(guān)注作者微信公眾號：「菜心設(shè)計鋪」