「界面設計」「視覺設計」「交互設計」之間的關係是什麼?如何理解?

我是UI菜鳥,但在努力學習,在最近吸收的知識里,對於界面設計、視覺設計、交互設計這三者有了自己的看法,但同時也看到很多不同的見解,我需要驗證自己的理解是否正確,所以請各位大神幫忙賜教(尤其是三者之間的關係),小女子在這裡萬分感謝!


我們要蓋一座房子,面朝大海,春暖花開。

房前的小徑如何方便進出,增加人們交往與偶遇的機會,房間的格局如何,讓大人小孩都能各得其樂,窗戶朝向如何布局來增加光照…

這是交互設計要考慮的問題,信息架構、交互流程等等。

朋友中有個笑話,說一個交互設計師朋友去人家裡做客,幾句話之後,開始評價人家的燈和開關設計是否合理的問題。

房子的外觀看起來什麼樣,營造出什麼樣的視覺體驗,地板和門應該是什麼顏色才能顯得「高端大氣國際化」…

這是視覺設計要考慮的問題,布局、色彩、圖標等等。

視覺設計師常說,這裡差3個像素。

這座房子和人發生關聯的部分,就是界面。

User Interface,用戶界面,用戶介面,顯然,這樣的介面需要交互和視覺共同的支持。

交互設計和視覺設計是完全獨立的么?不是。蓋房子是個系統工程,交互和視覺都是其中一部分。

交互設計師心中要有視覺映像,視覺設計師頭腦中要有流程和架構,越是資深的設計師,這兩方面越是融合在一起,因為,原本的目的是要蓋房子啊。

——

現在我發起了一個聚焦在產品、設計(UI/UX)、運營學習的組織「互聯網學習圈」,未來希望能夠推動類似「信息時代的包豪斯」這樣的事情。

開放的社群:產品經理、設計師、運營相關專業學習和交流的微信群,加微信號 TellZoe ,會幫忙拉到相應的專業群里。

封閉的社群:內部講座、內推、和資深人士建立聯繫,http://t.xiaomiquan.com/vrn6AIm (可以複製到微信中發送給自己,再打開鏈接)

馬力的知乎文章索引:

?https://zhuanlan.zhihu.com/p/25493627?

—— 2017年9月更新 ——

學習 UI/UX 和產品設計

1、UI 和 UX 設計師的課程表

2、UI、UX交流QQ群:633293003,會定時舉行公開課和答疑。歡迎大家加入。


看了大家的答案獲益匪淺。我來補充一下我的看法。


題主之所以把它們放到一起比較,我想是因為這三個詞混用的地方還真的不少,那麼我來提供一些事實,希望能幫助理解。


界面、視覺、交互這三個詞在實踐中其實結合非常緊密。在不同的公司這三個叫法的設計師做的事情很可能是一樣的。我們不妨先來看看他們在理想環境中的工作職能。


I. 界面設計師是指UI Designer:

他們從PM或者UX手中接過線框圖後進行界面元素的設計,包括但不限於按鈕、表單、輸入框、模態框、頁簽、展示位、切換控制項等」零件「的外觀設計,並且將產品的整體視覺風格定義出來。設計完成後負責交付給前端工程師或者ios界面工程師進行開發。為了方便定義邊界,我也順便說一些他們不負責的部分。諸如banner、廣告位、填充物的設計界面設計師是不負責的,比如喜馬拉雅、網易雲音樂打開的時候需要等待5s跳過的廣告並不屬於界面設計師負責,但他們會提出對這些內容的建議和規則,比如白色界面盡量不要用全白圖。



Resource:https://www.behance.net/gallery/36367535/FADE-APP-UI-KIT-FREEBIE-

II. 視覺設計師是指Visual Designer或者Graphic Designer:

視覺設計師中在很多行業中都有,比如廣告、印刷、電視、電影、美術這些行業,題主將三個詞放到一起比較,我想應該想了解互聯網行業里的視覺設計和另外兩種設計的異同。

剛才我介紹界面設計師時提到過Banner、廣告位、填充物的設計就是由視覺設計師來擔綱的,他們根據市場、運營的需要,為活動和促銷創造精美的圖片和視覺元素,當素材不滿足需要的時候甚至要和攝影棚溝通思路來創造素材,他們是圖片的魔術師。比如下面這個例子就是視覺設計師的傑作。


