UI 設計進階 1-1:帶你全面認識 UI、UX、IxD、HCI 等術語

作者:Hindy

原文地址:uicircle.club/a/138

轉載無限歡迎,但請註明「作者」和「原文地址」。感謝您對作者版權的尊重。

前言

本文是 UI 設計進階系列的第 1-1 篇,系列目錄:uicircle.club/a/128。

很多人總以為 UI 就是做視覺的,交互就是畫線框的。這樣片面地概括,雖然能很簡單地介紹一個職位,但不知不覺間,連設計師們自身也開始以為這便是 UI/UX 設計了。針對這個問題,我將一一給大家理清到底什麼是界面、交互、用戶體驗設計。搞清楚這些,相信大家能對自己的職業有更清晰的認識和規劃。

UX

讓我們先從 UX 講起。UX 是 User Experience 的縮寫,也就是「用戶體驗」。我們有時也會看到用 UE 縮寫,但 UX 更常規。

在 2010 年,國際標準 ISO 9241-210 中對 UX 的定義是:

a persons perceptions and responses that result from the use or anticipated use of a product, system or service.

一個人對某個產品或系統或服務在使用前、使用時(或使用後)產生的感受和反響。

用戶體驗一詞本身非常主觀,重點在於用戶心理的變化。它不光取決於你的產品或服務,也取決於用戶本身和使用情況,而用戶和使用情況是不能被設計的。因此我們其實不能設計用戶體驗(Designing UX),但是我們可以為用戶體驗做設計(Designing for UX)。理解這點至關重要。

在 20 世紀 90 年代個人電腦逐漸普及,唐納德 · 諾曼(Donald Norman)率先將「用戶體驗」作為術語提出,並將其拓展到更大範圍。

I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the persons experience with the system including industrial design graphics, the interface, the physical interaction and the manual. Since then the term has spread widely, so much so that it is starting to lose its meaning.

我創造這個詞是因為我認為人機界面和可用性太狹隘了。我想涵蓋關於人們體驗的的所有方面,包括工業設計、界面、物理交互和手工產品。從那時起,這個詞開始廣泛傳播,以至於它開始失去原有的含義。

—?Donald Norman

2002 年 Jesse James Garrett 的《用戶體驗要素》出版,這本書具有超強的實踐性。他將用戶體驗分作 5 個層次,並將系統設計分為任務和內容兩大部分。

在今天,用戶體驗一詞最常出現在手機 app 設計、人機交互領域。尤其是前些年移動 app、互聯網公司剛開始爆發的時候,談用戶體驗幾乎是業內人士的職業病。但由於其寬泛的定義,它也逐漸成了各個設計領域內大家共同會探討的話題。

而說到「用戶體驗」,當然也要提下「以用戶為中心的設計」(User-centered design)。它也是由諾曼提出,並在 1986 年發布了名為《User-Centered System Design: New Perspectives on Human-Computer Interaction》的書。從此「以用戶為中心的設計」理念開始廣為人知。我也會在後面的系列文章中具體介紹這個理念。

UI

UI 是 User Interface 的縮寫,也就是我們所熟知的「用戶界面」。

但將 interface 譯成「界面」其實是非常不妥的。因為「界」這個字是邊界、範圍的意思,可視意味非常強,它總讓我們誤以為界面就是關於圖形的。而實際上當然不只是圖形界面(GUI,Graphic user interface),還有語音界面(Voice user interface)、命令行界面(Command-line interface)等等。

看到這就可以介紹下到底什麼是 interface 了。Interface 其實就是人機交互過程中的中介。什麼是交互——人進行操作(輸入,input),如用鍵盤打字、用觸控筆繪畫,然後計算機作出反應(輸出,output),顯示文字、顯示你的畫,這人與計算機一來一回的互動就被我們稱作人機交互。而用來接收人的各種輸入,執行計算機的反饋的系統才是真正的 interface。

其實我們對 interface 還有另外一個更好的翻譯,那就是「介面」,我們稱作「人機交互介面」。但也許是因為這個詞過於「工科」,太不接地氣了,便在時間流逝下被人們漸漸淡忘。

而與「界面」相反,台灣的譯名「介面」則要準確很多。這個「介」有介於兩者之間的意思,與 interface 更相近,而且也不會像「界」那樣造成其就是視覺設計的假象。

然而我雖有諸多吐槽,但卻深感約定俗成的力量之大。詞是人創造的,我們在工作中也無需糾結到底哪個譯名更準確,重要的是我們知道其含義即可。比如蘋果公司偏偏喜歡用 human interface,你能拿它怎麼辦,我們心裡明白就行。

