Updated: 2026-02-03
Release on:2/3/2026

table of content

用戶體驗設計與互動流程 課程導言

你有沒有過這樣的經歷？走進一家餐廳，菜單設計得漂漂亮亮，但你看了半天就是不知道該點什麼。又或者在網上買東西，結帳流程複雜得讓你想放棄。這些都是用戶體驗出問題的例子。產品本身可能很好，但因為使用者不知道怎麼用、不知道往哪裡看，整個體驗就變得很糟糕。

用戶體驗，英文叫User Experience，簡稱UX。簡單來說，就是使用者在使用產品或服務時的全部感受。這包括能不能輕鬆完成任務、使用過程中心情是好是壞、結束後會不會想再回來。一個好的用戶體驗，能讓使用者覺得這個產品「好用」、「貼心」、「懂我」。相反，一個糟糕的用戶體驗，會讓使用者覺得這個產品「難用」、「煩人」、「不想再用」。

這堂課我們要學習如何設計好的用戶體驗。首先，我們會談到用戶研究，了解使用者到底是誰、他們有什麼需求、他们在使用產品時會遇到什麼問題。然後我們會討論資訊架構和導航設計，這是決定網站好不好用的基礎設施。最後，我們會深入互動設計的世界，看看那些細微的互動細節是怎麼影響整體體驗的。

學完這堂課後，你應該能夠用戶的角度思考問題，知道怎麼收集和分析用戶需求，能夠設計出讓使用者覺得順暢的網站結構，也懂得怎麼用互動細節來提升整體體驗。

第一節：用戶研究與需求分析

為什麼需要用戶研究

很多人做網站或產品時，第一個想法是「我要做什麼」，而不是「用戶需要什麼」。這種想法很正常，畢竟每個人都覺得自己的想法是對的。但問題是，你不是用戶。你覺得好的設計，用戶不一定覺得好。你覺得清楚的路標，用戶可能根本看不懂。

用戶研究就是為了解决这个问题而生的一整套方法。它幫助我們跳出自己的視角，真正去了解用戶是誰、他們要什麼、他們在使用產品時會遇到什麼困難。沒有做用戶研究的產品，就像閉著眼睛在迷宮裡走路，運氣好可能走對，運氣不好就永遠出不來。

做用戶研究還有一個重要原因：省錢省時間。產品開發到一半才發現用戶不喜歡，這时候要修改，成本很高。但如果在一開始就通過用戶研究了解用戶需求，就可以避免走彎路。與其在產品推出後才發現問題，不如在開發過程中就解決問題。用戶研究看起來要多花一些時間和精力，但實際上是在幫你省錢。

用戶研究還能幫你發現意想不到的機會。有時候用戶提出來的需求，是產品團隊從來沒有想過的。這些洞察可能成為產品差異化的關鍵，幫助你在競爭中脫穎而出。

用戶研究的方法

用戶研究有很多種方法，每種方法都有它的優點和適用場景。選擇哪種方法，取決於你想了解的問題類型和手邊的資源。

第一種方法是訪談。訪談是跟用戶一對一地聊天，問他們問題，聽他們回答。這種方法的好處是可以深入了解用戶的想法、感受和需求。你可以用開放式的問題，引導用戶說出他們的經歷和想法。訪談特別適合探索性的研究，也就是當你還不太了解用戶需求，想先做初步了解的時候。

做訪談的時候，要注意幾個原則。首先，問題要開放，不要問那種只能用「是」或「不是」回答的問題。比如不要問「你喜歡這個功能嗎」，而要問「你平時是怎麼使用這個功能的」。其次，要多聽少說，讓用戶有空間表達。最後，要注意用戶說的話和做的 事之間可能有差距，這個差距本身就是很有價值的資訊。

第二種方法是觀察。觀察是看用戶實際使用產品的過程。這種方法的好處是可以發現用戶自己可能也沒有注意到的問題。比如用戶在網站上卡住了，但他們可能不會主動說，而是默默放棄。只有通過觀察，你才能看到這些「沉默的失敗」。

