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 。