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

4 評(píng)論 24055 瀏覽 208 收藏 17 分鐘

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

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

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

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

  1. UX設(shè)計(jì)師/交互設(shè)計(jì)師
  2. 視覺設(shè)計(jì)師:UI/GUI設(shè)計(jì)師;平面設(shè)計(jì)師
  3. 互動(dòng)設(shè)計(jì)師(動(dòng)效設(shè)計(jì)師)
  4. 產(chǎn)品設(shè)計(jì)師
  5. 用戶研究工程師(用戶研究專員)

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

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

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

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

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

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

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

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

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

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

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

視覺設(shè)計(jì)師

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

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

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

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

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

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

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

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

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

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

tz20151012 (2) tz20151012 (3)

2. 平面設(shè)計(jì)師

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

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

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

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

互動(dòng)設(shè)計(jì)師(動(dòng)效設(shè)計(jì)師)

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

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

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

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

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

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

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

tz20151012 (1)

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

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

簡(jiǎn)單來(lái)講,產(chǎn)品設(shè)計(jì)師就是一個(gè)需要為產(chǎn)品視覺和體驗(yàn)整體負(fù)責(zé)的設(shè)計(jì)師。

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

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

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

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

用研是用戶需求的捍衛(wèi)者?!?/p>

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

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

你可能會(huì)聽到他們很自然的說:“從我們的調(diào)查可以看出,一個(gè)典型用戶應(yīng)該blabla?!?/p>

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

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

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

 

原文作者:Lo Min Ming ? ?翻譯:滕玥 ? ?校對(duì):小王子Mayday

譯文來(lái)自:特贊Tezign

 

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 怎么發(fā)到產(chǎn)品經(jīng)理類目下了?

    來(lái)自浙江 回復(fù)
    1. 再次說明了產(chǎn)品狗什么都要懂點(diǎn)

      來(lái)自北京 回復(fù)
    2. 所以你這個(gè)是針對(duì)產(chǎn)品寫的?

      來(lái)自浙江 回復(fù)
  2. 寫的那么好,怎么沒有人評(píng)論呢?

    來(lái)自廣東 回復(fù)