觀察可以分為實驗室觀察和現場觀察。實驗室觀察是在受控制的環境中，讓用戶完成某些任務，研究人員在旁邊記錄。現場觀察則是在用戶真實的環境中觀察，比如到他們家裡看他們怎麼使用你的產品。現場觀察更能發現真實環境中的問題，但執行起來比較困難。

第三種方法是問卷調查。問卷是發給大量用戶填寫的問題列表。這種方法的好處是可以快速收集大量的數據，了解用戶群體的整體情況。如果你想了解「有多大比例的用戶對某個功能滿意」，問卷是最有效的方法。

做問卷要注意問題的設計。問題要清楚明確，不要讓人看不懂或產生誤解。選項要覆蓋所有可能的情況，否則會錯過重要的資訊。問卷不要太長，否則很多人會做到一半就不做了。一般來說，五到十分鐘能夠完成的問卷是比較合適的長度。

第四種方法是可用性測試。可用性測試是讓用戶實際操作產品，研究人員觀察並記錄整個過程。測試結束後，通常還會進行訪談，了解用戶的想法和感受。這種方法特別適合發現產品在使用上的問題。

可用性測試不需要找很多人，五到六個用戶通常就能發現大部分的問題。因為很多問題是普遍存在的，五個用戶裡有四個都卡在同一個地方，就說明這是個需要解決的問題。不需要找幾百個用戶，那樣只是浪費資源。

用戶畫像的製作

收集了用戶資訊之後，下一步是整理和分析這些資訊，把複雜的數據變成容易理解和使用的洞察。用戶畫像就是把這些洞察濃縮成一個虛構但真實的人物代表。

用戶畫像不是真實的人，而是一個綜合了多個真實用戶特點的虛構人物。這個虛構人物有姓名、年齡、職業、收入、教育背景，也有目標、動機、痛點和使用習慣。當團隊在做設計決策時，可以問自己「這個決定對瑪麗來說好不好」，來判斷設計是否對用戶友好。

製作用戶畫像需要收集大量的用戶數據，然後找出共性和差異。一般來說，用戶群體可以分成幾種不同的類型，每種類型做一個用戶畫像。比如說，一個教育類網站可能有「忙碌的上班族想要自我提升」、「全職媽媽想找時間學習」、「大學生想補充課外知識」這幾種不同的用戶類型，每種類型做一個畫像。

用戶畫像不是做出來就放著不管的，而是需要定期更新。隨著市場變化、用戶成長，你的用戶畫像也會過時。建議每半年或一年重新審視一下用戶畫像，確保它們仍然反映真實的用戶情況。

需求分析與優先級排序

收集了用戶資訊、做了用戶畫像之後，下一步是整理和排序用戶需求。需求分析的目的是把用戶說的話、做的事情，轉化成可以執行的設計需求。

需求分析的第一步是區分「需求」和「方案」。用戶可能會直接說「我要一個搜尋按鈕放在這裡」，但這其實是他想到的方案，而不是真正的需求。用戶真正的需求可能是「我想快速找到我想要的東西」，搜尋按鈕只是他想到的一種實現方式。作為設計者，需要理解背後的需求，然後評估各種方案哪個最好。

需求分析的第二步是把類似的需求合併，把衝突的需求標記出來。很多用戶說的可能是同一件事的不同表述，合併之後可以更清楚地看到需求的輪廓。也有一些需求可能是相互矛盾的，比如有些用戶想要更多功能，有些用戶想要更簡單的界面，這時候需要做出取捨。

需求排序是需求分析的最後一步。資源是有限的，不可能一次滿足所有需求。需要根據重要性和可行性來排序。重要性是指這個需求對用戶和業務的影響有多大；可行性是指實現這個需求的難度和成本。優先做那些重要且可行的需求，其他需求可以放在後面的版本。

常見的需求排序框架是四象限法，把需求按照重要性和緊急性分成四類：重要且緊急的馬上做；重要但不緊急的排進計畫；緊急但不重要的評估後做；不重要也不緊急的先不做或直接放棄。

用戶旅程地圖

用戶旅程地圖是另一個分析用戶需求的有力工具。它把用戶使用產品的整個過程畫成一張圖，標註每個階段用戶在做什麼、想什麼、有什麼感受。

