介面設計師與視覺設計師應該如何分工協作?
各司其職也各有千秋 
閉嘴！別命令我！我本來可以自己搞定的！我承認這次是挨揍了！
為什麼你總是扮演來救我的角色？但我不會永遠當弱者的！——島鐵雄《Akira》
專案執行期間，常常會遇到下列情況 — 接收到需求後，因為相互負責的工作有許多重疊的部分，介面設計師與視覺設計師之間常常會困惑，到底我應該負責的部分是哪些區塊呢?
這邊也會分享我個人的經驗來給大家參考。在這之前，我們先來了解介面設計師與視覺設計師的工作內容吧！
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) 追蹤IG 獲取更多設計新知 追蹤FB粉絲團 獲取更多設計新知
閉嘴！別命令我！我本來可以自己搞定的！我承認這次是挨揍了！
為什麼你總是扮演來救我的角色？但我不會永遠當弱者的！——島鐵雄《Akira》 專案執行期間，常常會遇到下列情況 — 接收到需求後，因為相互負責的工作有許多重疊的部分，介面設計師與視覺設計師之間常常會困惑，到底我應該負責的部分是哪些區塊呢?
這邊也會分享我個人的經驗來給大家參考。在這之前，我們先來了解介面設計師與視覺設計師的工作內容吧！
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)
分享至
成為作者繼續創作的動力吧！
Chris Peng的沙龍 的其他內容
- 講座筆記｜學校裡沒教的UI設計課
- 閱讀筆記｜不為生活擔心，才能好好創作《藝術家的正職》
- 以「使用者」為中心的設計思考5步驟
- 武漢肺炎預防注意事項 公告&Icon免費下載
- 臺灣特色ICON免費下載
- 【轉職這條路】UI設計師也要會寫程式嗎?
你可能也想看
- 「天天秋嗨嗨」：vocus 秋季徵文，五大主題 & 獎品登場！
- 11/20 NVDA財報前Preview, 財報前股價波動走勢觀察
- 維持皮膚健康與活力｜6款超人氣保濕、舒緩敏感化妝水評比
- 我請設計師設計了我的部落格封面視覺｜但是大家好像不買單QQ｜咖啡旗艦店
- 如何與設計師溝通
- 視覺藝術家、設計師、美編
- 包著金融背景的視覺設計師
- 【下集】接案設計師為何不公開報價：關於「透明報價的好與壞」，以及「該如何報價」
- 【上集】接案設計師為何不公開報價：關於「透明報價的好與壞」，以及「該如何報價」
發表回應
成為會員 後即可發表留言
© 2024 vocus All rights reserved.