網站重新設計的基礎——案例研究

完成一個網站重新設計項目只是回顧並思考，“如果我知道我今天所知道的，我會做不同的事情的情況並不少見。”

我們都去過那裡。 我們對一個新項目感到興奮，與客戶開玩笑，簽訂合同，並開始模擬原型。 生活看起來不錯，但項目基礎卻搖搖欲墜。

不可避免的是，一旦提出第一個設計概念，修訂和範圍蔓延就開始潛入，並且從那裡開始走下坡路。 溝通崩潰了，一切都沒有按計劃進行，最終，新設計的網站就像你被雇來修復的怪物。

世界級的設計和用戶體驗並不是從一個漂亮的模型開始的——它建立在戰略規劃和專注於公司目標的設計願景之上。 主要目標不能是“讓我們做一個更漂亮的網站”。

網站設計師負責用戶體驗（UX）和用戶界面（UI）。 我們的工作是確保用戶在與我們設計的界面交互時獲得最佳體驗。 這需要從項目的概念開始就進行徹底的規劃。

本文概述了一個可靠的過程，這將有助於確保您的下一個網站重新設計建立在堅實的基礎之上。

網站重新設計項目前研究的價值

為了演示這個過程，讓我們來看看為 Archeology Southwest 完成的網站重新設計的各個階段，這是一個探索和保護美國西南部考古遺址的非營利組織。

在對客戶的領域和競爭進行初步調查後，仔細檢查每個可用的網站資產。 此分析單獨計費，並在項目報價被寫入之前進行。 以這種方式工作可以防止當網頁設計師試圖解釋可能在項目後期浮出水面的問題時產生的模棱兩可或誇大的估計。

在 Archeology Southwest 的案例中，我面臨著一個急需關注的網站——一個古老的 CMS 門戶內堆積如山的雜亂內容。 這很糟糕，所以我開始創建秩序。

第 1 步：熟悉內容

改造房屋時，重要的是要在拆除前嘗試和搶救有價值的材料。 同樣的原則也適用於網站設計。 您需要逐頁瀏覽網站並提取所有內容。 作為設計師，我們必須弄清楚哪些內容應該成為獨特的帖子類型，哪些頁面是靜態的。

完成此操作後，制定如何組織所有內容的策略，但不要決定應該保留哪些內容以及應該刪除哪些內容。 為什麼不？

在與現實世界的企業和組織打交道時，有許多不同的人負責網站的內容，並且存在的內容數量可能是驚人的。 最好的方法是首先對所有內容進行分類。

我通常從主導航開始，逐頁瀏覽。 這樣，我將在第一次客戶會議之前準備好信息架構和站點地圖。

不幸的是，Archaeology Southwest 的遺址並不典型。 大多數鏈接無法通過頂部導航訪問，並且隱藏在內容中。 如果我僅根據導航引用該項目，我會大吃一驚。

通過與客戶團隊中的各種人員交談，我能夠更好地了解項目的範圍，在與客戶會面後，我能夠確定他們的網站重點、工作流程、內容和功能。 從那裡，我們提出了以下核心內容類型（一些新的，一些現有的）：

第 2 步：創建焦點。 簡化。 組織。

將所有內容組織到帶標籤的框中後，就該為新結構制定藍圖了，該藍圖將以最佳形式展示內容。 但首先，我們需要創造焦點。

根據 Archeology Southwest，人們訪問他們的網站是為了研究正在進行的項目的信息，了解即將發生的事件，並閱讀月刊。 這些活動回答了“人們在網站上做什麼？”這個問題。 但不要透露人們首先訪問該網站的原因。

“為什麼”是網站的焦點。 為了找到重點，請查看組織的核心。

在這種情況下，我將“位置”確定為西南考古學的核心。 沒有位置，就沒有考古遺址，沒有廢墟，當然也沒有博物館或展覽。 考古學中的一切都與位置有關。

確定重點後，我們可以簡化和組織。 對於 Archeology Southwest，我首先將內容分成與地點無關的類別，例如團隊頁面和年度報告。 經過一番整理，我最終得到了這張粗略的地圖：

上圖代表了出現的兩個核心領域：要做的事情和地點。 要做的事情（左）涵蓋網站訪問者可以了解和做的活動。 位置（右）專注於與特定位置相關的網站內容。 為什麼要這樣構造？

