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

而這次，又為大家帶來了特殊的「在線可交互作品集」制作方法，而且不占空間，隨時修改……相信會讓你對這款工具產生更不一樣的看法~

「即時設計」官網地址： https://js.design

分享了那么多作品集案例、點評、包裝的經驗，這次準備說點不一樣的，大綱如下：

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

作品集的意義

作品集永遠是能最直觀地體現設計師個人能力和審美的東西，而且它不僅可以作為我們對自己創作和成長的總結，更是面試時他人對我們進行評判的重要依據。

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

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

常見作品集形式

1. PDF

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

2. 設計網站個人主頁

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

3. 個人網站

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

與眾不同的在線作品集

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

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

沒錯，我還真找到了這么一種不但滿足以上優點，還非常新穎的作品集展現形式——即時設計。

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

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

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

2. 工具和內容一體，展現形式多樣

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

1）圖文

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

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

2）圖文+設計稿

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

3）交互稿

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

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

4）模擬真實網站

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

3. 功能全面，制作維護成本低

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

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

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

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

1. 作品導入上傳

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

對于 UI 的設計師來說，最多的應該就是 Sketch 或者 XD 格式的文件，而即時設計同時支持了這兩種格式，你可以直接導入到里面進行編輯和調整，非常方便。

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

2. 作品整理

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

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

3. 文本超鏈接

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

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

只要在頁面或者畫板處右鍵，復制鏈接，并添加到文本的超鏈中，就能實現在文件內或不同文件之間的跳轉，也可以用來跳轉預覽頁面，直接進行交互動效演示。

4. 排版優化和動效

即時設計已經支持了很多進階的功能，讓我們可以更方便地優化內容排版并對作品集進行動效加持：

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

5. 字體授權

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

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

上次講資源的時候就已經提到了，即時設計同時滿足本地、云端、個人導入三種字體使用方案，這也是即時設計最特殊的優勢之一。

6. 在線資源

在豐富我們的作品集時，也可以嘗試利用下即時設計資源廣場里的大量設計資源，不管是參考作品模板、畫線框圖，還是使用樣機模型，都能提供不小的便利。

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

7. 實時更新同步

線上作品集還有一個優勢，就是實時更新。

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

8. 導出 PDF

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

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

總結

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

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

「即時設計」官網地址： https://js.design

歡迎關注作者微信公眾號：「菜心設計鋪」