简单易懂！写给初学者的UI、UX、GUI新手科普指南

这篇文章会跟各位伙伴简单介绍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