UI、UX傻傻分不清楚?來一份清晰詳盡的設(shè)計師分工指南

張無極

設(shè)計是一個相當(dāng)廣義而模糊的術(shù)語。當(dāng)有人說“我是一個設(shè)計師”時,你很難知道他每天做些什么。

設(shè)計涵蓋了多領(lǐng)域和多職責(zé),從工業(yè)設(shè)計(汽車、家具)到印刷設(shè)計(雜志,其他出版物),再到科技行業(yè)(網(wǎng)站,手機應(yīng)用),隨處可見不同職責(zé)的設(shè)計師。而隨著科技公司不斷地涌入人機交互領(lǐng)域,應(yīng)運而生了許多新的設(shè)計師角色 —— UI設(shè)計師、UX設(shè)計師、視覺設(shè)計師、交互設(shè)計師、GUI設(shè)計師等。

這么多相似的名字,你是否也跟我一樣陷入傻傻分不清的迷霧中?下面就讓我們一起撥開迷霧,重新認識這些新型設(shè)計師們吧。

本篇介紹的設(shè)計師有:

UX設(shè)計師/交互設(shè)計師

視覺設(shè)計師:UI/GUI設(shè)計師;平面設(shè)計師

互動設(shè)計師(動效設(shè)計師)

產(chǎn)品設(shè)計師

用戶研究工程師(用戶研究專員)

UX設(shè)計師 / 交互設(shè)計師

UX ,英文為 User Experience ,指的是用戶體驗。一般而言,國內(nèi) UX 設(shè)計師,也稱為交互設(shè)計師或 UE 設(shè)計師(而國外的 UX 設(shè)計師指的是用戶體驗設(shè)計師,交互設(shè)計師指的是動效設(shè)計師)。

UX 設(shè)計師主要關(guān)注用戶對產(chǎn)品的體驗感受,確保產(chǎn)品邏輯的流程可以跑得通,甚至跑得順、跑得精彩。正如一千個人眼里有一千個哈姆雷特,一個設(shè)計問題往往也沒有唯一解。UX 設(shè)計師會深入場景,探索多種不同的解決方案,這種深入思考通常能產(chǎn)生創(chuàng)新方案。

一般而言,UX設(shè)計師使用一些用戶研究方法 & 設(shè)計方法作為輔助,通過現(xiàn)場觀察、可用性測試、用戶訪談等用戶研究方法了解用戶使用行為,發(fā)現(xiàn)產(chǎn)品體驗問題。

說到這里,會發(fā)現(xiàn)國外 UX 設(shè)計師也在做用研,有木有? 而國內(nèi)這一點上其實除了有完整 UED 設(shè)計部門的較大互聯(lián)網(wǎng)公司(分工比較明確,UX 設(shè)計師很少會去做訪談相關(guān)內(nèi)容,普遍都是用研童鞋來負責(zé)這一部分),創(chuàng)業(yè)公司和設(shè)計咨詢公司中的 UX 設(shè)計師基本上也都會兼顧用研;UX 設(shè)計師們通過頭腦風(fēng)暴、角色扮演、故事版等設(shè)計方法探索設(shè)計機會點,向著創(chuàng)造出“最好的”用戶體驗?zāi)繕?biāo)而前進,典型案例就是為新用戶設(shè)計一套令人愉悅的登錄流程。

總的來講,UX設(shè)計師是設(shè)計人與信息產(chǎn)品的流程和關(guān)系,歸根結(jié)底都要研究人、事、物的聯(lián)系,它是一個囊括計算機工程、心理學(xué)、設(shè)計的交叉學(xué)科。

“進行利益相關(guān)者訪談、用戶訪談,挖掘用戶需求,提煉用戶任務(wù)流;完整體驗不同產(chǎn)品,挖掘交互設(shè)計模式,設(shè)計交互模式,撰寫交互設(shè)計稿,并最終形成交互設(shè)計規(guī)范/UIspec;跟進視覺設(shè)計和開發(fā),確保產(chǎn)品正常上線” 這可能就是UX設(shè)計師日常事項。

對于UX設(shè)計師,你可能會聽到他們很自然的說:“我們應(yīng)該在用戶登錄成功后展示一個感謝頁面。”

設(shè)計產(chǎn)出物 :流程圖,網(wǎng)站地圖,故事版,交互設(shè)計原型圖(線框圖),UIspec ,交互設(shè)計規(guī)范

工具:axure,OmniGraffle,Visio,Sketch,Illustrator,F(xiàn)ireworks,InVision,PPT,Keynote,Photoshop

來自一位 UX 設(shè)計師(Neway Lau on Dribbble)的應(yīng)用界面案例。

