如何使用設計模式進行 Web 設計

設計模式是良好網站可用性的基礎，也是網站構建的基礎。 它們是網頁設計師為確保良好的用戶體驗而做出的戰略設計決策。 設計師的工作是解決常見的可用性問題並創建用戶最直觀的解決方案，而模式會創建可預測、直觀和優化的用戶體驗。 無論您是設計新手還是經驗豐富的專業人士，您都必須了解常見的 UI 設計模式並跟上模式的發展。

設計模式的例子

您可能聽說過組件； 按鈕、表單字段、搜索欄等都是它們的例子。 要使用它們，您可以通過在設計中創建模式來充分利用它們。

需要注意的一件事：有時術語“組件”和“設計模式”可以互換使用。 就本文而言，組件是網站的構建塊，而模式是用戶用來執行任務的既定方式。

正如您將看到的，模式比單個組件“更大”。 模式是您如何優化對單個組件所做的事情。 傳統的設計模式有很多，比如：

• 鏈接到網站標題中主頁的徽標
• 移動網站上的漢堡包導航
• 帶有“重置密碼”鏈接的登錄表單
• 允許用戶跟踪他們在網站上的位置的麵包屑
• 帶有物品計數器的手推車

設計師為什麼要關注設計模式？

使用設計模式有很多優點。 它們不僅使您作為設計師的工作更有效率，而且更重要的是，模式使您的用戶體驗更輕鬆。

設計模式建立信任

用戶在到達您的網站時會做出快速假設。 在一瞬間，他們會確定是否值得與內容進行交互，或者他們是否應該尋找其他選擇。

您的網站易於瀏覽嗎？ 是否容易找到您的用戶正在尋找的信息？ 他們沒有耐心四處點擊並排除故障。 留下良好的第一印象並與用戶建立信任絕對至關重要。

在網絡的歷史中，某些模式已經變得司空見慣。 設計師已經依賴這些既定的用戶界面元素來設計網站，用戶也已經習慣於看到這些設計模式。 他們認識到站點之間的共性並相信熟悉的內容。

讓我們以電子商務網站上已建立的設計模式為例。 用戶習慣於在網格中查看小產品預覽，然後單擊以了解有關單個項目的更多信息。 通過在您的設計中使用既定模式並創造易於使用的體驗，您正在與用戶建立信任，而且他們更有可能成為回頭客。

設計模式是直觀的

當用戶與您的站點交互時，可預測性因素變得非常重要。 [twitter_link]可預測的模式允許最直觀的體驗。[/twitter_link]擁有熟悉的模式是關鍵，但確保一致地使用這些模式也很重要。

一種常見的、可預測的模式示例是在表單上找到的。 具體來說，所有表單都提供驗證和錯誤消息。 您網站上的所有表格是否始終如一地執行此操作？ 所有消息都在同一個地方嗎？ 提交按鈕怎麼樣？ 是否有消息表明表格已發送？

從設計的角度來看，用戶之前已經多次遇到過這些模式。 通過有用的消息提供表單驗證向用戶指出問題所在，並且有一條消息表明表單已發送是一個有用的指示器，表明已採取行動。

當您聽說模式和可預測性對於良好的用戶體驗是必要的時，這似乎是常識。 但是，不難遇到打破常見模式的網站，這可能會導致沮喪或困惑。 考慮到這一點，請繼續使用有用的 UI 模式進行設計。 用戶越熟悉他們，他們就越知道會發生什麼行為。 模式和約定可以防止用戶感到困惑，堅持模式可以創造可預測的體驗。

設計模式為設計師提供了一種通用語言

[twitter_link]出色的體驗始於有效的設計。[/twitter_link]

在許多情況下，設計師在團隊中工作。 當有既定的設計模式時，它可以幫助團隊更有效地工作。 如果問題已經解決，就沒有必要重新發明輪子。

將所有模式保存在一個中央前端風格指南中是保持庫存的好地方。 作為全球資源，它是所有團隊成員了解每種模式用例的快速指南。 即使您是單獨工作，跟踪您正在使用的設計模式也會讓您更有效地工作並在將來回顧它們。

規劃階段

