整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          單頁(yè)網(wǎng)站設(shè)計(jì)指南

          頁(yè)設(shè)計(jì),是一項(xiàng)處理小型網(wǎng)站的絕佳技巧,甚至有些網(wǎng)站你可能認(rèn)為一張頁(yè)面搞不定,也同樣適用。從易于維護(hù),到減少帶寬占用,使用單頁(yè)網(wǎng)站的好處不勝枚舉。

          假如你應(yīng)對(duì)的是個(gè)小型網(wǎng)站,通常只有幾個(gè)頁(yè)面的那種,可以考慮使用單頁(yè)設(shè)計(jì),看看它是否能簡(jiǎn)化項(xiàng)目,對(duì)用戶(hù)更加友好。繼續(xù)閱讀,你將了解它的益處,何時(shí)使用(或不該使用),還有一些你該遵循的絕佳慣例。

          單頁(yè)設(shè)計(jì)的益處

          很顯然,單頁(yè)設(shè)計(jì)并非所有項(xiàng)目的理想選擇。但假如可能的話(huà),有一大堆理由使用它。

          直觀易用

          默認(rèn)情況下,用戶(hù)要瀏覽單頁(yè)網(wǎng)站,只要知道如何滾動(dòng)就行。你也可以加入箭頭或其他瀏覽暗示,但除了少數(shù)例外,其實(shí)滾動(dòng)就足以讓用戶(hù)在各部分間穿行。

          完全不用擔(dān)心用戶(hù)身陷多層導(dǎo)航中,無(wú)休止地尋找他們所要的東西。如果頁(yè)面上有多個(gè)部分,頁(yè)頭或其他導(dǎo)航鏈接通常很有幫助,不過(guò)即使沒(méi)有它們,網(wǎng)站仍然是可用的。

          維護(hù)起來(lái)更快速、更簡(jiǎn)單

          這點(diǎn)并非既成事實(shí),編碼良好的單頁(yè)網(wǎng)站,或許編寫(xiě)起來(lái)比多頁(yè)網(wǎng)站更快。設(shè)計(jì)過(guò)程有時(shí)可以花更少的時(shí)間,盡管這取決于單頁(yè)網(wǎng)站的復(fù)雜程度。

          一旦你腦海中有基本的布局,單頁(yè)網(wǎng)站還能利用某些特定的設(shè)計(jì)約束來(lái)加快進(jìn)程。尤其較之于多頁(yè)網(wǎng)站而言,單頁(yè)網(wǎng)站各個(gè)部分要保持無(wú)縫銜接。如果你已經(jīng)明確哪些能做哪些不能,這類(lèi)約束的確能加速頁(yè)面開(kāi)發(fā)。

          維護(hù)也更簡(jiǎn)單。當(dāng)你只需要處理一個(gè)頁(yè)面,維護(hù)工作就大大簡(jiǎn)化了,只要網(wǎng)站本身編碼良好。

          它迫使你進(jìn)行簡(jiǎn)化

          這條構(gòu)筑了上面一點(diǎn)。當(dāng)你只有一個(gè)頁(yè)面要處理,你不得不把一切簡(jiǎn)化為它們最基本的形態(tài)。不再需要一頁(yè)頁(yè)毫無(wú)用處的市場(chǎng)宣傳。你必須直截了當(dāng)、開(kāi)門(mén)見(jiàn)山。

          更具SEO潛力

          高質(zhì)量的站內(nèi)鏈接,是網(wǎng)站在搜索引擎中的表現(xiàn)的重要組成部分。盡管搜索引擎并不是很多網(wǎng)站必須的最大流量源,它們?nèi)匀恢匾?/p>

          單頁(yè)網(wǎng)站的鏈接總是指向自己。搜索引擎抓取時(shí),這可以增加網(wǎng)站的權(quán)重。

          敘事的手法促使用戶(hù)有所行動(dòng)

          單頁(yè)網(wǎng)站往往從敘事角度出發(fā),這點(diǎn)多頁(yè)網(wǎng)站可不擅長(zhǎng)。這可以促進(jìn)轉(zhuǎn)換,激發(fā)用戶(hù)采取行動(dòng)。

          人們習(xí)慣于聆聽(tīng)故事,不論在線(xiàn)上還是線(xiàn)下,所以這點(diǎn)有著顯而易見(jiàn)的用戶(hù)體驗(yàn)優(yōu)勢(shì)。我們兒時(shí)就開(kāi)始閱讀和聽(tīng)故事,于我們而言,這是自然而然的事情。

          易于組織

          再也不需要組織一列列數(shù)不清的頁(yè)面和子頁(yè)面了。無(wú)需多慮每個(gè)頁(yè)面是父級(jí)還是子級(jí)。也沒(méi)有龐雜的導(dǎo)航菜單和子菜單。所有都在一頁(yè)上。是要包含導(dǎo)航鏈接,還是讓用戶(hù)滾動(dòng),這取決于你,就看是否有助于提升用戶(hù)體驗(yàn)。網(wǎng)站如果有多個(gè)頁(yè)面,是絕對(duì)不會(huì)這么考慮的。

          減少帶寬占用

          盡管不像從前,對(duì)服務(wù)器而言已經(jīng)不成問(wèn)題,不過(guò)想想近年來(lái)有多少用戶(hù)通過(guò)移動(dòng)設(shè)備訪問(wèn)你的網(wǎng)站。減少網(wǎng)站的帶寬占用,會(huì)贏得流量有限的用戶(hù)的感激。

          消滅了移動(dòng)版網(wǎng)站

          當(dāng)然,響應(yīng)式設(shè)計(jì)不只限于單頁(yè)網(wǎng)站。但即使采用了響應(yīng)式設(shè)計(jì),網(wǎng)站越復(fù)雜,讓它適應(yīng)小屏幕還是愈發(fā)困難。單頁(yè)網(wǎng)站并不復(fù)雜,這是必然的。運(yùn)用響應(yīng)式設(shè)計(jì)總體來(lái)說(shuō)更容易。簡(jiǎn)化導(dǎo)航和類(lèi)似改變,也更容易成就適用于小屏幕的設(shè)計(jì)。

          要不要用視覺(jué)差滾動(dòng)?

          視覺(jué)差滾動(dòng)可能是互聯(lián)網(wǎng)中發(fā)生過(guò)的最美妙的事情,也可能是個(gè)被濫用的噱頭,來(lái)蹂躪我們?yōu)g覽器,這取決于你怎么看。無(wú)論你站在哪一方,它似乎近期并不會(huì)消失。

          就我而言,我希望有時(shí)間和地方來(lái)實(shí)現(xiàn)視覺(jué)差滾動(dòng)。這個(gè)效果對(duì)于某些單頁(yè)網(wǎng)站大有裨益,而對(duì)于另一些則是噱頭,甚至更糟:難以使用。關(guān)鍵是要明確一點(diǎn),你使用視覺(jué)差滾動(dòng)真的能提升網(wǎng)站的易用性嗎,還是因?yàn)槟阌X(jué)得它看起來(lái)很酷?

          如果要使用視覺(jué)差滾動(dòng),還要考慮一件事,使用Javascript還是純CSS技術(shù)來(lái)實(shí)現(xiàn)。關(guān)于這兩個(gè)選擇,請(qǐng)參見(jiàn)資源部分了解更多信息。

          何時(shí)使用單頁(yè)網(wǎng)站,何時(shí)不用

          雖然有單頁(yè)網(wǎng)站大有益處,但它們也不是完美的全尺寸適配方案。雖然很多時(shí)候單頁(yè)網(wǎng)站比多頁(yè)網(wǎng)站更合理,但也有很多時(shí)候不應(yīng)該使用單頁(yè)設(shè)計(jì)。

          總之,假如你的網(wǎng)站只有少數(shù)頁(yè)面,單頁(yè)網(wǎng)站或許是最佳選擇。將一切濃縮在一個(gè)頁(yè)面上,能讓網(wǎng)站整體具有更現(xiàn)代的外觀,如果內(nèi)容精簡(jiǎn),那么單頁(yè)網(wǎng)站可以讓它看起來(lái)更豐富。

          單頁(yè)網(wǎng)站的另一個(gè)普遍案例,就是發(fā)布預(yù)告頁(yè)面。它們通常是單頁(yè)網(wǎng)站,帶有新聞郵件的注冊(cè)表單。多數(shù)情況下,發(fā)布預(yù)告期間面向大眾的信息很容易組織在一個(gè)頁(yè)面上,所以,設(shè)計(jì)這些頁(yè)面時(shí)優(yōu)先考慮這種風(fēng)格是很合理的。

          產(chǎn)品單一的電商網(wǎng)站,也是單頁(yè)網(wǎng)站表現(xiàn)優(yōu)秀的領(lǐng)域。如果你只賣(mài)一種產(chǎn)品,無(wú)論它是實(shí)體或是虛擬的,何必勞煩使用多個(gè)頁(yè)面呢?一個(gè)簡(jiǎn)單的單頁(yè)網(wǎng)站才是更好的銷(xiāo)售工具。

          可能你覺(jué)得更復(fù)雜的電商網(wǎng)站不適合用單頁(yè)網(wǎng)站,但它仍然可行。當(dāng)然,有十多種產(chǎn)品的網(wǎng)站中我會(huì)避免使用,不過(guò)單張頁(yè)面也足以輕易支撐一個(gè)簡(jiǎn)單的在線(xiàn)商店,通過(guò)彈出窗口來(lái)承載產(chǎn)品詳情和支付流程。

          不該使用單頁(yè)網(wǎng)站的情況十分明確:龐大、復(fù)雜,或必須保有海量信息的網(wǎng)站不適合做成單頁(yè)網(wǎng)站。在這些情況下,使用相對(duì)傳統(tǒng)的網(wǎng)站結(jié)構(gòu)更加明智。

          混合型網(wǎng)站

          雖然有大量的單頁(yè)網(wǎng)站存在,但也有很多混合型網(wǎng)站。它們給人印象是個(gè)單頁(yè)網(wǎng)站,但通過(guò)ajax、彈出窗和類(lèi)似技術(shù),它們事實(shí)上包含了多頁(yè)內(nèi)容。

          網(wǎng)站Dang & Blast就是這方面的絕佳案例。

          如果無(wú)法讓所有東西徹底融入單個(gè)頁(yè)面,這會(huì)是和很好的解決方案。

          說(shuō)到單頁(yè)網(wǎng)站,某些站點(diǎn)用了某種“取巧”的辦法。它們的主站是個(gè)單頁(yè)網(wǎng)站,但在其他域名下也有個(gè)博客(有時(shí)是Tumblr或托管在WordPress.com的網(wǎng)站)。這么做沒(méi)有問(wèn)題,它能突出主站的信息,也不用舍棄博客帶來(lái)的好處。

          單頁(yè)網(wǎng)站的絕佳慣例

          優(yōu)秀設(shè)計(jì)的多數(shù)準(zhǔn)則,在單頁(yè)網(wǎng)站中仍然適用,其實(shí)也適用于任何網(wǎng)站設(shè)計(jì)。還有一些額外的東西需要牢記,其中有些之前已經(jīng)提到了。

          保持簡(jiǎn)單

          設(shè)計(jì)如果對(duì)于你試圖表現(xiàn)的內(nèi)容而言過(guò)于復(fù)雜,對(duì)你和你的用戶(hù)都沒(méi)有任何好處。相反,要盡可能簡(jiǎn)化設(shè)計(jì)和內(nèi)容,還能表達(dá)出你要的信息。

          導(dǎo)航鏈接還是有幫助的

          正因?yàn)橛脩?hù)可以通過(guò)滾動(dòng)來(lái)瀏覽你的網(wǎng)站,但并不意味著這是最友好的方式。如果你的網(wǎng)站很長(zhǎng),有很多部分,這點(diǎn)尤其正確。除非有特別好的理由,還是應(yīng)該加入直達(dá)特定部分的鏈接,來(lái)使你的網(wǎng)站更加友好。

          分割內(nèi)容

          單個(gè)頁(yè)面不代表一整個(gè)冗長(zhǎng)部分。實(shí)際上也不該如此。將內(nèi)容根據(jù)邏輯劃分為幾大塊,用戶(hù)才能更容易找到他們所需。

          讓所有的背景都有所作為

          單頁(yè)網(wǎng)站常常有大幅背景。當(dāng)然,有時(shí)候這些背景很樸素,或帶有平鋪紋理;不過(guò)也有單頁(yè)網(wǎng)站利用所有的空間來(lái)?yè)]灑創(chuàng)意。前面提到了,這也有助于劃分內(nèi)容。背景未必要是單一的圖片。可以是一系列圖片,如果這樣做與內(nèi)容更相符的話(huà)。

          單頁(yè)網(wǎng)站的資源

          單頁(yè)網(wǎng)站的資源成百上千,還包括模版;我們這里重點(diǎn)關(guān)注表現(xiàn)突出的幾個(gè)。

          PureCSSParallax Scrolling:Keith Clark的這篇文章闡釋了如何通過(guò)純CSS打造視覺(jué)差滾動(dòng)效果。如果你不想用JavaScript(或者不懂)的話(huà),這是個(gè)很好的選擇。

          Skrollr:“為剩下的人準(zhǔn)備的視覺(jué)差滾動(dòng)”。這是個(gè)獨(dú)一無(wú)二的庫(kù),適用于移動(dòng)端和桌面。不需要jQuery,只有原生JavaScript。

          Stellar.js:Stellar.js是另一個(gè)簡(jiǎn)單易用的視覺(jué)差滾動(dòng)庫(kù)。它提供了很多設(shè)置選項(xiàng)和iOS支持。

          One Page Website Wireframes:如果你不確定如何構(gòu)建你的網(wǎng)站,這個(gè)單頁(yè)網(wǎng)站線(xiàn)框圖集是很好的出發(fā)點(diǎn)。免費(fèi)下載。這里還有第二集可供下載。

          One Page Love:One Page Love是首屈一指的單頁(yè)網(wǎng)站集合,里面有超過(guò)5000個(gè)網(wǎng)站案例,并且一直在更新。他們還主打大量模版和其他資源。

          Start Bootstrap:Start Bootstrap集成了海量的免費(fèi)單頁(yè)網(wǎng)站Bootstrap主題。主題適合機(jī)構(gòu)、自由職業(yè)者、作品集、著陸頁(yè)等等。

          One Page Love Templates:除了豐富的網(wǎng)站集合,One Page Love也提供免費(fèi)和收費(fèi)的模版。

          One Page Mania:One Page Mania提供獨(dú)特的網(wǎng)站和模版集合,供你下載或購(gòu)買(mǎi)。

          結(jié)論

          對(duì)各種網(wǎng)站來(lái)說(shuō),單頁(yè)設(shè)計(jì)都是非常棒的選擇。盡管它們不是小型網(wǎng)站的唯一設(shè)計(jì)方案,對(duì)很多項(xiàng)目而言它都是值得考慮的。思考使用單頁(yè)設(shè)計(jì)的理由,然后也思考不用的理由,再做決定。

          譯者:可樂(lè)橙;譯文地址:http://colachan.com/post/3418

          可樂(lè)橙,微信公眾號(hào):可樂(lè)橙(colachangreen)。UI/UX設(shè)計(jì)師,關(guān)注互聯(lián)網(wǎng),關(guān)注科技。現(xiàn)居杭州,與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設(shè)計(jì)師,至少是個(gè)快樂(lè)的設(shè)計(jì)師。



          大家好,今天給大家?guī)?lái)一套比較不錯(cuò)的單頁(yè)制作課程。


          本套課程作者在9年多時(shí)間里,一直專(zhuān)注于單頁(yè)網(wǎng)站制作、優(yōu)化、推廣和單頁(yè)營(yíng)銷(xiāo)方面的研究,并帶領(lǐng)一批學(xué)員通過(guò)單頁(yè)網(wǎng)站銷(xiāo)售產(chǎn)品,實(shí)現(xiàn)網(wǎng)上成功創(chuàng)業(yè)!


          什么是手機(jī)版單頁(yè)網(wǎng)站


          手機(jī)版單頁(yè)網(wǎng)站,是用Html5代碼編寫(xiě)的純靜態(tài)獨(dú)立頁(yè)面網(wǎng)站,自動(dòng)適應(yīng)手機(jī)、臺(tái)式電腦、平板電腦的用戶(hù)屏幕觀看,完美展現(xiàn)產(chǎn)品和項(xiàng)目?jī)?nèi)容,用戶(hù)體驗(yàn)好。


          在單頁(yè)網(wǎng)站里面,可以添加文字、圖片、視頻、動(dòng)畫(huà)、客服系統(tǒng)、訂單系統(tǒng)、分享系統(tǒng)、流量統(tǒng)計(jì)系統(tǒng)等等功能,使單頁(yè)網(wǎng)站功能強(qiáng)大、內(nèi)容豐富多彩!


          本套“單頁(yè)網(wǎng)站制作教程”,是由作者根據(jù)多年的實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié),原創(chuàng)開(kāi)發(fā)錄制而成,教程系統(tǒng)全面、簡(jiǎn)單易學(xué)、上手快速,即使是0基礎(chǔ)的新手朋友,也能快速學(xué)會(huì)。


          手機(jī)版單頁(yè)網(wǎng)站能做什么


          1.產(chǎn)品展示

          單頁(yè)網(wǎng)站是一個(gè)獨(dú)立的頁(yè)面,不存在分散目標(biāo)客戶(hù)注意力的信息。頁(yè)面簡(jiǎn)單直接,從頭至尾展示產(chǎn)品信息。讓目標(biāo)客戶(hù)最直觀的的全方位了解你的產(chǎn)品,達(dá)到快速成交的目的。


          2.服務(wù)展示

          如果你有一技之長(zhǎng),想通過(guò)提供自己的技術(shù)服務(wù)來(lái)賺錢(qián),只需要制作一個(gè)單頁(yè)面,把自己當(dāng)特長(zhǎng)展示出來(lái),留下聯(lián)系方式,做好網(wǎng)站推廣,就有客戶(hù)主動(dòng)找上門(mén)。


          3.競(jìng)價(jià)推廣

          用競(jìng)價(jià)推廣是當(dāng)前大流量入口之一。競(jìng)價(jià)推廣排名快,效果好,利潤(rùn)高。而競(jìng)價(jià)推廣的落地頁(yè),全部用的自適應(yīng)競(jìng)價(jià)單頁(yè)面,自動(dòng)適應(yīng)手機(jī)和電腦用戶(hù)屏幕,完美展示產(chǎn)品信息,


          4.做信息流

          信息流屬于競(jìng)價(jià)推廣的一種,是把廣告信息展示在百度和360旗下相關(guān)聯(lián)平臺(tái)上面,訪客點(diǎn)擊信息流鏈接進(jìn)入單頁(yè)面,進(jìn)行產(chǎn)品展示和客戶(hù)轉(zhuǎn)化,完成產(chǎn)品銷(xiāo)售。


          單頁(yè)網(wǎng)站強(qiáng)大優(yōu)勢(shì)


          1.制作超級(jí)簡(jiǎn)單

          單頁(yè)網(wǎng)站模板,可做任何編輯和排版。包括修改文字內(nèi)容、更換圖片、更換視頻、修改背景顏色以及訂單系統(tǒng)。只要會(huì)打字會(huì)做圖片,就可以實(shí)現(xiàn)自己動(dòng)手不求人,制作出精美的符合你要求的單頁(yè)網(wǎng)站,實(shí)現(xiàn)銷(xiāo)售產(chǎn)品網(wǎng)絡(luò)賺錢(qián)的目的!


          2.全方位展示產(chǎn)品

          單頁(yè)網(wǎng)站因?yàn)闆](méi)有網(wǎng)站的固定框架和固定表格限制,也沒(méi)有分散目標(biāo)顧客注意力的信息。可以輕松的添加文案、圖片、視頻、見(jiàn)證和訂單系統(tǒng),全方位展示你的產(chǎn)品,達(dá)到快速成交的目的!


          3.吸引目標(biāo)客戶(hù)注冊(cè)

          單頁(yè)網(wǎng)站很容易吸引訪客注意力,在頁(yè)面上添加客戶(hù)注冊(cè)系統(tǒng),通過(guò)設(shè)置免費(fèi)贈(zèng)品方式,很容易獲得訪客聯(lián)系信息,方便后期對(duì)潛在客戶(hù)進(jìn)行后端培養(yǎng)和產(chǎn)品銷(xiāo)售。


          4.易被搜索引擎收錄

          因?yàn)閱雾?yè)網(wǎng)站,是精心設(shè)計(jì)和布局的,有著良好的用戶(hù)體驗(yàn)和網(wǎng)站優(yōu)化,更容易被搜索引擎搜錄,帶來(lái)好的排名!


          5.單頁(yè)網(wǎng)站安全性高

          單頁(yè)網(wǎng)站沒(méi)有后臺(tái)管理,如果有人想攻擊你的單頁(yè),他只有攻陷整臺(tái)服務(wù)器,才能拿到控制權(quán)。但是服務(wù)器都是放在專(zhuān)業(yè)的IDC機(jī)房,有高級(jí)防火墻和殺毒軟件防護(hù),還有專(zhuān)業(yè)的技術(shù)人員維護(hù),難度可想而知。


          6.單頁(yè)網(wǎng)站管理方便

          單頁(yè)網(wǎng)站只有簡(jiǎn)單的文字信息、圖片資料、視頻和其他代碼組成。即使網(wǎng)站程序壞了,恢復(fù)數(shù)據(jù)也就幾分鐘的事情。需要修改內(nèi)容,只需要在電腦上面編輯完成,用FTP軟件上傳,覆蓋掉前一個(gè)單頁(yè)即可。


          手機(jī)版單頁(yè)制作教程介紹


          手機(jī)版單頁(yè)網(wǎng)站制作教程,包含“單頁(yè)制作”和“單頁(yè)優(yōu)化”2部分視頻內(nèi)容,是由作者總結(jié)9年多建站實(shí)戰(zhàn)經(jīng)驗(yàn),原創(chuàng)開(kāi)發(fā)的高清視頻課程。旨在幫助想用單頁(yè)網(wǎng)站,在網(wǎng)上賣(mài)產(chǎn)品的朋友,實(shí)現(xiàn)網(wǎng)上賺錢(qián)的夢(mèng)想!


          本套手機(jī)版單頁(yè)網(wǎng)站制作課程,共有21課時(shí),通過(guò)精心排版、錄制、剪輯,時(shí)間控制在15分鐘左右,只講干貨不說(shuō)廢話(huà)。


          單頁(yè)網(wǎng)站制作視頻,全部是高于720P高清視頻,由淺入深、循序漸進(jìn)講解,簡(jiǎn)單易懂,即使零基礎(chǔ)的朋友,都能輕輕松松學(xué)會(huì)單頁(yè)網(wǎng)站制作。


          想要學(xué)習(xí)的話(huà),可以私聊視頻內(nèi)容!

          單頁(yè)應(yīng)用(Single Page Application)越來(lái)越受web開(kāi)發(fā)者歡迎,單頁(yè)應(yīng)用的體驗(yàn)可以模擬原生應(yīng)用,一次開(kāi)發(fā),多端兼容。單頁(yè)應(yīng)用并不是一個(gè)全新發(fā)明的技術(shù),而是隨著互聯(lián)網(wǎng)的發(fā)展,滿(mǎn)足用戶(hù)體驗(yàn)的一種綜合技術(shù)。

          SEO

          一直以來(lái),搜索引擎優(yōu)化(SEO)是開(kāi)發(fā)者容易忽略的部分。SEO是針對(duì)搜索(Google、百度、雅虎搜索等)在技術(shù)細(xì)節(jié)上的優(yōu)化,例如語(yǔ)義、搜索關(guān)鍵詞與內(nèi)容相關(guān)性收錄量、搜索排名等。SEO也是同行、市場(chǎng)競(jìng)爭(zhēng)常用的的營(yíng)銷(xiāo)手段。Google、百度的搜索結(jié)果是重要的用戶(hù)入口,騰訊云(www.qcloud.com)有30%左右的流量來(lái)自搜索引擎。因此SEO在品牌、營(yíng)銷(xiāo)、用戶(hù)量的緯度是非常重要的基礎(chǔ)能力。

          那么單頁(yè)應(yīng)用與傳統(tǒng)直出頁(yè)面在SEO方面有哪些不同之處呢?

          單頁(yè)應(yīng)用的優(yōu)點(diǎn)

          1. 更好的用戶(hù)體驗(yàn),讓用戶(hù)在web感受natvie的速度和流暢;
          2. 經(jīng)典MVC開(kāi)發(fā)模式,前后端各負(fù)其責(zé)。
          3. 一套Server API,多端使用(web、移動(dòng)APP等)
          4. 重前端,業(yè)務(wù)邏輯全部在本地操作,數(shù)據(jù)都需要通過(guò)AJAX同步、提交;

          對(duì)搜索引擎不友好

          單頁(yè)應(yīng)用實(shí)際是把視圖(View)渲染從Server交給瀏覽器,Server只提供JSON格式數(shù)據(jù),視圖和內(nèi)容都是通過(guò)本地JavaScript來(lái)組織和渲染。而搜索搜索引擎抓取的內(nèi)容,需要有完整的HTML和內(nèi)容,單頁(yè)應(yīng)用架構(gòu)的站點(diǎn),并不能很好的支持搜索。

          如果站點(diǎn)在用戶(hù)體驗(yàn)和搜索友好權(quán)衡時(shí),如果我們做到更好的體驗(yàn),也做到友好的搜索支持,既是一箭雙雕。

          URL中的哈希(#號(hào))

          單頁(yè)應(yīng)用只有一個(gè)頁(yè)面,視圖的變化通常是通過(guò)路由(route)來(lái)驅(qū)動(dòng),首先,我們先來(lái)談一談單頁(yè)應(yīng)用的URL中的#號(hào),很多采用單元結(jié)構(gòu)王皓咱的URL都出現(xiàn)了這個(gè)符號(hào)。

          #號(hào)在瀏覽器的URL中是一個(gè)錨點(diǎn),在當(dāng)前頁(yè)改變#號(hào)的參數(shù),頁(yè)面會(huì)跳轉(zhuǎn)到錨點(diǎn)所在的位置,通過(guò)JavaScript我們可以獲取到#號(hào)后的參數(shù):

          1 2 
          location.hash // 獲取URL hash location.hash = "#list" //改變URL hash

          改變#號(hào)后的參數(shù),頁(yè)面并不會(huì)重載,于是大多數(shù)的單頁(yè)架構(gòu)網(wǎng)站,都在URL中采用#號(hào)來(lái)作為當(dāng)前視圖的URL地址,例如:

          1 2 3 
          example.com/#index //首頁(yè)視圖 example.com/#list //列表頁(yè)視圖 example.com/#list/1 //id為1的列表信息的視圖

          Backbone.js就是通過(guò)改變#號(hào)參數(shù)來(lái)組織視圖,這里有一個(gè)demo可以很直觀的體驗(yàn)URL的變化。

          看過(guò)這個(gè)demo,你獲取會(huì)發(fā)現(xiàn)很熟悉的符號(hào)#!,Twitter曾在URL使用這個(gè)標(biāo)識(shí)。這個(gè)標(biāo)識(shí)是Google提出。(AJAX 抓取:網(wǎng)站站長(zhǎng)和開(kāi)發(fā)人員指南1:

          因?yàn)閺?fù)雜的單頁(yè)架構(gòu)頁(yè)面,對(duì)Google來(lái)說(shuō)抓取比較困難,于是給開(kāi)發(fā)者制定一個(gè)規(guī)范:

          1. 網(wǎng)站提交sitemap給Google;
          2. Google發(fā)現(xiàn)URL里有#!符號(hào),例如example.com/#!/detail/1,于是Google開(kāi)始抓取example.com/?_escaped_fragment_=/detail/1

          _escaped_fragment_這個(gè)參數(shù)是Google指定的命名,如果開(kāi)發(fā)者希望把網(wǎng)站內(nèi)容提交給Google,就必須通過(guò)這個(gè)參數(shù)生成靜態(tài)頁(yè)面。

          根據(jù)上面的demo,我簡(jiǎn)單示例一下Google要抓取的頁(yè)面的樣子:

          http://119.28.4.22/?escapedfragment_=/detail/1

          如此以來(lái),就需要Server通過(guò)生成靜態(tài)的內(nèi)容以便Google抓取。

          以下將簡(jiǎn)單介紹,單頁(yè)架構(gòu),爬蟲(chóng)訪問(wèn)根目錄時(shí)如果配置Server端的路由。

          判斷爬蟲(chóng)

          當(dāng)Google訪問(wèn)119.28.4.22/#!/detail/1時(shí),會(huì)自動(dòng)轉(zhuǎn)化成http://119.28.4.22/?_escaped_fragment_=/detail/1,以Nginx為例:

          1 2 3 
          if ($args ~ _escaped_fragment_) { rewrite ^ /api; }

          /api為后臺(tái)服務(wù)的接口,已nodejs為例,代理設(shè)置如下:

          1 2 3 4 5 6 7 8 9 10 11 12 13 
          upstream nodejs { server 127.0.0.1:3000; } location /api { proxy_set_header X-Request-URI $request_uri; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header Port $server_port; proxy_pass http://nodejs; proxy_redirect off; }

          如此,我們便將Google的訪問(wèn)重寫(xiě)到/api這個(gè)接口,然后在Server的/api處理請(qǐng)求把靜態(tài)內(nèi)容輸出即可。

          sitemap

          Gogole的這個(gè)規(guī)范,必須有sitemap支持,因?yàn)橛锌赡軉雾?yè)架構(gòu)的站點(diǎn),索引頁(yè)面也是JavaScript渲染的。提交sitemap時(shí),不用關(guān)注_escaped_fragment_這個(gè)參數(shù)名,只提交帶哈希符號(hào)的URL即可,例如:

          1 2 3 
          http://119.28.4.22/#!/detail/1 weekly 0.5

          結(jié)語(yǔ)

          技術(shù)潮流的步伐很快,單頁(yè)應(yīng)用,URL哈希處理也沒(méi)渲染的方式實(shí)際上已經(jīng)流行了很久,在國(guó)外很多用戶(hù)數(shù)據(jù)較好的情況下,開(kāi)發(fā)者會(huì)選擇HTML5 History API的pushstate特性開(kāi)發(fā),在URL中拋棄#!。但是IE6、7等低端瀏覽器用戶(hù)情況較多的網(wǎng)站,#能夠很好的兼容。關(guān)于采用HTML5 History API來(lái)架構(gòu)單頁(yè)應(yīng)用的方案,也歡迎討論。

          文章來(lái)源:騰訊isux


          主站蜘蛛池模板: 久久久久99人妻一区二区三区| 精品国产亚洲第一区二区三区| 一区二区三区免费视频网站| 国产一区二区三区乱码在线观看| 加勒比无码一区二区三区| 97久久精品无码一区二区天美| 国产精品无码一区二区在线观| 女人和拘做受全程看视频日本综合a一区二区视频 | 免费一本色道久久一区| 一区二区三区免费视频观看| 亚洲国产成人久久综合一区| 一区二区在线视频观看| 中字幕一区二区三区乱码 | 91无码人妻精品一区二区三区L| 亚洲av无码一区二区三区天堂| 国产一区二区三区小向美奈子| 亚洲国产精品成人一区| 国产aⅴ一区二区三区| 亚洲一区二区三区播放在线| 国产日韩一区二区三免费高清| 无码夜色一区二区三区| 97av麻豆蜜桃一区二区| 亚洲一区二区三区偷拍女厕| 国产成人精品a视频一区| 91久久精品午夜一区二区| 视频在线一区二区三区| 伊人色综合视频一区二区三区| 久久精品道一区二区三区| 国产精品日本一区二区不卡视频 | 丰满人妻一区二区三区视频53| 亚洲bt加勒比一区二区| 丰满人妻一区二区三区免费视频| 国内精品视频一区二区三区| 久久精品无码一区二区WWW| 国产精品主播一区二区| 国产av天堂一区二区三区| 国产在线精品一区二区夜色 | 三上悠亚日韩精品一区在线| 一区二区三区日本电影| 老湿机一区午夜精品免费福利| 亚洲熟妇AV一区二区三区宅男|