介面設計師與視覺設計師應該如何分工協作?

各司其職也各有千秋

「雖然平面設計的力量強大，能夠吸引人、說服人、並有激勵與愉悅之效，但若缺乏有效的規劃、組織與管理，它將永遠無法發揮作用。」—泰瑞．李．史東

專案執行期間，常常會遇到下列情況 — 接收到需求後，因為相互負責的工作有許多重疊的部分，介面設計師與視覺設計師之間常常會困惑，到底我應該負責的部分是哪些區塊呢?

這邊也會分享我個人的經驗來給大家參考。在這之前，我們先來了解介面設計師與視覺設計師的工作內容吧！

1.視覺設計師

視覺設計師通常著重於維持品牌門面，並根據品牌形象設計出活動主視覺、網頁Banner與各式輸出產品。

重視排版、產品修圖與各種平面素材，同時也非常擅長於與印刷廠溝通、紙樣材質，有時因為產品的需要，也需要涉略包裝設計、展場設計等等。

使用的軟體通常為Photoshop、Illustrator、Indesign等等較偏平面排版的軟體。

2.介面設計師

介面設計師專注於使用者所使用的介面設計，需要負責設計產品介面與互動方式(比如按鈕下去會出現pop-up等等)，並維持使用者在使用上的直覺與易用性。

以網頁介面來說，介面設計師必須熟悉各種不同類型區塊的應用(比如 carousel 輪播區塊等等)、不同裝置間的呈現方式(手機、電腦與平板)，並針對不同功能來設計對於使用者來說最便於操作的樣式(例如按鈕的形狀是否能讓人想點擊、顏色是否夠明顯等等。)

使用的軟體通常為AdobeXd、Sketch、Figma等介面設計軟體。

3.介面設計師與視覺設計師應該如何合作呢?

(1)介面設計師繪製Wireframe

介面設計師通常會負責繪製 Wireframe (每間公司都不太一樣，但我們公司的Wireframe是UI設計師負責繪製的沒錯)，將產品經理與行銷團隊所提出的需求設計出相對應的解決方法與功能。

(2)視覺設計師設計主視覺，並根據 Wireframe 訂定規範

設計師在介面設計師開始執行之前就可以著手進行主視覺設計的規劃，主要把關的是整體主視覺的品牌形象、風格、色調、氛圍等等。

在主視覺設計完成後，視覺設計師可以訂定一些規範，例如：介面整體的顏色，主顏色與副顏色等等。介面設計師在收到主視覺的設計規範後，便會依照規範下去製作 mock up。

(3)合作中可能會遇到的問題

視覺設計師因為比較著重於平面、印刷等等較靜態的設計，新手設計師出圖時常常遇到檔案過大，或裝置間無法相容等等的問題，這時介面設計師就必須要與視覺設計師溝通，訂定好出圖的規範(尺寸、圖檔大小等等。)

而介面設計因為需要依照一定的設計規範(material design & Human Interface Guidelines)，介面設計師所出的mock up也容易讓視覺設計師覺得不夠特別(我想要一個不規則形狀的按鈕！)，或提出一些需要大量開發成本的特殊版面，這些都需要請介面設計師來溝通，找出雙方都滿意的方案。

介面設計師與視覺設計師在執行的工作上必定會有重複的地方，可以視專案的需求與產業、公司文化等等來調配雙方的工作，也就是其實沒有一種絕對明確的分工方式。

例如介面中若需要使用到Icon素材的部分，就可以由雙方互相協調，也就是說Icon兩個人都可以負責畫，只要風格一致、有符合設計規範與功能上的需求就好。

(文章所使用向量插圖出處:Freepik)