雖然網頁設計是一門相對較新的學科，但它歸功于人機交互（HCI）的科學研究。而這9個直接來自于人機交互研究的指南將幫助你在設計網站和應用程序時以用戶為中心。

界面設計，主要關注界面的功能布局，是用戶體驗設計的一個子集，它關注的是大局：即整個體驗，而不僅僅是界面。

1、了解你的用戶

最重要的是，你必須了解你的用戶是誰--從里到外。這意味著你必須了解你的分析應用程序可以拉取的所有人口統計學數據。但更重要的是，這意味著了解他們需要什么，以及是什么阻礙了他們實現目標。

要達到這種程度的同理心，需要的不僅僅是仔細分析統計數據。它需要了解使用你的網站的人。這意味著與他們面對面地交談，觀察他們使用你的產品（也許還有其他產品），并問他們更深層次的問題，而不是譬如 "你覺得這個設計怎么樣？”之類的無聊問題。

目標是什么？是什么阻礙了實現這些目標？一個網站如何幫助克服或解決這些挑戰？

不要僅僅停留在知道你的用戶想要什么。必須深入挖掘，找出他們的需求。畢竟，欲望只是需求的衍生品。如果你能解決用戶的深層需求，那么您將在滿足他們最基本需求的同時滿足他們的需求。 

你將從分析數據和與用戶交談中發現的見解將為你的每一個決策提供參考，從人們如何使用你的界面，到你將在界面中突出顯示哪些類型的內容。

2、定義用戶如何使用你的界面

在你設計界面之前，你需要定義人們將如何使用它。隨著觸摸式設備的日益普及，這是一個比你想象中更關鍵的問題。看看以下產品：

Tinder：該應用程序的用戶體驗實際上是由簡單的滑動即可輕松實現的。

人們使用網站和APP的方式有兩種：直接（通過與產品的界面元素進行交互）和間接（通過與產品外部的UI元素進行交互）。

直接互動的例子

輕按一個按鈕

刷卡

拖動一個目標

間接互動的例子

用鼠標指向和單擊

使用按鍵命令/快捷鍵

輸入表格字段

在Wacom上繪圖

有時候，交互顯得很容易

你的用戶是誰，他們使用什么設備，應該深深地影響你的決定。如果你的設計對象是老年人或其他手部靈巧度有限的人，你就不希望依賴刷卡。如果你的設計對象是寫手或編碼人員，他們主要通過鍵盤與應用程序進行交互，你會希望支持所有常見的鍵盤快捷鍵，以減少使用鼠標的時間。

3、設定期望值

許多與網站或APP的互動都會產生后果：點擊一個按鈕可能意味著花錢，刪除一個網站，或者對奶奶的生日蛋糕發表貶義的評論。而任何時候有了后果，也就產生焦慮。

所以，一定要讓用戶在點擊那個按鈕之前，先讓他們知道點擊那個按鈕之后會發生什么。你可以通過設計或文案來做到這一點。

用設計設定期望值 

突出顯示與所需操作相對應的按鈕。

使用一個廣為人知的符號（如用垃圾桶做刪除按鈕，用加號來添加東西，或用放大鏡做搜索）

選擇一個有相關含義的顏色（綠色代表 “開始 "，紅色代表 "停止 "）

以文本設定期望值

撰寫清晰的按鈕文字

在空白狀態下提供方向性/鼓勵性文字

發出警告并要求確認

對于具有不可逆后果的操作，例如永久刪除某項，最好問用戶是否確定。

在InVision中，單擊垃圾桶圖標不會立即刪除。相反，它詢問您是否確定，并告知您無法撤消。

4、預計到錯誤

人都會犯錯，但他們不應該（總是）承擔后果。有兩種方法可以幫助減少人為錯誤的影響。

1.在錯誤發生之前就預防錯誤

2.提供發生后的修復方法

在電子商務和表單設計中，你會看到很多防錯技巧。按鈕保持不活動，直到你填寫完所有的字段。表單會檢測到電子郵件地址沒有正確輸入。彈出窗口會問你是否真的要放棄你的購物車。

預測錯誤通常比嘗試事后解決錯誤要容易得多。這是因為它們發生在單擊“下一步”或“提交”按鈕可以帶來令人滿意的完成感之前。

