WordPress 外貿獨立站網站建設成功的第一要素，也就是 WooCommerce 獨立站網頁設計。合理的 WooCommerce 獨立站網頁設計製作是一個優秀 WordPress 企業網站的先決條件。因此，在建設網站前，就要先做好 WooCommerce 獨立站網頁設計的規劃。那企業 WordPress 外貿獨立站網站建設的網頁規劃，涉及到的內容也是非常的多，那究竟 WooCommerce 獨立站網頁設計的內容都有哪些？都包含哪些專案呢？

　　1. 原型圖

　　原型圖階段中設計師需要和產品經理溝通需求，這時要注意，並不是產品經理向設計師下發需求，而是需要互相就自己擅長的方面進行溝通。視覺方面具體呈現也許設計師會有過更好的方式，這是需要在設計之前與產品經理達成一致。
 

 
　　2. 視覺稿
 
　　WooCommerce 獨立站網頁設計的內容中視覺稿階段就是我們要根據原型圖確定的內容和大體板式完成網站的界面設計了，在 WordPress 網站設計的時候，我們需要一些影像和靈感的素材。比如世界盃專題時，我們除了收集很多素材之外，也可以設計一個 “情緒板” 。簡單説情緒板就是將一些於主題相關的資料和素材鋪貼在一起，這樣可以更好地指引我們整個需求的設計主題和大體感覺。另外，很多網站的頭部通常需要主視覺來抓人眼球，這時可能會使用到需求方提供的明星照片、主題素材、 logo 、主視覺 PSD 等，那麼用素材和這些需求方提供的資料進行混合並拼出讓人覺得震撼的頭部視覺就是我們的目標了。主視覺下面的信息排布更強調合理性，這時也需要和產品經理溝通從後台調取圖片尺寸、標題欄位長度等，然後根據這些要求完成頁面信息部分的設計。總之，設計過程中需要我們不斷思考和溝通才可以完成一個比較棒的視覺稿。
 

 
　　3. 設計規範
 
　　當視覺稿通過之後，很多設計師可能不會主動地去做設計規範。其實每一個可迭代的產品都需要設計來總結設計規範，設計規範就是所有頁面中共性的東西，比如字型不同的大小、圖片的尺寸、按鈕的樣式等，這些共性也是多用户訪問網站時會理解成固定概念的憑證。比如同樣的分析功能如果採用兩種截然不同的樣式就會讓多用户困惑。那麼設計規範主要也是在約束設計師我們自己，在多用户有限的記憶力中減少思考的成本。

        同時，設計規範也可以保證同一個專案的不同設計師都能輸出一樣風格的設計來。最後，設計規範對於設計師個人來説也是滴專案影響的一個佐證，可以證明您的思考和您在專案中的地位。所以我認為設計師應該主動去做設計規範和專案總結。設計規範如何去做？其實設計規範就是把主要頁面的元素固定才統一元素即可。具體來説一個產品的設計規範應該有：字型規範、主體色規範、圖表規範、圖片規範等不同的分類。
 

 
　　4. 切圖
 
　　在 WooCommerce 獨立站網頁設計的內容中，WooCommerce 獨立站網頁設計師通常不需要為前端工程師切圖。因為前端工程師通常需要掌握 PS 軟件技能。如果遇到特殊情況需要我們切圖時，我們可以使用諸如 Cutterman 、 Zeplin 等切圖外掛中 web 選項為前端切除網站所需要使用的圖片。
 

 
　　5. 前端代碼
 
　　前端工程師會用代碼重構我們設計的頁面，把圖紙變為靜態頁面。然後和後端工程師對接調取資料界面，一個網站就活了起來。工程師們為了方便了解網站是不是達到了我們要求的資料，也會進行埋點。埋點就是在頁面代碼中插入一些統計代碼，方便我們之後確定哪些頁面訪問量高，哪些沒有達到預期。在此後還會有測試工程師介入來發現編譯完的網站是否存在一些漏洞等。
 

 
　　6. 專案走查
 
　　WooCommerce 獨立站網頁設計完成後還需要設計師進行專案走查，來確定網頁還原度是否有問題。如果發現有和設計稿出入很大的，就需要要求前端工程師進行調整。這個步驟非常重要，因為網站的成品才是我們最終的輸出，不要認為設計稿很漂亮而實現後的頁面就不需要我們負責了。
 
        如果您還想了解更多關於網站的內容，還可以看看：招商 WordPress 外貿獨立站網站建設必須要注意的四大要點。