建設(shè)一個(gè)網(wǎng)站很不容易，時(shí)間、人力、經(jīng)濟(jì)上都會(huì)投入很多成本，但隨著時(shí)間的推移，企業(yè)網(wǎng)站勢(shì)必會(huì)涉及到網(wǎng)站改版的問題，如何重新設(shè)計(jì)一個(gè)網(wǎng)站，什么時(shí)候網(wǎng)站需要重新設(shè)計(jì)，實(shí)際上網(wǎng)站頁面設(shè)計(jì)這幾個(gè)情況下，網(wǎng)站改版就要著手進(jìn)行了。如果出現(xiàn)以下問題，企業(yè)網(wǎng)站是一定需要考慮重新設(shè)計(jì)了：

1、網(wǎng)站跳出率偏高

網(wǎng)站跳出率是指訪問者到達(dá)您的網(wǎng)站某一個(gè)頁面后沒有進(jìn)一步訪問其他頁面就離開了您的網(wǎng)站，這個(gè)跳出率可以通過GoogleAnalytics(分析)或者百度分析查看。雖然按照行業(yè)及網(wǎng)站類型不同，跳出率會(huì)有所不同，但平均值大約在40%到55%左右，從另一個(gè)角度說100個(gè)網(wǎng)站里，有大約55個(gè)網(wǎng)站只被訪問了一個(gè)頁面。

2、網(wǎng)頁加載時(shí)間超過3秒

如果時(shí)間超過三秒，則應(yīng)尋找技術(shù)人員重點(diǎn)解決或者考慮重建您的網(wǎng)站。一項(xiàng)研究發(fā)現(xiàn)：將近一半的訪問者放棄了三秒鐘(或更少的時(shí)間)無法加載完成的網(wǎng)站;而另一項(xiàng)研究指出：網(wǎng)站加載時(shí)間每增加一秒鐘，轉(zhuǎn)化次數(shù)會(huì)減少7%。

3、網(wǎng)站頁面缺少基本的SEO元素

網(wǎng)站要在Googl、百度、Bing和其他搜索引擎上有良好的曝光度，則必須執(zhí)行頁面搜索引擎優(yōu)化(SEO)。例如：每個(gè)頁面都應(yīng)該有一個(gè)唯一的標(biāo)題標(biāo)簽來描述頁面的主要內(nèi)容。標(biāo)題標(biāo)簽是一個(gè)HTML元素，在打開頁面時(shí)會(huì)顯示在瀏覽器選項(xiàng)卡中，搜索引擎將使用該標(biāo)簽創(chuàng)建搜索結(jié)果列表，該標(biāo)簽內(nèi)容會(huì)顯示在搜索結(jié)果中。現(xiàn)在有統(tǒng)計(jì)數(shù)據(jù)顯示：訪問網(wǎng)站的所有互聯(lián)網(wǎng)用戶中有五分之三是通過移動(dòng)設(shè)備訪問的。但是，如果您的網(wǎng)站無法在移動(dòng)設(shè)備上正常運(yùn)行，則這些用戶可能會(huì)放棄該網(wǎng)站。您可以使用自適應(yīng)設(shè)計(jì)來更新您的網(wǎng)站，以使其在移動(dòng)設(shè)備上兼容。響應(yīng)式設(shè)計(jì)使用比例單位實(shí)現(xiàn)動(dòng)態(tài)布局，它能夠自動(dòng)適應(yīng)所有瀏覽設(shè)備提升訪問體驗(yàn)。

4、導(dǎo)航比較復(fù)雜

從搜索排名和跳出率到網(wǎng)站轉(zhuǎn)化和用戶滿意度，導(dǎo)航幾乎可以影響網(wǎng)站性能的每個(gè)方面。用戶首次訪問您的網(wǎng)站時(shí)，應(yīng)該能夠輕松找到特定內(nèi)容。如果導(dǎo)航復(fù)雜或令人困惑，訪問者不會(huì)停留很長時(shí)間，也不會(huì)參與到您的業(yè)務(wù)中來。將自己置身于網(wǎng)站的典型訪問者模式中，通過單擊導(dǎo)航鏈接嘗試查找特定的內(nèi)容。如果在桌面端三次點(diǎn)擊以內(nèi)無法找到內(nèi)容或在移動(dòng)設(shè)備上無法輕松找到內(nèi)容，這需要更新網(wǎng)站以曾現(xiàn)更為簡(jiǎn)潔易于學(xué)習(xí)的導(dǎo)航結(jié)構(gòu)。

5、與品牌形象不匹配

