世界就是我們的界面——UI設計的演變

已發表: 2022-03-11

今天計算機無處不在。 你無法逃脫他們。 我們生活在一個激動人心的設計和不斷發展的用戶界面時代; 一個新的技術時代,我們的衣服、配飾、家居、汽車和街道已經成為一個龐大的用戶界面——被一些人稱為“環境智能世界”。

UI設計的演變可以分為四個時期:工具時代、機器時代、軟件時代和自我時代。 隨著這種快速增長,探索人類與物體、環境和技術的互動變得至關重要。

工具時代

使用原始工具,早期人類開始通過在石頭表面上繪製動物和自然的表示來進行交流。 具有高度象徵意義的象形文字是最早用於交流的方法之一。 這種象徵主義後來發展成為藝術、寫作、文獻和講故事。

隨著時間的推移,這些工具變得更加複雜,導致一些(例如,筆)今天仍在廣泛使用。 我們已經繞了一圈,再次使用簡單的符號和圖像,如表情符號,來表達情感並傳達超越文字的微妙之處。

使用符號是 UI 設計演變的一部分。

機器時代

工業革命強調生產力。 在“機器時代”,我們大規模地建造物體以幫助我們的生活變得更輕鬆。 那時硬件本身仍然是主要的“用戶界面”。

其中一個例子是克里斯托弗·萊瑟姆·肖爾斯(Christopher Latham Sholes)在 1868 年發明的打字機。 我們開始敲擊物理鍵來創建單詞,仍然使用我們的雙手,但在打字機的幫助下代替了筆。 它節省了時間,並幫助創建了一種可以快速採用的一致且實用的格式。

機器正在大規模生產,權力轉移到它們身上。 作為接口的硬件已經到了; 然而,缺點是必須先學習如何打字才能使用它。

早期的打字機鍵盤是 UI 設計演變的一部分。

軟件時代

軟件需要一個“用戶界面”,為了尋找一種易於用戶採用的模型,UI 設計師從人們的行為和早期的硬件設計中尋找靈感。

人們已經有了打字機鍵盤的心智模型; 他們已經知道如何打字,因此自然而然地開始以同樣的方式與數字屏幕上的文本進行交互。

這也適用於看起來像相同鍵盤和打字機的迷你版的移動屏幕鍵盤。 隨著向觸摸的發展,一種與環境交互的全新方式開始被定義。

UI 設計歷史:1973 年的 Xerox Star 用戶界面
Xerox Star 工作站於 1973 年推出了第一個商業圖形用戶界面 (GUI)。請注意現在廣泛用於移動 UI 的“漢堡”菜單。


UI 設計的演變受到常見類比、之前的硬件和直覺(熟悉度和心智模型)的影響。 降低採用障礙的最佳實踐(以及一般的良好 UI 設計)包括希望與人們的心理模型保持一致,保持開放的心態,並保持與周圍世界的聯繫。

進入 skeuomorphism,它試圖通過使二維屏幕上的 UI 元素看起來類似於 3D 世界來幫助用戶理解如何與用戶界面交互。 設計師創建了帶有數字控件的用戶界面,看起來就像他們的物理對應物,例如用於控制數字音樂播放器音量的旋鈕。

蘋果在史蒂夫喬布斯的指導下引領了這一趨勢。 直到 Jonathan Ive 在 Apple 變得更有影響力時,擬物化設計才慢慢演變成一種“扁平化”風格,以 2013 年 iOS7 的發佈為標誌。世界已經準備好跳到不那麼直接的線索,現在可以欣賞簡約界面的簡單性。

擬物化是一種 UI 設計概念。
擬物化的 UI 設計。

Apple 的 iOS 人機界面指南鼓勵設計師從“邊框、漸變和陰影”(這可能導致 UI 元素看起來更重)轉變思維方式,更多地關注內容,讓 UI 發揮輔助作用。

谷歌的 Material Design 還通過為整個數字畫布深度提供微妙的圖層和陰影,轉向了三維的不同表示,而不是像擬物化所表示的單個 UI 元素。

材料設計描繪了“材料的表面和邊緣提供了基於現實的視覺提示。 使用熟悉的觸覺屬性有助於用戶快速了解可供性。 光、表面和運動的基本原理是傳達物體如何在空間中移動、相互作用和存在以及彼此相關的關鍵。

Google Material Design UI 設計框架

觸摸以人為本

隨著觸摸屏智能手機的興起,人們開始熟悉一系列手勢。 每個人都了解了捏合、輕敲、長按之間的區別,並習慣了捏合和捏合作為放大和縮小圖像和地圖的一種方式。

這種行為已經變得如此自然,以至於可以公平地假設至少 85% 的成年人曾在某個時候嘗試放大物理地圖或桌面屏幕。 使用平板電腦的嬰兒試圖通過點擊電視屏幕上的元素來與它們互動。

觸摸屏與用戶界面交互之所以有效,是因為它很直觀,即,當人們看到它時,他們確切地知道該做什麼。 人類生來就是用手指探索一切; 它是與生俱來的,提醒人們這一切是從哪裡開始的。

UI 設計歷史和帶平板電腦的嬰兒

基於觸摸的 UI 是有代價的

在此過程中,設計師創造了一些非常晦澀的手勢,使得在移動 UI 中幾乎不可能找到和使用可用的交互。 用戶體驗受到影響,因為設計師出於審美原因開始隱藏手勢交互。

但正如任何稱職的用戶體驗設計師所知道的那樣,可發現性和顯而易見性總是勝出。 UX 設計師有句諺語:“如果人們找不到它,它就不存在。”