這個想法是，普通用戶可能不知道視頻或項目的名稱，但可能知道位置的名稱。 通過這種方式，訪問者可以找到與位置相關的內容。

此外，位置中的每個顏色塊都代表一個獨特的帖子類型。 從組織的角度來看，展覽、課程和在線展覽都是不同性質的事件。

在舊的 Archeology Southwest 網站中，雜誌和在線商店有單獨的靜態頁面，訪問者可以在其中購買該雜誌。 為了使購買更簡單，我在雜誌模板中集成了一個購買選項。

剩下的組織結構很簡單：

• 一個“關於”頁面，以了解有關該組織的更多信息
• 直接鏈接到“商店”頁面
• “捐贈”頁面
• 新的“更新”頁面

商店和捐贈頁面是賺錢的，因此它們必須包含在主導航中。

組織藍圖完成後，就可以連接實際內容了。

第 3 步：讓客戶參與進來

站點地圖包括頁麵類型，但不包括內容映射。 經驗豐富的網頁設計師知道大多數問題發生在客戶開始向其網站添加內容時。 為避免此問題，請從一開始就保持客戶端循環。

對於 Archeology Southwest，我創建了一個包含站點地圖的 Google Doc，並要求客戶將其舊內容映射到新結構。

如果有些東西不太合適，我們稍後會解決。 這是關鍵的一步。 為什麼？ 除了讓客戶參與流程之外，它還可以在實施開始之前發現結構問題。

在這種情況下，某些站點地圖菜單項已更改，並且由於客戶有多個捐贈頁面，因此為此創建一個獨特的帖子類型是有意義的。

通過線框圖創建視覺結構

在這一步中，我開始給作品一個視覺結構。 為了讓系統運行良好並成功整合“一切都與位置有關”的概念，我在帖子類型之間創建了雙向關係。

這是基本的想法：當訪問者來到 Archeology Southwest 網站並選擇 Grand Canyon 時，他們將看到有關該位置的信息，但他們也會找到與項目、事件、展覽以及站點管理員標記為位置的所有其他信息相關的信息-具體的。

由於鏈接是雙向的，因此遊客還可以通過訪問項目頁面到達大峽谷。 最終，我得到了這個：

位置索引頁面顯示所有位置，最近的位置位於頂部。 搜索欄是用戶到達頁面後首先看到的內容。 谷歌地圖將佔據大約 80% 的屏幕。 這允許用戶在地圖上選擇點，並且當他們滾動或搜索時，列表網格將進入視野。

在單個位置頁面上，主體位於左側，因為它是最重要的信息。 相關元信息是次要的，所以它在右邊。 為了實現平衡的佈局，在第一個、第二個和第三個元素塊之間有一個不同的層次結構是至關重要的。 這使眼睛可以毫不費力地在各個部分之間移動。

在 Archeology Southwest 佈局中，用戶的視線從標題開始，然後移動到內容塊，最後跟踪到右側邊欄。 每條相關內容按相關性順序顯示。 例如，如果用戶正在閱讀有關 Grand Canyon 的信息，則該內容之後可能會出現照片和地圖。

由於這主要是一個教育網站，因此有一個“與此位置相關”選項很重要。 但是，與每個位置唯一關聯的內容並不多，因此我將很少使用（但相關）的內容合併到正文下方的單個塊中。

在相關內容下放置雜誌和視頻縮略圖會增加額外的視覺元素並將用戶引導至“購買”頁面。 該頁面通過顯示相關位置來完成。 這是吸引用戶進一步探索網站的好方法。 下一步是為其他帖子類型繼續此結構。

為主頁提供明確的目標

有了帖子類型的通用模型，我可以專注於主頁。 第一步是確定主頁的目標——這是 UI 設計的重要組成部分。 客戶的研究表明，許多用戶在沒有完全理解它是什麼的情況下偶然發現了這個網站。 因此，介紹和歡迎文字需要成為用戶首先看到的內容。

新的核心重點圍繞次要位置塊展開。 接下來是archaeologysouthwest.org 上發生的一切（當前的雜誌、博客、活動、時事通訊等）。 這是佈局過程的迭代：

使用 V1（左），我設計了一個類似於原始主頁的基本佈局。 沒有太多層次感。 用戶首先看到的是特色位置，但從那裡開始，他們很可能會迷失在列中。