製作用戶旅程地圖，首先要把用戶旅程分成幾個階段。比如說，買一件衣服的旅程可能包括「發現這件衣服」、「考慮要不要買」、「決定購買」、「等待送達」、「收到快遞」、「穿著體驗」這幾個階段。每個階段裡，用戶可能有不同的需求和痛點。

然後在每個階段下面，填入用戶的行為、想法和情緒。行為是用戶實際在做什麼；想法是用戶腦子裡在想什麼；情緒是用戶當時的心情是開心、困惑還是焦慮。標注情緒特別重要，因為高興和不高興的時刻往往是需要關注的關鍵點。

做完之後，用戶旅程地圖會清楚顯示用戶在哪個環節卡住了、在哪個環節特別高興。這些洞察可以直接指導設計的優先級。比如說，如果發現很多用戶在「決定購買」這個階段猶豫，可能是因為價格資訊不夠清楚，或者沒有找到信任的依據，這時候就需要在這些方面下功夫。

第二節：資訊架構與導航設計

什麼是資訊架構

資訊架構，英文叫Information Architecture，簡稱IA。簡單來說，就是網站內容的組織方式。就像一本書有目錄，圖書館有分類系統，資訊架構就是網站的「目錄和分類系統」。

為什麼資訊架構這麼重要？想象一下，你去圖書館找一本關於做菜的书，如果圖書館把所有的书都隨便堆在一起，你可能要花幾個小時才能找到。但如果圖書館有清楚的分類，美食類在二樓東邊，你直接去就能找到。網站也是一樣的道理，有好的資訊架構，用戶才能快速找到想要的東西。

資訊架構不好會怎麼樣？用戶在網站上迷路，不知道自己在哪裡，不知道怎麼去想去的地方。結果是用户放棄離開，去競爭對手的網站。這種情況有個專門的名字叫「認知迷航」，是網站用戶體驗的殺手。

資訊架構也不只是给用户用的，對網站运营者也有好处。好的資訊架構讓内容管理變得容易，讓网站扩展有章可循。如果資訊架構亂成一團，加新内容的时候不知道放哪裡，舊内容也不知道怎麼整理，最後整個網站會變得越来越难用。

資訊架構的基本原則

設計資訊架構有幾個基本原則需要遵守。

第一個原則是分類要符合用戶的心智模型。用戶在找東西的時候，心裡會有個預期，覺得這個東西應該屬於哪一類。比如說，用戶想找「怎麼减肥」，可能會去「健康」類，也可能會去「運動」類，不太可能去「電腦」類。如果網站的分類方式和用戶的心智模型不一致，用戶就會找不到想要的東西。

了解用戶心智模型的方法之一是卡片分類。具體做法是把網站的所有內容寫在卡片上，讓用戶自己把卡片分組，然後給每組命名。通过分析用户分類的結果，可以了解用户是怎麼理解這些内容的，這對設計分類体系非常有幫助。

第二個原則是分類要平衡。意思是每個分類下的内容數量要差不多，不能有的分類内容很多，有的分類内容很少。否則用户會覺得有些分類是空的，有些分類内容太多太雜。理想的狀況是，用户點進任何一個分類，都能找到一定數量的内容，但又不會多到看不完。

第三個原則是分類層級不要太深。一般來說，點擊三到四次應該能到達任何一個頁面。如果層級太深，用户要點很多次才能找到内容，中間可能就放弃了。通常建議最多三層分類：首頁下面是大類，大類下面是中類，中類下面是具體内容頁面。

第四個原則是分類命名要清晰。用戶看到分類名稱，應該能夠猜到裡面會有什麼内容。不要用太專業或太模糊的術語。比如「解決方案」這個詞可能用戶聽不懂，但「我們能幫你做什麼」就清楚多了。如果不確定用戶能不能看懂，就去做測試或訪談。

導航系統的設計

資訊架構是網站的「骨幹」，導航系統就是讓用户沿著這個骨幹移動的「路標」。好的導航系統能讓用户随时知道自己在哪里，也知道怎麼去想去的地方。