話雖如此，但有時你不得不讓意外發生。這時，詳細的錯誤信息才是真正意義上的錯誤信息。

當你在寫錯誤信息時，要確保它們能做兩件事：

1.解釋問題的原因。例如："你說你出生在火星上，人類還沒有殖民過。還沒有。"

2.解釋一下如何解決。如："請在這里輸入一個地球上的出生地。"

注意，在非錯誤的情況下，你可以從那本書中抽出一頁來。比如說，如果我刪除了一些東西，但可以恢復，讓我知道，用一行復制，比如說 "你可以通過進入你的垃圾箱，然后點擊恢復，總是可以恢復被刪除的東西。"

預知用戶錯誤的原則被稱為poka-yoke原則。Poka-yoke是一個日語術語，翻譯成 "防呆"。

5、迅速給予反饋

在現實世界中，環境會給我們反饋。我們說話，別人就會回應（通常情況下）。我們抓一只貓，它就會發出呼嚕聲或聲嘶力竭（取決于它的情緒和我們對貓抓癢的程度）。

很多時候，數字界面不能給我們太多的反饋，讓我們糾結于是否應該重新加載頁面，重啟筆記本，或者直接把它扔出窗口。

所以，給我一個加載動畫。讓那個按鈕在我點擊時彈出并彈回，但不要太多。當我做了一些你我都同意的事情時，給我一個虛擬的擊掌。

計劃或發送電子郵件時，MailChimp會提供反饋和鼓勵。

只要確保這一切發生得快就可以了。Usability.gov將任何超過1秒的延遲定義為中斷。如果超過10秒，則為中斷。后者很慷慨：對于大約一半的人來說，3秒就足以導致跳出。

如果一個頁面在5秒內加載，不要顯示進度條，因為這實際上會使加載時間看起來更長。相反，使用一個不暗示進度的可視化，就像Mac的臭名昭著的 “死亡風車”。如果你的網站上確實使用了進度條，可以考慮嘗試一些視覺技巧，讓加載看起來更快。

6、仔細考慮元素的位置和大小

菲茨定律是人機交互（HCI）的一個基本原則，它指出：

獲取目標的時間取決于目標的距離和大小。

換句話說：距離越近或越大的東西，你可以把光標（或手指）放在上面的速度就越快。這顯然對交互和用戶界面設計技術有各種各樣的影響，但其中最重要的三個是。

讓按鈕和其他的 "點擊目標"（如圖標和文本鏈接）足夠大，以便于看到和點擊。這一點對于排版、菜單和其他鏈接列表尤其重要，因為空間不夠大，會讓人反復點擊錯誤的鏈接。

將最常見的操作按鈕做得更大、更顯眼。

將導航（和其他常見的交互式視覺元素，如搜索欄）放在屏幕的邊緣或角落。這最后一個可能看起來似乎有些反直覺，但它的作用在于減少了對準確性的要求：用戶不需要擔心過量的點擊目標。

當你在考慮元素的放置和大小的時候，要時刻牢記你的交互模型。如果你的網站需要水平滾動，而不是垂直滾動，你需要考慮在哪里以及如何提示用戶到這種不尋常的交互類型。

7、不要忽視標準

作為高度創意型的設計師，他們往往喜歡重新發明事物--但這并不總是最好的想法。

為什么？因為重新設計一個熟悉的交互或界面會增加 "認知負荷"：它讓人們重新思考一個他們已經學習過的過程。很顯然，你可以想方設法地重新發明輪子，但前提是它必須是在設計上有所改進。

這個經驗法則解釋了為什么Google Docs的菜單欄的功能幾乎與Vista之前的Microsoft Word的所有選項相同：

Windows Vista之前的Microsoft Word菜單欄。

‍2015年Google文檔菜單欄

這也解釋了為什么Pocket在幾年前不得不改變其Android應用中的存檔按鈕的位置。

更改單個按鈕使其與Android的設計模式更加一致，使新用戶繼續使用Pocket的可能性提高了23％。

在2013年秋季之前，存檔按鈕一直位于屏幕的左上角，也就是安卓設計規范中所說的 “向上 "按鈕的位置。Pocket希望將人們的注意力集中在閱讀體驗上，而不是重復現有的硬件控制，但不一致的位置導致新用戶不小心關閉并歸檔他們正在閱讀的文章，而不是像預期的那樣簡單地返回到他們的閱讀列表。

