如何通(tōng)過8個(gè)簡單步驟設計網站

許多(duō)人(rén)認爲，如果您想設計一個(gè)不錯的(de)網站，也(yě)就是說，您将需要了(le)解有關網頁設計的(de)一兩件事。畢竟，這(zhè)一點很重要，如此重要，以至于有38％的(de)訪問者在發現布局沒有吸引力時(shí)會離開網站。您可(kě)以将網頁設計想像成賣汽車的(de)東西，它可(kě)能具有最令人(rén)難以置信的(de)引擎，但是如果底盤很醜陋，人(rén)們對(duì)購(gòu)買它就不會有興趣。

 

在網站構建專家這(zhè)裏，我們了(le)解設計網站的(de)一兩件事。因此，爲幫助您，我們整理(lǐ)了(le)這(zhè)份簡單，易于遵循的(de)八步指南(nán)。爲了(le)快(kuài)速浏覽，我們将介紹以下(xià)内容：

想知道如何建立一個(gè)網站嗎？

1.定義您網站的(de)目的(de)和(hé)策略

2.研究最新的(de)Web設計趨勢

3.選擇您的(de)平台

4.決定您的(de)品牌

5.添加并優化(huà)您的(de)内容

6.發布您的(de)網站

7.分(fēn)析和(hé)改進

 

一、定義您網站的(de)目的(de)和(hé)策略

聽(tīng)起來(lái)好像很簡單，但是在您急于設計網站之前，首先需要明(míng)确其目的(de)。除了(le)簡單地了(le)解您的(de)行業并定義内容策略之外，您還(hái)需要考慮一下(xià)USP（唯一賣點）是什(shén)麽，以及您希望如何發展。

人(rén)們并不愚蠢。如果您隻是爲了(le)賺錢或提高(gāo)自己的(de)形象而置身事外，人(rén)們就會看到它。您網站的(de)設計與您的(de)品牌直接相關，需要真實可(kě)信。您想達到什(shén)麽目的(de)？明(míng)确目标之後，重點就會轉移到訪問者登陸您的(de)網站時(shí)希望他(tā)們采取的(de)行動。您的(de)網站隻是爲了(le)顯示信息嗎？賣産品？要注冊？答(dá)案最終将決定您網站的(de)外觀。以電子商務爲例，您的(de)目标網頁是設計的(de)關鍵要素。

更進一步了(le)解，關于不同的(de)訪客提供單獨的(de)登陸頁面的(de)重要性，以便分(fēn)别定制商品和(hé)産品，這(zhè)一過程稱爲客戶細分(fēn)。專家的(de)建議(yì)：“了(le)解用(yòng)戶對(duì)于任何企業的(de)成功都是至關重要的(de)。這(zhè)意味著(zhe)您可(kě)以自定義和(hé)改善您提供的(de)體驗，并更好地滿足他(tā)們的(de)需求。這(zhè)樣做(zuò)對(duì)底線有直接影(yǐng)響。

“細分(fēn)流量以提供更相關的(de)體驗是您邁向個(gè)性化(huà)用(yòng)戶體驗以及随之而來(lái)的(de)業務成功之路的(de)第一步。”

 

二、研究最新的(de)Web設計趨勢

Web設計發展迅速，但是您可(kě)以從中學習(xí)更多(duō)流行的(de)趨勢。在這(zhè)一點上，需要注意的(de)是，僅因爲網絡趨勢是當前趨勢，并不意味著(zhe)它一定适合您。

48％的(de)人(rén)認爲設計是網站的(de)最重要因素，因此花點時(shí)間看看競争對(duì)手在做(zuò)什(shén)麽很重要。每個(gè)行業都有不同的(de)風格，因此了(le)解自己是否适合該行業或擾亂該行業至關重要。

專家Alex Vasili認爲您應該始終按行業進行研究，而不是年齡或性别。在與我們談論網頁設計時(shí)。

專家的(de)建議(yì)：“在色彩理(lǐ)論方面，有很多(duō)東西-這(zhè)些色彩暗示著(zhe)某些情緒，以及它們如何使您産生某種感覺。我認爲這(zhè)取決于您是要破壞還(hái)是要适應。 

“如果您想破壞行業，那麽您想要的(de)東西與該行業所提供的(de)完全不同。但是，如果您要适應，則有明(míng)确的(de)模式。

