使用這些成功的交互設計原則提升您的用戶體驗

在有效的交互和不可用的交互之間有一條細線。 交互設計原則有助於彌合鴻溝。

執行良好的交互設計在實現出色的用戶體驗中發揮著巨大的作用，並且毫無疑問是用戶體驗設計原則的基礎之一。

“不可用”的意思是“我要繼續前進”，無論視覺設計多麼“好看”——動畫多麼花哨——都會把交互設計搞得一團糟，你的用戶體驗就是失敗的。 做對了，即使美感不足，您也將朝著更好的用戶體驗邁進。 該產品將有更大的成功機會，這反過來又有助於提高利潤。

交互設計（IxD）被交互設計協會（IxDA）定義為“交互系統的結構和行為。 交互設計師努力在人與他們使用的產品和服務之間建立有意義的關係，從計算機到移動設備再到電器等等。”

經驗很重要，因為它決定了人們對他們互動的記憶有多深。 ——唐·諾曼在《日常事物的設計》中。

遵循交互設計原則極大地促進了出色的交互設計，而這反過來又有助於體驗。

今天的所有設備和技術可能會在一夜之間被完全不同的東西所取代，但由於其持久的原則，仍然可以實現出色的交互設計。 這些不變的原則是關於人們的動機、他們的行為以及他們的思維方式。

想像一下，如果每扇門上的每個門把手都以不同的方式工作。 對於一個，您必須先推入門，然後再向下推； 另一個你必須向上拉而不是向下壓，還有一個你必須向上拉兩次然後向下——這完全是一場災難。 事實上，“轉動門把手”這個短語假設只有一種方法可以做到這一點。

沒有人喜歡被“遵守規則”的呼喊打敗，但真正優秀的交互設計依賴於一套標準、最佳實踐、約定和經驗法則（啟發式）。 這不是一門糊塗的科學，但它們構成了 IxD 的基石，並以最少的摩擦力使交互成為可能。 界面標準不會扼殺創造力——它們不是硬性規定，而是幫助設計師建立“可用和熟悉的設計”基礎的基本準則，並以此為基礎進行創新。

交互設計原則和最佳實踐

交互設計屬於人機交互 (HCI) 學科，“一個多學科研究領域，專注於計算機技術的設計，特別是人（用戶）與計算機之間的交互。”——由交互定義設計基金會。

出色的 UI 設計通過將基本的 UI 設計原則與目標驅動的交互設計相結合，實現純粹的用戶愉悅。

• 成功的交互設計採用簡單、明確定義的目標、強烈的目的和直觀的用戶界面。
• 為了使交互保持簡單和容易，目標驅動的交互設計只在用戶面前放置了讓他們完成任務所需的絕對最低限度。

讓我們深入探討一些最重要的原則（無論如何都不是詳盡的清單）：

可發現性

基本上，如果用戶找不到它，它就不存在。 必須在不到一微秒的時間內明確在 UI 中可以執行哪些操作，例如，將圖標標記為最佳實踐。 未標記的圖標無異於在用戶的路徑中設置障礙，因為它們必須停下來解讀含義。 你打斷了“流動”。 令人震驚的是……他們對學習你的 UI 不感興趣。

能指

與可發現性密切相關的是，有效使用指示符可確保在 UI 中清楚地指示可供性（對對象進行操作的可能性）。 能指提供強有力的線索，如信號或路標。 指示可用的交互，他們向用戶閃爍綠燈，大喊：“我在這裡，你可以點擊（點擊、滑動等）我！” UI 中可能存在可供性，但可能會保持隱藏，因為如果它缺少能指，它仍然是不可見的。 一個示例可能是“隱藏的手勢交互”，除非用戶不小心向左或向右滑動（例如，刪除某些內容），否則它不會顯示自己。

可供性定義了哪些行動是可能的。 能指指定人們如何發現這些可能性：能指是符號，是可以做什麼的可感知信號。 對設計師來說，能指遠比可供性重要得多。 ——唐·諾曼（諾曼，2013）

回饋

