用戶體驗設計綜合指南

已發表: 2022-03-10

快速總結↬設計師往往會迷失在細節中，直到他們把所有的東西都規劃好。不建議這樣做，因為設計過程是一個迭代過程。本指南將幫助您保持正軌。

（這是一篇贊助文章。）在進行了初步的用戶研究並分析了您的研究結果之後，設計過程的下一個階段是通過開發一系列設計來應用您所學到的知識來測試您的假設。在 Adobe XD 系列的第四篇文章中，我將重點關注設計過程的初始階段。

在這十篇文章的整個系列中，這是將設計過程聯繫在一起的三篇文章中的第一篇。本文從鳥瞰的角度處理更高層次的 UX 設計。我的下一篇文章將探索 UI 設計、探索界面清單、構建模式庫以及設計交互和動畫。本系列的第三篇文章將探討線框圖和原型設計。

正如我在上一篇關於用戶體驗研究的文章中所探討的那樣，重要的是要強調我們正在建立在用戶研究的基礎上。在分析了我們的研究結果後，我們在設計過程的這個階段的目標是：

通過包含用戶故事、場景和故事板，建立一些明確的用戶路徑，以滿足不同用戶的需求；
應用人機交互 (HCI) 領域的一些經驗教訓，以便我們在設計時牢記第一原則；和
以一種與設備無關的方式為我們的設計建立“外觀和感覺”，可以在桌面和移動環境中應用。

簡而言之，本文旨在充當研究階段和設計階段之間的橋樑。正如我在上一篇文章中強調的那樣，設計過程——研究、設計、原型、構建、測試——是一個迭代過程；在流程的這個階段，我們專注於開發一系列可以原型、構建和測試的設計。

UX 設計是一個龐大的主題，因此可以將本文視為簡短的入門讀物，但是 - 就像我之前的文章一樣 - 我將提供一些建議閱讀，以確保您能很好地涵蓋。

將骨架放置到位

在我們深入了解用戶界面 (UI) 設計和構建交互式原型的細節之前，重要的是要獲得設計的高級流程，建立一個框架，我們可以圍繞它構建我們的設計。

在此過程中，重要的是使用我們的研究結果來為用戶故事的發展提供信息，確定不同用戶的目標。我們可以使用這些用戶故事來創建不同的場景。這有助於我們確定指導設計過程的明確目標和潛在意圖。它還使我們能夠通過我們正在構建的內容開發流程。

在開發初始流程時——使用紙質原型和故事板——我們專注於在深入了解細節之前全面了解設計。重要的是要有一個骨架，不要迷失在細節中，這將繼續下去。

在我之前的文章中，我重點介紹了在開始項目的設計階段之前進行用戶研究的重要性。正如我所說：

花一些時間與您的用戶交流，了解他們的需求，以及他們正在努力實現的目標，這些是他們“要做的工作”。

通過梳理用戶的“要完成的工作”，我們可以確保我們的設計真正以用戶為中心。在進行了一些有針對性的用戶研究之後，重要的是要獲取您的發現並使用它們來為您的設計過程提供信息。你的研究應該幫助你建立一些模式，你設計的用戶有共同的需求。

然而，一種尺寸很少適合所有人，而且很可能無論您正在設計什麼，都會有多種具有不同需求的用戶類型。開發“用戶故事”——代表不同用戶的需求——可以幫助你提煉你試圖解決的目標，幫助塑造過程的其餘部分。但究竟什麼是用戶故事？

用戶故事

用戶故事是建立不同用戶“要完成的工作”的高級視圖的有用方法。從典型用戶的角度編寫，它們幫助您建立不同用戶的不同目標，以便您可以相應地針對他們的不同需求進行設計。

“用戶故事”一詞起源於 Alistair Cockburn，他是軟件開發中敏捷運動的發起者之一，他在 1998 年為克萊斯勒的一個項目中創造了“用戶故事是對話的承諾”這一短語。

用戶故事將重點從寫需求轉移到談論需求。雖然微妙，但這種從寫作到談話的轉變會對設計過程產生重大影響。

需求經常以抽象的方式交付，作為一個需要檢查的列表——如果你不小心的話——與用戶的需求幾乎沒有相似之處，而與“委員會設計”的需求更相似。用戶故事有助於將用戶置於對話的核心。

