許多人認(rèn)為，如果您想設(shè)計(jì)一個(gè)不錯(cuò)的網(wǎng)站，也就是說(shuō)，您將需要了解有關(guān)網(wǎng)頁(yè)設(shè)計(jì)的一兩件事。畢竟，這一點(diǎn)很重要，如此重要，以至于有38％的訪(fǎng)問(wèn)者在發(fā)現(xiàn)布局沒(méi)有吸引力時(shí)會(huì)離開(kāi)網(wǎng)站。您可以將網(wǎng)頁(yè)設(shè)計(jì)想像成賣(mài)汽車(chē)的東西，它可能具有最令人難以置信的引擎，但是如果底盤(pán)很丑陋，人們對(duì)購(gòu)買(mǎi)它就不會(huì)有興趣。

 

在網(wǎng)站構(gòu)建專(zhuān)家這里，我們了解設(shè)計(jì)網(wǎng)站的一兩件事。因此，為幫助您，我們整理了這份簡(jiǎn)單，易于遵循的八步指南。為了快速瀏覽，我們將介紹以下內(nèi)容：

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

1.定義您網(wǎng)站的目的和策略

2.研究最新的Web設(shè)計(jì)趨勢(shì)

3.選擇您的平臺(tái)

4.決定您的品牌

5.添加并優(yōu)化您的內(nèi)容

6.發(fā)布您的網(wǎng)站

7.分析和改進(jìn)

 

一、定義您網(wǎng)站的目的和策略

聽(tīng)起來(lái)好像很簡(jiǎn)單，但是在您急于設(shè)計(jì)網(wǎng)站之前，首先需要明確其目的。除了簡(jiǎn)單地了解您的行業(yè)并定義內(nèi)容策略之外，您還需要考慮一下USP（唯一賣(mài)點(diǎn)）是什么，以及您希望如何發(fā)展。

人們并不愚蠢。如果您只是為了賺錢(qián)或提高自己的形象而置身事外，人們就會(huì)看到它。您網(wǎng)站的設(shè)計(jì)與您的品牌直接相關(guān)，需要真實(shí)可信。您想達(dá)到什么目的？明確目標(biāo)之后，重點(diǎn)就會(huì)轉(zhuǎn)移到訪(fǎng)問(wèn)者登陸您的網(wǎng)站時(shí)希望他們采取的行動(dòng)。您的網(wǎng)站只是為了顯示信息嗎？賣(mài)產(chǎn)品？要注冊(cè)？答案最終將決定您網(wǎng)站的外觀。以電子商務(wù)為例，您的目標(biāo)網(wǎng)頁(yè)是設(shè)計(jì)的關(guān)鍵要素。

更進(jìn)一步了解，關(guān)于不同的訪(fǎng)客提供單獨(dú)的登陸頁(yè)面的重要性，以便分別定制商品和產(chǎn)品，這一過(guò)程稱(chēng)為客戶(hù)細(xì)分。專(zhuān)家的建議：“了解用戶(hù)對(duì)于任何企業(yè)的成功都是至關(guān)重要的。這意味著您可以自定義和改善您提供的體驗(yàn)，并更好地滿(mǎn)足他們的需求。這樣做對(duì)底線(xiàn)有直接影響。

“細(xì)分流量以提供更相關(guān)的體驗(yàn)是您邁向個(gè)性化用戶(hù)體驗(yàn)以及隨之而來(lái)的業(yè)務(wù)成功之路的第一步。”

 

二、研究最新的Web設(shè)計(jì)趨勢(shì)

Web設(shè)計(jì)發(fā)展迅速，但是您可以從中學(xué)習(xí)更多流行的趨勢(shì)。在這一點(diǎn)上，需要注意的是，僅因?yàn)榫W(wǎng)絡(luò)趨勢(shì)是當(dāng)前趨勢(shì)，并不意味著它一定適合您。

48％的人認(rèn)為設(shè)計(jì)是網(wǎng)站的最重要因素，因此花點(diǎn)時(shí)間看看競(jìng)爭(zhēng)對(duì)手在做什么很重要。每個(gè)行業(yè)都有不同的風(fēng)格，因此了解自己是否適合該行業(yè)或擾亂該行業(yè)至關(guān)重要。

專(zhuān)家Alex Vasili認(rèn)為您應(yīng)該始終按行業(yè)進(jìn)行研究，而不是年齡或性別。在與我們談?wù)摼W(wǎng)頁(yè)設(shè)計(jì)時(shí)。

專(zhuān)家的建議：“在色彩理論方面，有很多東西-這些色彩暗示著某些情緒，以及它們?nèi)绾问鼓a(chǎn)生某種感覺(jué)。我認(rèn)為這取決于您是要破壞還是要適應(yīng)。 