如果網(wǎng)站與您的品牌形象不匹配，則需要對(duì)其進(jìn)行重新設(shè)計(jì)。從徽標(biāo)到標(biāo)題的字體以至文章的格式，網(wǎng)站上的每個(gè)元素都必須反映您企業(yè)的品牌形象。否則，訪問者很難記住您的業(yè)務(wù)內(nèi)容及提供的服務(wù)。以品牌為中心對(duì)網(wǎng)站進(jìn)行全面改造比較耗時(shí)，但這對(duì)于為企業(yè)創(chuàng)建獨(dú)特的身份至關(guān)重要。當(dāng)人們?cè)L問網(wǎng)站時(shí)，會(huì)看到品牌元素，這些元素將與您的業(yè)務(wù)下意識(shí)地關(guān)聯(lián)起來。

6、網(wǎng)站包含死鏈接

無效鏈接也稱為斷開的鏈接，對(duì)網(wǎng)站的用戶體驗(yàn)有害。它們看起來像普通的鏈接，但是正如它們的名稱所暗示的那樣，它們?cè)趩螕魰r(shí)不會(huì)將訪問者引導(dǎo)到預(yù)期的頁面。相反，無效鏈接會(huì)將訪問者引導(dǎo)至404錯(cuò)誤頁面，這通常會(huì)導(dǎo)致人們失望地離開站點(diǎn)。

7、無效的CTA

請(qǐng)注意點(diǎn)擊網(wǎng)站CTA用戶所占的百分比，這被稱為點(diǎn)擊率(CTR)，反映了網(wǎng)站的CTA是否能夠吸引訪問者的注意力，并使他們點(diǎn)擊鏈接的文本或圖像。如果網(wǎng)站CTA點(diǎn)擊率很低(大多數(shù)網(wǎng)站低于3%)，請(qǐng)嘗試重新設(shè)計(jì)CTA。更改CTA的位置，形狀，顏色，文本都會(huì)影響它的性能。

8、較多的安全問題

如果常常需要解決網(wǎng)站的技術(shù)問題而不是考慮如何優(yōu)化網(wǎng)站，那么就需要研究新的服務(wù)器托管方案、或者是選用新的內(nèi)容管理系統(tǒng)，甚至重新設(shè)計(jì)網(wǎng)站的功能和框架。沒有什么比網(wǎng)站持續(xù)穩(wěn)定的工作更能夠幫助你專注于發(fā)展企業(yè)的業(yè)務(wù)。在設(shè)計(jì)之初考慮一定的伸縮性也很有必要，為將來業(yè)務(wù)的發(fā)展留下網(wǎng)站擴(kuò)展空間。另外缺少SSL安全證書是一個(gè)非常嚴(yán)重的問題，需要聯(lián)系建設(shè)商盡快為網(wǎng)站安裝。如果不能安裝，需要考慮重新設(shè)計(jì)網(wǎng)站。

布局方式，本質(zhì)上就是去處理窗口寬度與網(wǎng)頁內(nèi)容的關(guān)系。用戶會(huì)使用瀏覽器打開不同尺寸的窗口寬度，而網(wǎng)頁內(nèi)容究竟應(yīng)該如何去適應(yīng)這些窗口尺寸？網(wǎng)頁布局通常會(huì)分為：固定布局、流式布局、自適應(yīng)布局、響應(yīng)式布局。

1.固定布局

固定布局是一種最為簡(jiǎn)單的方式，它的設(shè)計(jì)邏輯是將頁面當(dāng)中的內(nèi)容“寫死固定”在屏幕上，內(nèi)容不會(huì)隨著本身窗口寬度進(jìn)行改變，所有元素都使用px作為基礎(chǔ)單位。當(dāng)然在固定布局當(dāng)中，窗口大小與頁面內(nèi)容會(huì)存在兩種基本關(guān)系：窗口過大則將頁面元素進(jìn)行居中，窗口過小則展示橫向滾動(dòng)條。固定布局的好處是這種方式相對(duì)簡(jiǎn)單，只需將頁面設(shè)計(jì)好即可，不會(huì)存在太多兼容性的問題，固定布局通常出現(xiàn)在老舊的政府項(xiàng)目、網(wǎng)頁的登錄注冊(cè)中。

2.流式布局

流式布局是最基礎(chǔ)的變化布局，它的設(shè)計(jì)邏輯是將頁面當(dāng)中的元素設(shè)計(jì)成可以流動(dòng)的“水”，通過在頁面，設(shè)計(jì)不同的“杯子”容器來裝下頁面內(nèi)容，這里的“水”一般指的是文字、圖標(biāo)、以及一些頁面重復(fù)出現(xiàn)的元素。而杯子通常是我們?cè)O(shè)計(jì)的容器，它高度固定，只會(huì)變化其寬度，比如卡片、外層容器控制寬度等等。因?yàn)椤氨印钡南拗疲簿蛯?dǎo)致水會(huì)根據(jù)杯子的寬度進(jìn)行延展流動(dòng)，進(jìn)而形成流式布局。使用流式布局可以通過較低的開發(fā)成本，來實(shí)現(xiàn)一個(gè)頁面當(dāng)中多尺寸的小范圍適配，如果屏幕尺寸跨度較大，則會(huì)比較困難，而流式布局最常使用的方式就是通過柵格系統(tǒng)，來確定整個(gè)“杯子”的寬度，進(jìn)而讓“水”能夠在頁面當(dāng)中實(shí)時(shí)滾動(dòng)展示，這里有兩個(gè)需要注意的點(diǎn)：

