做设计这么久，UED/UXD、IXD、GUI到底是什么？你分清了吗

国内有很多刚入行的设计师和很多自媒体的订阅号文章，经常把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产品为例，如果你有好的用户体验和交互设计，那么界面视觉设计即使很差，也能被大众接受；如果你的界面视觉设计非常好，但是用户体验和交互设计非常差，那么很难有用户接受它，再美的设计，如果不好用，又有什么意义呢？就像饥饿的人，可以吃“很难看”的食物，却不想吃“只好看，不能吃”的食物。所以，用户体验、交互设计、用户界面彼此相互包含、相辅相成。