非本科系如何準備UI作品集? 5個必知製作要點分享 - 喬瑟人夫

UI作品集範例. 其他作品可以放入像是單頁的UI設計(如果你有在追Daily UI的話)、Icon設計、插畫設計…等面向，但都要跟網頁UI設計有關係. Skiptocontent(PressEnter) WrittenByJosephPublishedOn2020年5月20日2020年5月18日Category轉職分享轉職設計 前陣子因為擔任公司的面試官角色，因此瀏覽了許多設計師的履歷和作品集，也分享了一篇從面試官角度，如何在初期書審過程中篩選作品集 有興趣的朋友可以去瞭解一下：UI/UX設計師履歷作品集，6個面試官注意的事 在這些履歷當中也發現蠻多設計師是非本科系的背景，有些已經轉職成功並且正要轉換到別間公司發展，有些則是正要尋找第一份UI設計師工作 由於自己也是從理工科背景轉職成為網頁、UI設計師，因此看到這些正要轉職的朋友都會特別關注一下作品集內容 你可能有興趣：自學成為網頁設計師？非本科生設計師的告白(上) 大部分作品集需要加強的比例偏高(有些現職的設計師也是)，近期也很多朋友來信詢問作品集該要準備到什麼程度才能開始去嘗試應徵工作，因此想藉由這篇分享非本科系背景該如何準備作品集、作品集需要有哪些內容 內容目錄 一、作品集準備重點1.已學習的技能/知識2.設計了什麼作品3.設計過程4.花了多久時間完成二、作品集需要有什麼內容1.個人基本資料2.擅長技能簡介3.完整設計作品介紹4.單一面向設計作品5.其他類型作品三、作品集呈現方式1.線上作品集2.電子檔案四、作品集內容加分Tip1.依應徵職務內容調整作品集2.內容精緻更勝於多五、作品集該避免和注意的事情1.避免過於炫技2.個人風格過多3.不要用百分比表示熟悉度4.排版字體避免過多結語 一、作品集準備重點 因為非本科系並沒有設計的學經歷，所以面試官著重關心的是你目前已具備的程度，這些程度是否已足夠讓你可以勝任UI設計師這個職務 所以作品集內容中建議要提及以下幾點： 1.已學習的技能/知識 現在的學習UI設計的管道非常多種，有些朋友透過書籍或線上文章學習知識、有些透過youtube或其他網站學習知識或繪圖軟體，又或者一些朋友會參加線上或線上的設計課程，因此大家的學習程度都會不太一樣 若你能列出學習歷程，一方面可以檢視一下自己學習哪些東西，另一方面可以讓面試官了解到你是如何學習的，範例如下 閱讀學習：「基本設計力：簡單卻效果超群的77原則」書籍，學習平面設計基礎、排版規則、顏色應用…等知識閱讀學習：透過Medium的「AsAProductDesigner」，持續關注閱讀設計師們的設計新知識分享課程學習：Hahow的「AdobeXD/PS—網頁設計與UI教學」線上課程，學習設計工作流程、網頁設計、APP設計，以AdobePhotoshop、AdobeIllustator、AdobeXD軟體進行設計稿製作 2.設計了什麼作品 作品集中你挑選放入的作品數量，也決定了面試官能夠暸解你的程度，所以作品還是必須有一定的數量，讓面試官在面試過程中有更多內容可以和你多聊聊，面試官也很期待你的作品解說 但放入的作品其實不必要很多，大概數量約5個左右即可，作品類型除非你有很偏好哪部分的發展，否則建議最好APP和網頁各有一個完整設計的作品，至於內容具體部分下方會再說明 其他作品可以放入像是單頁的UI設計(如果你有在追DailyUI的話)、Icon設計、插畫設計…等面向，但都要跟網頁UI設計有關係 最後面才會放入非UI設計以外的作品，像是平面設計、LOGO設計、攝影(發現大家都會放攝影作品@@?) 3.設計過程 跟平面設計作品的差別，UI設計作品不僅只是呈現最後的視覺設計稿，更重要的還有設計的目的和過程的呈現，畢竟設計目的本質是解決問題，因此做作品集放入設計目的和發想設計過程的內容就很重要 一個完整的設計作品都應該要提出設計目的、應用場景或解決辦法…等等，這也是在業界工作時會一直要做的事情。

