新手入門分享:淺談UI&UX的差別

第一次接觸UI&UX這樣的名詞是在2012年,那時如果向別人介紹你的職位是『UI設計師』因該就是滿頭黑人問號,最近剛好有位朋友向我詢問這個問題,因此想寫篇文章一同和大家分享自己的經驗與看法。
Hello,我是 Sophia,目前任職於GoTrust ID,是一位『UI/UX設計師』,主要的工作是分析與設定使用者情境、規劃產品功能架構與操作流程、優化使用者體驗。
不是說UI是UI,UX是UX。為什麼你的職稱卻是『UI/UX設計師』!相信大家翻開各大人力派遣平台,一定也常常看到『徵UI/UX設計師』、『徵UI設計需有UX經驗』甚至有『徵平面設計』要會畫UI、網站設計還要會寫html+css5 月薪34xx0……喂!越講越遠~這麼多創意性的職稱,搞得大家滿頭霧水,傻傻分不清自己到底是要做UI還是要UX。
「因此今天是從業界的角度,切回來看UI&UX的差異到底在哪。」--《今日重點》

一句話說明兩者差異:
UX重視好用;UI重視好看其實兩者重視的都是使用者體驗,一個是體感(用起來感覺如何)、一個是觀感(看起來感覺如何)。UX是整體邏輯架構,重點在要知道給誰使用並能用且好用,用完還想再用;而UI的重點則在於視覺上呈現的所有細節與美感,除了『好看』還要『好.看得懂』。

UX Design (User Experience)
UX,意指 User experience,中文就是使用者經驗;顧名思義就是著重使用者的體驗流程設計。於小妹對於UX設計的見解是“透過與產品交互過程中提供實用性、易用性和樂趣來提高客戶滿意度和忠誠度。“
簡單來說就是要規劃一個方案,讓顧客依照計畫走到目的地,還開心沒怨言,而且從此以後對你死心踏地、肝腦塗地,大概是這樣。
問題1:UX設計師的工作內容?
答:大致上的職務內容如下:市場調查使、用其境收集與分析、假說實驗驗證(A/B Test)、定義Use case、交互介面設計、操作流程設計&繪製(flow、wireframe)、訊息架構設計、出產品文件……等。
問題2:UX設計師薪資的市場行情?
答:台灣落在月薪NT$45k~80K;國際則是落在月薪NT$18k~354k。(年薪約美金$690k~$1350k,台幣約215萬~425萬,參考網址),什麼!!差這麼多零~是的,所以英文好是不是很重要。
問題3:要成為UX設計師需要具備什麼條件?
答:觀察力、邏輯清晰、良好的溝通表達力、同理心了、解使用者心理學、異於常人的細心與耐心、對趨勢的敏銳度高、熟悉時程管理、程式開發基礎概念、對各巨頭介面規範有概念、視覺設計基本知識……等。
問題4:要會什麼專業工具?
答:痾…這見仁見智。
- wireframe:Axure / Justinmind / Mockflow / Adobe XD
- Cloud server:google drive / GA / Dropbox / Office 365
- 作業系統:windows / Mac
UI(User Interface)
UI,意指 User interface,中文就是使用者介面;介面的定義就是:『讓使用者與機器互動的操作畫面』。『畫面』二字很明確的就是偏視覺的部分。很多人會覺得不就是畫美美圖,錯!
比起平面設計師,最大的差異化就是:系統性與易讀性。
在設計介面時,因很多元件都會重複使用,並且有其功能與意義。因此有邏輯的設計每個元件,這是一件很困難的事。而且考量的因素也相對複雜,如:螢幕解係度相容性、多國語言的字數彈性、元件重復使用性…..等。不是好看就好,ok!
再來就是易讀性,如何在有限的螢幕尺寸清楚傳達資訊,不管是排版設計、字體與字級選擇、配色、圖標代表含義的詮釋、名詞統一等……都是介面設計師在設計的過程中需考量的必要因素。不是好看就好,ok!
問題1:UI設計師的工作內容?
答:主要職務內容:就是依照Flow或 Wireframe去長“皮”(就是畫介面,如:Mockup、Prototyping)、設計規範UI Kit、UI Pattern、Guideline、切圖、標示文件、圖標繪製……等。
題外話:介面內包含的內容,如:Slider、Banner也是UI設計是要負責嗎?個人認為,如果100人以上規模,當然是分工再拆細一點,可以由平面設計師負責;如果再50人以下的小公司,數量也不會太多,可以兼著做,但薪資喊高一點。問題2:UI設計師薪資的市場行情?
答:台灣落在月薪NT$35k~80K;國際則是落在月薪NT$140k~270k。(年薪約美金$540k~$1030k,台幣約170萬~325萬,參考網址)。
大家有發現一件事嗎!在台灣UI跟UX的薪資差異並不會大,但在國外這兩個職位薪資卻差了至少1.3倍。在這裡就可以看出,台灣低薪+公司專業知識不足,太追求具象的表層。小妹並沒有要貶低UI設計師的意思,只是職務的複雜度真的有很大落差。問題3:要成為UI設計師需要具備什麼條件?
答:熟悉Design Guideline(iOS Human Interface / Android Material Design)、色彩學知識、熟悉字體使用、插畫技巧、圖標設計技巧、熟悉專業工具、每天至少1~2小時的時間逛大神作品Behance / Pinterest Engineering / Dribbble 、對美感的趨勢要敏銳、要能分辨產品需求跟自我喜好(固執和堅持是有差的!)、超強溝通能力(因為你的圖在美,還是要由眼殘的RD去刻……除非你自己會寫code)、清晰的建檔邏輯&良好的檔案管理習慣。
在台灣,設計比較常面對一件鳥事。
就是常常被不專業的主管/懶惰+程度差的工程師/不懂趨勢的老闆指指點點、改來改去,原本完整專業的成品最後變成亂七八糟的四不像!所以有兩件事很重要:溝通、當機立斷。1.溝通:再怎樣的鳥同事,只要還能溝通,就要用心說明、耐心調整!不要跟麻煩妥寫,才能交出自己也滿意的成品。
2.當機立斷:確定這個環境真的是灘爛淤泥,就馬上離開~只要你真的有志氣是人才,機會多得是,不用學蓮花。
問題4:要會什麼專業工具?
答:工具各有利弊,主要還是自己順手最要緊!下面不是通通都要會,每一個項目選一個就好棒棒了!
- Wireframe:Axure / Justinmind / Overflow
- UI設計:Photoshop / Adobe XD / Sketch / 墨刀
- 插圖繪製:Illustrator / A pencil
- 原型製作(prototyping):Framer / Flinto / Invision / Marvel
- 設計規範&標示工具:zeplin / lingo
- 動畫製作:After Effects
今天落落長了講了一堆(還淺談勒),希望有幫助大家釐清這兩個職位本質的差異。不要領一份薪水做兩個人的工作,還不專精!真是賠了夫人又折兵。感謝大家,如果覺得小妹寫的還過得去,請不要吝嗇動動您的小手拍拍喔(反正平常坐辦公室也沒在運動LOL)!