在研發(fā)層面，杯子的大小是需要進(jìn)行限制的，通常會(huì)去設(shè)定它的最大值與最小值，當(dāng)它超過最大值則居中對(duì)齊，當(dāng)他在流式布局當(dāng)中，窗口超過其最大值則固定左側(cè)，右側(cè)空白補(bǔ)充；窗口小于其最小值則展示橫向滾動(dòng)條。

流動(dòng)的“水”需要去考慮它漫出的情況，即在“水杯”高度固定的情況下，整個(gè)寬度無法裝下如此多“水”的情況，通常我們可以使用“…”進(jìn)行標(biāo)注。這個(gè)思路后續(xù)在響應(yīng)式布局當(dāng)中也會(huì)體現(xiàn)。

3.自適應(yīng)布局

自適應(yīng)布局是將差別較大的屏幕尺寸，去創(chuàng)建多個(gè)不同的設(shè)計(jì)稿，每一個(gè)設(shè)計(jì)稿去對(duì)應(yīng)一個(gè)用戶實(shí)際的尺寸范圍。改變屏幕分辨率就可以去切換不同的設(shè)計(jì)方案。通俗一點(diǎn)來說，自適應(yīng)就是去單獨(dú)設(shè)計(jì)桌面端、平板端、移動(dòng)端的頁面，并且將它們?nèi)哌M(jìn)行獨(dú)立，而系統(tǒng)通過不同尺寸間的屏幕斷點(diǎn)/瀏覽器UA等進(jìn)而適應(yīng)出不同的設(shè)計(jì)頁面。

自適應(yīng)主要是表達(dá)多個(gè)設(shè)備尺寸下進(jìn)行切換的布局方式，在不同的設(shè)備之間，也是需要去使用流式布局以及其他布局方式，而不同的設(shè)備之間，屏幕分辨率的差異就會(huì)涉及到一個(gè)關(guān)鍵點(diǎn)，屏幕斷點(diǎn)。

屏幕斷點(diǎn)，屏幕斷點(diǎn)，又叫媒體查詢@media，因?yàn)樵谡麄€(gè)設(shè)計(jì)當(dāng)中，屏幕尺寸是極其復(fù)雜的，除了我們常見的尺寸：1920、1080、1440、1366，用戶還可以通過調(diào)整窗口的大小，進(jìn)而改變網(wǎng)頁尺寸。而屏幕斷點(diǎn)，最主要是判斷屏幕的寬度，來確定目前的尺寸究竟應(yīng)該采取什么設(shè)計(jì)方案。關(guān)于屏幕斷點(diǎn)的媒體查詢，是在前端CSS3代碼當(dāng)中，提供給用戶校驗(yàn)整個(gè)屏幕的寬度。而確定斷點(diǎn)才是這其核心，這里給大家提供兩個(gè)思路，實(shí)際設(shè)計(jì)當(dāng)中還會(huì)更為復(fù)雜：

物理斷點(diǎn)：也就是屏幕當(dāng)中，已經(jīng)劃分好的斷點(diǎn)方式，比如顯示器的全寬大小、不同設(shè)備之間的屏幕分辨率差異，

設(shè)計(jì)斷點(diǎn)：在設(shè)計(jì)過程當(dāng)中，一些必要的屏幕尺寸。比如上方講到不同平臺(tái)的設(shè)計(jì)問題。

其實(shí)屏幕斷點(diǎn)不是最終目的，最終還是想通過屏幕斷點(diǎn)，將頁面當(dāng)中不同的不同元素的處理方式實(shí)現(xiàn)在設(shè)計(jì)稿中，如果不需要，完全可以不考慮增加屏幕斷點(diǎn)。

4.響應(yīng)式布局

響應(yīng)式布局是確保一個(gè)頁面當(dāng)中所有的設(shè)備（桌面端、平板端、移動(dòng)端）都能夠展示出非常滿意的效果，進(jìn)行產(chǎn)生的一種技術(shù)方案。它更像是流式布局與自適應(yīng)布局的結(jié)合，它能夠通過對(duì)屏幕尺寸的快速響應(yīng)，進(jìn)而對(duì)頁面的內(nèi)容進(jìn)行更為細(xì)致的變化。通俗一點(diǎn)來說就是通過一套代碼去實(shí)現(xiàn)多個(gè)頁面，并且將多個(gè)頁面的內(nèi)容進(jìn)行細(xì)化，進(jìn)而能夠快速適配多個(gè)設(shè)備。