“如果您想破壞行業(yè)，那么您想要的東西與該行業(yè)所提供的完全不同。但是，如果您要適應(yīng)，則有明確的模式。

我們?cè)撊绾芜M(jìn)行谷歌seo網(wǎng)站建設(shè)？“如果您是一家科技公司，那么那里可能會(huì)有一些藍(lán)色，而如果您是一家初創(chuàng)公司，那么那里可能會(huì)有一種非常充滿(mǎn)活力的色彩。字體也一樣。您將需要一個(gè)真正干凈，簡(jiǎn)單的設(shè)計(jì)以及大量的空白。”

這表明在深入物理設(shè)計(jì)本身之前了解您的需求的重要性。我們將在“品牌”部分中重新著色，但是為了幫助您，以下是一些當(dāng)前的趨勢(shì)，這些趨勢(shì)正在風(fēng)靡互聯(lián)網(wǎng)。

微交互是當(dāng)用戶(hù)與網(wǎng)站互動(dòng)時(shí)發(fā)生的小型動(dòng)畫(huà)。例如，如果您對(duì)Facebook上的信息進(jìn)行“反應(yīng)”，則會(huì)彈出帶有相關(guān)動(dòng)畫(huà)表情符號(hào)的信息。

微交互可以為網(wǎng)站注入個(gè)性。微交互會(huì)創(chuàng)建人與人之間的接觸點(diǎn)，從而使訪(fǎng)問(wèn)者感到自己正在與您的網(wǎng)站進(jìn)行通信。微交互可以采用多種形式（單擊，懸停，滾動(dòng)等），對(duì)于建立與用戶(hù)的關(guān)系非常重要。它們可能不適合嚴(yán)肅的白領(lǐng)企業(yè)，但是大多數(shù)站點(diǎn)都可以從少量交互中受益。

如果您認(rèn)為您不會(huì)在本指南中學(xué)習(xí)體系結(jié)構(gòu)，那么我們很遺憾會(huì)誤會(huì)您。網(wǎng)頁(yè)設(shè)計(jì)的靈感來(lái)自20世紀(jì)中葉的建筑，盡管許多人認(rèn)為它很丑陋，但它確實(shí)可以工作。

 

（1）聊天機(jī)器人支持

這是對(duì)您的統(tǒng)計(jì)：企業(yè)每年在客戶(hù)服務(wù)請(qǐng)求上的支出接近1.3萬(wàn)億美元。據(jù)估計(jì)，聊天機(jī)器人可以將其減少30％。聊天機(jī)器人僅僅是頭的日子已經(jīng)一去不復(fù)返了–現(xiàn)在，它們對(duì)于面向客戶(hù)的服務(wù)變得越來(lái)越重要。

聊天機(jī)器人的主要吸引力是時(shí)間效率和成本效益。他們?nèi)旌蚬ぷ?4/7，這使您騰出時(shí)間來(lái)處理其他事務(wù)。他們還為您節(jié)省了聘請(qǐng)員工擔(dān)任客戶(hù)服務(wù)代表的費(fèi)用。當(dāng)然，聊天機(jī)器人并不是完美的，但是他們的情商和提供定制支持的能力正在逐步提高。從來(lái)沒(méi)有比現(xiàn)在更好的時(shí)間安裝它了。

 

三、選擇您的平臺(tái)

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

當(dāng)然，這里有大量的選擇-質(zhì)量參差不齊，但是我們投入了很多精力，并研究了市場(chǎng)上最好的東西。通過(guò)專(zhuān)家研究和全面測(cè)試的結(jié)合，我們現(xiàn)在可以為設(shè)計(jì)自己的網(wǎng)站提供最佳選擇

 

（1）WordPress

WordPress.org是一個(gè)自托管的開(kāi)源CMS（內(nèi)容管理系統(tǒng)），但您真正需要知道的是它是設(shè)計(jì)網(wǎng)站時(shí)最受歡迎的平臺(tái)。WordPress可以讓您完全控制網(wǎng)站的外觀，從技術(shù)上講，它是免費(fèi)的。我們之所以這樣說(shuō)是因?yàn)?，為了使您的網(wǎng)站正常運(yùn)行，您實(shí)際上需要為虛擬主機(jī)，安全性，域名以及所需的任何其他插件或主題付費(fèi)。