4.花了多久時間完成 其實花多久時間完成一件設計作品，這件事情大部分人不會直接寫在作品集中，但這邊提出是希望大家可以稍微給自己一個時間的限制，來讓自己嘗試在一個固定時間內完成設計 因為在業界每個設計任務一定有時間的限制，因此如何在時間限制中完成就非常重要 另外，因為有固定時間也代表作品可以有固定產出，幫助你不會在作品集上遙遙無期沒有任何產出 二、作品集需要有什麼內容 以下為電子檔呈現的作品集為主 1.個人基本資料 姓名聯絡信箱聯絡電話個人網站連結（建議有會比較好）照片（有親和力的照片還是會加分）自我介紹（簡單描述即可） 2.擅長技能簡介 技能主要有分為兩種面向 軟體應用，例如：Illustrator、Figma、Sketch設計面向，例如：網頁設計、Icon設計、向量插畫 3.完整設計作品介紹 完整介紹的作品，顧名思義是要包裝說明一個你完成的SidePorject設計，不論是自己發想的產品、還是redesign現有的產品，都要從設計目的、實踐過程、驗證設計等過程來作說明，內容主要有以下幾個部分 設計目標 要達成什麼目的要解決的事情目標使用者模樣 設計的思路 功能頁面的規劃（Sitemap/Function）Useflow的操作邏輯Wireframe元素資訊佈局和驗證操作流程 視覺設計 色彩的使用，主、副色的選擇及應用字體的選擇重點功能畫面的視覺刻畫Mockup展示Prototype的模擬操作（有的話是加分的） 響應式的排版變化（針對網頁） 桌機版平板版手機版 優化比較（針對Redesign部分） 修改前/修改後重點功能呈現 這部分要消耗的工時非常多，不僅要將作品設計完成（主要功能畫面即可），還要思考如何介紹這件作品，所以才會建議先以2個完整介紹為目標就好 但這也會是非常值得的一件事情，因為其實已經完成兩種不同的設計，而且面試官幾乎都會從這當中還問問題，你的答覆越完整對自己越是加分 只是也別怕答錯，因為不可能完全沒問題，這時候更需要的是有人點出你設計的缺陷，這樣才可以有機會改善和進步，下一個面試錄取率也才會更高 4.單一面向設計作品 這部分比較著重呈現目的性單一的設計，例如：DailyUI的每日主題設計、網頁Landingpage、APP啟用的引導頁…等等 或是可以放上APP的Icon設計、插畫設計或是運用同一種設計語彙的圖案設計 這部分作品可以為你的視覺設計能力面向加分，當然也不是放越多越好，作品還是都要有一定的設計品質才會是真的加pinterest分 Pinterest的dailyUI作品 Pinterest的AppIcon作品 5.其他類型作品 可能有些朋友除了網頁設計、UI設計以外還有其他的技能，像是平面設計、標誌設計、電商Banner設計、攝影作品…等等，這邊建議可以彙整成1-2頁來呈現就可以，畢竟這是最後的加分項目，但有沒有加分還是要看公司的職務需求 若有公司職務內容有寫到這塊的需求，那就可以多放這樣的作品，但依然切記要以有品質的作品為優先 順道一提，並不是因為不特別著重平面設計，就可忽略平面設計的基礎學習，平面設計還是所有設計的基礎，所以還是需要扎實的學習平面設計基礎知識 【面試小故事】在一次面試中遇到了位JuniorDesigner，公司主管一直猶豫是否要錄用他，原因是他本身是非本科轉職，但上一份工作的設計工作經驗並不是太多，沒辦法更多暸解他的設計程度因此想說看看他的平面設計是否可以加分，但不幸的他平面設計作品不如我們預期要有的程度，也連帶影響我們對他設計基礎能力打上了問號，所以不錄用，因此平面設計的能力還是很重要 三、作品集呈現方式 1.線上作品集 在行動網路的時代，線上作品集也是最方便和立即的工具，但並不是每個人都會架設網站，但至少可以使用像是Behance這樣的作品展示平台，雖然Behance呈現不及個人網站那樣的友善，但至少他還是線上可以瀏覽觀看，不足的地方還是可以用別種方式來彌補，例如：作品無法有規則分類 你可能會感興趣：線上作品集網站不求人，8個設計師常用的方法 另外切記避免使用Issuu來作為作品集展示，因為Issuu操作行為主要是模擬書本翻頁瀏覽方式，但這不符合行動裝置和或電腦操作習慣的瀏覽方式，因此這會大幅降體，瀏覽過程的體驗 2.電子檔案 相較於線上作品集，電子檔版本沒辦法這麼快速方便，但卻是最穩妥的作品集呈現方式，這怎麼說呢？ 線上作品集是完全仰賴網路才有辦法取得和呈現，若你去面試的地方，遇到網路訊號不好或是沒有網路的情況時，線上作品集可說是完全沒有任何作用 因此除了線上作品集以外，你還需要一份電子檔版本的作品集，大多數人的電子檔作品集都以PDF格式為主 順道一提，電子檔的作品集也通常是最完整的作品集，內容安排可以有自己的敘事脈絡，在現場面試介紹自己作品的時候，可以順著你的作品集作介紹（可以當成自己的講稿），面試官也能同時聽到和看到你在說什麼，才不會畫面一直轉跳來轉跳去 四、作品集內容加分Tip 1.依應徵職務內容調整作品集 若你主要以網頁、UI設計師為目標的話，那網頁、UI設計作品與其他設計作品的內容量已7:3或8:2最好 但若你也不排斥除了UI設計以外的其他工作（例如：平面設計、DM設計、展場設計），那也可以準備一份內容為6:4的作品集 2.內容精緻更勝於多 在你還沒真正轉職進入到業界執行設計專案時，設計作品建議還是以更完整的設計作為優先，原因在提高作品的完整度，可以幫助你的設計程度更成熟 但也不是能只放一兩個，還是需要放些單一性目標的設計作品，如果你有加入DailyUI的計畫，那就很適合放進來 建議完整專案數量為2個，單一性的網頁、UI設計相關作品數量為4-6個，總作品數至少5個最好 五、作品集該避免和注意的事情 1.避免過於炫技 在表現作品之前需要先了解哪些部分要以裝飾為主，哪些地方要以說明為主 例如一開始的封面圖片，UI自然可以Mockup作為包裝，或是多個畫面群組排列傾斜擺放，因為這部分只是為了要有視覺上的裝飾 但若在說明的內容當中，則建議以正常的直立畫面為主，幫助瀏覽的人可以容易理解你UI的設計內容 作品集呈現的核心是凸顯你的作品，使瀏覽者容易閱讀，而不是用很多效果包裝你的作品，卻造成閱讀不易 2.個人風格過多 這和上一點有點類似，因為作品集主要還是以呈現作品為主，而作品本身的視覺已經很強烈了，因此通常不會再多加入更多的個人化視覺在這裡面 若你希望你的作品集本身也有一個視覺設計規範，建議可以應用在開始封面、結束頁，以及作品之間的間歇頁 3.不要用百分比表示熟悉度 在Pinterest搜尋到的CV作品通常很多都會用百分比來代表對於技能的熟悉度，但事實上每個人對於熟悉度認知並不一致，並且沒有統一規範，所以使用這樣的像百分比的呈現並沒有讓面試官明白到什麼 建議可以使用初學、熟悉、精通等文字方式來表達熟悉度，就好像英文的能力表達一樣 4.排版字體避免過多 字體的選擇是為了更好地呈現內容，應定義幾種固定大小字級和字型重複使用。

