關(guān)于 UX（User Experience）

在業(yè)界，許多人常常會(huì)把UI/UX這兩個(gè)詞匯混再一起使用，在中國臺(tái)灣也有不少公司開出來「UI設(shè)計(jì)師的職缺」也都期許來應(yīng)征的設(shè)計(jì)師具有一定的UX設(shè)計(jì)經(jīng)驗(yàn)，我是覺得這兩個(gè)領(lǐng)域應(yīng)該是兩個(gè)獨(dú)立的職位啦（抖，但…在更深入探討這件事情的對(duì)錯(cuò)與否之前，我們先來介紹一下到底什么是UX吧！

注：近期的業(yè)界趨勢就是，不管你是工程師、設(shè)計(jì)師、BD、PM還是老板，只要會(huì)說一句話，「阿，這樣設(shè)計(jì)不夠『直覺』啦，使用者OOXX…」，就有種好像很懂UX的感覺呢�。�苦笑）

UX，全名是 User experience，中文就是使用者經(jīng)驗(yàn)，顧名思義它強(qiáng)調(diào)的是使用者體驗(yàn)的過程。就我個(gè)人觀點(diǎn)而言，UX 設(shè)計(jì)師在做的的事情其實(shí)就是建立產(chǎn)品一系列帶給人的印象（感覺），這樣子的印象建立從營銷規(guī)劃開始到產(chǎn)品實(shí)際使用的情境，從程序運(yùn)作的效能到UI的色彩規(guī)劃都包含在其中；每一個(gè)環(huán)節(jié) UX 設(shè)計(jì)師都需要評(píng)估在特定的時(shí)間點(diǎn)，產(chǎn)品到底給用戶產(chǎn)生了怎么樣的印象，同時(shí)思考是否符合設(shè)計(jì)的預(yù)期。

大部分的 UX 設(shè)計(jì)師會(huì)透過真人測試，分析使用者的使用情形，發(fā)現(xiàn)需求并提供可能的解決方案，即使在沒有真人測試或是案例不足的情況底下，也會(huì)持續(xù)的運(yùn)用各種假設(shè)，思考、分析使用者在當(dāng)下可能產(chǎn)生的行為，以及每一個(gè)行為背后的預(yù)期目標(biāo)，并根據(jù)這些行為目標(biāo)對(duì)用戶體驗(yàn)進(jìn)行設(shè)計(jì)或者優(yōu)化。舉個(gè)例子，前陣子剛好看到一篇文章再講該如何去設(shè)計(jì)「關(guān)于我們」這個(gè)頁面，文章中提到的第一個(gè)問題點(diǎn) → 為什么使用者會(huì)點(diǎn)進(jìn)「關(guān)于我們」這個(gè)…幾乎沒有人會(huì)點(diǎn)的頁面呢？而這個(gè)問題會(huì)在進(jìn)一步的延伸到…用戶背后的預(yù)期目標(biāo)，用戶究竟預(yù)期在「關(guān)于我們」這個(gè)頁面能夠得到些什么信息？如果能夠去依照這樣的邏輯進(jìn)行思考，就應(yīng)該不會(huì)設(shè)計(jì)出在「關(guān)于我們」這個(gè)頁面貼上那萬年不變的公司目標(biāo)或是公司理念之類的乏味信息吧。（當(dāng)然，如果寫得很有趣或是很吸引人是另當(dāng)別論啦XD）

若要能夠有效的改善整體的設(shè)計(jì)體驗(yàn)，在思考上述問題的同時(shí)，UX 設(shè)計(jì)師會(huì)開始進(jìn)行實(shí)際的使用者訪談、使用者行為觀察，并搭配數(shù)據(jù)搜尋的方式來了解用戶背后真正的目標(biāo)，在確認(rèn)目標(biāo)之后開始考慮該用什么樣的方式與使用者進(jìn)行互動(dòng)才能在傳達(dá)內(nèi)容的同時(shí)又能達(dá)到一個(gè)良好的頁面體驗(yàn)？相信到目前這個(gè)步驟為止，我們討論的既不是「視覺該如何呈現(xiàn)」，也不是「程序代碼該如何去寫」，而是去看見使用者的需求并基于這樣的需求進(jìn)行體驗(yàn)上面的優(yōu)化，這就是UX最核心的概念吧（當(dāng)然，在這樣的流程過后可能會(huì)產(chǎn)生滿坑滿谷的程序代碼跟滿坑滿谷的視覺設(shè)計(jì)圖吧…（翻桌））。另外一個(gè)例子，不知道大家還記不記得上一個(gè)版本的Airbnb，打開的時(shí)候第一眼是什么樣的感覺？舊版的Airbnb首頁上方用一段又一段具有質(zhì)感的短片，營造了一種讓你想馬上背上背包，親身走到別人的家里進(jìn)行體驗(yàn)，立刻出發(fā)旅行的氛圍，但…大家有沒有想過為什么Airbnb用的是影片而不是照片呢？而且為什么是沒有聲音的影片，不干脆把現(xiàn)場的聲音給播放出來？別猶豫啦！試著把影片替換成照片或是加上聲音，很快地你會(huì)發(fā)現(xiàn)這樣子的頁面產(chǎn)生的效果其實(shí)是完全不同的！原先那種靜靜的驅(qū)動(dòng)你去做些什么事情的體驗(yàn)設(shè)計(jì)，其實(shí)效果是遠(yuǎn)大于單純靜態(tài)的圖片的呈現(xiàn)，或是加上過于引人注目的聲音干擾。

