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