視覺設(shè)計師

說起視覺設(shè)計師,通常會聯(lián)想到“扣像素”的處女座,相比于UX設(shè)計師梳理流程、組織信息架構(gòu)等內(nèi)容,他們更在意精美的圖標(biāo)、按鈕等視覺元素以及合適的排版。視覺設(shè)計師經(jīng)常在 Photoshop 中 4x 到 8x 的縮放級別中操作,細致刻畫容易忽略的小細節(jié)。

一般國內(nèi)而言,諸如UI設(shè)計師、GUI設(shè)計師、運營設(shè)計師、平面設(shè)計師等名稱各異的設(shè)計師頭銜,在不同場合也都被稱為視覺設(shè)計師。聽到這里,是不是已經(jīng)開始迷失在這些形形色色的概念里呢,下面就讓我一一來解密這些設(shè)計師吧。

1. UI 設(shè)計師 / GUI設(shè)計師

UI,英文為User Interface,指的是用戶界面,也就是人與機器互動的界面。可以理解為UX的一個分支,不同于 UX 設(shè)計師需要關(guān)注產(chǎn)品的整體感覺,UI 設(shè)計師更關(guān)注產(chǎn)品以怎樣的界面呈現(xiàn)。其實互聯(lián)網(wǎng)領(lǐng)域中,UI 和 UX 設(shè)計師的界限相當(dāng)模糊,在很多創(chuàng)業(yè)公司,這兩個設(shè)計角色是合二為一的。

國內(nèi)而言,目前一般把屏幕上顯示的圖形用戶界面(GUI :Graphic User Interface)都簡單稱為UI。我們經(jīng)常聽到的UI設(shè)計師,其實指的是GUI設(shè)計師,也就是圖形界面視覺設(shè)計師,負責(zé)產(chǎn)品或網(wǎng)站的圖形、圖標(biāo)、色彩、視覺風(fēng)格等,決定營造出什么樣的視覺體驗。從視覺層面把控產(chǎn)品界面設(shè)計,確保UI稿在視覺上清晰的傳達UX設(shè)計師的交互設(shè)計稿,也就是高保真視覺稿。

舉個栗子,在設(shè)計一個數(shù)據(jù)分析界面時, UI 設(shè)計師可以決定使用滑塊還是控制旋鈕,通過這樣的控件來闡述圖表帶來的直觀感受。此外 UI 設(shè)計師還負責(zé)制定視覺設(shè)計規(guī)范,確保產(chǎn)品設(shè)計的一致性;在規(guī)范中,明確一些UI 控件/組件的使用行為,比如錯誤或警告提示。

“熟悉不同分辨率的多端產(chǎn)品,諸如桌面端,Web 端和手機設(shè)備;能夠完成高質(zhì)量的視覺設(shè)計稿——從概念設(shè)計確定設(shè)計風(fēng)格到詳細設(shè)計,設(shè)計內(nèi)容包括圖標(biāo)、圖形界面等;執(zhí)行統(tǒng)一的設(shè)計語言,撰寫并完善網(wǎng)站的設(shè)計規(guī)范,為產(chǎn)品注入美和生活氣息。” 這可能就是UI設(shè)計師日常事項啦。

對于UI設(shè)計師,你可能會聽到他們很自然的說:“登錄和注冊鏈接應(yīng)該移到右上角”、“這個字距不行,那個按鈕應(yīng)該向左移動 1 像素!”

設(shè)計產(chǎn)出物 :視覺設(shè)計稿,視覺設(shè)計標(biāo)注規(guī)范 ,視覺設(shè)計規(guī)范文檔,視覺切圖

工具:Photoshop,Sketch,Illustrator,F(xiàn)ireworks,markman(視覺標(biāo)注軟件)

2. 平面設(shè)計師

平面設(shè)計師,應(yīng)該可以說是設(shè)計師的起源,經(jīng)常被稱為美工,有時冠以品牌設(shè)計師或運營設(shè)計師頭銜。在UI設(shè)計師、UX設(shè)計師等新興設(shè)計頭銜誕生前,視覺設(shè)計師其實等同于平面設(shè)計師。平面設(shè)計師從事的設(shè)計項目,具體來講包含網(wǎng)頁設(shè)計、包裝設(shè)計、DM廣告設(shè)計、海報設(shè)計、平面媒體廣告設(shè)計、POP廣告設(shè)計、樣本設(shè)計、書籍設(shè)計、刊物設(shè)計、VI設(shè)計等,也就是各個行業(yè)都需要平面設(shè)計師,以達到提升品牌形象等作用。逼格點說,平面設(shè)計師骨子里就是玩意境的~~