但是，WordPress的最大問(wèn)題是，它實(shí)際上并不適合普通的。除非您對(duì)代碼感到滿(mǎn)意–或沒(méi)有預(yù)算聘請(qǐng)專(zhuān)業(yè)開(kāi)發(fā)人員–否則WordPress幾乎無(wú)法使用。出于這個(gè)原因，我們建議正在構(gòu)建自己的網(wǎng)站的人堅(jiān)持使用網(wǎng)站構(gòu)建器和電子商務(wù)平臺(tái)。

 

（2）模板是網(wǎng)站的布局

將模板想像成您的房屋結(jié)構(gòu)，在您將其所有物品填滿(mǎn)之前，它會(huì)形成其基本外觀。大多數(shù)平臺(tái)都會(huì)為您提供一系列可供選擇的模板，這些模板已預(yù)先填充了示例內(nèi)容。模板通常分為行業(yè)類(lèi)別，因此可以非常輕松地篩選模板并查找與您相關(guān)的模板。每個(gè)類(lèi)別將具有帶有與該行業(yè)相關(guān)的內(nèi)置功能的模板，從而節(jié)省了您以后添加它們的時(shí)間和精力。

例如，如果您想要一個(gè)新咖啡店的網(wǎng)站，則可以瀏覽“ cafe”下列出的模板。其中大多數(shù)已經(jīng)在模板中內(nèi)置了聯(lián)系表單，菜單頁(yè)面和聯(lián)系方式，因?yàn)樗鼈兌寂c咖啡館網(wǎng)站的要求有關(guān)。

在開(kāi)始編輯之前，可以預(yù)覽所有模板，因此您可以清楚了解其外觀–更重要的是，它是否適合您的需求。研究表明，網(wǎng)站用戶(hù)可以通過(guò)滾動(dòng)而不是在不同頁(yè)面上滑動(dòng)來(lái)更快地找到信息。因此，如果您的網(wǎng)站只需要一些基本信息，則可能值得考慮使用一頁(yè)模板。

 

四、決定您的品牌

現(xiàn)在該開(kāi)始設(shè)計(jì)您的網(wǎng)站了！現(xiàn)在，讓我們將學(xué)到的東西付諸實(shí)踐。在設(shè)計(jì)網(wǎng)站時(shí)，您應(yīng)該考慮自己所做的一切與整體品牌的關(guān)系。從配色方案到字體樣式和圖像，一切都在講述品牌故事中發(fā)揮作用。他們都必須發(fā)送相同的消息，這一點(diǎn)很重要。

 

（1）配色方案

顏色是品牌最大的溝通工具之一。實(shí)際上，根據(jù)Color Matters所說(shuō)，標(biāo)志色可以使品牌知名度提高80％。人們對(duì)顏色的感知背后有很多心理學(xué)依據(jù)，因此了解如何將其與您的行業(yè)聯(lián)系起來(lái)很重要。為了幫助您，以下是我們匯總的信息圖，可幫助您解釋不同顏色的含義以及如何使用它們。大多數(shù)品牌都有一種主色，然后是兩種或三種第二色。藍(lán)色是最受歡迎的顏色，前100個(gè)品牌中有三分之一在徽標(biāo)中使用了藍(lán)色。

如果您希望您的網(wǎng)站保持現(xiàn)代趨勢(shì)，那么鮮艷的色彩就是您的理想之選。色彩專(zhuān)家Pantone最近將'活珊瑚'評(píng)為2019年年度色彩：

 

（2）字體樣式

與顏色類(lèi)似，您選擇的字體對(duì)人們對(duì)您的網(wǎng)站的看法有很大的影響。網(wǎng)站的普通用戶(hù)將閱讀任何給定頁(yè)面上大約20％的文字，因此以適當(dāng)?shù)姆諊脩?hù)至關(guān)重要。

自然，白領(lǐng)企業(yè)將希望使用經(jīng)典樣式的字體。諸如Arial和Helvetica之類(lèi)的字體是專(zhuān)業(yè)精神的代名詞，因此在討論嚴(yán)重問(wèn)題時(shí)有意義。但是，更有趣或更有趣的品牌可能希望探索更多抽象字體。不過(guò)，重要的是要在有趣和可讀之間取得平衡-您要做的最后一件事就是疏遠(yuǎn)讀者群。

 

視覺(jué)內(nèi)容對(duì)于增加點(diǎn)擊次數(shù)和參與度很有用，但在更基本的層次上，圖像只是牢記在心。根據(jù)一項(xiàng)研究，如果我們聽(tīng)到一條信息，我們只會(huì)記住其中的10％；但是，如果添加一張圖片，您將記住令人難以置信的65％。