通過將用戶置於設計過程的核心，用戶故事是定義不同用戶需求的好方法。用戶故事可幫助您將角色映射到行動和目標。

這個想法，一個鼓勵和促進對話的工具，抓住了用戶故事的力量。它們是開始繪製場景的理想工具，確保用戶始終處於設計和開發過程的核心。

從不同用戶的角度講述的目標和功能的簡短描述，用戶故事幫助您了解用戶的基本目標，以便您可以從他們的角度看到問題。這些遵循如下模式：

作為（擔任特定角色的人），
我想（執行一個動作或找出一些東西），
這樣（我就可以實現我的目標了）。

使用上面的模板，我們可以設身處地為不同的用戶著想，開發不同的故事來塑造我們的設計。例如，想像一下，我們正在構建一個基於網絡的學習資源，講師和學生可以在其中共享學習材料。我們可能有許多具有不同需求的不同用戶。講師的用戶故事可能是：

作為講師，我想分享我的演講幻燈片，以便我可以為我的學生提供課堂以外的資源。

通過圍繞該用戶的特定需求編寫一個短篇故事，我們可以開始設想滿足此類用戶的設計模式。從學生的角度來看——一個具有不同需求的不同用戶——我們可能會開發以下用戶故事：

作為一名學生，我想訪問講座幻燈片，以便我在復習時可以參考它們。

這些故事——從不同的角度傳遞——為我們提供了有用的啟發，我們可以在設計過程開始時使用，以開始在高層次上規劃我們的設計。重要的是，這些故事的重點是滿足我們用戶的需求。簡而言之，用戶故事幫助我們從高層次上了解用戶的目標是什麼。然後我們可以使用這些故事來開發我們可以開始設計的不同場景。

使用場景為您的設計提供信息

在項目開始時，很容易因添加大量功能而忘乎所以而迷失在“功能炎”中。這種方法的危險在於很容易開始添加有損用戶核心目標的特性和功能。

通過使用用戶故事開發典型場景，您可以始終專注於用戶的核心目標。這種方法還使您能夠為典型的用戶需求建立期望並開發基準，這可用於在項目開始時設置明確的可交付成果和範圍。

從用戶故事開始，我們可以開始構建滿足不同用戶需求的不同場景。映射這些故事和構建流程使我們能夠確定如何滿足不同用戶的需求。

回到前面的例子，我們可以從不同用戶的角度建立一些高層次的目標：對於講師，我們需要設計一個上傳功能；對於學生，我們需要設計一個訪問功能。這些是高層次的目標，但我們可以——隨著我們開發場景——開始為我們的用戶故事增加一些粒度和復雜性，進一步為設計提供信息。

例如，回到前面的例子，從學生的角度來看，我們可能會考慮以下場景：

在基本級別，學生想要訪問幻燈片。
在稍微增強的水平上，學生可能希望能夠註釋幻燈片，捕捉他們的筆記。
最後，如果資源允許，學生可能希望與同齡人分享他們的筆記，從而實現協作學習。

場景，就像上面探討的示例一樣，使我們能夠清楚地了解不同級別的複雜性並相應地進行設計。它們還使我們能夠通過我們的設計來感受用戶的流動，使我們能夠將它們繪製在紙上，這樣我們就可以開始構建項目的鳥瞰圖。

映射您的設計流程

使用您的用戶故事和場景作為討論的驅動力，可以開始在高層次上通過您的設計繪製路徑。這個用戶故事映射過程，如前所述，幫助我們定義不同的用戶流。

在此過程中，紙是快速原型製作的強大工具，然後再繼續開發更精緻的故事板。作為一種低成本、低保真度和快速的方法，紙質原型製作具有許多優點：

成本低，讓您以極少的進入門檻探索多種創意；
它的保真度低，鼓勵您專注於大局，而不是迷失在細節中；
它速度很快，使您能夠快速迭代流的多個變體。

Paper 還支持協作，允許多個參與者圍著桌子快速開發設計，吸收每個人的意見和見解。

Paper 是早期原型設計階段的強大工具。低成本和低保真度，它可以幫助您專注於“大局”，並讓您的設計框架到位。

