You’ve probably heard a lot of self-proclaimed “UX/UI” designers out there, the word “UI” thrown around endlessly at Apple keynotes, or tech startups saying “we need to fix the UX here and the UX there.”

Ÿou've可能听说过很多自称“UX / UI”设计师说，在苹果的主题演讲，或科技创业抛来抛去不休单词“UI”说：“我们需要在这里解决UX和UX那里。 ”

In truth, the term UI (“User Interface”) and UX (“User Experience”) gets interchanged a lot of times — and that’s a massive red light to address before we dive into any specific terminology. I went around digging on Google Images and found the perfect portrayal of the two.

实际上，术语UI(“用户界面”)和UX(“用户体验”)已经互换了很多次-在我们深入研究任何特定术语之前，这是一个需要解决的巨大难题。 我四处搜寻Google图片，找到了两者的完美写照。

What does this picture tell us? Well, a lot of things actually:

这张图片告诉我们什么？ 好吧，实际上有很多事情：

1. In some interpretations, UX has very little association with actual “design.” In other words, pro UX designers may not need a robust design degree.

   在某些解释中，UX与实际的“设计”几乎没有关联。 换句话说，专业UX设计人员可能不会 需要坚固的设计度。

2. UX is a much more research and analysis-oriented practice, whereas UI focuses on the actual visual elements of the design. However, there are overlaps between the two (which will be addressed later).
   UX是更多面向研究和分析的实践，而UI则专注于设计的实际视觉元素。 但是，两者之间有重叠(稍后将解决)。

3. UI/UX designers are not all app designers! The misconception stems from the fact that modern interface design platforms (i.e. Behance and Dribbble) are overly saturated with app screens and mockups (I’m guilty as charged)– and as a result, people outside of this ecosystem automatically associate the profession with “App Designer” or “Web Designer.”

   UI / UX设计师并非全都是应用设计师！ 误解源于以下事实：现代界面设计平台(即Behance和Dribbble )已被应用程序屏幕和模型过度饱和(我被控有罪)，因此，这个生态系统之外的人会自动将该行业与“ App Designer”或“ Web Designer”。

Now that we’ve established a difference between User Interface Design and User Experience Design, let’s move onto why UX is so important and how it shapes our daily lives.

现在，我们已经在用户界面设计和用户体验设计之间建立了区别，让我们继续介绍为什么UX如此重要以及它如何影响我们的日常生活。

UX的起源 (Origins of UX 📚)

Recognize this guy? Not really? Believe it or not, he was the world’s first-ever UX designer. Sort of.

认识这个家伙？ 并不是的？ 信不信由你，他是世界上第一位用户体验设计师。 有点。

Donald Norman was a cognitive scientist who was the first ever “UX Architect” by trade. He joined Apple in the early ’90s to work on a couple of Macintosh projects, and it was around this time when he also released perhaps one of the most influential publications on design: “The Design of Everyday Things,” where he formally coined the term “UX Design.” (By the way, this book is amazing and really dives into why humans should design for function rather than form).

唐纳德·诺曼(Donald Norman)是一位认知科学家，他是有史以来第一位“ UX建筑师”。 他在90年代初加入苹果公司，从事多个Macintosh项目，大约在这个时候，他还发布了关于设计的最具影响力的出版物之一： “日常事物的设计” ，他在其中正式创造了术语“ UX设计”。 (顺便说一下，这本书令人惊叹，并且确实深入探讨了为什么人类应该为功能而不是形式进行设计)。

I guess if you were looking at the terminology from a theoretical standpoint, this man was behind the UX movement we know today. But giving him the sole credit for building a framework that all tech giants use seems a bit…unfair, right?

我想如果您从理论的角度看术语，那么这个人就是我们今天所知道的UX运动的幕后推手。 但是，给他一个建立所有技术巨头都使用的框架的唯一荣誉似乎有点……不公平，对吧？

In truth, UX has been around throughout literally all of human history, but we just don’t realize it. Let me give you a few examples (note: I only plugged some of the mainstream ones down below for familiarity but there are so many more examples).

实际上，UX遍及整个人类历史，但我们只是没有意识到。 让我给您举几个例子(注意：为便于理解，我仅在下面插入了一些主流例子，但还有更多例子)。

1. Leonardo Da Vinci: Even as far back as the 15th-century, creators loved their users. Leonardo Da Vinci’s sketches exemplify this, as they not only show what he wanted to build but how he wanted to get there (the manpower, materials, etc.)

   莱昂纳多·达·芬奇(Leonardo Da Vinci)：甚至可以追溯到15世纪，创作者都喜欢他们的用户。 莱昂纳多·达·芬奇的素描证明了这一点，因为它们不仅展示了他想建造什么，而且还展示了他如何到达那里(人力，物力等)。

2. Walt Disney: The photo above showcases one of Disney’s first theme parks under construction. Unlike the engineers before him, Disney was incredibly particular about the user journey — how visitors felt when they entered, stayed, and exited the park. In fact, he was well regarded for insisting that Walt Disney World be “an experimental prototype that is always in the state of becoming, a place where the latest technology can be used to improve the lives of people.”

   沃尔特·迪斯尼(Walt Disney)：上面的照片展示了迪士尼在建的首批主题公园之一。 与他之前的工程师不同，迪斯尼对用户的旅程非常着迷，即游客进入，停留和离开公园时的感受。 实际上，他因坚持认为沃尔特迪斯尼乐园是“一个始终处于发展状态的实验性原型，可以使用最新技术改善人们生活的地方而受到赞誉”。