我們該如何進行谷歌(gē)seo網站建設？“如果您是一家科技公司，那麽那裏可(kě)能會有一些藍色，而如果您是一家初創公司，那麽那裏可(kě)能會有一種非常充滿活力的(de)色彩。字體也(yě)一樣。您将需要一個(gè)真正幹淨，簡單的(de)設計以及大(dà)量的(de)空白。”

這(zhè)表明(míng)在深入物(wù)理(lǐ)設計本身之前了(le)解您的(de)需求的(de)重要性。我們将在“品牌”部分(fēn)中重新著(zhe)色，但是爲了(le)幫助您，以下(xià)是一些當前的(de)趨勢，這(zhè)些趨勢正在風靡互聯網。

微交互是當用(yòng)戶與網站互動時(shí)發生的(de)小型動畫(huà)。例如，如果您對(duì)Facebook上的(de)信息進行“反應”，則會彈出帶有相關動畫(huà)表情符号的(de)信息。

微交互可(kě)以爲網站注入個(gè)性。微交互會創建人(rén)與人(rén)之間的(de)接觸點，從而使訪問者感到自己正在與您的(de)網站進行通(tōng)信。微交互可(kě)以采用(yòng)多(duō)種形式（單擊，懸停，滾動等），對(duì)于建立與用(yòng)戶的(de)關系非常重要。它們可(kě)能不适合嚴肅的(de)白領企業，但是大(dà)多(duō)數站點都可(kě)以從少量交互中受益。

如果您認爲您不會在本指南(nán)中學習(xí)體系結構，那麽我們很遺憾會誤會您。網頁設計的(de)靈感來(lái)自20世紀中葉的(de)建築，盡管許多(duō)人(rén)認爲它很醜陋，但它确實可(kě)以工作。

 

（1）聊天機器人(rén)支持

這(zhè)是對(duì)您的(de)統計：企業每年在客戶服務請求上的(de)支出接近1.3萬億美(měi)元。據估計，聊天機器人(rén)可(kě)以将其減少30％。聊天機器人(rén)僅僅是頭的(de)日子已經一去不複返了(le)–現在，它們對(duì)于面向客戶的(de)服務變得(de)越來(lái)越重要。

聊天機器人(rén)的(de)主要吸引力是時(shí)間效率和(hé)成本效益。他(tā)們全天候工作24/7，這(zhè)使您騰出時(shí)間來(lái)處理(lǐ)其他(tā)事務。他(tā)們還(hái)爲您節省了(le)聘請員(yuán)工擔任客戶服務代表的(de)費用(yòng)。當然，聊天機器人(rén)并不是完美(měi)的(de)，但是他(tā)們的(de)情商和(hé)提供定制支持的(de)能力正在逐步提高(gāo)。從來(lái)沒有比現在更好的(de)時(shí)間安裝它了(le)。

 

三、選擇您的(de)平台

當您想到優質的(de)網頁設計時(shí)，首先想到的(de)是專業機構，對(duì)嗎？盡管頂級公司在很大(dà)程度上做(zuò)得(de)很好，但它們的(de)價格卻令人(rén)目瞪結舌。幸運的(de)是，還(hái)有另一種方式：網站建設者和(hé)電子商務平台。這(zhè)些都是DIY在線工具，可(kě)讓您創建和(hé)設計自己的(de)網站-無需知道任何代碼！

當然，這(zhè)裏有大(dà)量的(de)選擇-質量參差不齊，但是我們投入了(le)很多(duō)精力，并研究了(le)市場(chǎng)上最好的(de)東西。通(tōng)過專家研究和(hé)全面測試的(de)結合，我們現在可(kě)以爲設計自己的(de)網站提供最佳選擇

 

（1）WordPress

WordPress.org是一個(gè)自托管的(de)開源CMS（内容管理(lǐ)系統），但您真正需要知道的(de)是它是設計網站時(shí)最受歡迎的(de)平台。WordPress可(kě)以讓您完全控制網站的(de)外觀，從技術上講，它是免費的(de)。我們之所以這(zhè)樣說是因爲，爲了(le)使您的(de)網站正常運行，您實際上需要爲虛拟主機，安全性，域名以及所需的(de)任何其他(tā)插件或主題付費。

但是，WordPress的(de)最大(dà)問題是，它實際上并不适合普通(tōng)的(de)。除非您對(duì)代碼感到滿意–或沒有預算(suàn)聘請專業開發人(rén)員(yuán)–否則WordPress幾乎無法使用(yòng)。出于這(zhè)個(gè)原因，我們建議(yì)正在構建自己的(de)網站的(de)人(rén)堅持使用(yòng)網站構建器和(hé)電子商務平台。

 

