方格精選

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

更新 發佈閱讀 4 分鐘

各司其職也各有千秋



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

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

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

1.視覺設計師

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

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

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

vocus|新世代的創作平台

2.介面設計師

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

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

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

vocus|新世代的創作平台

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

(1)介面設計師繪製Wireframe

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

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

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

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

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

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

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

vocus|新世代的創作平台

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

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

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

vocus|新世代的創作平台
vocus|新世代的創作平台
vocus|新世代的創作平台


留言
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
【介面設計師與視覺設計師應該如何分工協作?】 你知道介面設計師與視覺設計師,在共同負責一個專案的時候,都是如何協作的嗎? 即使同樣都是為產品外觀所把關的設計師,但所負責的部分卻是大不相同喔!🧐 想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧!
Thumbnail
【介面設計師與視覺設計師應該如何分工協作?】 你知道介面設計師與視覺設計師,在共同負責一個專案的時候,都是如何協作的嗎? 即使同樣都是為產品外觀所把關的設計師,但所負責的部分卻是大不相同喔!🧐 想知道介面設計與視覺設計互相合作的眉眉角角?趕快點進文章來看看吧!
Thumbnail
讀到這篇,我預計您即將跟設計師合作,或是已經合作過,或是想了解 如果您已經有一位合作的設計師,如果您跟他合作愉快,作業流暢,完全沒有遇到下列問題,那麼我建議您可以跳過這一篇。 設計作品很難自己完成,但跟設計師很做發現他很暴躁?不敢跟設計師討論?
Thumbnail
讀到這篇,我預計您即將跟設計師合作,或是已經合作過,或是想了解 如果您已經有一位合作的設計師,如果您跟他合作愉快,作業流暢,完全沒有遇到下列問題,那麼我建議您可以跳過這一篇。 設計作品很難自己完成,但跟設計師很做發現他很暴躁?不敢跟設計師討論?
Thumbnail
雖然職稱都為設計師,而且好像也是都用工具產出設計圖,要從「前者」轉換至「後者」好像門檻比較低...對嗎? 今天這篇寫給所有正在努力朝向UI / UX邁進的平面設計師們。在思考轉職門檻前,我們先來列一下,這兩者的技能差異有哪些:
Thumbnail
雖然職稱都為設計師,而且好像也是都用工具產出設計圖,要從「前者」轉換至「後者」好像門檻比較低...對嗎? 今天這篇寫給所有正在努力朝向UI / UX邁進的平面設計師們。在思考轉職門檻前,我們先來列一下,這兩者的技能差異有哪些:
Thumbnail
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
在設計經歷上,每個產品的接觸階段會造成並產生的經驗值也有所不同,也會反映在面試跟薪資上,這裡我會把每一個介面設計師會遇到的成長歷程,整理歸納成這幾個階段,可以透過下面的歸類看看自己目前屬於這裡面哪一個階段:
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
平面設計≠美術編輯≠美工 親愛的你找對方向了嗎? 我們處在這個疫情的時代裡,隨著隔離,分流管理,許多人變成了自由工作者,工作模式打破了地區的限制,許多雇主與工作者甚至從發案到結案都見不著面。這樣模糊的關係也模糊了工作裡的專業價值。當缺乏了團隊與體制的磨練,在你學會了一個技能或軟體之後,是不是真的能獨
Thumbnail
平面設計≠美術編輯≠美工 親愛的你找對方向了嗎? 我們處在這個疫情的時代裡,隨著隔離,分流管理,許多人變成了自由工作者,工作模式打破了地區的限制,許多雇主與工作者甚至從發案到結案都見不著面。這樣模糊的關係也模糊了工作裡的專業價值。當缺乏了團隊與體制的磨練,在你學會了一個技能或軟體之後,是不是真的能獨
Thumbnail
如何成為軟體工程師?前端、後端、全端工程師之間的差異?這篇文章推薦給不知該怎麼開始學習的你,學習路線與必備技能一次詳細說明!
Thumbnail
如何成為軟體工程師?前端、後端、全端工程師之間的差異?這篇文章推薦給不知該怎麼開始學習的你,學習路線與必備技能一次詳細說明!
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
大多數的人初次跟 UIUX 設計師合作時,總是摸不著頭緒,不知道實際上軟體領域的設計師們所產出的設計究竟該從什麼標準來討論。 而「設計師」這個名稱,讓人聯想到的幾乎都是「視覺設計」、「平面設計」的工作內容,例如廣告 Banner 的設計、名片的設計、Logo 或企業識別的品牌設計等。 老實說,就連剛
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這篇文章將會講述遊戲設計師的特性跟遊戲企劃師的分類。
Thumbnail
這篇文章將會講述遊戲設計師的特性跟遊戲企劃師的分類。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News