最後，紙張“自救”。當我們在屏幕上進行設計時，由於軟件保存“狀態”（設計過程中的不同點）的性質，我們經常會丟失設計工件。紙質原型讓我們可以看到整個設計過程，包括在完成概念的過程中被拒絕的想法。

根據我的經驗，一個典型的項目通常需要多輪紙質原型，因為您需要反复思考自己的想法。此時在屏幕上工作的過程太慢且太精細，這會很快導致迷失在不必要的細節中。 Paper 讓您可以專注於大局，這在這個階段很重要。

當然，即使是經驗豐富的設計師在面對繪製界面的想法時也會退縮，發現這個過程令人生畏。經常聽到“但是，我不會畫畫！” 這顯然是不真實的，我們所有人小時候都能畫得很好（正如我們父母冰箱上的所有照片所證明的那樣！）我們只需要重新學習這項寶貴的技能。

套用傑森聖瑪麗亞：

素描不是要成為一個好的藝術家，而是要成為一個好的思想家。

隨著高級草圖的建立，是時候開始通過創建一些故事板和線框來增加一些保真度了。保持這個想法。但是，我將在關於線框圖和原型設計的第六篇文章中再次討論它。

一個科學點：用戶體驗法則

UX 可能是一門相對較新的學科，但它受到人機交互 (HCI) 領域數十年研究的啟發。

正如我在本系列的第一篇文章《用戶體驗設計的演變》中所指出的，我們首先是為人類設計的，並且人類普遍具有相似的特徵，我們在做出設計決策時應該考慮這些特徵。 HCI 為我們提供了許多可以應用於用戶體驗設計領域的原則。

其中許多原則已經以我們可以藉鑑的“法律”的形式提煉出來，例如：

希克定律，強調需要盡量減少選擇以減輕認知負擔並幫助推動決策；
菲特定律，它為我們如何通過仔細調整界面元素的大小和位置來簡化交互提供了寶貴的建議；和
米勒定律，強調“分塊”以簡化複雜任務的好處。

這些原則可以在宏觀和微觀層面上應用，並作為設計師進行改進，非常值得深入探索。我將探討三個——希克定律、菲特定律和米勒定律——但還有更多。

Jon Yablonski 的優秀網站 Laws of UX 是一個有用的原則集合，非常值得收藏。不僅是一個可愛的設計本身，而且它還提供了對每個原則的很好的概述，並附有進一步閱讀的鏈接。

希克定律

希克定律（或完整的希克-海曼定律）指出：

做出決定所需的時間隨著選擇的數量和復雜性而增加。

該法律以兩位心理學家威廉·埃德蒙·希克 (William Edmund Hick) 和雷·海曼 (Ray Hyman) 的名字命名，強調減少向用戶提供的選擇數量的重要性。

您可能認為您通過提供無窮無盡的選擇來幫助您的用戶，但實際上，您正在增加他們的認知負擔。用戶面臨的選擇越多，他們就越有可能因為“決策癱瘓”而離開。這在電子商務環境中尤其成問題，用戶離開會直接影響利潤。

A Book Apart 僅包含最新版本 — A Book Apart 並沒有在其主頁上列出每一本書，而是僅提供最新版本，減少了選擇的數量並緩解了決策癱瘓。對於那些正在尋找特定書籍的人來說，整個圖書館只需點擊一下即可。

我們可以通過多種方式將希克定律應用於用戶體驗設計：

在創建導航而不是提供無窮無盡的選擇列表時，只關注少數幾個。您的用戶會感謝您。
在電子商務環境中，與其列出每一個產品，不如減少選擇的數量和重點。這樣做，您將抵消導致更高轉化率的決策癱瘓。
區分重要內容和次要內容。通過使用戶能夠通過更少的選擇找到路徑，您將減輕他們的認知負擔。

我們經常將“更多”等同於“更好”而感到內疚，但希克定律告訴我們要另闢蹊徑。選項的數量越多，我們的用戶做出決定所需的時間就越長（有時會導致他們不做決定）。專注才是最重要的，尤其是在一個越來越被選擇淹沒的世界裡。

菲特定律

菲特定律指出：獲取目標所需的時間是目標距離和大小的函數。翻譯過來的意思是：目標距離越遠——例如屏幕上的一個按鈕——它需要越大，用戶才能輕鬆到達它。

