您為網(wǎng)站所做的設計會對其用戶體驗和功能產(chǎn)生重大影響，即使對于沒有設計知識的網(wǎng)站訪問者也是如此。對于想要獲取關(guān)鍵信息的來訪者而言，強烈的第一印象是關(guān)鍵。一個有效的網(wǎng)頁設計往往被忽視，因為一個設計良好的網(wǎng)站易于使用和理解。但有意識的設計選擇使這種輕松成為可能。我們確定了要遵循的10項關(guān)鍵設計原則，以便您可以自信地構(gòu)建一個美觀、用戶友好的網(wǎng)站。
1. 按重要性組織結(jié)構(gòu)
任何網(wǎng)站設計的目標之一是與您的網(wǎng)站訪問者共享信息。您可以通過清晰的排版和類型層次結(jié)構(gòu)來指示哪些信息對訪客最重要。
這意味著您的網(wǎng)站副本應該有清晰的標題、章節(jié)標題和正文。作為指導原則，首先嘗試將每個網(wǎng)頁的字體和字體樣式保持在 4 個以下。
確保以對您的內(nèi)容有意義的方式應用標題和標題。以這篇博文的樣式為例。該類型使用大小和字體樣式來表示頁面上信息的層次結(jié)構(gòu)，從標題到頂部要點和正文內(nèi)容。
清晰地組織您的網(wǎng)站內(nèi)容使訪問者更容易閱讀和瀏覽您的網(wǎng)站。它還使搜索引擎更容易理解您的網(wǎng)站結(jié)構(gòu)，從而提高您的 SEO 和搜索排名。
2. 合理配色保持視覺平衡
調(diào)色板是設置網(wǎng)站基調(diào)和能量的最佳工具之一。要首先選擇一系列顏色，請考慮您希望您的品牌或業(yè)務給來訪者帶來什么樣的感覺。
如果你想讓人們感到精力充沛，可以嘗試明亮、大膽的顏色。如果您想要舒緩的能量，請尋找更柔和的顏色。然后，在整個網(wǎng)站上一致地應用該配色方案以創(chuàng)建有凝聚力的外觀。使用對比色使重要元素流行起來，混合和匹配顏色以獲得平衡的外觀。
每種顏色都有不同的色調(diào)，因此在選擇任何一種顏色之前，請務必查看您的所有選項并嘗試不同的組合。
3. 通過布局吸引用戶的視線
將您的頁面布局和構(gòu)成視為您為網(wǎng)站訪問者鋪設的路徑。該路徑最終應該引導他們采取行動，無論是點擊您網(wǎng)站上的另一個頁面還是在同一頁面上采取行動。
我們的眼睛傾向于從左到右、從上到下以“Z”或“F”形狀掃描。在網(wǎng)站設計中放置不同的部分時，請記住這一點。例如，將您的公司名稱和使命放在主頁頂部的可見部分是有意義的，然后將其與頁面下方提供的信息和照片相平衡。
將布局與大小和顏色結(jié)合使用，使任何頁面上最重要的點突出顯示。
4. 使用負空間讓內(nèi)容脫穎而出
負空間，也稱為空白，是您網(wǎng)站上內(nèi)容之間有意留下的空白區(qū)域。負間距是為網(wǎng)站上的信息創(chuàng)建視覺層次結(jié)構(gòu)的另一種方法。它還帶來了更愉快、不那么壓倒性的瀏覽體驗。
例如，將一堆文本壓縮到頁面的某個部分可能會使其難以閱讀。它還使得很難弄清楚文本中最重要的部分是什么，觀眾很可能會略過它或干脆忽略它。在內(nèi)容之間添加視覺中斷可以幫助您隔離關(guān)鍵賣點或標題。
5. 讓網(wǎng)站暢通于任何設備
僅在上海，就有近一半的 Web 流量來自移動設備。這意味著一個好的網(wǎng)頁設計必須適應不同的屏幕尺寸和設備才能真正有效。
大多數(shù)網(wǎng)站建設者都將這種適應性內(nèi)置到他們的設計系統(tǒng)中。例如，Thinkart 網(wǎng)站采用響應式設計，這意味著它們會自動將字體大小和內(nèi)容調(diào)整為更小或更窄的屏幕。
在編輯時和啟動之前測試網(wǎng)站的移動可用性。您的網(wǎng)站編輯器應具有移動預覽模式或單獨的移動編輯。在上線之前，請在手機和平板電腦上使用該網(wǎng)站，以確保布局、類型和鏈接都有效，并且以有意義的方式進行組織。
6. 明確你的目標
在構(gòu)建您的網(wǎng)站時，請為您的網(wǎng)站訪問者牢記明確的最終目標。
這個最終目標是您的網(wǎng)站設計引導訪問者朝著的目標。在您列出了某人可能需要了解的任何背景和證據(jù)點之后，他們的目的地是號召性用語（CTA）。
號召性用語可以是按鈕、表單或簡單的鏈接，通常是為了激發(fā)行動而編寫的。將您的 CTA 設計與網(wǎng)頁的其余部分區(qū)分開來，并將其放置在與 CTA 將引導他們在哪里相關(guān)的關(guān)鍵信息或視覺效果下。這將有助于該選項脫穎而出，并引導訪問者找到您網(wǎng)頁的主要目的。
7. 選擇具有代表性的視覺元素
與調(diào)色板一樣，您為網(wǎng)站選擇的視覺元素應反映您的品牌標識并支持您網(wǎng)站的用途。這包括從照片到劃分頁面部分的圖標和強調(diào)符號的所有內(nèi)容。
圖片可讓您更具體地了解您告訴受眾的內(nèi)容。雖然柔和、柔和的調(diào)色板可能預示著舒緩的能量，但某人冥想的圖像可以傳達您如何將這種特定能量帶入您的品牌或業(yè)務中。除非您銷售產(chǎn)品或共享產(chǎn)品組合，否則您可以許可高質(zhì)量的庫存圖像并使用圖像效果來表達您的觀點。
8. 著重觀點信息
網(wǎng)站設計師經(jīng)常談論將信息放在 “首屏” 上。該術(shù)語來自實體報紙，其中最重要的故事印在紙張對折的上方。對于一個好的網(wǎng)站設計，這意味著任何網(wǎng)頁最重要的部分在有人需要向下滾動之前是可見的。常見的內(nèi)容是：
企業(yè)名稱和LOGO
導航菜單
頁面或文章標題
新產(chǎn)品或活動公告
關(guān)于企業(yè)的簡短摘要
案例及解決方案
通過訪問您網(wǎng)站上的重要頁面來測試您的首屏內(nèi)容的強度。對于每個頁面，記下您可以在完全不滾動的情況下從頁面中帶走的信息。每個頁面是否在您點擊后立即吸引您的注意力并讓您想要了解更多信息或開始滾動？
9. 讓您的網(wǎng)站易于瀏覽
良好的導航對于良好的網(wǎng)站體驗是必要的。網(wǎng)站訪問者應該始終清楚地知道您網(wǎng)站上的鏈接會將他們帶到哪里以及如何到達他們想去的地方。
當一個網(wǎng)站具有良好的導航時，您甚至可能不會考慮它。但是想想當你不知道在網(wǎng)站上哪里可以找到你要找的東西時是什么感覺——這很令人沮喪，而且用戶通常會點擊離開。
保持導航設計簡單。使用直接的語言，不要使設計過于復雜。通過讓朋友導航到特定頁面或產(chǎn)品來測試您自己的網(wǎng)站導航，或者設身處地為他們著想自己嘗試一下。
10. 創(chuàng)建一個突出的設計
就像任何創(chuàng)意渠道一樣，一旦您了解了規(guī)則，您就可以彎曲或打破它們，將您獨特的愿景變?yōu)楝F(xiàn)實。
值得信賴的品牌或企業(yè)看起來很專業(yè)，但脫穎而出的專業(yè)品牌有自己的觀點。在規(guī)劃網(wǎng)站設計或重新設計項目時，請牢記所有這些原則。但是不要害怕使用不同的設計元素，并根據(jù)您的需要開發(fā)獨特的視角和視覺設計。