Resource: https://www.behance.net/gallery/46146889/Air-Max-17

補充:我意識到北美這邊有些業內人士會把界面設計師稱作Visual Designer同時把視覺設計師稱作Graphic Designer,嚴格來講這是不對的,但既然有人這麼用咱們也不用太較真,知道這種情況會存在就好。

III. 交互設計師是指 UX Designer/ Interaction Designer/ UE Designer:

這個角色相比前兩個就要複雜一些。交互設計師可能是和用戶客戶、老闆、市場、產品經理等諸多角色進行開會協商需求、訪談調研問題、觀察求證痛點、梳理落地功能的一個角色,可能是線框圖繪製師、動效製作師、信息架構師、原型製作師等角色,也有可能是他們的綜合體。每個公司都不是特別一樣。也就不難理解為什麼這個職位會有各種各樣的頭銜。一般來講,交互設計師最多做的事還是將功能整理成線框圖。

差點忘記了,交互設計師也會在很多實驗室和公司研究炫酷的人機交互方式,比如手勢操控、肢體識別、VR等等,不是大多數情況所以暫時不表。



Resource:https://www.slideshare.net/rwinzenburg/ux-roles-46327128

但是,這裡要轉折了。在實際工作中,並沒有那麼理想,作為一個UX Designer 很有可能要把你畫出的線框圖變成UI設計稿,那麼這個時候交互設計師和界面設計師就融合在一起了。作為一個視覺設計師也有可能要設計整個Landing Page Flow,那麼上面的UI元素、操作控制項、跳轉邏輯是不是也要他來擔綱呢,是的。所以視覺設計和界面設計的劃分也不清晰。這也就是為什麼我在開頭說, 在不同的公司這三個叫法的設計師做的事情很可能是一樣的。


希望我的回答有幫助。

以上。


先區分一下「界面」、「視覺」、「交互」這三個詞。