在能指之後，與用戶的下一個最重要的溝通是反饋。 反饋意味著：關於行動影響的明確信息。 這也意味著系統狀態的持續可見性，即係統應確保：

• 用戶隨時了解正在發生的事情。
• 有關於他們行動的結果和產品（系統）的當前狀態的連續信息。
• 對於產品的狀態，即處理、加載、搜索、上傳等，或一些其他狀態變化，用戶的頭腦中沒有混淆。
• 執行完一個動作後，很容易確定新的狀態。

概念模型和心智模型

出色的交互設計提供了用戶創建系統良好概念模型所需的所有信息，從而導致他們的理解和控制感。 使用該系統時，概念模型增強了結果的可發現性和評估。

心智模型（或認知地圖）是用戶腦海中的圖像，可以告知他們對某種交互的期望以及某些事物在現實世界中的運作方式。 認知地圖是我們物理環境的內部表示，特別是與空間關係相關聯。 通過有效地使用用戶的心智模型，交互設計師可以創建“感覺”直觀的系統。

設計師發明了一個概念模型——設計模型，這就是設計師希望設備或軟件工作的方式。 將此模型傳達給用戶的唯一方法是通過 UI 實現它。 然後，用戶與概念模型進行交互，並創建他們自己的關於事物如何工作的心理模型。

設計師無法告訴用戶他們希望應用程序如何工作——他們需要適當地設計 UI 以便清楚地傳達其目的。 換句話說，使界面易於理解和使用。 糟糕的交互設計冒著為用戶創建錯誤心理模型的風險。 這會導致混亂和用戶錯誤，因為他們試圖以設計者不希望的方式操作應用程序。

映射

映射是控件及其在世界中的效果之間的關係。 反饋原則是映射的近親，因為這兩個原則共同創造了無縫的體驗。 幾乎所有工件都需要在控件和效果之間進行某種映射——在界面設計的情況下，它是控件與其結果函數之間的關係。

自然映射——利用物理類比和文化標準——導致立即理解。 例如，設計師可以在 UI 中使用空間類比：

• 要使用滑塊組件增加一些值，請向右滑動滑塊，
• 要減少它，請向左滑動。

一些自然映射是生物的，如在普遍標準中，上升的水平代表更多，下降的水平代表更少。

約束

約束的設計概念是一種確定如何限制在給定時刻可能發生的用戶交互類型的方法。 交互設計約束通過為用戶提供“導軌”來幫助高效交互——幾乎就像指導可能發生的交互的引導手。

設計中的約束確保只有特定的東西被啟用，甚至是可見的，以引導用戶進行某些交互。 它考慮了大小、規模、比例、重點和狀態，以及這些如何和諧地協同工作，幫助創建層次結構並最終影響用戶。 正確設置約束也有助於減少用戶出錯的機會。

約束的反面是當每個選項都提供給用戶時，使他們難以決定下一步該做什麼。 這是選擇的原則。 選項越多，選擇其中任何一個就越困難——我們被所有的可能性壓得喘不過氣來。

出色的交互設計不會將所有可用選項都放在界面上，而是將其限制在任何特定時刻最重要的部分。

一致性、標準和啟發式

如果你願意的話，這些都是相關的——模式的兄弟（下）。 為了防止用戶錯誤並使應用程序易於學習，交互模型必須保持一致。 一致性提高了用戶體驗、一般可用性以及用戶使用數字產品的效率。

一致性意味著使用相似的元素來完成相似的任務，並且始終具有相似的功能和行為——一致的界面是遵循規則的界面，例如使用相同的操作來做某事。

力求高度可用的產品遵循公認的約定、標準、最佳實踐和可用性啟發式（廣泛的經驗法則，而不是特定的可用性指南）。

例如，符合約定可能是頁面佈局的方式。 網絡用戶將 69% 的時間用於查看頁面的左半部分，30% 的時間用於查看右半部分。 因此，如果網站遵循傳統佈局，則更有可能獲利。

標準可以是麵包屑路徑（可立即識別的方向和導航設備），也可以是在密件抄送網站上的頁面頂部的全局導航菜單。