這一微小的改變 "使新用戶從這一點開始繼續使用Pocket的可能性增加了23%。"

8、使你的界面易于學習

說到簡單，人們經常會引用哈佛大學心理學家喬治-米勒的一篇論文，名為《神奇的數字七，加減二：對我們處理信息能力的一些限制》。文章認為，人們在短期記憶中只能掌握5到9件事情的可靠性。米勒本人稱這是一種巧合，但這似乎并不能阻止任何人引用他的說法。

話雖如此，但是，越簡單的東西越容易在短期內記住，這也是符合邏輯的。所以，盡可能地限制一個人需要記住的東西的數量，以便有效地使用你的界面。你可以通過將信息塊化，即將其分解成可消化的小塊。

這個想法與Tesler的 "復雜性守恒定律 "相吻合，該定律指出，UI設計師應該讓他們的界面盡可能簡單。這可能意味著在可能的情況下，在簡化的界面背后掩蓋了應用程序的復雜性。Microsoft Word就是一個不遵守這一定律的產品的常見例子。

大多數人只能在Word中做一些事情，例如打字，而其他人可以用它來做各種強大的事情。

這導致了一個叫做漸進式公開的概念，將高級功能隱藏在輔助界面上。你經常會在網站的主頁上看到這種情況，在網站的主頁上，用簡短的文字介紹產品或功能，然后鏈接到用戶可以了解更多信息的頁面。(這也是移動設計的最佳實踐，在這里，強大的導航總是一個挑戰)。

專業提示：避免在鏈接和按鈕中使用 "了解更多 "和類似的非特定文本。為什么？因為它并沒有告訴用戶他們會 "了解更多 "的內容。通常情況下，人們只是簡單地掃描一個頁面，尋找一個能帶他們到他們想去的地方的鏈接，而 "了解更多"，重復15次，并沒有幫助。這一點對于屏幕閱讀的用戶來說尤其重要。

9、使決策簡單化

網絡上有太多的廣告向我們喊話。"橫幅廣告 "突然膨脹成了全屏廣告。模板彈出，暗示我們要訂閱我們還沒來得及看的博客。視頻間歇廣告讓我們停滯不前，迫使我們看著寶貴的幾秒鐘的時間慢慢流逝。甚至不要讓我開始討論那些小部件、彈出按鈕、工具提示......

有時我渴望一個更平靜的網絡，昆山做app公司而希克斯定律給了我們所有人一個建立網絡的理由。這個想法和它的最終結果一樣簡單：你給用戶提供的用戶界面選項越多，他們就越難做出決定。

這幾乎影響到了我們構建的一切：

總體布局

導航菜單

定價頁面

博客索引

內容提要

這個問題還在繼續。但最終的結果是：我們的設計越簡單，用戶就越能更快、更容易做出我們希望他們做出的決定。這也正是為什么著陸頁和非新聞通訊郵件應該只有一個行動呼吁的原因。

專業提示：有時候，你實際上確實希望用戶能夠慢下來，考慮一下他們的選擇。這就是為什么Pinterest、Dribbble和許多博客的分層設計實際上效果很好。畢竟，你必須在更多的選項之間做出決定，你越有可能找到一個適合你的選項。

10、聆聽數據

雖然我們都可能希望我們的設計純粹是以藝術價值為評價標準，但實際上，優化設計以達到設計目的同樣重要。

雖然用戶研究和測試對于指導你的設計決策以實現網站的目標是非常有幫助的，但網站上線后收集的數據仍然是非常寶貴的。

因此，為你的網站設置分析，并定期進行分析。外面有很多不同的分析工具，但我推薦使用Google Analytics和/或Mixpanel，這取決于項目類型。

Mixpanel專注于事件，所以它根據訪客在你的網站上的行為收集數據，而Google Analytics更多的是行為分析，給你提供會話時間、流量來源等。雖然這兩種工具都可以提供這兩種形式的數據，但它們真正的亮點在于它們的重點領域，所以請選擇最適合您的需求。

注意：這兩種工具都是免費的，最多可提供一定數量的數據點。Webflow和類似的平臺通常通過簡單的API密鑰交換，使分析設置變得容易。