UI/UX設(shè)計師的區(qū)別，你能分清楚嗎？

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)繕硕斑M，典型案例就是為新用戶設(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)容，他們更在意精美的圖標、按鈕等視覺元素以及合適的排版。視覺設(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，指的是用戶界面，也就是人與機器互動的界面?？梢岳斫鉃閁X的一個分支，不同于 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)站的圖形、圖標、色彩、視覺風(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)容包括圖標、圖形界面等；執(zhí)行統(tǒng)一的設(shè)計語言，撰寫并完善網(wǎng)站的設(shè)計規(guī)范，為產(chǎn)品注入美和生活氣息。” 這可能就是UI設(shè)計師日常事項啦。

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

設(shè)計產(chǎn)出物 ：視覺設(shè)計稿，視覺設(shè)計標注規(guī)范 ，視覺設(shè)計規(guī)范文檔，視覺切圖

工具：Photoshop，Sketch，Illustrator，F(xiàn)ireworks，markman（視覺標注軟件）

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ù)目標用戶的喜好，探索設(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)者。”

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

用戶研究員，通常與產(chǎn)品團隊共同明確調(dià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