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