就是說(shuō)，請(qǐng)注意不要使您的網(wǎng)站上出現(xiàn)過(guò)多圖像。許多高質(zhì)量的圖像可能看起來(lái)不錯(cuò)，但它們可能會(huì)使您的網(wǎng)站變慢。Web用戶(hù)不耐煩，如果您的網(wǎng)站無(wú)法快速加載，他們會(huì)用鍵盤(pán)投票。

 

五、添加并優(yōu)化您的內(nèi)容

因此，現(xiàn)在您知道要添加到網(wǎng)站中的內(nèi)容，需要考慮兩件事：定位和優(yōu)化。位置是指您的內(nèi)容在每個(gè)頁(yè)面上的位置以及布局。同時(shí)，優(yōu)化是調(diào)整內(nèi)容的過(guò)程，以幫助其在搜索引擎（例如Google或Bing）上獲得更高的排名。下面，我們將討論兩者的技術(shù)性，并解釋它們?yōu)楹稳绱酥匾?/span>

 

（1）定位

這就是為什么網(wǎng)站上的導(dǎo)航欄幾乎總是顯示在頁(yè)面頂部的原因。這是人們登陸該網(wǎng)站時(shí)首先要吸引他們的地方。記住這一點(diǎn)來(lái)安排您的內(nèi)容是一種很好的做法，以便盡可能多的人看到重要內(nèi)容。

 

（2）優(yōu)化

搜索引擎優(yōu)化（簡(jiǎn)稱(chēng)SEO）是您對(duì)網(wǎng)站進(jìn)行更改以提高登陸您網(wǎng)頁(yè)的人數(shù)或數(shù)量的時(shí)候。像這樣思考SEO：如果您擁有賽車(chē)，目標(biāo)是贏得一場(chǎng)比賽。您可以擁有外觀最奇特的汽車(chē)，但這將是與眾不同的。

當(dāng)您對(duì)引擎進(jìn)行調(diào)整，更換輪胎或減輕底盤(pán)重量時(shí)，您正在做的就是優(yōu)化您的汽車(chē)?？赡芸雌饋?lái)一樣，但是現(xiàn)在您贏得比賽的機(jī)會(huì)更大了！  SEO大致相同。您的網(wǎng)站看起來(lái)可能沒(méi)有什么不同，但是對(duì)內(nèi)容，圖像和響應(yīng)速度進(jìn)行調(diào)整可能會(huì)對(duì)它在搜索引擎結(jié)果中的排名有很大的影響。以下是設(shè)計(jì)優(yōu)化網(wǎng)站時(shí)可以做的一些最重要的事情：

 

（3）元數(shù)據(jù)

除了實(shí)際內(nèi)容之外，頁(yè)面標(biāo)題和描述（稱(chēng)為元數(shù)據(jù)）是告訴Google您網(wǎng)站的全部?jī)?nèi)容的最簡(jiǎn)單方法。元數(shù)據(jù)將顯示在搜索結(jié)果中，并允許用戶(hù)在單擊網(wǎng)頁(yè)之前先發(fā)現(xiàn)網(wǎng)頁(yè)上的內(nèi)容。

圖像通常是很大的文件。這意味著擁有大量圖像會(huì)降低您的網(wǎng)站速度，導(dǎo)致人們變得不耐煩，甚至在網(wǎng)站完全加載之前就離開(kāi)了網(wǎng)站。這就是所謂的“跳出”頁(yè)面。

加載時(shí)間為2秒或更短的網(wǎng)頁(yè)的跳出率為9％，而耗時(shí)5秒的網(wǎng)頁(yè)的跳出率為38％。 

所以你能對(duì)它做點(diǎn)啥？為什么要進(jìn)行圖像壓縮！有大量免費(fèi)的在線(xiàn)壓縮工具，它們會(huì)減少圖像中的像素?cái)?shù)量。盡管不影響圖像質(zhì)量很重要，但壓縮圖片可能會(huì)對(duì)頁(yè)面加載速度產(chǎn)生重大影響。

 

（4）圖片替代文字

除了壓縮圖像，SEO的另一個(gè)重要部分是告訴Google圖像代表什么。與文本不同，搜索引擎無(wú)法“讀取”圖像，因此，通過(guò)在圖像中添加替代文本，可以有效地幫助他們了解所描繪的內(nèi)容。

Alt文本不會(huì)直接顯示在您的網(wǎng)站上-而是在您編輯時(shí)添加的-因此您不必?fù)?dān)心將其作為您最有啟發(fā)性的作品（只要它代表圖像即可）。

 

（5）移動(dòng)響應(yīng)度

這是一個(gè)很大的。在2018年，所有互聯(lián)網(wǎng)瀏覽中有58％是在移動(dòng)設(shè)備上進(jìn)行的。這就是Google偏愛(ài)在手機(jī)上正確設(shè)置格式的網(wǎng)站的原因。如果您沒(méi)有，那您??將遇到嚴(yán)重的問(wèn)題。