導航系統最常見的是主導航欄，通常放在頁面的最上方或最左邊。主導航欄應該包含網站的主要分類，一般不超過七個選項。因為人類短期記憶的容量有限，選項太多用户會記不住，也會增加選擇的困難。

選單的設計也有讲究。下拉式選單是最常見的形式，但要注意下拉之後不能擋住重要的内容。行動版網站的選單通常是「漢堡選單」，點擊三條橫線的圖示後展開全螢幕選單。這種設計節省空間，但用戶需要多一步操作才能看到選單。

除了主導航欄，網站還需要輔助導航。麵包屑導航顯示用戶當前所在的位置路徑，比如「首頁 > 男裝 > T恤」，讓用户知道自己在哪里，也能快速回到上一層。頁腳導航是放在頁面最下方的導航，通常包含所有頁面的連結，對 SEO 也有幫助。

搜尋功能也是重要的導航工具。對於内容很多的大型網站，光靠分類導航可能不夠，需要讓用户直接搜尋關鍵字來找内容。搜尋框要放在显眼的位置，搜尋結果要準確且有良好的呈現方式。

行動裝置的導航挑戰

手機和平板的螢幕比電腦小很多，這給導航設計帶來了額外的挑戰。在小小的螢幕上，不可能像電腦那樣放一個長長的選單欄。

行動版網站常見的解決方案是「漢堡選單」，也就是那個三條橫線的圖示。點擊後會展開一個全螢幕的選單，列出所有主要頁面。這種設計的优点是節省空間，缺點是需要額外一步操作才能看到選單，有些用户可能根本不會去點。

另一種做法是標籤欄，通常放在螢幕底部，固定顯示幾個最重要的功能。這種設計類似手機App的底部導航欄，用户可以快速切換主要頁面，不需要每次都打開選單。這種方式對用户來說更直觀，但只適合放最重要的幾個選項。

行動版導航還要考慮「拇指區域」的問題。手機螢幕下半部分是用户用拇指最容易觸及的區域，把重要的按鈕放在這個區域可以提高點擊率。如果把重要功能放在螢幕最上方，用户需要調整握持姿勢才能點擊，這會降低使用體驗。

導航設計的測試與優化

導航設計完成後，需要測試它是否真的好用。測試的目的是發現用户在使用導航時遇到的問題，然後進行優化。

一種簡單的測試方法是「任務測試」。給用户一個任務，比如「找到我們公司聯絡方式」，觀察用户怎麼完成這個任務。用户能不能快速找到？如果找不到，他們在哪些地方繞路？這些觀察能幫你發現導航設計的問題。

另一種方法是「卡片分類測試」。讓用户把網站的主要頁面分類，看他們的分類方式和你設計的導航是否一致。如果用户分類的方式和你設計的不同，可能意味着你的導航結構需要調整。

使用數據分析也能發現導航問題。比如，如果某個頁面的跳出率特別高，可能意味着用户從其他頁面點進來後找不到繼續瀏覽的路徑。如果某個分類的點擊率特別低，可能意味着分類名稱不夠吸引人，或者分類位置不够顯眼。

第三節：互動設計與微互動體驗

什麼是互動設計

互動設計，英文叫Interaction Design，簡稱IxD。它關注的是用户和產品之間的互動過程。當用户點擊按鈕、拖動滑塊、輸入文字時，產品應該給予什麼樣的反饋？這個反饋的時機、方式、視覺呈現，都是互動設計要考慮的問題。

互動設計的目標是讓使用過程變得直觀、流暢、愉悅。好的互動設計能讓用户覺得產品「很聽話」、「很好用」、「很聰明」。坏的互動設計則讓用户覺得「卡卡的」、「不知道發生了什麼」、「這個產品有問題」。

互動設計不是設計師憑空想像的，而是基於對用户心理和行為的理解。比如說，用户點擊按鈕後，期待立刻看到反應。如果反應延遲，用戶會以為系統沒有接收到點擊，可能會再點一次。了解這個行為模式，就會設計出及時的反饋機制，避免用户重複點擊。

互動設計也不只是「點擊」這麼簡單。所有用户和系統之間的往來，包括確認、錯誤、載入、成功各種狀態，都需要設計。比如用户提交表單後，系統應該顯示什麼？是跳到新頁面？還是顯示成功訊息？表單驗證失敗時，應該怎麼提示用戶？這些都是互動設計要考慮的問題。