模式和可學習性

新用戶學習導航界面的難易程度如何？ 沒有人願意學習一種新的做事方式，除非它比以前的方式有顯著的好處——然而，我們經常被未經測試的非傳統互動所淹沒。

通用組件或模式提供即時可學習性。 一旦你學會瞭如何使用勺子，你就會永遠知道如何使用勺子。 與騎自行車、滑冰一樣……同樣的結構適用於我們每天使用的 UI 組件：按鈕、文本字段、下拉菜單、複選框、單選按鈕、微調器、滑塊、圖標、手風琴、搜索框等。

最好的交互設計不會試圖重新發明輪子，而是以一種新的方式有效地利用模式。

模式不僅鼓勵可學習性，而且還提供一致性（另一個原則，上面討論過）並使其符合用戶對事物應該如何工作的期望。

視覺層次和重點

在與網站或應用程序交互期間，人們正在尋找與他們的搜索最相關的信息。 視覺層次結構以暗示重要性的方式關注元素的排列。 設計中的視覺層次會影響人眼感知所見事物的順序。 並非所有事物都被賦予相同的“權重”； 秩序是由感知領域中對象之間的視覺對比創建的。 視覺對比（強調）可以通過元素之間的大小、接近度、顏色、不透明度和實際色調對比來實現。

不要低估視覺層次的力量。 它已被非常有效地用於各種設計，包括建築和工業設計以及印刷設計。 看看一些很棒的海報設計。 在交互設計中很好地使用這種技術，正確的事情似乎會在正確的時間以正確的方式出現。

偉大的交互設計師利用強調的力量成功地實現了“精益求精”的界面設計，看起來就像魔術一樣。

菲茨定律

信不信由你，這條定律來自早期研究觀察人體肌肉運動和瞄準電報操作員和生產線任務性能，後來適應了 HCI（人機交互）。 它基本上說：“獲取目標的時間是目標距離和大小的函數。”

簡單來說，它是關於一個目標的距離和大小，以及它與其他目標的距離。 更短的鼠標移動或點擊效果更好——如果目標更接近您的起始位置，則單擊或滑動目標總是更快。 相關任務也應該彼此靠近，這樣用戶就不必在與 UI 交互的屏幕上飛來飛去。

菲茨定律可以準確預測移動到和選擇目標所需的時間。 目標可以是按鈕、下拉菜單或屏幕上的其他交互元素。 如果太遠、太小，或者可點擊元素靠得太近，都會大大降低 UI 的效率和可用性。

古騰堡圖、Z 和 F 模式佈局

這些模式根據內容適用於不同的情況，並且主要由西方觀眾使用。 古騰堡圖描述了在查看均勻分佈的同質信息時眼睛移動的一般模式——主要是文本密集的網站，如博客或新聞網站。 古騰堡圖表明，強和弱的休閒區域位於閱讀重力路徑之外，除非以某種方式在視覺上強調，否則很少受到關注。

Z 圖案遵循字母 Z 的形狀。在某些情況下，這種圖案也稱為之字形圖案。 與古騰堡圖的主要區別在於 Z 模式表明觀眾將穿過兩個休耕區域。 否則它們仍然在同一個地方開始和結束，並且仍然通過中間。 與古騰堡一樣，設計師會將最重要的信息放在 Z 模式的路徑上。

F 代表快速，指的是用戶如何閱讀內容。 F 模式由 NNGroup 眼動追踪研究推廣，該研究記錄了 200 多名用戶在網絡上閱讀內容。 它發現人們的掃描模式在許多不同類型的網站上都非常一致。

為什麼這很重要？ 例如，在電子商務網站上，為了最大限度地掃描，您可能希望以遵循 F 模式的方式排列最重要的內容。

識別而不是回憶

識別是指我們將事件或信息“識別”為熟悉的能力，而回憶更像是一種“認知負擔”，涉及從記憶中提取相關細節。 向用戶展示他們可以識別的東西比需要從頭開始召回項目提高了可用性。