如今，大多數(shù)模板都是響應(yīng)移動(dòng)設(shè)備的，并且會(huì)自動(dòng)重新格式化您的內(nèi)容以適合各種屏幕尺寸。但是，值得考慮的是，是否要讓任何內(nèi)容看起來(lái)與移動(dòng)用戶(hù)不同。

釘住它可以改善用戶(hù)體驗(yàn)，并為您贏得一些嚴(yán)重的SEO積分。

 

（6）內(nèi)部連結(jié)

通過(guò)內(nèi)部鏈接，您可以通過(guò)超鏈接將用戶(hù)定向到您網(wǎng)站上的另一個(gè)網(wǎng)頁(yè)。通常，當(dāng)您提及具有相關(guān)內(nèi)容的內(nèi)容時(shí)，便可以完成此操作。這告訴Google和co。您是該主題的權(quán)威，因?yàn)槟鷮?duì)此有多篇文章。

“ EAT”代表專(zhuān)業(yè)性，權(quán)威性和可信賴(lài)性。通過(guò)深入撰寫(xiě)有關(guān)主題并在內(nèi)部鏈接到與此主題相關(guān)的更多內(nèi)容，您將向搜索引擎顯示您確實(shí)了解自己的知識(shí)，這反過(guò)來(lái)又可以幫助您獲得較高的排名。

 

六、發(fā)布您的網(wǎng)站

現(xiàn)在，讓我們快速回顧一下您現(xiàn)在應(yīng)該做的事情：

（1）確定您網(wǎng)站的目的;

（2）研究了最新的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)并進(jìn)行了競(jìng)爭(zhēng)對(duì)手分析;

（3）立足于平臺(tái)和主題，以建立您的網(wǎng)站;

（4）確定您的品牌（配色方案，字體樣式等）;

（5）創(chuàng)建您的網(wǎng)站并優(yōu)化其內(nèi)容;

現(xiàn)在，是時(shí)候檢查所有工作原理，然后再上線(xiàn)了！要求您的家人，朋友和同事在預(yù)覽模式下測(cè)試該網(wǎng)站（所有網(wǎng)站建設(shè)者和電子商務(wù)平臺(tái)都將擁有此功能），看他們是否發(fā)現(xiàn)任何錯(cuò)誤。您甚至還可以讓公眾也進(jìn)行測(cè)試，并發(fā)表自己的想法。

您要檢查的一些常見(jiàn)事項(xiàng)是：

（1）您的所有鏈接均正常運(yùn)行，它們將用戶(hù)定向到正確的頁(yè)面;

（2）您的所有內(nèi)容可讀且易于查找;

（3）您與首頁(yè)之間的點(diǎn)擊次數(shù)不會(huì)超過(guò)3次;

（4）您的網(wǎng)站在臺(tái)式機(jī)，移動(dòng)設(shè)備和平板電腦上看起來(lái)都很棒;

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

有關(guān)更多詳細(xì)信息，您可以在線(xiàn)找到大量的UX（用戶(hù)體驗(yàn)）清單。在投入使用之前，請(qǐng)務(wù)必花一些時(shí)間正確檢查您的網(wǎng)站-第一印象。之后，您就可以準(zhǔn)備好：發(fā)布您的網(wǎng)站，并將其發(fā)送到在線(xiàn)世界！

 

七、分析和改進(jìn)

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

大多數(shù)平臺(tái)都具有自己的內(nèi)置分析功能，或者至少具有可以安裝的應(yīng)用程序?；蛘撸梢詫⒛木W(wǎng)站連接到Google Analytics（分析），這樣您就可以跟蹤以下內(nèi)容：

（1）您獲得多少頁(yè)面瀏覽量;

（2）用戶(hù)在每個(gè)頁(yè)面上花費(fèi)的時(shí)間;

（2）你的跳出率是多少;

（4）轉(zhuǎn)化率（用于電子商務(wù)）;

這些統(tǒng)計(jì)信息稱(chēng)為行為指標(biāo)，可幫助您了解哪些網(wǎng)頁(yè)需要注意。它們還可以幫助您發(fā)現(xiàn)需要改進(jìn)SEO的地方。事實(shí)是，網(wǎng)頁(yè)設(shè)計(jì)師的工作從未真正完成過(guò)。如果您只是坐下來(lái)欣賞您的作品，其他人將會(huì)超越您。我們不建議您需要按時(shí)進(jìn)行更改，但是要保持網(wǎng)站的性能和網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)的變化將非常有幫助。