3. Boxed Water is Better: When branding meets minimalistic, trendy, and functional design, you create a social media phenomenon that completely shakes the market.

   盒装水更好：品牌结合简约，时尚和实用的设计时，您会创造一种社交媒体现象，这完全撼动了市场。

4. IBM’s Smart City Campaign: While you may not see these designs around your local corner, IBM has continuously reinforced its commitment to building more with less.

   IBM的智慧城市运动：虽然您可能不会在本地看到这些设计，但IBM一直坚定地致力于以更少的成本实现更多的建设。

5. Tesla Arcade: Being the first publically-traded company to host racing games with real wheels. Who would’ve thought of that?

   特斯拉街机(Tesla Arcade)：是第一家托管带有真实车轮的赛车游戏的公开上市公司。 谁会想到的？

6. Automatic Soap Dispensers: Patented by Taiwanese inventor Guey-Chuan Shiau in 1989, the automatic soap dispenser has done miracles to prevent the spread of germs and contagions.

   自动皂液器： 1989年，台湾发明家Guey-Chuan Shiau申请了专利，此自动皂液器创造了奇迹，可以防止细菌和传染病的传播。

UI和UX的交集🔗 (The Intersection of UI and UX 🔗)

I did mention before about how, although UI and UX design operate within separate realms, they still overlap in some respects. Interaction design (abbreviated as IxD) is the most obvious example. In really simple terms, IxD is how the user responds to the product. This links with UI because if I were developing animations, for instance, the actual technicalities of that design would belong to interface design whereas the purpose for developing that animation would fall into a broader experience concept. Let’s take “Pull to Refresh” as an example.

我之前曾经提到过，尽管UI和UX设计如何在不同的领域中运行，但它们在某些方面仍然重叠。 交互设计(缩写为IxD)是最明显的例子。 简单来说， IxD是用户对产品的响应方式。 这与UI关联，因为例如，如果我正在开发动画，则该设计的实际技术将属于界面设计，而开发该动画的目的将落入更广泛的体验概念。 让我们以“拉动刷新”为例。

Now that you think of it, mobile developers could have easily opted for a “tap to refresh” interface instead. So why and how does UI/UX play into this design choice?

现在您已经想到了，移动开发人员可以轻松选择“点击刷新”界面。 那么UI / UX为什么以及如何参与这种设计选择？

User Interface: Designing the refresh icon, the animation of the screen when it pulls down, keyframing the refresh animation, developing the ease-in-ease-out motion of the main panel as it moves down, then up.

用户 界面：设计刷新图标，下拉屏幕时的动画，设置刷新动画的关键帧，在主面板向下移动然后向上移动时进行缓入缓动动作。

User Experience: Designing the feelings, attitudes, and emotions and the “why” behind this gesture. For instance, have you ever “pulled to refresh” anything in your day-to-day life? Probably not. However, this gesture has become synonymous with the feeling of urgency, such as watching live coverage or seeing if the WiFi comes back on. UX designers like Loren Brichter (who first piloted this animation in 2008) therefore had to think of the user when conceptualizing this interaction.

用户体验：设计感觉，态度和情感以及此手势背后的“原因”。 例如，您是否曾经“拉动”日常生活中的任何事情？ 可能不是。 但是，此手势已成为紧迫感的代名词，例如观看实时报道或查看WiFi是否重新启动。 因此，诸如Loren Brichter(在2008年首次尝试制作此动画)的UX设计师在概念化此交互时必须考虑用户。

结论📱 (Conclusion 📱)

As you can see, User Interface and User Experience Design are both so complex in their respective traits that it would be cheap to group them as one. That’s why designers can be misguided when they label themselves “UI/UX designers.” For instance, if you’re only designing app screens with more focus on the aesthetic appeals rather than the prospect of moving into the dev phase, chances are you’re just a UI designer. Similarly, if you centre your time on research, building out personas and user tests, you’re probably a UX designer. As I progress with this blog, I’ll explain more about the merits of each profession. For now, it’s best to keep the two concepts separate.

如您所见，用户界面和用户体验设计在各自的特征上都非常复杂，以至于将它们组合为一个便宜。 这就是为什么当设计师将自己标记为“ UI / UX设计师”时会被误导的原因。 例如，如果您只设计注重美学吸引力而不是进入开发阶段的应用程序屏幕，那么您可能只是UI设计人员。 同样，如果您将时间集中在研究，建立角色和用户测试上，则可能是UX设计人员。 随着博客的发展，我将详细解释每个专业的优点。 目前，最好将这两个概念分开。

Thanks for reading! I write a new blog post every day based on topics listed here. Be sure to check out my personal links: Dribbble, Website, Twitter.

谢谢阅读！ 我每天都会根据此处列出的主题撰写新的博客文章。 请务必查看我的个人链接： Dribbble ， 网站 ， Twitter 。