方格精選

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

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

各司其職也各有千秋

閉嘴!別命令我!我本來可以自己搞定的!我承認這次是挨揍了!
為什麼你總是扮演來救我的角色?但我不會永遠當弱者的!——島鐵雄《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粉絲團 獲取更多設計新知
為什麼會看到廣告
avatar-img
60會員
20內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Chris Peng的沙龍 的其他內容
深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
想成為藝術家,除了勒緊褲帶,我們可以有更好的選擇 「藝術家的正職」這本書在談論的,就是讓藝術家不要再鐵齒,為了擺脫不穩定收入的生活,趕快去找一份工作吧!
「設計思考」是一個「以使用者為中心」的方法,透過從使用者的需求出發,來創造更多的可能性。 而藉由這個方法所討論出的產品,也能透過不斷的測試與反覆修正,順利的設計出最符合使用者需求的產品。
大家要好好的保護自己的身體健康 大家好,我是 UI/UX 設計師 Chris,出社會擔任設計師後,我常常在思考,身為設計師,能不能用自己的專業能力,來為這個社會帶來一些正面的力量與希望。 所以開啟了這個「免費素材下載」系列,將會不定期的因應社會大眾的需求,或身邊的人的需求設計出免費的素材提供給大家
不管臺灣是藍是綠,都是我們美麗的島嶼 前陣子看到熱愛台灣的外國人製作的Taiwan Icon Font,內心覺得非常的感動,覺得不是臺灣人的外國人,都如此認真的做了一套台灣專屬的字型,那身為台灣人的我,能不能也運用自己的力量,為我們土生土長的這塊美麗的島嶼盡一份心力呢?
做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
想成為藝術家,除了勒緊褲帶,我們可以有更好的選擇 「藝術家的正職」這本書在談論的,就是讓藝術家不要再鐵齒,為了擺脫不穩定收入的生活,趕快去找一份工作吧!
「設計思考」是一個「以使用者為中心」的方法,透過從使用者的需求出發,來創造更多的可能性。 而藉由這個方法所討論出的產品,也能透過不斷的測試與反覆修正,順利的設計出最符合使用者需求的產品。
大家要好好的保護自己的身體健康 大家好,我是 UI/UX 設計師 Chris,出社會擔任設計師後,我常常在思考,身為設計師,能不能用自己的專業能力,來為這個社會帶來一些正面的力量與希望。 所以開啟了這個「免費素材下載」系列,將會不定期的因應社會大眾的需求,或身邊的人的需求設計出免費的素材提供給大家
不管臺灣是藍是綠,都是我們美麗的島嶼 前陣子看到熱愛台灣的外國人製作的Taiwan Icon Font,內心覺得非常的感動,覺得不是臺灣人的外國人,都如此認真的做了一套台灣專屬的字型,那身為台灣人的我,能不能也運用自己的力量,為我們土生土長的這塊美麗的島嶼盡一份心力呢?
做UI設計不懂程式也沒關係?甘五價好康? 「UI設計師需要會寫程式嗎?」 想當初在轉職前,我也曾經在網路上搜尋過這類的關鍵詞,也有許多UI大大撰寫過相關文章,爬梳過文章後,大部分的答案都是不用的。
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
從委託、設計、提案至請款的五大階段。接案設計師不只是「會設計」而已,更需要學會與客戶溝通,甚至是基本的文件處理。
Thumbnail
這篇文章主要討論了行銷人與設計人溝通的重要性,並針對以商業目的為主的設計提出了一些設計風格呈現、視覺重點、露出設計的地點和閱讀者為誰等方面的建議。
Thumbnail
這篇文章主要討論了設計的主客觀問題。透過討論設計師必然面對的主客觀問題,幫助讀者更妥善地處理設計衝突及評價,使設計更趨向完整。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
Thumbnail
我想和大家分享一下,作為一名平面設計師,我的日常工作是什麼樣的。就像下面這個插圖一樣,每天都有千千百百樣的想法在我腦海爆發~~對我來說這份工作不僅僅是關於美感和創意,更是一門關於溝通和表達的藝術。在我剛踏入這個行業的時候,我認為平面設計師的工作就是製作一些漂亮的圖片或廣告。但隨著工作經驗
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
從委託、設計、提案至請款的五大階段。接案設計師不只是「會設計」而已,更需要學會與客戶溝通,甚至是基本的文件處理。
Thumbnail
這篇文章主要討論了行銷人與設計人溝通的重要性,並針對以商業目的為主的設計提出了一些設計風格呈現、視覺重點、露出設計的地點和閱讀者為誰等方面的建議。
Thumbnail
這篇文章主要討論了設計的主客觀問題。透過討論設計師必然面對的主客觀問題,幫助讀者更妥善地處理設計衝突及評價,使設計更趨向完整。
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
程式設計中不可或缺的一部分 介面是使用者與程式互動的媒介,因此介面的設計會影響使用者的體驗和感受。一個清晰明白、易懂的介面,可以讓使用者輕鬆地使用程式,並獲得良好的使用體驗。 需要與程式設計師密切溝通 設計師需要了解程式的功能和需求,並根據使用者的習慣和需求進行設計。設計師和程式設計師之間的溝
Thumbnail
替產業做設計 有人要我談程式設計,那我就稍微談一下。我從事的大都是產業的工作,所以我們也從如何替產業做設計來談起。基本上,每個產業都會有自己的作業流程,大同小異。但是基礎來做都是一樣的,都會有客戶、物料、產品、供應商、員工等資料。不同的是,由於企業型態的不同,他們每個人有不同的作業流程。這個作業流
Thumbnail
前端開發者常會遇到需要網頁素材的情況,雖然在公司中都可能有可以配合的平面設計師或是UIUX設計師,但在這個多工高效的時代不免也需要前端開發者也可以處理簡單的設計,也可提升設計審美或與設計師溝通的能力。 然而前端開發者也算是擁有設計師的天賦,透過程式碼來完成平面設計,將網頁的每個介面都視為平面設計,
Thumbnail
我想和大家分享一下,作為一名平面設計師,我的日常工作是什麼樣的。就像下面這個插圖一樣,每天都有千千百百樣的想法在我腦海爆發~~對我來說這份工作不僅僅是關於美感和創意,更是一門關於溝通和表達的藝術。在我剛踏入這個行業的時候,我認為平面設計師的工作就是製作一些漂亮的圖片或廣告。但隨著工作經驗