方格精選

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

更新於 發佈於 閱讀時間約 4 分鐘

各司其職也各有千秋



raw-image
閉嘴!別命令我!我本來可以自己搞定的!我承認這次是挨揍了!
為什麼你總是扮演來救我的角色?但我不會永遠當弱者的!——島鐵雄《Akira》

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

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

1.視覺設計師

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

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

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

raw-image

2.介面設計師

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

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

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

raw-image

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

(1)介面設計師繪製Wireframe

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

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

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

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

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

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

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

raw-image

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

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

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

raw-image
raw-image
raw-image


留言
avatar-img
留言分享你的想法!
avatar-img
Chris Peng的沙龍
60會員
20內容數
Chris Peng的沙龍的其他內容
2021/09/13
美感運動是一種生活態度 「美感培訓」在台灣教育裡一直是一個較不被重視的訓練,其實,美感是需要從小培養的,且擁有個人的美感不僅對創作有幫助,對於周邊的環境、人際間的影響力也會有顯著的提升!
Thumbnail
2021/09/13
美感運動是一種生活態度 「美感培訓」在台灣教育裡一直是一個較不被重視的訓練,其實,美感是需要從小培養的,且擁有個人的美感不僅對創作有幫助,對於周邊的環境、人際間的影響力也會有顯著的提升!
Thumbnail
2021/08/17
觸動人心的關鍵鑰匙 一、成功營造的品牌案例 「非常法國」的左岸咖啡館 巴黎塞納河畔到底有沒有一間「左岸咖啡館」?這不重要,重要的是,消費者相信真的有。
Thumbnail
2021/08/17
觸動人心的關鍵鑰匙 一、成功營造的品牌案例 「非常法國」的左岸咖啡館 巴黎塞納河畔到底有沒有一間「左岸咖啡館」?這不重要,重要的是,消費者相信真的有。
Thumbnail
2021/08/17
打造暢銷品牌的成功祕訣 這一次要來介紹的,便是設計出熊本熊吉祥物形象的日本設計師 — 水野學所撰寫的《品味,從知識開始》。
Thumbnail
2021/08/17
打造暢銷品牌的成功祕訣 這一次要來介紹的,便是設計出熊本熊吉祥物形象的日本設計師 — 水野學所撰寫的《品味,從知識開始》。
Thumbnail
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
這篇文章將會講述遊戲設計師的特性跟遊戲企劃師的分類。
Thumbnail
這篇文章將會講述遊戲設計師的特性跟遊戲企劃師的分類。
Thumbnail
平面設計≠美術編輯≠美工 親愛的你找對方向了嗎? 我們處在這個疫情的時代裡,隨著隔離,分流管理,許多人變成了自由工作者,工作模式打破了地區的限制,許多雇主與工作者甚至從發案到結案都見不著面。這樣模糊的關係也模糊了工作裡的專業價值。當缺乏了團隊與體制的磨練,在你學會了一個技能或軟體之後,是不是真的能獨
Thumbnail
平面設計≠美術編輯≠美工 親愛的你找對方向了嗎? 我們處在這個疫情的時代裡,隨著隔離,分流管理,許多人變成了自由工作者,工作模式打破了地區的限制,許多雇主與工作者甚至從發案到結案都見不著面。這樣模糊的關係也模糊了工作裡的專業價值。當缺乏了團隊與體制的磨練,在你學會了一個技能或軟體之後,是不是真的能獨
Thumbnail
如何成為軟體工程師?前端、後端、全端工程師之間的差異?這篇文章推薦給不知該怎麼開始學習的你,學習路線與必備技能一次詳細說明!
Thumbnail
如何成為軟體工程師?前端、後端、全端工程師之間的差異?這篇文章推薦給不知該怎麼開始學習的你,學習路線與必備技能一次詳細說明!
Thumbnail
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
讀到這篇,我預計您即將跟設計師合作,或是已經合作過,或是想了解 如果您已經有一位合作的設計師,如果您跟他合作愉快,作業流暢,完全沒有遇到下列問題,那麼我建議您可以跳過這一篇。 設計作品很難自己完成,但跟設計師很做發現他很暴躁?不敢跟設計師討論?
Thumbnail
讀到這篇,我預計您即將跟設計師合作,或是已經合作過,或是想了解 如果您已經有一位合作的設計師,如果您跟他合作愉快,作業流暢,完全沒有遇到下列問題,那麼我建議您可以跳過這一篇。 設計作品很難自己完成,但跟設計師很做發現他很暴躁?不敢跟設計師討論?
Thumbnail
雖然職稱都為設計師,而且好像也是都用工具產出設計圖,要從「前者」轉換至「後者」好像門檻比較低...對嗎? 今天這篇寫給所有正在努力朝向UI / UX邁進的平面設計師們。在思考轉職門檻前,我們先來列一下,這兩者的技能差異有哪些:
Thumbnail
雖然職稱都為設計師,而且好像也是都用工具產出設計圖,要從「前者」轉換至「後者」好像門檻比較低...對嗎? 今天這篇寫給所有正在努力朝向UI / UX邁進的平面設計師們。在思考轉職門檻前,我們先來列一下,這兩者的技能差異有哪些:
Thumbnail
【介面設計師與視覺設計師應該如何分工協作?】 你知道介面設計師與視覺設計師,在共同負責一個專案的時候,都是如何協作的嗎? 即使同樣都是為產品外觀所把關的設計師,但所負責的部分卻是大不相同喔!🧐 想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧!
Thumbnail
【介面設計師與視覺設計師應該如何分工協作?】 你知道介面設計師與視覺設計師,在共同負責一個專案的時候,都是如何協作的嗎? 即使同樣都是為產品外觀所把關的設計師,但所負責的部分卻是大不相同喔!🧐 想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧!
Thumbnail
本系列文章前面的「資訊架構的三種基本角色」、「事前準備與內容提供者」、以及「評估資訊內容的影響力」三篇,都是關於資訊架構前期規劃的討論,所以本文想談談執行過程的思考,包括進行網站地圖(sitemap)、框線架構(wireframe)等設計時犯過哪些錯誤、以及更理想的作法。
Thumbnail
本系列文章前面的「資訊架構的三種基本角色」、「事前準備與內容提供者」、以及「評估資訊內容的影響力」三篇,都是關於資訊架構前期規劃的討論,所以本文想談談執行過程的思考,包括進行網站地圖(sitemap)、框線架構(wireframe)等設計時犯過哪些錯誤、以及更理想的作法。
Thumbnail
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢? 這是設計師與工程師 今天,設計師畫了一個上傳照片的功能: 設計師如果只提供這張圖會代表什麼呢? 就會變成這樣,
Thumbnail
有鑒於 UIUX 詢問度近幾年日趨高漲,研究使用者心理變得越來越夯,讓很多視覺出道的工作者也想了解並參與其中,但做 UI 設計到底該注意什麼呢?到底要怎麼做才不會被工程師罵到臭頭呢? 這是設計師與工程師 今天,設計師畫了一個上傳照片的功能: 設計師如果只提供這張圖會代表什麼呢? 就會變成這樣,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News