近年來由于互聯(lián)網(wǎng)催生的UI設(shè)計師熱潮,越來越多的平面設(shè)計師轉(zhuǎn)行為UI設(shè)計師。因為初級的UI就是平面設(shè)計的一個延續(xù),再加上扁平化風(fēng)格的流行趨勢,真真是對了平面設(shè)計師的技能樹,要知道平面設(shè)計師對于顏色、造型、排版等都是熟手中的熟手。

但需要注意的是平面設(shè)計師的設(shè)計——logo、海報等,更偏情感創(chuàng)意類,往往是天馬行空的視覺創(chuàng)意思維,更強調(diào)感性,通過設(shè)計讓用戶產(chǎn)生情感觸動,提升品牌價值;而UI設(shè)計師的設(shè)計——更偏向于產(chǎn)品類,基于用戶需求,根據(jù)目標(biāo)用戶的喜好,探索設(shè)計風(fēng)格,進行界面布局,歸根到底UI設(shè)計師兼顧感性的同時更偏理性,通過解決問題獲取更好地體驗。

因此建議想轉(zhuǎn)行的平面設(shè)計師可以了解一些關(guān)于界面、產(chǎn)品等入門知識,諸如ios\Android的各種設(shè)計規(guī)范、移動應(yīng)用UI設(shè)計模式、about face 3等;也可以多多把玩手機中的有趣應(yīng)用,試著理解分析下。

互動設(shè)計師(動效設(shè)計師)

每次說起互動設(shè)計師,我都無比糾結(jié)該怎么說明,英文是interaction designer,是不是覺得也可以翻譯為交互設(shè)計師呢,是不是又陷入了傻傻分不清的迷霧呢。 我覺得產(chǎn)生這個疑問的原因,其實是國內(nèi)國外行情的不同,在國外interaction designer 真的就是互動設(shè)計師,而不是國內(nèi)翻譯過來理解的交互設(shè)計師,而國內(nèi)我們經(jīng)常說的交互設(shè)計師其實在國外被稱為UX設(shè)計師。

感覺自己又繞進去啦,你明白了嗎?下面還是以實際案例來闡述什么是互動設(shè)計師吧,至于什么是國內(nèi)的交互設(shè)計師詳情可看“UX設(shè)計師”段落。

刷新 iPhone 手機郵箱應(yīng)用時,還記得那個流暢平滑的轉(zhuǎn)場動效嗎?它就是出自互動設(shè)計師之手。不同于視覺設(shè)計師設(shè)計靜態(tài)界面元素,互動設(shè)計師擅長將創(chuàng)意概念轉(zhuǎn)化為有視覺沖擊力的互動作品,比如用流暢動效,模擬用戶操作界面過程。舉個例子,一個應(yīng)用的菜單怎樣滑入、使用哪種轉(zhuǎn)場效果以及按鈕如何調(diào)起,互動設(shè)計師將其概念實現(xiàn)為有視覺沖擊力的互動模型。

“精通圖形設(shè)計、動態(tài)圖形和數(shù)字藝術(shù);對排版和色彩高度敏感;對材質(zhì)和結(jié)構(gòu)有所了解,并能夠控制動態(tài)效果;了解 iOS,OS X,Photoshop 和 Illustrator ,同時能夠熟練使用 Director(或同類工具),Quartz Composer(或同類工具),3D 計算模型進行動效圖形設(shè)計”這可能就是成為互動設(shè)計師的必備技能了

對于互動設(shè)計師,你可能會聽到他們很自然的說:“這個菜單應(yīng)該從左側(cè)淡入,時間為 800ms。”

設(shè)計產(chǎn)出物:互動作品,諸如gif格式圖片、視頻等

工具:AfterEffects,Quartz Composer,F(xiàn)lash,Origami

產(chǎn)品設(shè)計師

產(chǎn)品設(shè)計師又是一個寬泛的名詞,顧名思義就是設(shè)計產(chǎn)品的,根據(jù)實際的用戶/商業(yè)需求,設(shè)計實體/互聯(lián)網(wǎng)等各類產(chǎn)品,以滿足相應(yīng)的用戶/商業(yè)需求、解決對應(yīng)的問題。也就是說互聯(lián)網(wǎng)之前,產(chǎn)品設(shè)計師普遍研究人與環(huán)境的關(guān)系,提煉需求,設(shè)計實體產(chǎn)品,如家具產(chǎn)品、日用品等;而隨著互聯(lián)網(wǎng)浪潮來臨,互聯(lián)網(wǎng)領(lǐng)域的產(chǎn)品設(shè)計師,更多設(shè)計的是虛擬互聯(lián)網(wǎng)產(chǎn)品,如網(wǎng)頁、APP等。下面主要介紹互聯(lián)網(wǎng)領(lǐng)域的產(chǎn)品設(shè)計師。