為什麼要使用設計模式已經很清楚了，但是網頁設計師在為網絡設計時如何真正將這些應用到位呢？ 這裡有一些技巧可以幫助簡化設計過程。

使用你已經知道的開始

如果您正在設計一個完整的重新設計或站點“擴展”，那麼盤點並查看您已經知道的內容會很有幫助。 獲得一個好的起點是關鍵。 如果它是一個全新的項目，那麼考慮這些事情並預料到一些問題一開始是未知的是很重要的。 對於這種情況，利用過去的設計經驗來著手是一個很好的開端。 這會告知最初的決定，因為他們已經在其他項目上工作過。

開始研究

研究是堅實項目基礎的關鍵。 如您所知，用戶總是會尋找最簡單的方法來完成網站上的特定操作。 了解手頭的問題和任務將確保您設計的是正確的東西。 首先，考慮以下項目：

• 目前的用戶是誰？ （他們的目標、人口統計等）
• 關於這些用戶，您還想了解什麼？
• 他們與哪些模式互動最多？
• 這些用戶是否有任何問題？
• 可以做哪些改進？
• 正在設計哪些新功能？
• 任何當前建立的模式都可以工作嗎？

研究階段是確定用戶在與您的網站交互時需要完成什麼的時候。 例如搜索內容、註冊時事通訊、購買等。面對熟悉的元素，用戶將需要更少的時間思考並有更多的理由進行轉換。 將設計重點放在根據用戶在 Web 上體驗到的現有知識，以用戶感覺熟悉的方式創建模式。

在解決設計問題時，時間和預算始終是一個因素，但要盡可能多地進行研究。 是時候發現用戶的主要痛點並研究現有的設計模式了。 網絡上常見的是什麼？ 您過去成功使用過哪些模式？ 一旦定義了需要解決的問題，就可以探索具有針對相同用戶目標的模式的站點。 這將為該項目提供良好的靈感。 沒有必要“複製”它們，但記下其中的內容會很有幫助。

到目前為止，我建議您保持一致和可預測。 值得一提的是，可以修改現有模式，並且可能會有做新事情的情況。 只要確保如果您要引入一種新模式，它就會被用戶數據證明是合理的並且經過良好測試。

使用設計模式進行 Web 設計

原型和測試

在研究階段之後，是時候開始充分利用您所學的知識了。 這就是通過原型設計使設計栩栩如生的地方。 根據您的流程，原型可以是簡單的低保真線框或更複雜的高保真設計。

從您研究中的現有模式作為基線開始。 在你完成這個過程時，確保原型涵蓋了你需要的所有功能，並且它說明了所有用戶目標。 可能需要進行一些修改和微調才能達到一個好的起點。

一旦您確信所有需求都包含在原型中，就可以進行一些測試以深入了解設計的可用性。 您將在這裡驗證設計模式的有效性以及整體功能。

測試在原型階段如此重要的原因是，在某些情況下，客戶無法清楚地表達或完全預測他們的想法和需求。 用戶測試允許他們展示而不是講述。 參與者展示他們實際使用網站的方式，而您則觀察他們的行為並從中學習。 這對參與者和作為設計師的你都有用。

在進行測試時，務必記下核心用戶目標，以保持專注。 邀請測試參與者後，將設計展示給盡可能多的用戶。 如果時間緊迫，請確保至少對五個用戶進行測試。

用戶測試的主題本身就是一個完整的主題。 根據您的時間和預算選擇最合理的方法。 總是有足夠的時間會很好，但這並不總是可能的。 在緊要關頭，“走廊”或“自助餐廳式”可用性測試可能很有用（在人流量大的區域設置可用性測試，利用路過的人來測試您的產品）。 即使讓幾個同事參與也總比沒有測試好。

很有可能，您的設計模式一開始就不是完美的。 需要進行更改，並且需要進行更多測試以驗證更新後的設計。 但是，您將從每個測試階段獲得更多洞察力，並能夠結合您所學的內容繼續迭代和測試，直到設計得到優化。

Web 設計模式確保一致的用戶體驗。 以下是提供更多入門信息的有用鏈接：

• 用戶測試綜合指南
• 史蒂夫克魯格的火箭手術變得簡單
• 風格指南示例