微互動的力量

微互動，英文叫Micro-interactions，是指產品中那些細微但重要的互動細節。比如說，滑鼠移動到按鈕上時按鈕變色、拖動滑塊時的震動反饋、完成任務後的煙火動畫。這些細節可能只持續零点幾秒鐘，但對整體使用體驗有重要影響。

微互動之所以重要，是因為它們讓產品變得「有生命」。如果一個產品所有的反饋都是生硬的「操作成功」，用戶會覺得這個產品是冷冰冰的機器。但如果產品有一些人性化的細節，比如載入時有個小人在努力工作的動畫，用戶會覺得這個產品「很可愛」、「很貼心」。

微互動還有功能性的一面。比如說，滑鼠懸停時的視覺變化，可以告訴用户「這個東西是可以點的」。拖動元素時的移動感，可以讓用户知道自己的操作正在被執行。這些細節幫助用户確認系統的狀態，減少不確定感。

設計微互動時，要注意不要過度。好的微互動應該是「恰到好處」的，增強體驗但不會讓人覺得煩。太多或太誇張的動畫會分散用戶的注意力，甚至讓人覺得這個產品「華而不實」。動畫應該服務於功能，而不是純粹的裝飾。

常見的互動狀態設計

互動設計需要考慮各種不同的狀態，以下是幾種最常見的狀態。

第一種是預設狀態，也就是元素在沒有任何操作時的樣子。比如一個按鈕在没有被點擊、没有悬停時是什麼顏色。預設狀態應該清楚傳達元素的功能，讓用户知道這個東西可以做什麼。

第二種是懸停狀態，當用户把滑鼠移動到元素上時的變化。悬停狀態通常通過視覺變化來表示「這個東西是可以互動的」。常見的悬停效果包括變色、變暗、浮起、顯示下劃線等。悬停效果在桌面端很重要，因為用户會移動滑鼠去探索可點擊的元素。

第三種是按下狀態，当用户點擊元素但還沒有放開時的樣子。按下狀態應該給用户「操作已被接收」的感覺。常見的做法是按鈕變得更暗或更凹陷，讓用户感覺自己在「按」一個東西。

第四種是禁用狀態，當元素暫時不能使用時的樣子。比如在填寫表單時，「提交」按鈕在所有必填項目完成前應該是禁用的。禁用狀態應該看起來和可用狀態有明顯區別，讓用户知道現在不能點擊。通常的做法是降低透明度或改成灰色。

第五種是載入狀態，當系統需要時間處理時的顯示方式。載入狀態應該讓用户知道系統正在工作，而不是卡住了。常見的做法是顯示載入圈、進度條或者載入文字。對於長時間的載入，最好顯示預計需要多少時間，讓用户心裡有數。

第六種是成功和錯誤狀態，當操作完成或失敗時的顯示方式。成功狀態應該讓用户感到高興，可能使用綠色、勾選符號或者歡慶的動畫。錯誤狀態則應該清楚說明發生了什麼問題，用戶應該怎麼做。錯誤訊息要具體、有幫助，而不是只顯示「發生錯誤」這樣的廢話。

互動設計的原則

設計互動時，有幾個原則可以參考。

第一個原則是及時反饋。用戶進行任何操作後，系統都應該立刻給出反饋。即使需要長時間處理，也應該先顯示載入狀態，讓用户知道系統已經接收到指令。如果用户點擊後什麼都沒有發生，可能會以為沒有點到，繼續點擊，導致重複操作。

第二個原則是一致性。相似的操作應該有一致的反饋方式。如果在這個頁面點擊按鈕會有某种效果，在另一個頁面類似的按鈕也應該有類似的效果。如果有不一樣，會讓用户感到困惑，不確定系統是怎麼運作的。

第三個原則是可預測性。用户的操作應該產生可預期的結果。如果用户點擊一個看起來像按鈕的東西，系統就應該執行按鈕的功能。如果用户預期會發生什麼，系統就應該按照這個預期來回應。