（2）模闆是網站的(de)布局

将模闆想像成您的(de)房(fáng)屋結構，在您将其所有物(wù)品填滿之前，它會形成其基本外觀。大(dà)多(duō)數平台都會爲您提供一系列可(kě)供選擇的(de)模闆，這(zhè)些模闆已預先填充了(le)示例内容。模闆通(tōng)常分(fēn)爲行業類别，因此可(kě)以非常輕松地篩選模闆并查找與您相關的(de)模闆。每個(gè)類别将具有帶有與該行業相關的(de)内置功能的(de)模闆，從而節省了(le)您以後添加它們的(de)時(shí)間和(hé)精力。

例如，如果您想要一個(gè)新咖啡店(diàn)的(de)網站，則可(kě)以浏覽“ cafe”下(xià)列出的(de)模闆。其中大(dà)多(duō)數已經在模闆中内置了(le)聯系表單，菜單頁面和(hé)聯系方式，因爲它們都與咖啡館網站的(de)要求有關。

在開始編輯之前，可(kě)以預覽所有模闆，因此您可(kě)以清楚了(le)解其外觀–更重要的(de)是，它是否适合您的(de)需求。研究表明(míng)，網站用(yòng)戶可(kě)以通(tōng)過滾動而不是在不同頁面上滑動來(lái)更快(kuài)地找到信息。因此，如果您的(de)網站隻需要一些基本信息，則可(kě)能值得(de)考慮使用(yòng)一頁模闆。

 

四、決定您的(de)品牌

現在該開始設計您的(de)網站了(le)！現在，讓我們将學到的(de)東西付諸實踐。在設計網站時(shí)，您應該考慮自己所做(zuò)的(de)一切與整體品牌的(de)關系。從配色方案到字體樣式和(hé)圖像，一切都在講述品牌故事中發揮作用(yòng)。他(tā)們都必須發送相同的(de)消息，這(zhè)一點很重要。

 

（1）配色方案

顔色是品牌最大(dà)的(de)溝通(tōng)工具之一。實際上，根據Color Matters所說，标志色可(kě)以使品牌知名度提高(gāo)80％。人(rén)們對(duì)顔色的(de)感知背後有很多(duō)心理(lǐ)學依據，因此了(le)解如何将其與您的(de)行業聯系起來(lái)很重要。爲了(le)幫助您，以下(xià)是我們彙總的(de)信息圖，可(kě)幫助您解釋不同顔色的(de)含義以及如何使用(yòng)它們。大(dà)多(duō)數品牌都有一種主色，然後是兩種或三種第二色。藍色是最受歡迎的(de)顔色，前100個(gè)品牌中有三分(fēn)之一在徽标中使用(yòng)了(le)藍色。

如果您希望您的(de)網站保持現代趨勢，那麽鮮豔的(de)色彩就是您的(de)理(lǐ)想之選。色彩專家Pantone最近将'活珊瑚'評爲2019年年度色彩：

 

（2）字體樣式

與顔色類似，您選擇的(de)字體對(duì)人(rén)們對(duì)您的(de)網站的(de)看法有很大(dà)的(de)影(yǐng)響。網站的(de)普通(tōng)用(yòng)戶将閱讀任何給定頁面上大(dà)約20％的(de)文字，因此以适當的(de)氛圍吸引用(yòng)戶至關重要。

自然，白領企業将希望使用(yòng)經典樣式的(de)字體。諸如Arial和(hé)Helvetica之類的(de)字體是專業精神的(de)代名詞，因此在討(tǎo)論嚴重問題時(shí)有意義。但是，更有趣或更有趣的(de)品牌可(kě)能希望探索更多(duō)抽象字體。不過，重要的(de)是要在有趣和(hé)可(kě)讀之間取得(de)平衡-您要做(zuò)的(de)最後一件事就是疏遠(yuǎn)讀者群。

 

視覺内容對(duì)于增加點擊次數和(hé)參與度很有用(yòng)，但在更基本的(de)層次上，圖像隻是牢記在心。根據一項研究，如果我們聽(tīng)到一條信息，我們隻會記住其中的(de)10％；但是，如果添加一張圖片，您将記住令人(rén)難以置信的(de)65％。

就是說，請注意不要使您的(de)網站上出現過多(duō)圖像。許多(duō)高(gāo)質量的(de)圖像可(kě)能看起來(lái)不錯，但它們可(kě)能會使您的(de)網站變慢(màn)。Web用(yòng)戶不耐煩，如果您的(de)網站無法快(kuài)速加載，他(tā)們會用(yòng)鍵盤投票(piào)。

 