在設計按鈕和其他可點擊的屏幕元素時，菲特定律尤為重要。不同的上下文需要不同的方法，並將為您的設計方法提供信息。

對講機確保號召性用語按鈕大而醒目 — 在其主頁上，Intercom 確保號召性用語按鈕大而醒目，以便於查看和導航。

在桌面環境中，用戶將使用鼠標——在大屏幕上——穿越可能很遠的距離。在這種情況下，確保您的號召性用語按鈕 (CTA) 大小合理、易於查看和點擊非常重要。

在移動環境中，在設計界面時考慮點擊目標至關重要。在為觸摸屏設計時，我們的手指的保真度低於鼠標指針，因此我們需要增加我們的點擊目標大小。（當然，桌面環境中更大的點擊目標也有幫助！）

我們可以通過多種方式將菲特定律應用於用戶體驗設計：

在為移動設備設計時，請考慮您的點擊目標。使用更少的屏幕空間可以減少可點擊元素的數量並增加它們的大小。
這聽起來可能很明顯，但如果您在屏幕上有一個大按鈕，請確保它是主要的行動號召，否則您將面臨用戶無意中點擊它的風險。
在設計下拉菜單或其他形式的嵌套導航時，請確保您的目標尺寸足夠大，以供用戶獲取。

一般來說，距離越遠，用戶擊中它所需的尺寸就越大。在高層次規劃您的設計時，請考慮重要的行動號召，並確保您在設計這些時採用了菲特定律。微小的按鈕可能看起來很整潔，但如果它們讓您的用戶感到沮喪，那麼您的設計需要工作。

米勒定律

米勒定律指出：一般人在他們的工作記憶中只能保留七個（正負兩個）項目。簡而言之：在很短的時間內，我們只能記住這麼多。

當我們考慮如何組織和分組信息時，米勒定律尤其重要，這也是分塊可以派上用場的地方。考慮以下兩個電話號碼的格式（都是相同的虛構號碼）：

07700984964
07700 984 964

作為一串沒有空格的數字，11位數字很難讓用戶在工作記憶中保持。但是，添加一些間距，用戶的任務就會大大減輕。通過對信息進行分塊，您的用戶可以將三組數字保留在工作記憶中，從而使他們能夠完成任務。

幫助用戶輸入他們的卡號和詳細信息 — 在 Gumroad 空間輸入您的信用卡詳細信息時，會將您的信用卡數字分成四組。這有助於用戶輸入他們的卡號以及他們是否輸入了正確的卡詳細信息。

米勒定律比像這樣簡化微交互更進一步；它也可以在更宏觀的範圍內使用。例如，在設計表單時，專注於將信息分成邏輯組織的組：姓名、地址和聯繫方式；帳戶詳細信息，例如用戶名和密碼；銀行明細; 和其他分組。

我們可以通過多種方式將米勒定律應用於 UX 設計：

列出電話號碼時，將信息分塊，以便在工作記憶中輕鬆保存。
在設計包含信用卡信息的支付表單時，如果信用卡號被分成四塊，每塊四塊，用戶將更容易解析它。
通過限制提供的選擇數量來減少認知負擔。

作為設計師，我們經常不得不呈現複雜的信息。在這種情況下，記住米勒定律很有用。盡可能尋找可以分解和分塊的信息組，使它們更容易保存在用戶的工作記憶中。

外觀和感覺：傳達視覺設計

建立項目流程的鳥瞰圖後，開始考慮其外觀和感覺以及視覺設計非常重要。這就是我所說的“視覺語法”，也是你將在設計中採用的視覺方法。

隨著要設計的設備不斷增加——手錶、手機（從小到大）、平板電腦、台式機和其他媒體——開發單像素完美視覺效果的想法已經過時了。

為了應對這種不斷變化的環境，我們已經看到了向設計工件的轉變，這些工件從像素完美轉向捕捉設計的“風味”。這些工件包括，例如：

情緒板
風格瓷磚
元素拼貼

每個人的過程都不一樣，但是在這個過程中，我使用情緒板和元素拼貼的組合來幫助確定方向：情緒板幫助你進入正確的球場，元素拼貼作為你視覺設計之間的橋樑和你的用戶界面設計。

情緒板