推薦使用字體以非襯線字體為主，可以更好提高閱讀的效果，在特殊情況下可以選擇襯線字體，但儘量避免運用花式字體，不僅影響內容閱讀，設計把控力也比較大。

字體樣式的處理需要慎重，不要對其運用過度，拉低作品整體質量。

字體顏色善用黑色、灰色、淺色進行訊息層級的區分，可以適當使用粗體和一般進行對比。

結語 以上就是我整理了我看到不錯的作品集優缺點，希望可以讓非本科系的朋友在作品集上的準備更有一個概念和方向，並降低心中的疑惑和不安，預祝正要轉職的你一切順利。

延伸閱讀：UI/UX設計師履歷作品集，6個面試官注意的事線上作品集網站不求人，8個設計師常用的方法 若你喜歡我的這篇文章，麻煩拍5次下面小手給予我支持與鼓勵喔！ JosephHi👋，我是Joseph 我是一名從理工界踏入設計圈的UI/UX設計師，同時也是一位人夫和新手爸爸，在這裡我不僅會分享轉職經驗、設計實務，也會分享一些我個人喜愛的事物。

PostNavigation PreviousArticleNextArticle 相關文章 2020年5月20日2019年7月7日 2020年6月8日2020年5月26日 2020年8月9日2020年4月27日 發佈留言取消回覆發佈留言必須填寫的電子郵件地址不會公開。

必填欄位標示為*CommentName* Email* Website 在瀏覽器中儲存顯示名稱、電子郵件地址及個人網站網址，以供下次發佈留言時使用。

Δ