注：近期有不少的Landing Page常常都會(huì)用無聲的影片搭配黑色屏蔽塑造分為，其實(shí)營造的感覺真的還不賴。（當(dāng)然…影片要拍得好）

關(guān)于 UI（User Interface）

對(duì)于 UX 有了初步個(gè)觀念后，我們再來聊聊UI，User interface 又是什么？UI討論的其實(shí)就是UI呈現(xiàn)的流程，用專業(yè)一點(diǎn)的術(shù)語來解釋，所謂「UI」其實(shí)就是一種輸入和輸出的設(shè)計(jì)。

嗯…還記得我以前在讀電機(jī)系研究所的時(shí)候，有一堂課叫做人機(jī)UI設(shè)計(jì)，當(dāng)時(shí)我興高采烈地以為有機(jī)會(huì)做到我想象中的UI設(shè)計(jì)了�。。�歡呼），但是到了上課教室后發(fā)現(xiàn)我們要寫的是 USB 的串接，屏幕的數(shù)據(jù)匯流之類從天堂掉到地獄的設(shè)計(jì)內(nèi)容。當(dāng)時(shí)，我們需要使用開發(fā)版來進(jìn)行測試，也是到那時(shí)候我才深刻地了解到，開發(fā)版上面 USB 的傳輸叫做UI，顯示器的傳輸也叫做UI，我們需要去思考該要放甚么樣的數(shù)據(jù)進(jìn)去（Input）并得到怎么樣的輸出（Output）來確保開發(fā)版的運(yùn)作跟我們預(yù)想的流程是相同的，同時(shí)使用者（悲慘的研究生）也能根據(jù)輸出的結(jié)果去進(jìn)行進(jìn)一步的操作行為 → 對(duì)！這其實(shí)就是一種廣泛，術(shù)語上的UI設(shè)計(jì)，只是在這樣的設(shè)計(jì)過程中，視覺輸入的內(nèi)容大部分都被我們在程序里面實(shí)做完啦！

OK，回到主題，通常 UI 設(shè)計(jì)師會(huì)依照 UX 設(shè)計(jì)師流程上面的需求進(jìn)行考慮，開始規(guī)劃 Wireflow，Wireframe以及 Prototyping 的制作。UI設(shè)計(jì)師需要對(duì)平臺(tái)產(chǎn)品的設(shè)計(jì)規(guī)范要有一定程度的了解（沒讀完就想當(dāng)UI設(shè)計(jì)師？），像是 iOS 的 Human interface guideline 或是 Google 的 material design guideline，Window GG，并基于這些設(shè)計(jì)規(guī)范的限制，進(jìn)行頁面以及流程上的設(shè)計(jì)。

當(dāng)然，設(shè)計(jì)并不應(yīng)該被局限于「某些規(guī)范」之中，跳脫格局的優(yōu)秀UI設(shè)計(jì)也是有不少！不過，UI設(shè)計(jì)與平面設(shè)計(jì)對(duì)于我而言最大的差異點(diǎn)就在這，在我們?nèi)�嘗試各種天馬行空，創(chuàng)意爆發(fā)的同時(shí)，我們隨時(shí)需要回到「使用者為中心」的考慮，確認(rèn)整體的設(shè)計(jì)是否能夠帶給使用者絕佳的操作體驗(yàn)，不會(huì)造成使用者的困惑或是挫折感。在這樣的過程中，設(shè)計(jì)師也耗費(fèi)心力評(píng)估「用戶操作UI時(shí)的體驗(yàn)」對(duì)于使用者的使用情境是否合適，舉例來說，一只跑步的 APP 就應(yīng)該要讓使用者即使是在慢跑的過程中也能輕易地進(jìn)行UI上的操作，同時(shí)提供清晰的信息呈現(xiàn)，這些情境也包含到可能發(fā)生的個(gè)種特殊狀況；像是今天你在逛Facebook的時(shí)候網(wǎng)絡(luò)突然斷線了，UI 設(shè)計(jì)師在這個(gè)時(shí)間點(diǎn)需要在UI流程中考慮到「斷線」這個(gè)狀態(tài)，并且「設(shè)計(jì)視覺該進(jìn)行怎么樣的變化」，像是跳出一個(gè)斷線通知來告知用戶網(wǎng)絡(luò)出現(xiàn)問題，還有通知結(jié)束后又應(yīng)該要產(chǎn)生怎么樣的UI更新；而 UX 設(shè)計(jì)師就會(huì)開始思考如果是一個(gè)斷線通知，通知的內(nèi)容應(yīng)該要寫些什么，要怎么樣可以讓使用者會(huì)心一笑？或是有沒有更好的方法可以傳達(dá)「現(xiàn)在已經(jīng)沒有網(wǎng)絡(luò)啰」這樣的信息，能不能自動(dòng)跳出網(wǎng)絡(luò)開關(guān)的窗口提供給用戶直接進(jìn)行操作？

