網頁設計詳細步驟拆解

Home >> Blog >> 網頁設計詳細步驟拆解

網頁設計是一門複雜的學科。設計師和開發人員必須同時考慮視覺外觀（網站的外觀）和功能設計（網站的工作方式）。由於您需要考慮很多事情，設計過程可能會很棘手。為了簡化任務，我們為您準備了這一篇文章。

我們將重點介紹可幫助您為網站創建出色用戶體驗的主要原則、啟發式方法和方法。我們將從全局事物開始，例如用戶流（如何定義網站的結構），然後深入到單個頁面（在網頁設計過程中要考慮什麼）。我們還將介紹設計的其他重要方面，例如移動注意事項和測試。

設計用戶流程

首先要考慮的是您的用戶流，或訪問者瀏覽您網站的路徑。畢竟，網頁設計不是要創建單個頁面的集合；而是要創建單個頁面的集合。這是關於創建流程。此路徑是訪問者從入口點（他們登陸的第一頁）到您希望他們採取的特定操作（通常是轉化操作，例如註冊、購買等）的一系列步驟。 . 以下內容將幫助您在設計網站時確定用戶流。

訊息架構

訊息架構 (IA) 是一門允許您為訪問者清晰、合乎邏輯地組織訊息的學科。訊息架構師分析用戶如何構建訊息並創建符合用戶期望的層次結構。良好的 IA 是紮實的用戶研究和可用性測試的結果。

有幾種方法可以研究用戶需求。通常，訊息架構師會積極參與用戶訪談、卡片分類和適度的可用性測試，在那裡他們觀察人們如何與現有設計進行交互並分享他們對它的看法。

IA 還用於定義站點的導航和菜單。當用戶體驗從業者完成菜單工作時，他們使用另一種稱為“樹測試”的技術來證明它會起作用。樹測試發生在設計實際界面之前。

全域導航

導航是可用性的基石。如果訪問者無法瀏覽您的網站，他們很可能會離開。這就是為什麼您的網站上的導航應該遵守一些原則：

• 簡單。您的導航應該幫助訪問者了解如何以盡可能少的點擊次數訪問您的網站。
• 明晰。不應該對每個導航選項的含義有任何猜測。
• 一致性。網站上所有頁面的導航系統應該相同。

在設計導航時考慮以下幾點：

• 根據用戶需求選擇導航模式。導航應該滿足大多數網站訪問者的需求。例如，如果大多數用戶不熟悉圖標本身的含義，最好避免使用漢堡菜單導航。
• 優先考慮導航選項。一個好的設計團隊會根據常見的用戶任務優先考慮導航選項，同時考慮任務的優先級和頻率。
• 讓它可見。通過使重要的導航選項永久可見，最大限度地減少用戶的認知負擔。當我們隱藏導航選項時，我們冒著訪問者無法找到它們的風險。
• 傳達當前位置。未能指明當前訪問者的位置是許多網站上的常見問題。如果訪問者必須問“我在哪裡？”，這清楚地表明您的導航需要一些工作。對於大型網站，提供位置指示符，如麵包屑。

網頁連結的視覺和功能設計

連結是網頁導航中的關鍵元素。它們的視覺和功能設計對可用性有直接影響。使用這些交互元素遵循一些規則：

• 識別內部連結和外部連結之間的區別。用戶期望內部和外部連結有不同的行為。所有內部連結都應在同一選項卡中打開，以便訪問者可以使用“返回”按鈕。
• 更改已訪問連結的顏色。當訪問的連結不改變顏色時，用戶可能會無意中多次重新訪問相同的頁面。
• 仔細檢查所有連結。到達 404 錯誤頁面令人沮喪。使用諸如死連結檢查器之類的工具來查找您網站上的任何損壞連結。

瀏覽器中的“返回”按鈕

“後退”按鈕可能是瀏覽器中最常用的按鈕，因此請確保它按照用戶的期望工作。當用戶點擊頁面上的連結然後單擊“返回”按鈕時，他們希望返回到原始頁面上的相同位置。避免點擊“返回”將用戶帶到初始頁面的頂部，而不是他們離開的地方，尤其是在長頁面上。失去位置會迫使用戶滾動瀏覽他們已經看過的內容，這會導致不必要的交互成本。

麵包屑

麵包屑是一組上下文連結，用作網站上的導航輔助。它是一種輔助導航方案，通常顯示用戶在網站上的位置。

雖然這個元素不需要太多解釋，但有幾點值得一提：

• 不要使用麵包屑作為主要導航的替代品。訪客應使用主菜單導航；麵包屑應該只支持訪問者。當訪問者依賴麵包屑作為導航的主要方法而不是額外的功能時，這清楚地表明導航設計不佳。
• 清楚地分開每一層。使用箭頭作為分隔符，而不是斜線。正斜杠 (/) 很容易與電子商務網站上的產品類別發生衝突。如果您要使用正斜杠，請確保任何產品類別都不會有斜杠：
  

搜尋

一些訪問者來到網站尋找特定項目。因為他們知道他們想要什麼，他們可能不會使用導航選項來找到它。在這種情況下，“搜尋”功能將充當快捷方式。訪問者應該能夠在搜尋框中輸入文本、提交他們的搜尋查詢並找到他們正在尋找的頁面。

在設計搜尋框時，請考慮以下幾條基本規則：