「界面」是機器中的一部分——通過這個部分,用戶可以了解機器的狀態、對機器進行控制、並獲取反饋。「界面」不僅包括圖形界面,也包括實體界面。
(7.24日新補充:界面原是interface,大陸譯為「界面",遠不及台灣譯法「介面」好,「介」才是本質,「界」只是表象,請自揣摩)

「視覺」是一種人的感官類型——通過這一個感官,用戶可以了解信息,感知物體,被激發情緒。「視覺」不僅包括美觀,更包括引導。

「交互」是一種行為類別——在這種行為類別中,用戶會發出自己的行為請求,接受者隨之給予用戶反饋和後續行為的引導。

本質上來講這三者沒有比較的意義,因為它們是不同視角下的概念。
如果非要畫個範圍,大致會是這樣:

它們有大量不重疊部分。界面設計還包括很多技術層面的東西,視覺設計包括大量感官傳達的東西,交互設計也有一些其他的純行為流程類的東西。

它們有大量不重疊部分。界面設計還包括很多技術層面的東西,視覺設計包括大量感官傳達的東西,交互設計也有一些其他的純行為流程類的東西。

-------------------------以上只是廣義上的看法------------------------------------------------------------

現實工作中一般不會牽涉這麼廣的看法,互聯網業界對著三者的理解是窄化了的概念。

如果你到互聯網公司求職,職能上可能會這樣劃分:


千萬注意,這只是職能上這麼劃分。
部分職能所做的事也並不是和廣義上一致的。
例如一般不存在界面設計這個層面的職位。
例如界面布局也可能划到交互設計範疇。
例如界面的跳轉引導也可能歸到視覺設計。
總之,這只是職能上這麼劃分。

如果你希望成為一個合格的設計師,對設計的理解和能力的千萬別受這個邊界限制。

一個合格的設計師「最起碼」應該這樣理解:

要做出好東西,理念和能力都應盡量融通,走得遠一點,了解得廣一點更好。

要做出好東西,理念和能力都應盡量融通,走得遠一點,了解得廣一點更好。


本人是在北美某藝術大學準備進入大二的設計系學生.對於這個問題我本人也有疑惑.在此,我就以我們學校設計系的課程為例來探討一下.(先強調,我自己也還未有準確的答案.)

我們學校的設計系一共分為3個分支,以下是這三個分支的詳細課表.


仔細對比課表會發現什麼呢?

Interaciton design的課程,基本上可以說是前兩者的結合,工設占的比例大一些.
communication這個分支在我們學校基本上是默認為graphic design,但據說也需要學一些coding.工設就是傳統的工設.

因此我可以得出的結論是:交互屬於一個新的設計分支,現在來看,交互需要綜合工設和平面兩方面的基礎知識,外加適應發展越來越快的互聯網和移動端設計需求.

回到問題上來說,界面設計要看怎麼理解.這個片語,我看到的第一反應是視覺性的設計,因此可以歸入視覺設計的分類.但轉念一向,界面的易用性又要歸於交互設計的範疇.所以我認為答案有兩個.

我記得上學期final project做的那個app,我基本上就是構思界面,流程,同組法國妹子ps技術杠杠的,她負責搞圖標和效果,然後時不時對我的流程提出一點意見,那合作真是水乳交融..(大霧
總之我個人的期望,以後和一個美術功底紮實的做視覺的妹子合作,一定很不錯.


怕影響公司項目,匿了先
關於這個問題我覺得我還是可以說上幾句的,因為畢業幾年我就是從一個app視覺設計師(gui)轉為一個交互設計師(ui)的。
時間不算太長,所以我是不折不扣的菜鳥,完全處於一個需要大量進食快速成長的階段,所以我的經驗未必豐富,但是作為初學者的心得還是有不少的。
我很同意 馬力 說的初學者不要把兩者分得太清楚,更同意 jim 說的並不是用「好用,好看」來區分的。

在小公司首先就不分這個,沒那麼多錢給辣么多職位。通常做產品的就定了交互,或者就是boss說了算,設計界面的也順便設計交互,技術也會從開發的角度設計性價比最優的交互,然後大家一開會拍腦袋就把方案定了。這個過程看著好像不夠專業,卻對初學者來說非常重要,因為這個會議裡面從大領導到產品,設計,開發全部都會討論,給出自己的意見,如果你的同事在自身領域能力比較強,表達能力又不錯,那麼每一次開會都是一次學習的好辦法。可以學到各個崗位人對項目的關注點以及思維模式。真正好的產品所有的參與者都該是對彼此崗位有所了解的,就算你只用ps製作界面,也要知道這個按鈕點下去跳轉什麼頁面(交互),這個資源如何切圖才是給技術的最優輸出(技術),這個歡迎頁面到底是為了給用戶傳達什麼信息(產品)。只有這樣你設計的圖才會穩准狠,(當然是否高大洋就是你的能力了,但是穩准狠至少不會讓你犯低級錯誤)。見過很多視覺設計師只是硬生生把黑白線框變為彩色皮膚,然後還不明白為什麼上頭總是不滿意總說哪裡不對。(你連這個按鈕是不是這個頁面的重要功能按下去切換什麼頁面都不知道你還敢說你得按鈕大小顏色合適?)

在優秀小公司學做事是很重要的。

只有大公司才會把產品,交互,視覺,用戶體驗,宣傳市場真正的分部門細化,有組織有紀律的互相PK(喂)。你一旦走在這條路上,首先你的職務就變得簡而專(再也不用psaipptword等等等軟體全開了哦親)其次如果你依然是底層的幹活者,那麼那種多部門會議大部分是你的頭兒參加,你獲得的信息也會變得專一,這個時候對你的專業提高會比較強,你的技能點數不再是均勻分布,而是只加你所需的能力就好了。優點是專業技能升級很快,但是如果你之前沒有一定的均衡積累,就會沒有辦法或者時間融入這個產品,變的機械。

好吧完全跑題了= =

最後我就想說崗位的區別還是實踐起來感受最多,至於什麼崗位適合你更是要積累經驗才能判斷,但是最初的幾年全都鑽研一下是絕對沒有壞處的。

完全沒有回答問題的人說完了


我個人的理解是「交互設計」負責把東西做得「好用」,「視覺設計」負責在好用的基礎上把東西做得「好看」,兩者合起來就是界面設計。當然有時候交互和視覺的職責不只單純地在軟體界面上。


既然有小女子萬分感謝,那我就來怒答一記。

(前邊有各位大牛對此都有自己的看法,但我想以另一種角度來解釋它。)

設計的目的在於傳達。
(各位可以思考一下,為什麼不是表達,不是傳播)

傳達需要幾個要素:

  1. 傳達的內容—想傳達什麼
  2. 感測器—靠什麼傳達
  3. 傳達方式—怎麼傳達

(還有其他方面,這裡就不多寫了╮(╯_╰)╭)

就以上展開

  1. 傳達的內容。它可能會大到你的設計思維、核心價值,小到一個具體物品或按鈕功能。
  2. 感測器。如果把人描述成一部智能手機,可能更容易理解一些。(實際上應該是把智能設備想像成神奇的人類生物!)我們有皮膚、耳膜、視網膜等一系列膜組織,以此擁有觸覺、聽覺、視覺等一切感覺。補充一點,產品也是一種生物。
  3. 傳達方式。關於這一點,所要思考的並不是有多少種,而是如何選擇最合適的方式進行傳達,可能是一種,也可能是多種方式的結合,根據實際的需要而定。

設計師在其作品的受眾的頭腦中創造出一種信息建築。其結構通過分類感覺認知渠道構成刺激。由視覺、觸覺、聽覺、嗅覺和味覺以及這些感覺的各種集合帶來的刺激,在受眾頭腦中組裝起來,在那裡浮現出我們所謂的「圖像」
更重要的是,被這一在頭腦中創造的結構當做建築材料使用的,不僅是有感官提供的外界輸入,還有被外界輸入所重新喚醒的記憶。實際上,後者可能是圖像的主要材料。記憶不僅帶領受眾主動反思過去,並在大腦接受外界刺激時陸續想起,還給圖像添枝加葉,讓圖像有血有肉,以理解新的信息。就是說,圖像這種東西不僅結合、聯繫著感官傳送的外界刺激,記憶這些刺激所喚醒的記憶,從而生成假定為一種聚合的圖像,而設計行為則意味著對此過程的積极參与。而之所以稱之為信息建築是因為此聚合圖像的生成是有意為之的、經過計算的。
——原研哉《設計中的設計》P157

所以回過頭來,看交互設計和視覺設計,其實是對信息不同的組織和傳達方式。他們同時服務於信息的傳達,不過是調用的感測器不同罷了。


.
怒答。
我回答前大概知道很多人會把交互設計定義為使產品更好用,而視覺設計則是美化產品。
說實話,我並不完全接受這種說法。
如果交互定義是如此廣泛,那麼交互就顯得沒有深度。畢竟絕大多數互聯網崗位都是為了讓產品更加好用。而且視覺設計也並不等於美工。
.
這正是因為這種想法,在設計流程中,導致工作定義模糊,交互設計和產品經常糾結在一起,進行一輪輪的PK,而視覺設計最後也被當成美工來輸出使用。
我之前在知乎提出了一個問題:交互設計師和視覺設計師是否應該是同一個職位?
實際上答案的「是」或「否」並不重要。重要的是作為交互或視覺的其中一員,如何看待彼此的工作。有趣的是,你會看到屁股決定腦袋的回答。

題外話是,這種不理解其他同事的工作性質的想法,在很多設計師中也有。設計師也會說開發只是一個程序員罷了,他不懂用戶體驗。但是載入速度快,緩衝時間短,沒有卡頓,這些會不會為用戶體驗加分?

簡單思考一下,易用性和美觀難道可以分開么?難道一個應用操作流程非常順暢,這個不會讓這個應用變得更加楚楚動人?難道一個各種控制項視覺效果出眾,位置排版整齊的軟體,不會顯得更好用?

不論是產品,設計還是開發(開發許多地方也是為了用戶體驗,不然前端不用那麼累)都是殊途同歸——為了更好的用戶體驗。我們很難說一個好的交互,差的視覺可以出來一個產品,結果用戶說交互是非常棒的。同理,一個差的交互,好的視覺,出來的產品視覺效果也不會太好。

所以,不用把交互和視覺的職責目的分得太開,他們只是使用的工具不同而已

交互設計師需要用非常清晰和流暢的操作和邏輯框架來提高用戶體驗,這些交互流程更多是隱藏在操作過程中,有各種邏輯關係的層次。而視覺設計師使用讓我們眼睛直接感受到的視覺效果來傳達一個產品的意圖,更加浮在表層上。

可能這些說法並不是非常具象。我一直以來比較贊同的是建築設計行業的一套說法——建築設計(界面設計)、結構師(交互設計師)、建築/外觀設計師(視覺設計師)。

首先接到建築需求後,經理(產品)會評估整個建造過程並統籌安排,他應該是最了解整個工程項目的進度和細節的,最具有大局觀的人,所以雖然他不是什麼領導,但畢竟他是導航把控方向的人,拍板就由他來。
在建築設計的過程中,結構師(交互設計師)會設計整座建築的結構——樓層得有多少層,佔地面積多少,每層多少戶,什麼結構更加穩妥,樓梯和各種管道如何鋪設。居客很難看到結構師做了什麼,但他們的確很重要。
而建築/外觀設計師(視覺設計師)則會設計整座建築的外觀和相關因素,甚至細節到每戶裡面房間和大廳的布局和裝修。
這些都是為了讓居住這裡的人住得更舒服。你並沒辦法說哪個更重要,只能說缺誰都不行。

如果說一個產品就好像一個人一樣,那麼交互為其骨骼,視覺則是其肌膚。開發為其肌肉和器官,產品為其大腦,而運營為其血液。

所以,設計師的同行,不要只是認為交互只是把操作流程做得流暢,視覺也肯定不是為了把界面做得更漂亮。這些都不是目的。抱著提高用戶體驗的目的去做設計,會發現和誰PK都行,顯得容易一些。

當然,相比開發來說,設計能為產品解決的問題的確不多。但是,設計可以做到——讓用戶享受問題


交互設計 + 視覺設計 = 界面設計
交互設計內容:1. 功能,2. 流程,3. 邏輯
視覺設計內容:1. 形狀,2. 色彩,3. 質感
兩者重疊的內容:布局(元素排版)
這點是我和 JJ Ying 理解不太一樣的地方,因為視覺設計也會定義布局,所以也要對易用性負責


外行,拋磚引玉。

我主要根據《用戶體驗的要素》。

交互設計:
在產品經理定義完產品的需求、目標等等後,交互設計師確定用戶達到每個小目標的過程中,用戶和系統的對話過程;

界面設計:
在系統和用戶的每一個對話中,系統說的每一句話即是呈現給用戶的一個頁面,交互設計師確定這個頁面應該表達什麼,界面設計師在這個的指導下設計這個頁面,達到交互設計師的要求;

視覺設計:
這個相對比較簡單,在不違反界面設計師的設計目的的情況下,將每一個頁面美化。

幾個職位的關係是:
產品經理》交互設計師》界面設計時》視覺設計師
後面的配合前面的,在不違反前面的職位的設計的情況下來進行自己的設計。


嘗試一下,舉例描述,肯定有不準確的地方,請不吝拍磚:

一輛車。

視覺設計,就是你看到的所有外觀上的設計。

界面設計,是車內操作面板的設計。

交互設計,是車內所有操作按鈕的分布擺放和觸發方式等設計。


我認為,「有了自己的看法」就很好,提出此問的目的也應是瞭解和吸收更多「不同的見解」,而不應是「驗證自己的理解是否正確」。

一方面,這種問題沒有絕對的「正確」和「錯誤」。三十年前的交互設計把「用戶」看成和機器對等的「信息處理機」(Information Processor)——由眼睛「輸入」,由大腦「認知」,再由手「反饋」。但這併沒有錯,因為那時計算機主要還是生產工具,性能也非常有限,而把人簡化為另一台「機器」可以大大方便描述交互的過程。可是現在就不適合這麼做了。技術、理念都在不斷進步,即使今天以為是絕對正確的,明天也有可能發現其不適用之處,未來甚至會變成跟「Model Human Processor」一樣的歷史痕跡。

另一方面,沒有必要去「驗證」自己的理解。和上面講到的一樣,個人的理解也可以隨著時間加深,變化,甚至否定,但不需要「驗證」。從大家的回答也能夠看到,「界面設計」「視覺設計」「交互設計」並非物理學術語,很難、也不需要給出精確的定義以及相互之間關係的描述。也就是說,只需要「看到很多不同的見解」並且對其有自己的思考就可以了,而不一定要「驗證自己的理解是否正確」。設計師應該有自己的見解和獨立的判斷。如果一定要「驗證」,那麼不妨用實踐來驗證自己的設計,畢竟除非落到具體的設計上,一切「理解」都是空談。


你可以問別人貝克漢姆是踢中場的還是踢前鋒的,但你不可能問他是踢中場的還是踢足球的---足球里包含了中場和前鋒。一樣的道理,界面設計是個籠統的說法,它包含了視覺和交互。

關於它們之間的關係,看到很多知友都有精彩解答,我不重複了。

雖不談國事,但卻想聊聊風月,主要是因為看到了某些知友的觀點吧。

有的朋友崇尚不區分視覺與交互,好像白鴉前輩也是這麼提的,在這裡鄙人真不是有意想挑戰他們的思想,只是我有一些自己的理解想說說。

的確有的工作相互之間交集很大,大到在外人看來(尤其是外行)甚至可以互相搞定。就好比踢足球,在我這個門外漢看來下底傳中都是那一腳,按理來說場上除了守門員大家都是用腳踢球的,都應該能傳好,但現實情況就是中場、後衛、前鋒傳出來的效果不一樣。

為什麼效果不一樣?為什麼球場上要分前鋒、中場、後衛、守門員?我們是不是要好好想想?

說到底還是因為術業有專攻,這是現實,也是需要。每一種不同的崗位都有其差異,差異或大或小,但是只要有差異就一定會造就出不同的專攻,而且這種專攻會隨著時間的推移慢慢深化,慢慢強化。

一款產品需要的是美與舒適。讓產品美,讓產品舒適的方法在根上都是源自於心理學,但是向下分支不同側重點有變化。

圖有抽具,色分冷暖,情在喜厭,層帶深淺。如何讓產品看起來很美這絕對是一門很深奧的學問,而且這門技藝就算是你完全掌握了,如果不能保證持續不斷的強化它,它仍然會在某一天離你而去。你花10年時間成了一位視覺設計大師,但從此放下,再花10年時間去研究交互,其結果是你成了交互大師,但視覺設計能力也被遠遠的甩在了後面。

同樣的道理,交互設計也是一樣,猶抱琵琶半掩面才會更讓人想去一窺桃花真容顏,這種對人性的理解源需要的是不斷地修行,而讓產品使用起來行雲流水所需要的功力又豈在一朝一夕?你敢分心它用嗎?

中場能傳出準確的落點就是好中場,前鋒能把皮球射到門框以內就是好前鋒,視覺搞的好看就是好視覺,交互搞的好用就是好交互,這都需要在自己的業務內持續不斷地修行與強化。

這世界不需要「差不多」先生,也很難造就「萬金油」先生,物競天擇適者生存,自然法則很殘酷。



用戶體驗的要素 (豆瓣) by Jesse James Garrett


光說「設計」這個詞的定義現在已經很模糊了,設計領域涵蓋面也很廣。前面很多知友都生動形象的從擬人,下定義,舉栗子的方面對這個問題進行解答,貴妃這裡就直球拋出答案,從界面,視覺,和交互這三種設計師的設計產出物的角度,來說說這三種設計師是怎麼分工的,還有他們之間錯綜複雜的關係和愛恨情仇(並沒有

同時貴妃也在專欄讀點兒設計 - 知乎專欄 里放了一篇更完整啰嗦的設計師分類的文章UI、UX,傻傻分不清楚?來一份設計師分工指南 。不敢說是科普文,一點愚見,歡迎各位知友觀後交流 :))

1. 首先是交互設計師
總的來講,UX設計師是設計人與信息產品的流程和關係,歸根結底都要研究人、事、物的聯繫,它是一個囊括計算機工程、心理學、設計的交叉學科。

一般而言,UX設計師使用一些用戶研究方法 設計方法作為輔助,通過現場觀察、可用性測試、用戶訪談等用戶研究方法了解用戶使用行為,發現產品體驗問題

UX 設計師主要關注用戶對產品的體驗感受,確保產品邏輯的流程可以跑得通,甚至跑得順、跑得精彩。

設計產出物 :流程圖,網站地圖,故事版,交互設計原型圖(線框圖),UIspec ,交互設計規範

工具:axure,OmniGraffle,Visio,Sketch,Illustrator,Fireworks,InVision,PPT,Keynote,Photoshop


2. 再看看視覺設計師,問題里提到的界面設計師(UI)其實也可以歸類到視覺設計里的


一般國內而言,諸如UI設計師、GUI設計師、運營設計師、平面設計師等名稱各異的設計師頭銜,在不同場合也都被稱為視覺設計師。

  • UI 設計師 / GUI設計師

UI指的是用戶界面,也就是人與機器互動的界面。可以理解為UX的一個分支,不同於 UX 設計師需要關注產品的整體感覺,UI 設計師更關注產品以怎樣的界面呈現。其實互聯網領域中,UI 和 UX 設計師的界限相當模糊,在很多創業公司,這兩個設計角色是合二為一的。

國內而言,目前一般把屏幕上顯示的圖形用戶界面(GUI :Graphic User Interface)都簡單稱為UI。我們經常聽到的UI設計師,其實指的是GUI設計師,也就是圖形界面視覺設計師,負責產品或網站的圖形、圖標、色彩、視覺風格等,決定營造出什麼樣的視覺體驗。


設計產出物 :視覺設計稿,視覺設計標註規範 ,視覺設計規範文檔,視覺切圖

工具:Photoshop,Sketch,Illustrator,Fireworks,markman(視覺標註軟體)

  • 平面設計師

平面設計師,應該可以說是設計師的起源,經常被稱為美工,有時冠以品牌設計師或運營設計師頭銜。
但需要注意的是平面設計師的設計——logo、海報等,更偏情感創意類,往往是天馬行空的視覺創意思維,更強調感性,通過設計讓用戶產生情感觸動,提升品牌價值;而UI設計師的設計——更偏向於產品類,基於用戶需求,根據目標用戶的喜好,探索設計風格,進行界面布局,歸根到底UI設計師兼顧感性的同時更偏理性,通過解決問題獲取更好地體驗。


其實我本來不想回答的,但是看到高票的同志理解偏差太大,所以,怒答!
首先,我們要搞清楚什麼是視覺設計。
視覺:眼睛看的到的東西。設計:設計師運用技能使得信息優良快速的傳達。
所以,什麼是視覺顯而易見的。我們不能說視覺設計加上交互設計就是好的界面設計這是完全不能接受的。

視覺設計是一個非常模糊的概念分類,這個詞語本身就有很大的問題。

正常的設計分類如下:
1:平面設計
2:工業設計
3:建築設計
三者加在一起可能就是設計,又被稱作視覺設計。


UI設計是屬於平面設計類目中的一份子。這個分類幾乎在二次工業革命之後的包豪斯設計之後便是如此。UI是最新的平面設計延展範疇。
好的平面設計師有很多,個人比較喜歡的有:杉浦康平,呂敬人,施德明,原研哉等。想要了解更多好的設計師推薦搜索AGI(AGI_百度百科)


說的有點多,但是這些不得不說啊。

至於交互設計主要是指:產品所呈現的點到點的交互狀態。比如:窗口的彈出,點擊按鈕,下拉菜單種種。


其實這些概念都已經進化的很清楚了,如果提問的朋友還是不太理解我希望多閱讀些書籍。我本人還是感覺網路化時代帶來了信息快速的補充和學習但畢竟是碎片化信息,容易讓人一知半解。


如見書籍如下:《世界設計史》《包豪斯理想》《杉浦康平與亞洲對話》《為什麼我的設計這麼出名》《設計中的設計》等。

該下班了,先寫這麼多。設計類的交流支持分數果然比較少。剛來知乎,第一次寫這麼多。


這個問題很惱人,以致於我已經不去想它了(老闆讓你做什麼你就做什麼唄,不用分那麼清楚)當然可以說說一般情況下交互視覺做些什麼。

舉個例子,希望有所幫助

此圖左邊是安卓版知乎的消息,右邊是網頁版知乎的消息。

此圖左邊是安卓版知乎的消息,右邊是網頁版知乎的消息。
有沒有發現消息下面子項是不一樣的,圖標也有差異。
從黃繼新的某一個答案里,以及這個結果,我可以推測知乎網頁和知乎安卓是兩撥設計師。那麼交互設計和視覺設計做了哪些事導致了這個不一樣呢?

交互設計師需要組織信息,就像這個知乎的消息,都是三個子項,放哪三個呢?知乎給了我們兩個答案:網頁版把私信放在個人信息里,安卓版可能把最近關注放在了個人信息里;

交互設計師需要撰寫文字,
安卓版:
黃繼新 回答了該問題
知乎官方 Android 客戶端 1.0 版本有哪些特性?
網頁版:
黃繼新 回答了問題 知乎官方 Android 客戶端 1.0 版本有哪些特性?

還要想一些極端情況,比如
黃繼新 黃繼光 張三 李四 等1024人回答了問題 知乎官方 Android 客戶端 1.0 版本有哪些特性?

視覺設計師需要決定文字用什麼樣的字體,網頁版的知乎是襯線體,安卓版決定用非襯線的。

視覺設計師需要畫標題欄按鈕圖標什麼的。安卓版的標題欄要比網頁版的亮一些,雖然都是藍色。
同樣是消息子項的選中效果,網頁版是圖標亮,安卓版是加一條杠杠(為了符合平台特性),而視覺設計師要做的就是設計這個圖標怎麼個亮法,杠杠什麼顏色多長多粗...

當然,有一些人,上面的活全都要干。所以他們稱自己為界面設計師。(大霧)

哎呦,變吐槽了 (逃


這樣的問題,我認為還是用崗位職責來回答你比較容易理解:

1、界面設計和視覺設計都是美術類的崗位,但工作分工不同:
界面設計:UI(User-Interface Design),用戶界面設計,例如軟體、網站、APP等;
視覺設計:Visual Design,更多偏向品牌、形象設計,例如廣告、海報、周邊等;

2、交互設計(Interaction Design)則是對人機交互界面、反饋、流程的設計,與界面設計配合;

3、如果以一個手機APP項目為例,
交互設計讓產品更好用,
界面設計讓產品更好看,
視覺設計讓產品更好賣(用戶更想用或買)。


你不要理會這些五花八門的名詞,專業拆分本來是好事,但如果變成本末倒置那就不一樣。
界面設計=視覺設計(好看嗎?看得懂嗎?)+ 交互設計(怎麼用?好用嗎?)


交互設計方面的學習者,目前還沒有深刻地理解到能夠發表到意見。
貼上一段文字給大家參考

當然,在很多情況下,設計項目需要注意幾種設計科學的協同合作,才能達成有益的用戶體驗(參見圖1)。在這種情況下,我們才認為體驗設計一詞最為合適

圖1:我們可以認為數字產品的用戶體驗設計(UX)包括3個方面的關注,即形式,行為和內容。交互設計關注行為的設計,也關注行為如何與形式和內容產生聯繫。類似地,信息架構關注內容的結構,但同時也關注用來訪問內容的行為,以及內容如何呈現給使用者。工業設計和圖形設計關注的產品和服務的形式,但也要保證這種形式必須要支持產品的使用,這就意味著也要關注行為和內容。

圖1:我們可以認為數字產品的用戶體驗設計(UX)包括3個方面的關注,即形式,行為和內容。交互設計關注行為的設計,也關注行為如何與形式和內容產生聯繫。類似地,信息架構關注內容的結構,但同時也關注用來訪問內容的行為,以及內容如何呈現給使用者。工業設計和圖形設計關注的產品和服務的形式,但也要保證這種形式必須要支持產品的使用,這就意味著也要關注行為和內容。

摘自《About Face 3 交互設計精髓》 第三版介紹中的「為什麼稱之為「交互設計」」

希望能有幫助。

PS:圖是隨便弄的,有點丑,見諒,內容沒差O(∩_∩)O~~


推薦閱讀:

蘋果公司官網導航條的設計是否足夠優秀?文字部分是浮雕還是蝕刻?

TAG:網頁設計 | 交互設計 | 用戶界面設計 | 視覺設計 |