到這邊為止我們做個(gè)簡單的結(jié)論，UX設(shè)計(jì)師設(shè)計(jì)的是一個(gè)「產(chǎn)品的印象（感覺）」，而UI設(shè)計(jì)師設(shè)計(jì)的是一個(gè)「產(chǎn)品的呈現(xiàn)」。嗯…是不是覺得兩者好像有點(diǎn)接近甚至重迭呢？沒錯(cuò)！UI跟UX在某種程度上其實(shí)是密不可分的，彼此也有部分的重迭區(qū)間，但…我們要謹(jǐn)記在心的重點(diǎn)就是 →「一個(gè)優(yōu)秀的UI，不可能（也不應(yīng)該）沒有考慮任何的使用者經(jīng)驗(yàn)設(shè)計(jì)，而一個(gè)優(yōu)秀的UX更需要搭配好的UI流程、設(shè)計(jì)來呈現(xiàn)給使用者」。

關(guān)于 GUI（Graphic User Interface）

GUI，所謂的Graphic user interface，主要的工作就是把UI設(shè)計(jì)師設(shè)計(jì)的流程或是原型實(shí)際的可視化，這些內(nèi)容包含了App中「幾乎所有的」視覺組件，App的icon還有一堆有的沒的會(huì)讓工程師氣死的酷炫光影效果之類的，這個(gè)部分需要的硬底基礎(chǔ)功也是不少…坊間大部分的補(bǔ)習(xí)班在培養(yǎng)的都是GUI這一個(gè)部分。

關(guān)于實(shí)際需求

霹靂啪拉講了一大串，不知道大家到目前為止有沒有更了解它們?nèi)�者之間的差異呢？（希望不要變的更加困惑啊）那…我們最后再來講一些比較實(shí)際的部分 →相信各位同學(xué)聽到這里心里可能會(huì)有個(gè)疑惑，在業(yè)界的狀況呢？一個(gè)UI設(shè)計(jì)的流程里面是否真的會(huì)有如此清楚的分工？根據(jù)小弟聽到的或是看到的信息（不負(fù)責(zé)任啊，歡迎其他業(yè)界前輩提供更多信息），「完整的UI設(shè)計(jì)流程」普遍只會(huì)出現(xiàn)在像是鴻海、趨勢科技、Asus啊這些具有怪物級(jí)規(guī)模的大公司里面（相較于小弟工作的團(tuán)隊(duì)這些公司都是怪物級(jí)啊，沒有要戰(zhàn)公司的意味，別炮我（抖）），當(dāng)然近期也有越來越多的中小型新創(chuàng)，科技公司開始導(dǎo)入這樣子的設(shè)計(jì)流程來進(jìn)一步提升自家的產(chǎn)品，但…由于這樣的流程對(duì)于小公司或是新創(chuàng)公司而言，不管是在時(shí)間還是金錢上面，負(fù)擔(dān)的成本偏高，畢竟沒有被投資的新創(chuàng)公司，應(yīng)該也沒有太多的錢，或是太多的時(shí)間麻！尤其是在UX這個(gè)部分，一個(gè)完整的UX設(shè)計(jì)流程絕對(duì)不是花個(gè)一兩天，找個(gè)一兩個(gè)受測者就可以快速得到結(jié)論的。至于在iOS/Android開發(fā)這個(gè)部分，通常公司只會(huì)請(qǐng)1到2位的UI設(shè)計(jì)師去處理整個(gè)產(chǎn)品的UI設(shè)計(jì)，甚至包含營銷、宣傳跟產(chǎn)品Landing Page等等，那…前面提到的 Wireflow 或是 Wireframe 的部分呢？這個(gè)部分就有很多可能啦，有可能是PM，也有可能是設(shè)計(jì)師甚至是工程師（蛤？）來處理，通常都是對(duì)于產(chǎn)品有最高掌握的角色進(jìn)行規(guī)劃，這樣才能盡可能地降低來回溝通的額外成本。不過，可以預(yù)期的是，隨著使用者體驗(yàn)的重要性日益增加，相信不久的將來（1–3年），優(yōu)秀的UX設(shè)計(jì)師絕對(duì)會(huì)成為一間公司要做出好的產(chǎn)品的基本需求��！還有…作為UI設(shè)計(jì)師，即將成為UI設(shè)計(jì)師，或是夢想成為UI設(shè)計(jì)師的各位，一起努力吧（笑。