簡單來講,產(chǎn)品設(shè)計師就是一個需要為產(chǎn)品視覺和體驗整體負責(zé)的設(shè)計師。

他的角色不易確定,并且不同的公司存在差異性。一個產(chǎn)品設(shè)計師可能會做少量的前端工作,組織用戶研究,設(shè)計用戶界面并且繪制視覺元素。由始至終,產(chǎn)品設(shè)計師都需明確待解決的問題,提出解決方案,然后設(shè)計、開發(fā)、測試,并不斷迭代更新。一些公司希望保證不同的設(shè)計角色之間可以流暢協(xié)作,所以設(shè)置了“產(chǎn)品設(shè)計師”這個職位來激勵整個設(shè)計團隊保持整體的用戶體驗,包括用戶研究、交互設(shè)計以及視覺設(shè)計。但其實大部分公司使用“UX 設(shè)計師”,甚至于僅使用“設(shè)計師”作為統(tǒng)稱。有時候簡單了解職位描述,可以讓你更容易理解公司中設(shè)計團隊是如何劃分職責(zé)的。

總的來講,產(chǎn)品設(shè)計師負責(zé)各個方面的體驗設(shè)計工作:用研、交互、視覺,確保能夠制作精確到像素的高保真原型,并且推動開發(fā)Web和移動端的新功能。

設(shè)計產(chǎn)出物:互聯(lián)網(wǎng)時代前:家具產(chǎn)品、日用品等;互聯(lián)網(wǎng)浪潮來臨:網(wǎng)頁、APP

用戶研究工程師(用戶研究專員)

“用研是用戶需求的捍衛(wèi)者。”

用研的目標(biāo)是回答這兩個緊密相關(guān)的問題:“你的用戶是哪些? 你的用戶需求是什么?”。通常,用研需要訪談用戶,挖掘龐大的商業(yè)數(shù)據(jù),收集并整理在其中的發(fā)現(xiàn),如可用性測試、焦點小組、數(shù)據(jù)分析等。我們都知道設(shè)計是一個持續(xù)迭代的過程,所以用研們通過組織A/B 測試來篩選更符合用戶需求的設(shè)計方案。一般而言,用研通常都是大公司的支柱,因為在大公司中才可以接觸到足量的數(shù)據(jù),有充足的機會統(tǒng)計顯著的結(jié)論。

用戶研究員,通常與產(chǎn)品團隊共同明確調(diào)查目標(biāo);設(shè)計研究方案,設(shè)法了解用戶行為與態(tài)度;能夠使用大量的定性研究和少量的定量研究(比如調(diào)查問卷)來組織用戶研究。UX 設(shè)計師偶爾也會兼顧下用研的角色的。

你可能會聽到他們很自然的說:“從我們的調(diào)查可以看出,一個典型用戶應(yīng)該blabla。”

研究產(chǎn)出物:用戶畫像,A/B 測試報告,可用性測試報告,專家評估報告,焦點小組報告,用戶訪談報告,數(shù)據(jù)分析報告等

工具:Mic,Paper,Docs,PPT,Keynote,Excel,SPSS

此文為兩位譯者根據(jù)原文,結(jié)合國內(nèi)實際情況修改、整理出的成果,較原文有較大改動。

原文作者|Lo Min Ming ? ?翻譯|滕玥 ? ?校對|小王子Mayday

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,611評論 25 708
  • 隨著移動互聯(lián)網(wǎng)的迅猛發(fā)展,使得移動產(chǎn)品設(shè)計人員急缺。由于高薪酬,很多其他行業(yè)設(shè)計師轉(zhuǎn)行做UI設(shè)計。 那么到底什么是...
    張安松閱讀 2,557評論 0 33
  • 文/沐小笙 她坐在七層半的樓梯角落,再半層上是少有人問津的樓頂,而半層下是光明又嘈雜的大學(xué)生活。她壓抑著自己的哭聲...
    欖仁小姐寫字的地方閱讀 471評論 1 1
  • 最近身體一直沒有休息好,總是感覺很乏,但今天早上做了個玉米餅,豆?jié){,果汁,蒸個包子,寶吃了不少,就是做的魚,淡了,...
    艷兒吖閱讀 281評論 0 0
  • 大雨在傾盆而下 屋檐邊,有一個老奶奶 對面紅燈中 小小少年在人行橫道上 手里舉著小傘,一蹦一跳地往前“奔跑” (文...
    李易峰女友閱讀 210評論 1 3