五、添加并優化(huà)您的(de)内容

因此，現在您知道要添加到網站中的(de)内容，需要考慮兩件事：定位和(hé)優化(huà)。位置是指您的(de)内容在每個(gè)頁面上的(de)位置以及布局。同時(shí)，優化(huà)是調整内容的(de)過程，以幫助其在搜索引擎（例如Google或Bing）上獲得(de)更高(gāo)的(de)排名。下(xià)面，我們将討(tǎo)論兩者的(de)技術性，并解釋它們爲何如此重要。

 

（1）定位

這(zhè)就是爲什(shén)麽網站上的(de)導航欄幾乎總是顯示在頁面頂部的(de)原因。這(zhè)是人(rén)們登陸該網站時(shí)首先要吸引他(tā)們的(de)地方。記住這(zhè)一點來(lái)安排您的(de)内容是一種很好的(de)做(zuò)法，以便盡可(kě)能多(duō)的(de)人(rén)看到重要内容。

 

（2）優化(huà)

搜索引擎優化(huà)（簡稱SEO）是您對(duì)網站進行更改以提高(gāo)登陸您網頁的(de)人(rén)數或數量的(de)時(shí)候。像這(zhè)樣思考SEO：如果您擁有賽車，目标是赢得(de)一場(chǎng)比賽。您可(kě)以擁有外觀最奇特的(de)汽車，但這(zhè)将是與衆不同的(de)。

當您對(duì)引擎進行調整，更換輪胎或減輕底盤重量時(shí)，您正在做(zuò)的(de)就是優化(huà)您的(de)汽車。可(kě)能看起來(lái)一樣，但是現在您赢得(de)比賽的(de)機會更大(dà)了(le)！  SEO大(dà)緻相同。您的(de)網站看起來(lái)可(kě)能沒有什(shén)麽不同，但是對(duì)内容，圖像和(hé)響應速度進行調整可(kě)能會對(duì)它在搜索引擎結果中的(de)排名有很大(dà)的(de)影(yǐng)響。以下(xià)是設計優化(huà)網站時(shí)可(kě)以做(zuò)的(de)一些最重要的(de)事情：

 

（3）元數據

除了(le)實際内容之外，頁面标題和(hé)描述（稱爲元數據）是告訴Google您網站的(de)全部内容的(de)最簡單方法。元數據将顯示在搜索結果中，并允許用(yòng)戶在單擊網頁之前先發現網頁上的(de)内容。

圖像通(tōng)常是很大(dà)的(de)文件。這(zhè)意味著(zhe)擁有大(dà)量圖像會降低您的(de)網站速度，導緻人(rén)們變得(de)不耐煩，甚至在網站完全加載之前就離開了(le)網站。這(zhè)就是所謂的(de)“跳出”頁面。

加載時(shí)間爲2秒或更短的(de)網頁的(de)跳出率爲9％，而耗時(shí)5秒的(de)網頁的(de)跳出率爲38％。 

所以你能對(duì)它做(zuò)點啥？爲什(shén)麽要進行圖像壓縮！有大(dà)量免費的(de)在線壓縮工具，它們會減少圖像中的(de)像素數量。盡管不影(yǐng)響圖像質量很重要，但壓縮圖片可(kě)能會對(duì)頁面加載速度産生重大(dà)影(yǐng)響。

 

（4）圖片替代文字

除了(le)壓縮圖像，SEO的(de)另一個(gè)重要部分(fēn)是告訴Google圖像代表什(shén)麽。與文本不同，搜索引擎無法“讀取”圖像，因此，通(tōng)過在圖像中添加替代文本，可(kě)以有效地幫助他(tā)們了(le)解所描繪的(de)内容。

Alt文本不會直接顯示在您的(de)網站上-而是在您編輯時(shí)添加的(de)-因此您不必擔心将其作爲您最有啓發性的(de)作品（隻要它代表圖像即可(kě)）。

 

（5）移動響應度

這(zhè)是一個(gè)很大(dà)的(de)。在2018年，所有互聯網浏覽中有58％是在移動設備上進行的(de)。這(zhè)就是Google偏愛(ài)在手機上正确設置格式的(de)網站的(de)原因。如果您沒有，那您​​将遇到嚴重的(de)問題。