• 將搜尋框放在用戶希望找到的位置。下圖基於一項研究，根據對 142 名參與者的調查顯示了搜尋字段的預期位置。研究發現，最方便的位置是網站每個頁面的左上角或右上角。
• 使用放大鏡圖標來吸引對該區域的注意。放大鏡圖標具有普遍意義——大多數用戶都熟悉它。
• 適當調整輸入框的大小。使輸入字段太短是一個常見的錯誤。當然，用戶可以在一個短字段中輸入一個長查詢，但一次只能看到一部分文本，這不利於可用性。事實上，當搜尋框太短時，訪問者往往會使用簡短、不精確的查詢，因為較長的查詢可能難以閱讀且不方便。一個27 個字符的輸入字段將容納 90% 的查詢。
• 將搜尋框放在每一頁上。在每個頁面上顯示搜尋框，以便用戶無論在網站上的哪個位置都可以訪問它。

設計單個頁面

現在我們已經回顧了用戶流的基礎知識，是時候學習如何設計單個網頁了。下面我們總結了要了解的關鍵網站設計指南。

內容策略

談到網頁設計，最重要的是圍繞頁面的目標進行設計。內容策略（指在您的網站上規劃、創建和管理內容）將有助於此練習。每個頁面都有自己的SEO目標，例如告知訪問者某件事或介紹產品或鼓勵他們進行購買進而轉換成現金流。一旦你了解了頁面的目標，你才應該進行設計或編寫內容。

在您考慮內容策略時，這裡有一些實用技巧：

• 防止訊息過載。頁面上的太多訊息很容易使訪問者不知所措。有一些簡單的方法可以最大限度地減少訊息過載。一種常見的技術是分塊：將內容分成更小的塊，以幫助用戶更好地理解和處理它。結帳表格就是一個很好的例子。一次最多顯示五到七個輸入字段，並將結帳過程分解為簡單的步驟，如下圖所示：
• 避免使用行話和行業特定術語。頁面上出現的每個未知術語或短語都會使訪問者更難理解訊息。一個安全的選擇是針對所有閱讀水平寫作，並選擇每個人都清晰易懂的單詞。
• 盡量減少長句。寫入小的、可掃描的段。
• 避免將所有字母大寫。全大寫文本適用於首字母縮略詞和徽標。但最好避免段落、表單標籤、錯誤和通知全部大寫。

頁面結構

結構合理的頁面將幫助訪問者找到每個用戶界面元素。雖然沒有一刀切的規則，但有一些網站設計指南可以幫助您創建穩固的結構：

• 讓它可預測。查看競爭對手的網站，確定常見的SEO設計模式，並使用目標受眾熟悉的設計模式與用戶期望保持一致。
• 使用佈局網格。佈局網格將頁面劃分為主要區域，並根據大小和位置定義元素之間的關係。在網格的幫助下，將頁面的不同部分組合在一個有凝聚力的佈局中變得更加容易。
• 使用低保真線框將基本元素私有化。 線框圖可以為網頁設計師節省大量時間。在使用真實元素構建頁面之前，創建一個線框，對其進行分析，並刪除任何不是絕對必要的內容。

視覺層次

人們更有可能快速瀏覽網頁，而不是閱讀那裡的所有內容。因此，優化您的網頁設計以實現快速掃描是一個好主意。您可以通過良好的視覺層次結構幫助訪問者找到他們需要的東西，這指的是網頁上元素的排列或呈現方式，以表明它們的重要性（即，他們的眼睛應該首先關注的地方，其次等） . 良好的視覺層次可以顯著提高頁面的可掃描性。

• 使用自然的掃描模式。作為設計師，我們可以很好地控制人們在查看頁面時的位置。F形圖案和Z形圖案是兩種自然的掃描圖案，可以幫助您為訪客的眼睛設置正確的路徑。對於文本較多的頁面，例如文章和搜尋結果，F 模式更好，而 Z 模式更適合不是面向文本的頁面。
• 在視覺上優先考慮重要元素。將重要元素（例如關鍵內容或主要號召性用語按鈕）作為焦點，以便訪問者立即看到它們。
• 創建模型以闡明視覺層次結構。樣機是高保真設計工件，使設計師能夠看到最終佈局的樣子。在網頁設計工具中重新排列元素比使用代碼更容易。

滾動行為

網頁設計師之間一直存在的神話是人們不會進行滾動。需要明確的是：每個人都在滾動，當人們進入新頁面時，他們幾乎立即開始滾動。

知道了這一點，您可以通過以下提示改善用戶體驗：

鼓勵用戶滾動。儘管人們通常在頁面加載後立即開始滾動，但頁面頂部的內容仍然非常重要。將您最引人注目的內容放在頂部：

• 很好的介紹。出色的介紹設置了內容的背景並回答了訪問者的問題，“這個頁面到底是關於什麼的？”
• 引人入勝的圖像。好的圖像可以伴隨文字，幫助訪問者更好地理解想法或主題。
• 定位您的用戶。當您創建冗長的頁面時，請記住訪問者仍然需要方向感（他們當前的位置）和導航感（其他可能的路徑）。長頁面會給用戶帶來導航問題；如果用戶向下滾動時頂部導航欄失去可見性，則當他們深入頁面時，他們將不得不一直向上滾動。對此的明顯解決方案是顯示當前位置的粘性菜單，並且始終保持在屏幕上的一致區域。
• 在加載新內容時提供視覺反饋。這對於動態加載內容的網頁尤其重要，例如新聞提要。因為滾動期間的內容加載應該很快（不超過 2 到 10 秒），您可以使用循環動畫來指示系統正在運行。
• 不要限制滾動。限制滾動對大多數用戶來說很煩人，因為它奪走了控制權並使滾動行為完全不可預測。當你設計一個網站時，讓用戶控制他們的瀏覽體驗。