第四個原則是容錯性。系統應該能夠處理用户的錯誤操作，給用户挽回的機會。比如說，用户不小心刪除了某樣東西，應該有「復原」功能。用户填寫表單時填錯了，應該清楚標記錯誤的地方，而不是讓用户自己去找。

第五個原則是簡化複雜操作。對於複雜的任務，應該設計分步驟的流程，讓用户一步一步完成。每一步完成後給予確認，告訴用户已經完成了多少、還需要做什麼。這種做法比讓用户面對一個複雜的表單要友好得多。

移動端的互動特點

手機和平板的互動方式和電腦有很多不同，這些不同點需要反映在互動設計中。

首先，触控代替了點擊。手指比滑鼠指針粗得多，所以可點擊的區域要足夠大。一般的標準是最小44×44像素的觸控區域。兩個可點擊的元素之間也要有足夠的間距，否則容易誤觸。

其次，沒有悬停狀態。手机上是沒有滑鼠懸停這回事的，用户無法在點擊之前「預覽」一個元素會做什麼。所以設計時要考慮如何在没有悬停的情況下，仍然讓用户知道什麼是可以點擊的。通常的做法是使用明確的視覺提示，比如按鈕樣式、下劃線連結等。

第三，觸控手勢丰富。除了點擊，還有滑動、捏合縮放、長按、雙擊等手勢。這些手勢讓操作更直觀，但也帶來學習成本。用户可能不知道某個功能可以用滑动手势来触发，所以重要的功能还是应该用明确的按钮来表示。

第四，螢幕方向會改變。手机可以旋转，网站需要适应竖屏和横屏两种方向。横屏时可用空间变大，但高度变小，需要重新考虑布局和互动的设计。

課程總結

這堂課我們深入探索了用戶體驗設計與互動流程的相關議題。我們了解到，用戶研究是理解用户需求的基礎工作，通過訪談、觀察、問卷、可用性測試等方法，可以收集寶貴的用戶洞察，指導設計決策。用戶畫像和用戶旅程地圖是整理和分析這些洞察的有效工具，能夠把複雜的數據變成容易理解和使用的設計輸入。

資訊架構是網站內容的組織方式，它決定了用户能否快速找到想要的資訊。好的資訊架構符合用戶的心智模型，分類平衡、層級不深、命名清晰。導航系統則是讓用户沿著資訊架構移動的路標，包括主導航、麵包屑、頁腳導航和搜尋功能等各種形式。行動端的導航設計需要考慮螢幕尺寸的限制，採用適合小螢幕的方案。

互動設計關注用户與產品之間的每一次往來，從按鈕的點擊到表單的提交，從載入的等待到成功的確認。微互動是那些細微但重要的互動細節，它們讓產品變得人性化、有溫度。設計互動時需要考慮預設、懸停、按下、禁用、載入、成功、錯誤等各种狀態，遵循及時反饋、一致性、可預測性、容錯性等原則。行動端的互動設計還需要考慮觸控操作的特点，設計適合手指操作的方式。

用戶體驗設計不是一次性的工作，而是需要持續關注和優化的過程。通過用戶測試和數據分析，可以發現體驗上的問題，然後進行改進。好的用戶體驗能夠讓用户覺得產品好用、貼心，願意持續使用並向他人推薦。這對於任何網站或產品來說，都是最重要的成功因素之一。

學術引用

Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: The essentials of interaction design (4th ed.). Wiley.

Garrett, J. J. (2010). The elements of user experience: User-centered design for the Web and beyond (2nd ed.). New Riders.

Krug, S. (2014). Don't make me think, revisited: A common sense approach to Web usability (2nd ed.). New Riders.

Morville, P., & Callender, J. (2010). Search patterns: Design for discovery. O'Reilly Media.

Nielsen, J. (1994). Usability engineering. Morgan Kaufmann.

Norman, D. A. (2013). The design of everyday things: Revised and expanded edition. Basic Books.

Preece, J., Sharp, H., & Rogers, Y. (2015). Interaction design: Beyond human-computer interaction (4th ed.). Wiley.

Weinschenk, S. (2011). 100 things every designer needs to know about people. New Riders.