對於 V2（中心），我創建了一個單獨的列，更易於觀察。 但是，它仍然可以改進。 這就是內容知識發揮重要作用的地方。 我知道 Archeology Southwest 一次舉辦的活動不會超過兩個，因此在主頁上為多個活動留出空間是沒有意義的。

在 V3（右）中，我專注於即將發生的事件。 如果由於某種原因，有兩個以上的事件，用戶可以單擊“更多”按鈕並查看其餘的。 我還特別強調了當前的雜誌，因為它是客戶的賺錢工具。 用戶從頂部開始並以 F 模式向下工作。 眼流是：

特色位置 > 歡迎 > 雜誌 > 活動 > 新聞

有了視覺線框和網站結構，就可以更容易地鞏固功能以及事情的運作方式。 在這一點上，我與客戶進行了另一次會議，以討論用戶交互的功能和流程，在這個階段兩者都更加清晰。

以後還會有修改嗎？ 是的，但它們將是調整，而不是整個過程的變化。 最重要的是，不會有驚喜。

納入品牌風格指南

現在是令人興奮的部分——將線框轉換為人們將使用和體驗的東西。 對於這個項目，我的目標是通過實施品牌顏色和排版使書面內容易於消化。

嘗試排版組合

排版是良好網頁設計不可或缺的一部分，因此我們必須儘早弄清楚我們的排版方案。 大部分考古西南標識使用 Univers Condensed Light 和 Adob​​e Caslon 字體。 沒有規定何時使用 Adob​​e Caslon，但我注意到它的使用頻率不如 Univers。

我進行了一項小型字體研究，以了解哪些配對為專業的非營利組織創造了最佳感覺。 但是，我也不希望我的字體方案看起來與客戶的營銷材料有太大的不同。

在進行字體比較之後，很明顯 Adob​​e Caslon 應該是標題字體，Univers 將用於字幕。 以句子形式設置主要標題可以使品牌更具個人感覺，而全部大寫則營造出更多的企業氛圍。

潤色網站的外觀和感覺

我著手創造一種輕鬆而開放的體驗，讓用戶覺得 Archeology Southwest 既平易近人又非常稱職。 根據分析數據，大多數訪問者使用桌面瀏覽器（可能是因為大多數人訪問該網站進行研究）。 因此，我最初的重點是為桌面用戶設計。

當來自台式機時，我希望訪問者立即看到特色位置、歡迎文字和即將發生的事件，然後是部分雜誌標題。 這樣，人們首先會看到公司是關於什麼以及他們正在推廣什麼。

在移動設備上，優先級略有不同。 由於用戶在旅途中訪問信息，因此事件更為重要，因此它們在列表中的位置較高。

我還更新了頁腳中的捐贈按鈕，將其從按鈕更改為句子，使其更加友好。

完成強：注意細節

用戶訪問詳細信息頁面的原因有兩個——他們想要了解有關地標的更多信息，或者他們已經知道某個位置並正在尋找其他信息（方向、電話號碼等）。 因此，立即呈現這兩個選項非常重要，這樣用戶就不必去搜索了。

我決定將詳細信息列從內容區域中分離出來，以賦予它更多的權重並使頁面更有趣。 這有助於創建組合層次結構，因此當訪問者訪問頁面時，他們將首先看到頁面標題，然後是一個小的圖像庫，然後是詳細信息列。

這種類型的設計可確保用戶立即註意到位置的其他詳細信息。 列周圍的一些額外填充使眼睛保持專注，並且更容易掃描信息。

正如人們所期望的那樣，移動視圖會崩潰。 首先擦除內容，然後是元信息。 我將視頻和雜誌放在移動頁面的最後，因為它們對移動用戶最不重要。 其他頁面遵循相同的結構以創建一致的流程和體驗。

網頁重新設計建立在精心規劃的基礎之上

回顧網站重新設計過程，很明顯大部分時間都用於組織和規劃。 只有 30% 的項目用於設計網站。

通常，當設計師展示他們的作品時，他們無法傳達有多少時間用於溝通的具體細節，導致沒有經驗的設計師直接跳入模型。 結果？ 脫軌的項目和不滿意的客戶。

為了使網站重新設計成功，必須進行詳細的規劃。 花時間進行項目前研究，熟悉現有內容並讓客戶參與是關鍵步驟。

最終，沒有辦法解決它。 有條不紊的項目組織方法為令人驚嘆的網站重新設計和專業信心鋪平了道路。