IxD

IxD 就是 Interaction Design,也就是「交互設計」。值得注意的是千萬不要將 IxD 簡寫成 ID,因為 ID 更多是 Industrial Design(工業設計)的縮寫。

上面我已經用最簡單的例子介紹了什麼是「人機交互」。但「交互設計」是什麼?

交互設計本身是一個相對較新的領域,僅僅作為學科(職業)存在幾十年。因此關於它的定義還非常不統一,並且隨時在變。而這也是為什麼它經常與用戶體驗和用戶界面設計混在一起的原因。

下面我摘錄了兩段其他組織對交互設計的定義,供大家參考。

Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond.

交互設計定義了交互系統的結構和行為。交互設計師們努力地在人、產品以及他們使用的服務之間創造更有意義的聯繫,從計算機到移動設備,再到電器等等。

—Interaction Design Association(IxDA)

Interaction Design is the study and craft of how people interact with products, systems and services. It is about shaping digital experiences for people』s use.

交互設計學習和研究人們如何與產品、系統、服務產生交互,它是關於塑造人們使用數字產品的體驗。

—IxD | ACCD

對比上面兩段,可以發現對於交互設計的定義中有幾點是非常明確的,那就是:人(用戶)、數字產品、系統和服務,以及人們的使用行為和體驗。

HCI

HCI 就是 Human Computer Interaction,真正的「人機交互」一詞在這。人機交互作為學科其實基本上就是交互設計,只是在偏向上它可能會更注重計算機技術,比如卡內基梅隆大學就是將其放在了計算機科學院。

我們追溯歷史,最早出現該詞是在 1975 年,到了 1983 年的著作《人機交互心理學》(The Psychology of Human-Computer Interaction)才推廣了該術語。而 CMU 的 HCII(Human-Computer Interaction Institute)甚至到了 1993 年才建立(它也是我的出生年)。所以距今還不過二十多年,實在是新,也令人感慨科技行業發展之迅猛。

Service Design

服務設計也是個非常新的術語,在 1991 年才首次出現。

我不能在這簡單為其下個定義,拋出兩個觀點給大家參考,有興趣的朋友可以查閱文章最後的參考資料閱讀。

第一個是在《這就是服務設計思考》(This is Service Design Thinking: Basics, Tools, Cases)一書中,提出的服務設計五大原則:

  1. 以用戶為中心(user-centered)
  2. 共同創造(co-creative)
  3. 有序性(sequencing)
  4. 實體化的展示(evidencing)
  5. 整體性(holistic)

第二個是來自米蘭理工大學的課件,提出服務設計可以由 system、offering、interaction 和 interface 四點構成。

總結

所有上文這些定義其實並不需要刻意去記它或區分它。我分享出來,是因為作為一名設計師,對職業基礎的了解我認為還是非常有必要的。但咬文嚼字劃分界限則沒必要,畢竟所有這些我們都統稱到了 UI/UX 設計上。

共勉。

免費獲取完整 PPT,請關注公眾號 uicircle,回復「全面認識」即可 (<ゝω·)☆~

本系列合集:uicircle.club/a/128。

如果你想提升設計能力,亦或充實自己的周末,歡迎加入我們的會員社區??

→點這報名

參考閱讀

  • User experience - Wikipedia:en.wikipedia.org/wiki/User_experience
  • ISO 9241-210:2010:iso.org/standard/52075.html
  • Why User Experience Cannot Be Designed:smashingmagazine.com/2011/03/15/why-user-experience-cannot-be-designed/
  • iOS Human Interface Guidelines:developer.apple.com/ios/human-interface-guidelines/overview/themes/
  • 「介面」和「界面」有什麼區別?:zhihu.com/question/19905127
  • Interaction Design Association - IxDA:ixda.org
  • HCII, Carnegie Mellon University:hcii.cmu.edu
  • 「So, like, what is service design?」 - Shahrzad Samadzadeh:medium.com/@shahrsays/so-what-actually-is-service-design-e0ed602b77a9?source=linkShare-6256aa2651c7-1512054521
  • 《這就是服務設計思考》:book.douban.com/subject/25908518/
  • 《用戶體驗要素》:book.douban.com/subject/6523997/
  • Product Service System Design, Politecnico di Milano:pssd.polimi.it
  • 微信公眾號:獃頭鹹魚


推薦閱讀:

HomePod 的設計
《我的世界》有哪些挖礦技巧?
橫浜 Adobe MAX 2017
產品介紹型網站的設計思路
網站收集

TAG:設計 | 交互設計 | 用戶界面設計 |