在設計網站佈局的主題時，我想到了我在設計時遇到的常見錯誤, 為了改變改正這些錯誤，我總結了一些方法。這些設計原則不僅涵蓋設計方面，例如著陸頁設計，還包括一般的工作流問題，這將使工作做得很好。 關注它們，您很快就會開始建立專業的網站佈局。本文說說如何設計完美的 WooCommerce 獨立站網頁設計佈局。
1 、把您的想法放在紙上
這似乎很明顯，但我發現太多的設計師跳過這一步，直接進入 Photoshop 。 設計是解決問題的，在紙上畫出您的想法，透過良好的佈局和明確的層次結構來解決。 在開始放陰影之前，想想內容，佈局和功能。
2 、開始繪製頂級框架
草繪基本電線將幫助您解決 UX 問題並構建佈局。當我被要求建立一個專案的外觀時，我做的第一件事是提出一個頂層框架，解決所有的設計問題。 框架是圍繞內容的 UI，有助於執行操作並透過它進行導航。 它包括導航和元件，如側欄和底部欄。
3 、新增一個網格到您的 PSD
它聽起來很簡單。 在開始 Photoshop 設計任何東西之前，您需要一個適當的網格。網格將幫助您構造不同部分的佈局; 它將指導您完成特定的螢幕尺寸要求，並幫助您建立響應式模板，在間距和許多其他設計問題方面保持一致。
4 、選擇網站佈局顏色
使用有限的顏色和色調來防止視覺過載。在選擇一組字型使用的過程中，您應該開始探索您將在 UI，背景和文字中使用什麼顏色。在顏色方面，我建議使用有限的一組顏色和色調的一般多使用者介面。
根據元素的功能，在 UI 上應用這些一致性很重要。想想 Facebook，Twitter，Quora 和 Vimeo 等網站的佈局。除了 UI 之外，對於插圖或圖形細節不應有任何顏色限制，只要它們不干擾元件的功能。
5 、劃分佈局
站點的結構越簡單，多使用者越容易導航。您網站中的每個部分都需要講述一個故事。佈局需要幫助內容突出什麼是該故事中最重要的部分。實際上，在一個頁面上不應該有太多的呼叫，所以一切都應該推向最後的 “我能在這裡做什麼” 。
6 、注意細節
它可能是一個小的互動，一個意想不到的動畫或審美觸控，像一個按鈕中的一個小梯度或圍繞一個盒子在背景中的微妙的筆畫。但總的來說，這種觸控是必不可少的，也是自然的，如果您真的喜歡您做什麼。如果您有更多關於 WordPress 網站設計/開發、印刷服務、品牌設計、營銷推廣、 WordPress APP/WordPress 微信開發、資料業務等相關需求，請登入跨飛獨立站 WooCommerce 官網諮詢。