例如，在 UI 中使用圖標非常強大，因為它允許即時識別符號。 我們的大腦處理（識別）符號的速度比閱讀文本快 1000 倍。 如果設計師在對話框中顯示一個標準的警告標誌圖標，它會立即讓用戶集中註意力，因為下一個動作可能是破壞性的。 但是，如果一個圖標的設計方式迫使用戶回憶和解讀含義——例如舉起一隻手而不是警告圖標——它會降低效率和 UI 的可用性。

美學和極簡主義設計

你必須深入了解一個產品的本質，才能去掉那些不重要的部分。 ——喬納森·艾夫。

這是最具挑戰性的原則之一，因為它很難。 趨勢是設計師和產品經理在陽光下添加每個可用的選項，並讓用戶決定他們想要採取的路徑。 這確實是一種懶惰的方法，並導致產品充滿了不必要的混亂。

界面需要清除不支持用戶目標和任務的不必要元素和內容。 設計師不僅要設計美觀的 UI，還要在用戶流程中優先考慮屏幕到屏幕的信息。 使用視覺層次和強調的魔力，只應呈現用戶完成任務所需的基本和絕對最少的信息。

米開朗基羅談到他的作品時說：“我在大理石中看到了天使，並一直在雕刻，直到我讓他自由。”

設計一個極簡、美觀和簡單的交互要求設計師準確地了解人們使用產品的那一刻發生了什麼，並擺脫所有不必要的東西。 進行深入的用戶研究和測試以了解用戶將如何使用產品通常是最好的方法。

錯誤預防

用戶在執行任務時經常會分心，因此通過視覺強調、提供建議和使用精心設計的約束來防止無意識錯誤是關鍵。 一種防錯形式（也稱為 Poka-Yoke）是指實施故障保護機制以防止過程產生錯誤。

防止錯誤的最好方法之一是設計一個更好的心智模型。 當設計者的模型和對系統應該如何工作的解釋與用戶的心智模型不匹配時，就會發生許多用戶錯誤。

標准設計約定會有所幫助（上面提到的原則之一），因為它們可以幫助用戶了解他們可以採取的行動。 與您的網站或應用程序交互的用戶已經使用了數以千計的其他網站和應用程序，並期望常見的交互元素以某種方式呈現和工作。 當您的產品偏離這些約定時，可能會出現容易出錯的情況。

在發生錯誤之前發出警告並在破壞性行動之前確認。 比實施良好的錯誤消息更好的是精心設計，可以從一開始就防止問題發生。 嘗試消除容易出錯的情況並繼續檢查它們。

交互設計的未來

新的設備、環境和界面將隨著新的交互可能性不斷發展。 視頻遊戲控制器不斷發展，並提供各種輸入控制以及觸覺反饋。 手勢界面將從支持 2D 和 3D 手勢的觸摸屏（例如 iOS 和 Android 設備上的手勢）到在 3D 空間中使用手勢與虛擬現實空間、遊戲機和物聯網設備進行交互，從而讓我們控制我們的環境.

就像 Google 的 Project Soli 一樣，我們可以對鼠標、觸控板和操縱桿說sayon​​ara，並使用我們的手和手指來控制設備切換到更自然的手勢交互。 在某些情況下——例如在會話 UI 中——輸入法可能會從鍵盤變為語音。 儘管如此，仍然需要以某種形式（語音、觸覺和視覺）即時和持續反饋的原則。

基本的交互設計原則將始終在未來系統的設計中發揮核心作用，對於 UX/UI 設計師來說，牢記它們很重要。 它們不是硬性規定，但會帶來更好、更具吸引力的產品和服務。 就像成功的電影使用古老的講故事技術，遵循久經考驗的、歷史悠久的結構一樣，交互設計原則的存在也是有充分理由的。 遵循它們將通過提高可用性和推動其產品的更廣泛採用而使任何產品設計師受益。

進一步閱讀 Toptal 設計博客：

• 設計原則：層次結構介紹
• UI 設計最佳實踐和常見錯誤
• 探索完形設計原則
• 信息架構綜合指南