國內有很多剛入行的設計師和很多自媒體的訂閱號文章，經常把UED/UXD、IXD、GUI這幾個專業術語搞混，并且層級關系都不準確。我們曾經做過一款H5的“UI設計師測試題”，列舉了以上幾個關系，發現有高達70%以上的人都做錯了，也證明了即使是一些從業多年的設計師，對它們彼此之間的定位還不清楚。

1 UED/UXD

UED和UXD其實是一個意思，只是國外和國內的縮寫不同，導致很多人都產生了誤解，甚至完全曲解它們的意思。UE和UX都是User Experience的縮寫，而D則是Design（設計）的縮寫。UE是中國的普遍叫法，截取了兩個單詞的首字母；而UX是國外的叫法，國外習慣把“ex”縮寫成X，尤其是在谷歌、微軟等知名公司啟用這個縮寫以后而被定性，所以它們都是用戶體驗設計。也有一些公司把D解釋為Designer（用戶體驗設計師）——一個職位的名稱。

用戶體驗不僅是視覺上的，從開始看到，到用手觸碰，再到大腦的思考，最后是心里的感受等，這一系列的過程才是用戶體驗。用戶體驗包含五感的接觸、思維的邏輯，以及使用的心理，這些條件都是缺一不可的。

例如，我們到一家餐館就餐（如下圖），從店外看到餐館內部的建筑規模、牌匾大小等信息，會產生心理上的波動，直接傳達給大腦思考——這家餐館看起來是否正規、場面是否氣派、請朋友吃飯是否夠檔次；其次是傳達心理感受——覺得心情愉快還是不愉快。僅僅從第一眼的視覺上就已經讓我們產生了非常多的連鎖思維。

海底撈和街邊大排檔

進入店面后，排隊的人非常多，所需等待的時間特別長，那么這個時候是否有人接待我們？我們是否有舒服悠閑的等待方式？可以接受店內提供的什么服務來消除自己等待的焦躁？我們經常會遇到這樣的情況：興高采烈地進入一家店，由于人多導致需要排隊等候，但又無人理睬，幾次和服務人員溝通無果，最后氣憤地離開換下一家。很多飯店在這一步的用戶體驗上就失敗了，導致用戶（顧客）的流失，而且也別想再從這位用戶身上獲得口頭廣告和再來一次的優勢了。

就座后，是否有服務人員快速接待為你點餐？點餐后上菜速度是否讓你滿意？是否有多種調料滿足你的個性化定制？你在用餐時呼叫服務員是否能得到快速的反饋？就餐過程中是否有一些小樂趣或小節目讓你難忘？不要小看這一系列的小細節，尤其是用戶的反饋，這是極為重要的。設想你呼叫服務員，一次，兩次，三次……一直都沒有人理睬你，你還會用安靜、平和的語氣呼叫服務員嗎？

當就餐結束后，如果你對整個過程都非常滿意，那么相信以后你會經常光顧，甚至推薦給朋友，并為其免費做宣傳。當你再和朋友聚會時，你第一時間想到的就是這家餐廳，因為你已經享受到了良好的用戶體驗。

感受到了嗎？用戶體驗就在我們的生活中，在人機交互時代，越來越多的產品更加注重用戶體驗。這其中，UI是必不可少的一部分，很多人覺得自己的產品有強大的后臺和交互就足夠了，表面的視覺效果只是華而不實的花衣裳。其實這種想法是錯誤的，設想我們剛才說的火鍋店，當你第一眼看到這家店時，牌匾歪斜，周圍堆放著垃圾，服務人員對你愛答不理，點餐不方便，餐具不知道在哪里，沒有洗手清潔措施等，你還會興高采烈地主動走進去嗎？

回歸到我們所說的界面。比如你在注冊一個新的賬號時，輸入完成后，點擊“下一步”按鈕，但是沒有任何反饋和提示，你不知道是網絡慢，還是服務器出現了問題，又或者是輸入的內容錯誤；當你發現界面給了你輸入錯誤的提示，但是卻不告訴你是用戶名重復、用戶名過長還是密碼大小寫錯誤，又或者是二次確認密碼不正確；當你再次完成所有操作，點擊“下一步”按鈕，系統提示錯誤，然后將你之前填寫的內容全部清空（系統刷新），可能你填好了電話，填好了銀行賬號，填好了收貨地址，填好了你的個人履歷，可是僅僅因為錯了一個字母就全部清空；不僅如此，視覺上字太小，看不清楚上面寫的是什么，或者為了視覺效果特意將按鈕做得很隱蔽讓人找不到；上面是輸入賬號密碼，下面卻有“登錄”和“注冊”兩個按鈕，你完全搞不懂到底應該點擊哪個，等等。以上這些雖然是很簡單的一個注冊界面，但是都體現出了極差的用戶體驗。

