隨著時代的更新，WooCommerce 獨立站網頁設計也會 “過時” 。陳舊的網頁不能滿足企業新的業務要求，所以網站重新設計是不可避免的環節，如何做好網頁重設計也是許多設計師和產品人需要考量的事情。本文就來談談深圳網站製做行業中，WooCommerce 跨境電商網站的重新設計問題。
不同的公司和不同的團隊，對於重設計有著不同的需求和考量，自然也就有著不同的流程。我們並未遵循某種特定流程，但是在迭代過程中，我們做好了下面 7 件環節，最終得到了我們想要的結果。
1 、與客戶溝通
訪談之後，通常能從中獲取靈感——從那裡能瞭解關於產品的各種細節。這樣一來，無論是產品未來的願景、目標、品牌指南、專案原則還是網站文案，都比較容易確認。作為一個網站而言，更好的傳達資訊，才能真正讓多使用者感到驚喜。
2 、專案簡介
在真正開始深入開發之前，我們需要寫一份專案簡介，確保每個參與者的資訊和進度保持一致。我們會根據專案的實際情況，隨時對簡介內容進行調整和修改，實時更新。
通常，專案簡介會回答以下問題：
·我們正在試圖達到什麼目的？
·我們如何確認這個專案是成功的？
·我們需要做什麼事情？
·為什麼需要這樣做？
·哪些事情是非做不可的？
·我們為誰在做這些事情？
·他們如何瞭解這些事情？
·專案團隊中包含哪些人？
·我們的最後期限是什麼時候？
3 、競品分析
我們還需要仔細審視我們的對手。為此我們列出了競爭對手的列表，並開始瞭解在 WooCommerce 電子商務領域以外我們的產品如何服務於目標客戶的。我們會對比我們和對手之間的優勢、劣勢，我們碰到的機遇，獨有的特色，以及需要規避的問題。
4 、資訊架構
合理可靠的資訊架構能夠有效地將內容組織起來，讓資訊更容易被多使用者獲取並理解。在進行 WooCommerce 獨立站網頁設計的時候，用結構化的示意圖來呈現整個網站各屏之間的關係，能夠使您從更高的層面上來把握整個網站。
於是，我先用結構示意圖畫出老版本網站的各屏關係。在更新升級之前，我充分螢幕了其中的內容、目標和流量分佈，並提出了建議。結構示意圖幫助我們界定專案實施的範疇，就像一份詳盡的核對清單，讓我們在組織內容、設計介面、編寫程式碼的時候更為清晰明瞭。
5 、線框圖
在重設計過程中，我會使用線框圖來勾勒整體，幫我思考問題，打通思路。有人喜歡在將想法塗鴉在餐巾紙之上，有人喜歡面對面分享想法，還有人喜歡將想法落實於草稿線上分享。
線框圖的好處在於，您可以快速、便捷地填充不同的內容。僅落實於檔案的思路不夠具象，粗略的草稿不夠規整，線框圖能較好規避這些問題，不同型別的內容整齊地排列在一起，您可以清晰掌控佈局，模組與模組之間的關係。
6 、啟發板
我們會在啟發版（Inspiration board）上展現新品牌的視覺設計，展現它可能的樣子，這也是我從團隊獲取支援的一種方式。
同時我們還會使用 Pinterest，為了防止我們在單個畫板中泥足深陷，我們創造了多個畫板，為導航、動效、排版等不同領域，有針對性地蒐集案例，獲取靈感。
當我有想法的時候，會在 AI 中進行勾勒，它們通常都是文字、影像和色彩的結合體，看起來形同廣告。隨後，相同相近的設計元素會出現在我們的草稿中，不過其中各元素的位置和外觀，會有所不同，並且有許多不同的版本。
7 、視覺稿和原型
很多人並不在意印在紙上的線框圖和視覺稿。的確，直接在螢幕上看看還挺不錯，但是直接檢視落實於紙面上的線框圖、視覺稿和原型效果更好。
另外，我線上框圖繪製階段就開始製作可互動的視覺稿，並且拿這些東西同客戶進行溝通交流，一直到它們最終被落實為程式碼和實際的從程式。