換句話說,基於觸摸的 UI 是有代價的。 順應潮流,一些 UI 設計師將許多基本功能和可用交互隱藏在時尚的外觀後面。 無處不在的漢堡菜單就是一個例子。 它存在可用性問題,因為它被認為是隱藏導航。 它們的可發現性較低,因此效率較低。

誠聘美國全職自由 UI 設計師

加劇這個問題的是 Android 和 iOS 之間的激烈競爭,iOS 最初在這方面處於領先地位,並顯著減少了其人機界面指南。 簡單看起來很漂亮,但設計師隱藏了醜陋或複雜的組件,這通常使界面使用起來更具挑戰性。 Android 模仿了 Apple 實施的許多最糟糕的事情,直到 Material Design 被引入,UI 一致性才成為 Android 設計的標準。

更糟糕的是,設計師開始越來越多地採用這種趨勢,過度使用隱藏的手勢交互變得懶惰,並依靠大量的引導序列來向人們展示如何使用他們的移動 UI。

用戶界面就像一個笑話。 如果非要解釋,那就不好說了。 Martin Leblanc,iconfinder.com

一些入職序列違反了 UI 設計基礎。
帶有說明的廣泛的移動入職序列。

觸摸 UI 僅適用於足夠大的屏幕

如今,擁有如此小屏幕的可穿戴設備交互變得困難。 使用以硬件為中心的功能(例如 Apple 的 Digital Crown)很難駕馭任何過於復雜的東西。 該設計重新審視了手錶的真實行為,但在這種情況下使用一切都變得耗時且繁瑣。 儘管如此,一些智能設備確實朝著正確的方向發展。

物聯網 (IoT) 將我們日常設備的使用擴展到交互式環境,並且是正確完成真實世界硬件模仿的絕佳示例,將功能放在首位。 與 Digital Crown 不同,較大的錶盤既實用又實用。

Nest 恆溫器:物聯網和 UI 設計的演變


從最初的恆溫器設計中汲取視覺線索,並結合人們通常使用錶盤的方式,Nest Learning Thermostat 是一個產品示例,雖然使用簡單,但可以無縫融入家庭。

Force Touch 技術於 2014 年在 Apple Watch 推出期間首次亮相,也部署在第 6 代 iPhone 上,並迅速擴展到各種設備。

UI 演變:採用 Force Touch 技術的 Apple Watch

UI 再次演變以模仿古老的方法

UI 設計發展的下一個階段說明了一切是如何循環的。 Apple Pencil 是最好的硬件和軟件技術,可幫助用戶在數字領域繪圖和書寫。 雖然 Apple Pencil 現在已經讓這個想法成為主流,但就在不久前(2007 年),喬布斯有一句名言:“誰想要手寫筆?” 在介紹 iPhone 的多點觸控技術之前。

史蒂夫·喬布斯 (Steve Jobs) 對可用性和在小型移動設備屏幕上使用如此小的觸控筆的難度提出了看法; 它最終不適用於微軟。 大多數早期的 Windows Mobile 設備都帶有手寫筆,主要的觸摸輸入技術是電阻式觸摸屏,通常需要手寫筆進行輸入。 這些工具當時並不合適,迫使人們使用類似筆的設備來操作移動 UI。 感覺不自然。

當便攜式屏幕變大時,使用單獨的小工具進行輸入(繪圖和手寫)的時機已經成熟,感覺就像一支筆。 這就是 Apple Pencil 在超大尺寸 iPad Pro 上首次亮相的原因,而不是較小的 9.7 英寸和 7.85 英寸機型。

配備 iPad Pro 的 Apple Pencil:用戶界面的另一種演變

Apple Pencil 以人為本,因為它使用了兩種已經很熟悉的東西:鉛筆和平板電腦。 無需學習任何新知識即可使用它。 自從我們的祖先在公元前 3000 年左右將蘆葦筆的鈍端壓入濕泥板以來,人類的大腦就已經熟悉這種書寫形式

從長遠來看,設計師必須在他們的設計理念和設計產品中變得更加以人為本,以促進與生俱來的行為,而不是那些強迫人們學習新技能的產品。

超越觸控——VUI

如果說小屏幕促使設計師探索與技術交互的其他方式,那麼不同背景下的新用例會激發他們思考人們使用技術的不同方式。

語音用戶界面正在幫助改善各種用戶體驗,一些人認為,到 2020 年,語音將支持 50% 的搜索。

語音可以是被動的,也可以是交互式的,是一種與技術交互的強大方式,它的好處之一是它是免提的。

UI 到 VUI 的演變

用戶界面正在成為我們周圍的世界

為了幫助環境世界成為一個用戶界面,谷歌的高級技術和項目(ATAP 實驗室)開發了 Project Soli,這是一種新的傳感技術,它使用微型雷達來跟踪人手的運動。 啟用非接觸式手勢交互,交互感覺物理和響應,因為反饋是由手指相互觸摸的觸覺產生的。

Project Soli 是 UI 設計發展的最新成果


我們今天使用的技術和屏幕正在消失在我們的環境中。 IoT(物聯網)和帶有語音輔助的 AI 已經出現。 這是“環境智能”時代的曙光,眾多設備協同工作以支持人們開展日常生活活動。 因此,基於屏幕的 UI 正在慢慢消失。

設計師將如何設計一個支持人工智能的“環境智能”世界? 對 UI 設計的未來發展有何影響?

在這個“新世界”中,更多的是設計體驗,而不是 UI。

• • •

進一步閱讀 Toptal 設計博客:

  • 設計 VUI——語音用戶界面
  • 黑暗的用戶界面。 好和壞。 該做什麼和不該做什麼。
  • 移動界面的啟發式原則
  • 沒有按鈕的未來 UI 設計
  • 重新思考電視平台的用戶界面設計