2、IXD

交互設計（Interaction Design），是定義、設計人造系統行為的設計領域。它既包括軟件界面的交互，也包括硬件設備的交互。被人俗稱為“互動設計”，其實這個解釋并不完全準確，尤其是交互設計師和互動設計師有很大區別。互動設計更多地存在于網絡公司，早期的很多帶Flash動效的網站被稱為互動網站，所招聘的互動設計師通常就是另一種網頁設計師，它介于網頁和廣告之間，更多的是將創意視覺和網絡技術結合而做出成果。而交互設計涉及的領域就廣泛得多了。如果要給它們倆一個更容易解釋的定義，那么可以說互動設計相當于你在跟系統對話，而交互設計就是你在跟系統心靈溝通。

當使用一個APP（應用程序）時，在不閱讀任何說明書的情況下，你就知道怎么用，知道自己在什么位置、在這里能做什么、下一步能去哪里，你知道如何回到剛才的位置，你知道你的一個操作行為是否有結果、會有什么結果。這些設計邏輯可能你沒有感覺到，但都是交互設計存在的案例。例如：

● 當你第一次使用微信時，第一頁右上角有個加號，你認為它可能用于添加好友或者創建一些東西；

● 當聯系人給你發了一條消息，會產生一個紅色數字1的圓形氣泡，那么你知道這是提示你收到了一條消息并且需要查看這個消息；

● 點擊消息進入到對話狀態，下面有空白的輸入框，你知道在這里可以輸入消息，旁邊的麥克風圖標代表可以發一些語音類的內容；

● 而旁邊又出現了一個加號，說明還可以創建更多的命令和事情。

回想一下：這些操作是你看過一份冗長的產品使用說明書才會操作的？還是你一看界面就會使用的呢？當然，微信也有一個至今都沒有解決的交互設計問題，就是朋友圈右上角的那個相機圖標，如下圖所示。可能從你幾年前第一次使用微信時就有了這個提醒，但是無論微信怎么改版，這個部分仍然沒有改動。因為當初設計的時候，使用了相機圖標是為了鼓勵大家發圖片，發圖帶文字，而忽略了很多人只想寫一條純文字信息表達心情，所以就變成了“長按照相機按鈕發文字”的設計。這個操作聽起來很奇怪，為什么要按相機按鈕？相機按鈕不是拍照的嗎？怎么會變成發文字？導致很多用戶都是請教別人以后，才知道原來微信可以發文字。

微信點擊拍攝按鈕提醒

至今這個問題仍未解決，是因為解決的成本太高。微信擁有非常大的用戶群體，而用戶群體還包含“高”齡用戶，比如40歲以上的人群，對他們來說，改變已經習慣的事情是非常困難的，尤其是他已經學會并且習慣了以后，再換一個新的習慣給他，會給他造成很大的困擾。這其實就是早期交互設計的失誤。當然，你會有自己的想法：“把它改成一個筆的圖標不就好了嗎？”“在旁邊再加一個文字按鈕不就可以了嗎？”把這些設想變成一個真實的操作，再去給身邊的人試試看，你就知道這件事情的復雜程度了。

所以，真正的好的交互設計，讓人感覺不到設計的存在，操作起來卻如行云流水般順暢。

3、GUI

目前，對于GUI有兩種解釋。一種是圖形用戶界面，簡稱GUI，也就是我們常說的UI設計師職位的正確稱呼；而另外一種是Game Interface Design，即游戲界面設計，但是在很多公司招聘時候也被寫成GUI，方便求職者理解。因此讓很多人都誤解“G”的含義，并且覺得3個字母比UI這兩個字母長，認為GUI的級別就是最高的，這是非常嚴重的理解錯誤。在國內，很多招聘平臺的設計崗位寫的是招聘“UI設計師”，其實正確的說法是“GUI設計師”，只是害怕混亂所以做了統稱，也讓大眾產生了很大的誤解。

GUI更多體現的是視覺部分，請大家注意兩個關鍵詞“圖形”和“界面”，說得再直白一點，就是軟件程序呈現的畫面都是圖形界面。

圖形用戶界面設計和游戲界面設計有很大的不同。從工作內容上來看，最大的區別就是，圖形用戶界面設計師在畫一枚金幣圖標的時候，是使用計算機軟件自帶的圓形，再添加一些其他的形狀、符號組合而成的，包括直接選取計算機中的配色，或者用不同的自帶效果樣式完成光影質感的制作，其中應用了大量的軟件工具。而游戲界面設計師是用數位板（也叫作手繪板）來完成的，圓形是用畫筆畫的，形狀符號也是用畫筆畫的，甚至光、影、質感等都是由畫筆完成的，不會使用過多的軟件工具。所以，圖形用戶界面考驗的是設計師對軟件的熟練度和設計技巧的掌握，甚至美術功底并不是很強，通過練習也能達到令人賞心悅目的狀態；而游戲界面設計師更多的是將自身的卓越美術功底和繪畫能力通過快捷的方式繪制在計算機中。

