這篇文章會跟各位伙伴簡單介紹UI、UX跟GUI三者的差異，同時也會根據自身經驗說明一些業界實際的需求狀況，有任何問題歡迎透過留言一起討論喔！

我是 Samuel，目前任職于Tickle Lab，是一位iOS工程師，半個UI設計師跟只會改Code不會寫Code的假前端工程師。（注：Tickle Lab持續征才中，歡迎有興趣的伙伴加入我們）

關于 UX（User Experience）

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

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

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

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

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

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

關于 UI（User Interface）

對于 UX 有了初步個觀念后，我們再來聊聊UI，User interface 又是什么？UI討論的其實就是UI呈現的流程，用專業一點的術語來解釋，所謂「UI」其實就是一種輸入和輸出的設計。

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

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

「如何看懂iOS 10 的設計規范指南」

1. 看趨勢變化丨《從IOS 10設計指南變化看設計的新趨勢》
2. 看交互啟示丨《從IOS 10 的交互設計中學到的3個設計啟示》
3. 看使用方法丨《一份超詳細的「IOS 10 UI KIT」使用手冊（附源文件）》

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

注：Wireflow, Wireframe以及Prototyping的流程我會另外再寫一篇文章做說明，如果加進來這里…這篇文章就會看不完啦XD。

到這邊為止我們做個簡單的結論，UX設計師設計的是一個「產品的印象（感覺）」，而UI設計師設計的是一個「產品的呈現」。嗯…是不是覺得兩者好像有點接近甚至重迭呢？沒錯！UI跟UX在某種程度上其實是密不可分的，彼此也有部分的重迭區間，但…我們要謹記在心的重點就是 →「一個優秀的UI，不可能（也不應該）沒有考慮任何的使用者經驗設計，而一個優秀的UX更需要搭配好的UI流程、設計來呈現給使用者」。

關于 GUI（Graphic User Interface）

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

關于實際需求

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

「新人科普好文系列」

1. 交互原型丨《術語小科普！聊聊線框稿、視覺稿與原型的區別》
2. 移動端尺寸丨《通俗易懂！超全面的移動端尺寸基礎知識科普指南》
3. 字體規范丨《界面設計必備！全方位科普常用的字體規范（附神器）》

原文地址：medium

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com