如今，大(dà)多(duō)數模闆都是響應移動設備的(de)，并且會自動重新格式化(huà)您的(de)内容以适合各種屏幕尺寸。但是，值得(de)考慮的(de)是，是否要讓任何内容看起來(lái)與移動用(yòng)戶不同。

釘住它可(kě)以改善用(yòng)戶體驗，并爲您赢得(de)一些嚴重的(de)SEO積分(fēn)。

 

（6）内部連結

通(tōng)過内部鏈接，您可(kě)以通(tōng)過超鏈接将用(yòng)戶定向到您網站上的(de)另一個(gè)網頁。通(tōng)常，當您提及具有相關内容的(de)内容時(shí)，便可(kě)以完成此操作。這(zhè)告訴Google和(hé)co。您是該主題的(de)權威，因爲您對(duì)此有多(duō)篇文章(zhāng)。

“ EAT”代表專業性，權威性和(hé)可(kě)信賴性。通(tōng)過深入撰寫有關主題并在内部鏈接到與此主題相關的(de)更多(duō)内容，您将向搜索引擎顯示您确實了(le)解自己的(de)知識，這(zhè)反過來(lái)又可(kě)以幫助您獲得(de)較高(gāo)的(de)排名。

 

六、發布您的(de)網站

現在，讓我們快(kuài)速回顧一下(xià)您現在應該做(zuò)的(de)事情：

（1）确定您網站的(de)目的(de);

（2）研究了(le)最新的(de)網頁設計趨勢并進行了(le)競争對(duì)手分(fēn)析;

（3）立足于平台和(hé)主題，以建立您的(de)網站;

（4）确定您的(de)品牌（配色方案，字體樣式等）;

（5）創建您的(de)網站并優化(huà)其内容;

現在，是時(shí)候檢查所有工作原理(lǐ)，然後再上線了(le)！要求您的(de)家人(rén)，朋友和(hé)同事在預覽模式下(xià)測試該網站（所有網站建設者和(hé)電子商務平台都将擁有此功能），看他(tā)們是否發現任何錯誤。您甚至還(hái)可(kě)以讓公衆也(yě)進行測試，并發表自己的(de)想法。

您要檢查的(de)一些常見事項是：

（1）您的(de)所有鏈接均正常運行，它們将用(yòng)戶定向到正确的(de)頁面;

（2）您的(de)所有内容可(kě)讀且易于查找;

（3）您與首頁之間的(de)點擊次數不會超過3次;

（4）您的(de)網站在台式機，移動設備和(hé)平闆電腦(nǎo)上看起來(lái)都很棒;

（5）在任何頁面上的(de)加載速度均不超過5秒;

有關更多(duō)詳細信息，您可(kě)以在線找到大(dà)量的(de)UX（用(yòng)戶體驗）清單。在投入使用(yòng)之前，請務必花一些時(shí)間正确檢查您的(de)網站-第一印象。之後，您就可(kě)以準備好：發布您的(de)網站，并将其發送到在線世界！

 

七、分(fēn)析和(hé)改進

您現在是實時(shí)網站的(de)驕傲所有者。您可(kě)以現在放松一下(xià)，對(duì)嗎？好吧，不完全是。跟蹤網站的(de)性能非常重要。聽(tīng)起來(lái)像個(gè)無所事事的(de)私人(rén)教練，您必須繼續工作并不斷進步！

大(dà)多(duō)數平台都具有自己的(de)内置分(fēn)析功能，或者至少具有可(kě)以安裝的(de)應用(yòng)程序。或者，您可(kě)以将您的(de)網站連接到Google Analytics（分(fēn)析），這(zhè)樣您就可(kě)以跟蹤以下(xià)内容：

（1）您獲得(de)多(duō)少頁面浏覽量;

（2）用(yòng)戶在每個(gè)頁面上花費的(de)時(shí)間;

（2）你的(de)跳出率是多(duō)少;

（4）轉化(huà)率（用(yòng)于電子商務）;

這(zhè)些統計信息稱爲行爲指标，可(kě)幫助您了(le)解哪些網頁需要注意。它們還(hái)可(kě)以幫助您發現需要改進SEO的(de)地方。事實是，網頁設計師的(de)工作從未真正完成過。如果您隻是坐(zuò)下(xià)來(lái)欣賞您的(de)作品，其他(tā)人(rén)将會超越您。我們不建議(yì)您需要按時(shí)進行更改，但是要保持網站的(de)性能和(hé)網頁設計趨勢的(de)變化(huà)将非常有幫助。