從行業發展上來講，兩者都有非常好的前景，只是界面設計師更多的是要提升多種軟件使用的熟練度和搭配協作，游戲界面設計師則需要強化自己的繪畫能力。當然這并不代表二者不可以兼容，只是這樣的人才少之又少，畢竟一個人的時間和精力有限，需要先專精一項技能，再去完善自己的其他技能。

目前，國內的GUI職責其實并不復雜，公司并沒有強制要求設計師懂得用交互設計和用戶體驗設計，設計師的職責就是做好視覺的界面，其他的由其他崗位來完成，因此在設計的時候最重要的就是注意風格配色、圖形創意、層級關系梳理等。如何把界面做得美觀、吸引人，并且足夠合理，是GUI設計師的重要職責。

4、WUI

W是Web的縮寫，所以我們可以非常清楚地知道，WUI是網頁界面設計師的意思。早期的網頁設計不在UI設計師的工作職責范圍內，但是由于現在設計的全能化、多樣性，UI設計師同時也要完成一些網頁設計，慢慢地網頁設計也就成為了UI設計師工作職責的一部分。

但是網頁設計和界面設計還是有非常大的不同的，一個得滿分100分的網頁設計的設計師未必做得出60分的界面設計。同樣，一個做得出滿分100分的界面設計的設計師未必能做得出60分的網頁設計。2011年，我在A4A為JEEP、路虎、克萊斯勒等客戶做網頁設計，再后來去了新浪做網頁設計師，更多的是官網的設計和企業網站的打造，在轉型做了UI設計師以后，原本以為這二者很相似，其實從業之后才發現二者有著天壤之別。
這二者有一個非常明顯的區別，就是操作的方式和區域范圍不同。網頁是利用鼠標指針操作，其選擇單擊的精準度在4像素左右；而手機是手指操作，低于24像素的觸碰操作基本上就非常難了。蘋果最早提出的44像素建議觸碰范圍，也慢慢被國內演變成了“44像素法則”。界面設計更多的是規則和規范，而網頁設計更多的是視覺和創意的表現，建立的規范很少，僅新浪、網易等大型門戶網站，或淘寶、京東等電商類網站有規范。
2013年，我作為公司用戶體驗技術支持，為深圳航空公司打造移動端APP。當時設計執行找了奧美（傳統4A廣告公司）的外包設計師，因為他的廣告、網頁設計能力非常強，所以總公司決定將視覺外包給他來做，可是卻忽略了他沒有APP設計的經驗。當我看到完成的APP界面以后完全傻眼了，因為幾乎不能用。他將界面按照網頁設計來做，或者說完全是當作縮小的網頁設計來做的：按鈕可以觸碰的范圍非常小；不必要的素材合成圖片非常大；天氣界面部分使用的是國外開源的圖標設計；還有“客服”兩個字按照網頁字號14像素大小設計，并且沒有任何按鈕邊框，讓人完全不清楚這是可以點擊的。當時我指出這種設計是完全無法使用的，就算開發出來，肯定也要在短時間之內就要進行版本更新。但由于時間緊迫，公司決定還是給對方提案。最終那位設計師憑借優秀的口才和現場講述能力贏得了項目。出于負責的心態，在溝通無果后，我退出了這次項目合作，也是我最終選擇離職創業的導火索。
半年后，應用在蘋果商城上架，大眾用戶評分2.4分，吐槽和反饋一面倒，后來不得不推翻原版本進行了版本更新，再次耗費成本完善了產品。這些大型企業，在重視服務商強大背景的同時，卻沒有重視用戶體驗，導致航空APP、鐵路售票APP、銀行APP等耗資巨大，UI設計卻差得可怕。
當前之所以將WUI加入到UI設計師的職責當中，最主要的原因是因為響應式設計。
所謂的響應式，也被俗稱為自適應（也有一些傳統公司將其稱作三屏設計，三屏即計算機端、平板端、移動端）。就是當你設計的官網，在計算機端看到的是符合計算機屏幕的設計，而在手機端看到的，是自動縮放調整成方便手機瀏覽的視覺效果。如圖1-6所示，分別是計算機端的蘋果官網截圖和手機端蘋果官網截圖，最直觀的就是二者導航的區別。我們知道，移動端通常就是手機，且手機寬度都比較小，所以當頂部導航比較多的時候，手機端瀏覽網頁的時候是肯定放不下的，那么就需要以折疊的方式進行設計。