顧名思義，情緒板可以建立情緒，幫助您專注於適合您整體目標的特定外觀和感覺。情緒板作為對話的開場白很有用，可以作為你可以建立的焦點。根據經驗，我通常將三到五個不同的情緒板放在一起，每個指示不同的方向。

您可能會考慮特定的外觀和感覺，但是——眾所周知，我敢肯定——您的首選選項可能與您客戶的觀點不符。我發現有替代方案很有幫助，並且經常發現最終結果將來自不同情緒板的不同元素結合在一起。

Tiny Books 網站上的情緒板 — 在為 Tiny Books 開發情緒板時，我採用了模擬（左）和數字（右）兩種方法。我的數字情緒板幫助為 Vic Bell 提供了指導，他慷慨地開發了網站的品牌。

底線：在這個階段，您展示的是高級視覺設計，而不是迷失在創建像素完美的設計中，這在屏幕尺寸差異很大的時代是徒勞的。詳細的模型將在線框圖和原型設計階段進行。

流程中的這一點是關於開發可用於引發對話的設計工件。為了推動這種創造性的討論，擁有各種不同的情緒板會有所幫助——每個情緒板都有不同的外觀和感覺。

在組合情緒板時，考慮模擬方法和數字方法很重要。如果您的視覺靈感是 100% 數字化的，那麼您將面臨我所說的一切看起來都一樣的風險，即一種設計看起來與另一種完全一樣。考慮在屏幕之外尋找靈感，使用舊的不需要的雜誌來尋找靈感，這樣做，你的設計就會脫穎而出。

元素拼貼

隨著情緒板上收集到的反饋，是時候開始開發一些設計組件，將您的視覺方向應用於一些典型的用戶界面元素，以便您可以確定“視覺語法”。

您可以使用許多工具來執行此操作，包括樣式拼貼和元素拼貼。兩者都有自己的優勢，主要是作為推動完成外觀和感覺的催化劑。

正如開發 Style Tiles 方法的 Samantha Warren 所說：

Style Tiles 是圍繞客戶的偏好和目標進行討論的催化劑。

這種強調——討論外觀和感覺——是這兩種方法的優勢。它們節省了大量時間，無需在此階段以多種尺寸創建像素完美的渲染。

根據我的經驗，Style Tiles 可能會被誤認為是視覺模型的客戶誤讀。我更喜歡一種更自由、更少基於模板的方法，當我發現 Dan Mall 的 Element Collage 方法時，我被迷住了。

丹購物中心的元素拼貼閱讀是基本的 — 元素拼貼——比如 Dan Mall 為 Reading Is Fundamental 設計的拼貼——有助於捕捉各種不同的視覺元素並圍繞潛在的設計方向展開對話。

在一篇精彩的帖子中，詳細介紹了他在閱讀是基礎的項目中的設計過程，Mall 強調需要用對話代替演示，讓客戶參與到這個過程中。 Element Collages 是推動這種對話方式的絕佳方式。正如馬爾所說：

在與客戶談論設計時，我喜歡盡可能多地提供視覺素材，以確保我們談論的是同一件事。我的 Style Tiles 版本融合了我對拼貼的熱愛，我稱之為“元素拼貼”。這個特定的短語產生了一種期望，即我們所看到的不是最終設計，而是沒有特定邏輯或順序的不同部分的組合。

Element Collages 的美妙之處在於它們充當了情緒板和（即將開發的）UI 組件之間的橋樑。它們足夠靈活，可以向客戶展示我們將要構建的內容。最重要的是，它們是一個有用的工具，可幫助您在開始開發更耗時的原型之前就視覺語法達成共識。

結束時

在我們深入了解用戶界面 (UI) 設計和構建交互式原型的細節之前，重要的是要獲得設計的高級流程，建立一個框架，我們可以圍繞它來構建我們的設計。

通過建立一個高級流程來啟動項目的設計階段，您可以更有效地工作以獲得清晰的框架。在這個過程中，重要的是不要迷失在細節中，而是專注於讓粗略的筆觸到位。

在深入設計 UI 和開發線框和原型之前，先獲得廣泛的筆觸是很重要的。在進入細節之前，專注於建立明確的設計方向和一些明確的用戶目標。在沒有明確設計目標的情況下抵制關注細節的衝動可以節省浪費的工作。

簡而言之，在你把所有東西都規劃好之前，不要迷失在細節中。