正在尋找網站設計的最佳實務嗎？您來對地方了！
良好網站設計的關鍵在於從穩固的基礎開始。以下是一些能幫助您入門的技巧和訣竅。
30 個網站設計最佳實務
從基礎開始
讓我們先快速瀏覽一些簡單的最佳實務，如果您從一開始就實施這些實務，就能顯著改善您的網站設計。
- 盡可能從線框圖開始。即使只是鉛筆素描，也要優先將您的想法呈現在紙上或螢幕上。如果您有資源，我們建議您花一些時間在頁面的結構規劃上。這將在您之後進行 UI 工作時節省大量時間。相信我們！
- 始終使用真實文案。Lorem ipsum 適用於許多情況，但使用網站中會實際呈現的內容來構思網站設計總是更好。如果您沒有任何最終定稿的內容，請嘗試撰寫一些範例文案，並用它來建構您的頁面。
- 使用網格佈局。網格佈局使用欄位系統，可幫助您保持設計的結構性和元素的整齊。與其他組織性較差的設計相比，開發人員也更容易實作。Bootstrap 的網格系統就是一個很好的例子。
- 從一開始就針對不同的解析度和螢幕尺寸進行建構。雖然將多種解析度納入考量並非強制性，但它會讓您的開發人員更輕鬆，也能提供更好的使用者體驗。在 Sketch，我們將 360w、768w、1024w、1440w 和 1920w 作為最低要求進行設計。
- 使用 4 或 8 的倍數。在設計中使用4 或 8 的倍數（無論是間距、大小、排版等等）正逐漸成為業界標準。這也是一個值得遵循的好經驗法則，因為它有助於保持一致性並簡化您的設計流程。而且，您猜對了，您的開發人員也會因此而愛上您。
- 最大限度地利用「首屏」的效力。頁面的上半部分是訪客首先看到的內容。請確保您的主要行動呼籲位於該處且容易找到。清楚說明您的產品或服務是什麼，讓訪客在進入您頁面的幾秒鐘內就知道您如何幫助他們。
現在您已經掌握了基礎知識，讓我們繼續深入探討網站設計的最佳實務。
在我們的價格頁面上，您可以按下 ^L 來觸發佈局指南，並查看我們如何使用網格系統。
導覽
良好的導覽是網站設計中最重要的面向之一。想想看，如果您的訪客找不到他們要找的東西或不了解他們可以在您的網站上做什麼，這些訪問又该如何轉換成實際效益呢？
別擔心，設計網站導覽動線並非難如登天。以下提供一些簡單卻可靠的技巧和最佳實務，讓您的網站導覽設計更上一層樓。
- 精簡至上。 如果選單和子選單過多，使用者可能會感到困惑而離開您的網站。請專注於您的重點項目！
- 明智地選擇選單。 不同類型的選單適用於不同的目標客群和產品，因此請仔細考慮我們先前討論過的目標和需求。首先，避免僅因為酷炫或新穎就選擇不同的選單類型。
- 仰賴頂部選單列。 雖然在設計上展現創意很棒，但請牢記訪客的期望。到目前為止，大多數人都習慣於頂部選單列，並期望在此找到重要資訊。同樣地，我們也期望頁尾包含聯絡表單或公司資訊。
- 讓重要的選項容易找到。 在設計選單階層時，請同時牢記您的優先事項和使用者的優先事項。
- 在適當的地方新增子選單。 子選單是放置其他重要頁面或資源的絕佳方式，否則這些頁面或資源會使您的選單顯得雜亂。它也能讓您網頁的內部邏輯更清晰。
如果您在蘋果公司的頂部選單中切換到 iPad，您會看到一個漂亮的下拉式選單，可以瀏覽所有不同的 iPad 機型和配件。
色彩
您應該像在紙上使用螢光筆一樣在網站設計中使用顏色。它可以幫助引導訪客，將他們指向最重要的資訊。但是，如果您過度使用，很容易讓使用者感到不知所措。以下是一些在網頁設計中有效使用顏色的簡單技巧。
- 使用顏色來指示功能。 顏色通常用於指示某個項目是否可點擊，例如按鈕或連結。您甚至可以使用不同的顏色來指示使用者之前是否點擊過該按鈕或連結。由於使用者已經預期這種設計語言，因此最好遵循它。
- 使用品牌顏色作為重點。 在選擇顏色時，良好的做法是為內文和背景選擇中性色。然後，將品牌顏色用於按鈕、連結和圖像，以幫助提升品牌視覺識別度，並從一開始就建立良好的品牌認知度。
- 檢查可讀性和無障礙性。 您選擇的配色方案會對使用者的眼睛產生很大的影響，無論是好是壞。您可以根據WCAG 規則檢查您的配色方案，以確保您的設計使用最佳的顏色對比度來提高可讀性。
- 尋找靈感。 電玩遊戲往往能巧妙地運用色彩。例如，您可以研究他們如何使用符號指示器 (signifiers)，設計師用它來指示元素或物件的用途。
Stripe 的首頁不僅色彩繽紛，而且顏色不斷變化！此外，試試輸入Konami 秘技，看看會發生什麼事 👀
文字
提供訪客所需的資訊固然重要，但如果您希望他們完整閱讀，內文必須引人入勝且易於理解。以下是在使用文字時，一些重要的網站設計最佳實務。
- 擁抱留白。 使用簡短的段落，並用標題、圖片和其他視覺元素來區分區塊。將這些文字間的留白視為在不同想法之間喘息的機會。
- 注意參差不齊的邊緣和寡行。 這些不是指人和破舊的衣服，而是指顯示不佳的文字。當文字對齊方式偏離並開始形成奇怪的形狀時，就會出現參差不齊的邊緣。寡行是指段落末尾遺留的單字。這些聽起來像是小細節，但它們確實可以提升您的網站設計。
- 重視設計與內容的雙人組。關於內容應該引導設計還是設計應該引導內容，一直以來都眾說紛紜。無論您選擇哪一種，請確保兩者不會互相衝突。保持文字簡潔但信息豐富，設計吸引人但簡潔。
- 設定參數。雖然您可能已經注意到了內邊距和外邊距，但請確保水平文本行永遠不要超過 70 個字元。這一點很容易被忽略。
- 別忘了層級。文字層級可以成就或破壞一個設計。請確保從一開始就做好。不知道從哪裡開始嗎？參考 Apple 的指南和 Google 的Material Design。
- 搜尋引擎最佳化 (SEO)。考慮採用 SEO 友好的文字和頁面結構。這意味著在標題和正文中加入關鍵字，並在與開發團隊分享圖片時考慮圖片的替代文字。
在此範例中，您可以看到Mailchimp 的網頁設計師如何確保 H1 標題「自動化您的行銷」不會變成一個超長的句子，以及下面的正文段落是如何保持緊湊。沒有散亂的文字，也沒有孤立的行。
行動呼籲
行動呼籲 (CTA) 毫無疑問是網頁設計中最重要的元素，它是讓網站訪客採取行動的連結或按鈕。這個行動應該清晰、易於找到，並且與您的登陸頁面或網站目標一致。
- 考慮所有 CTA 級別。根據頁面的目標，您可以設置多個 CTA，但重要的是將它們分類為主、次和三級，並在您的設計中清楚地體現出來。確保您的主要目標獲得最多的空間和關注。
- 保持簡短。有效的 CTA 文案應該簡短、友好且對使用者提供資訊。常見的例子包括「了解更多」、「立即購買」和「免費訂閱」。
- 位置是關鍵。我們前面提到了首屏。雖然這是您的主要 CTA 應該放置的位置，但您可以在首屏下方（頁面的下半部分）添加次要和三級 CTA。確定您希望 CTA 放置的位置也可以幫助您更好地整理整體文案。
Blush 的網站設計使用顏色來區分他們的 CTA。同時，它使用頂部導航欄來創建一個額外的首屏上方位置，用於放置其他 CTA。
設計系統
人生——以及網站設計——中唯一不變的就是改變。如果您正在創建一個經久耐用的網站，設計系統將是一項巨大的資產。透過設計系統，您可以創建一套規則，讓所有為您的品牌設計的人都能使用，以確保他們使用正確的顏色、圖像、佈局等等。
- 著眼未來。您總需要進行更改，因此請確保您有一個設計系統——以及它對應的開發系統——以便您可以快速上手。
- 創建可重複使用的樣式和資源。您可以創建文字樣式、間距規則、顏色代碼和可重複使用的元素——例如 Sketch 中的符號——以使您的設計保持一致性，並更容易在以後進行調整或更新。
在此範例中，您可以看到 Monday Studio 如何透過在 Sketch 中託管他們的設計系統庫來追蹤他們所有的網站設計元素。
優化
沒有經過適當優化的網站設計是不完整的。在所有最佳實務中，確保您的網站對 Google 友好對於網路的成功至關重要。
- 行動優先。即使人們只是在之後才在電腦上與您的網站互動，他們也很可能會透過行動裝置找到您的網站。因此，最好保持您的網站設計 pristine，這樣才不會破壞第一印象。
- 別忘了圖像。 設計工作並不會在網站草圖完成後就結束！與您的開發人員密切合作，確保您的圖像經過優化，在保持清晰顯示的同時不會拖慢網站速度。您可以使用 ImageOptim 之類的工具來驗證。
- 建立原型。 這將幫助您和其他人真實感受設計。如果您正在與客戶合作，這也能為您贏得一些額外加分。最後但同樣重要的是，原型也非常適合用於使用者測試。
借助原型，您可以測試網站設計的功能，並從潛在使用者那裡獲得回饋。
享受樂趣
什麼？沒錯！享受樂趣是最重要的部分。如果您不享受網站設計的過程，那麼遵循所有這些最佳實務將會令人生畏。其中涉及許多環節，但您應該欣然接受，並享受看著您的願景一點一點地實現。
確保您樂在其中的快速方法？花些時間設計小細節。我們的網站和網路應用程式上有一些小細節，您知道它們是什麼嗎？👀 （如果您需要提示，我們的下載頁面上有一個。）
在等待下載完成時，請嘗試更改您的外觀設定💅