PC和移動端的蘋果官網設計

一些公司發布招聘信息的人并不知道網頁設計師還有更詳細的電商設計師和互動設計師的區分，所以WUI設計也有被招聘為電商設計師的，工作職責包括優化淘寶天貓店鋪，做Banner設計，但是設計思維完全不同。例如，電商設計師在設計Banner的時候重視的是文字信息的閱讀，一些設計元素、圖標圖形，可能直接使用網絡現成的素材拼接設計。而UI設計師則很少使用圖片，更多的是自己繪制每個元素，包括圖標和真實的產品，也就是所謂的擬物設計、寫實圖標等。
WUI和GUI還有一些不同，主要在于信息的傳遞。從物理設備來看，WUI更多地針對的是計算機設計，計算機的顯示器現在已經普及到27英寸、29英寸等；而GUI針對移動端界面，即手持設備，其界面大多為4.7英寸、5.5英寸。從數字上看，我們就能想象到信息的獲取量了，WUI需要更多的留白設計，去緩解用戶的視覺疲勞，而移動端卻是寸土寸金，在小物理設備下，更多地獲取信息才是最重要的。

5、邏輯層級關系

看完以上內容，你是否對這些術語有更加深入的了解了呢？
人都是以感官為第一印象的生物，尤其是視覺印象。當我們去見一個人時，第一印象尤為重要，如果你看到對方是一個滿臉兇相、滿身文身、一身傷疤、身高2米且體重240斤的大漢，你絕對不會聯想到他可能會喜歡粉色的尤其是帶小碎花和蕾絲的服裝，喜歡小動物尤其是兔子、倉鼠一類的動物，也很難聯想到他會是一個內心特別懦弱膽小的人，這其實就和UI設計中的GUI視覺部分相似。如果你跟他接觸，發現他懂禮貌，談話文雅不做作，用餐時甚至幫你拉開椅子，下車后幫你關閉車門，這些就是UI設計中IXD交互部分。而再深入地了解以后，你發現你和他有著相同的愛好，他做得一切都符合你想要的，他的靈魂和你產生了共鳴，這就是UI設計中的UED/UXD用戶體驗部分。
2008年末，Dan Saffer（卡內基梅隆大學設計學碩士，舊金山一家產品設計咨詢公司Kicker Studio的負責人，出版過知名書籍《交互設計指南》《微交互：細節設計成就卓越產品》等）發表過一張圖來解釋用戶體驗，如下圖所示。

圖片來自www.kickerstudio.com,2008年舊版

但是在2009年，Kicker Studio工作室再次修正了之前的關系圖，因為他們認為它并不完善，缺少人體工程學、聲音設計等，而產生了新的說明（如下圖），盡管已經非常完善了，但是對于像我這種比較愚鈍的人來說，我需要花很長時間去消化并理解，在沒人講解的情況下還是理不清UX、UI、IXD、GUI的關系，這讓我仍然很苦惱。

2009年新版

?

對此，我自己重新梳理了一張新圖，更容易地理解我所闡述的邏輯層級關系，如圖下圖所示，來幫助大家理解。

邏輯層級關系

?

GUI主要由窗口、菜單、按鈕、圖標及桌面組成，都以視覺為主。UI使得用戶與系統之間通過輸入和輸出雙向傳遞信息，其中完全包含GUI。UI是IXD交互設計和視覺傳達設計的結果，它是兩者交叉的產物，IXD還具有與物體產品間的交互、人際溝通交流的交互、文字書面的交互等，而視覺傳達設計還包含印刷、繪畫、字形、標志燈。同理，UX包含UI、IXD、視覺傳達設計，因為UX是指一個人使用一個特定產品、系統、服務時的行為、情緒與態度，不僅是心理上的，甚至還有生理上、信仰偏好上的。大家可以通過圖1-9更加清晰地理解UI到底是什么，而聲音設計、建筑設計等不在本書討論范圍。

以一個APP產品為例，如果你有好的用戶體驗和交互設計，那么界面視覺設計即使很差，也能被大眾接受；如果你的界面視覺設計非常好，但是用戶體驗和交互設計非常差，那么很難有用戶接受它，再美的設計，如果不好用，又有什么意義呢？就像饑餓的人，可以吃“很難看”的食物，卻不想吃“只好看，不能吃”的食物。所以，用戶體驗、交互設計、用戶界面彼此相互包含、相輔相成。

總結

以上是生活随笔為你收集整理的做设计这么久，UED/UXD、IXD、GUI到底是什么？你分清了吗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。