超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南｜「學(xué)一學(xué)」

編者按：周一無水文！這篇好文將給同學(xué)們科普何時(shí)能用單頁網(wǎng)站，設(shè)計(jì)時(shí)有哪些技巧，有哪些優(yōu)秀范例可以借鑒，以及文末推薦一大波專業(yè)的單頁網(wǎng)站資源，干貨份量絕對(duì)足，充電時(shí)間到 >>>

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

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

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

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

直觀易用

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

Green13

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

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

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

Andreaballerino

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

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

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

更具SEO潛力

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

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

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

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

Wild

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

易于組織

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

Stefansohlstrom

減少帶寬占用

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

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

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

Bearonunicycle

要不要用視覺差滾動(dòng)？

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

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

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

何時(shí)使用單頁網(wǎng)站，何時(shí)不用？

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

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

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

Clientsy

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

Franzsans

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

Simplygum

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

混合型網(wǎng)站

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

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

Dangblast

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

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

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

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

保持簡(jiǎn)單

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

Petertoth

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

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

Fraudforcesummit

分割內(nèi)容

分割內(nèi)容

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

Ritchiejacobs

讓所有的背景都有所作為

單頁網(wǎng)站常常有大幅背景。當(dāng)然，有時(shí)候這些背景很樸素，或帶有平鋪紋理；不過也有單頁網(wǎng)站利用所有的空間來揮灑創(chuàng)意。前面提到了，這也有助于劃分內(nèi)容。背景未必要是單一的圖片?？梢允且幌盗袌D片，如果這樣做與內(nèi)容更相符的話。

Johnjacob

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

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

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

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

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

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

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

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

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

One Page Mania：One Page Mania提供獨(dú)特的網(wǎng)站和模版集合，供你下載或購買。

結(jié)論

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

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南｜「學(xué)一學(xué)」"，僅為提供更多信息供用戶參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

名稱欄目：超實(shí)用的單頁網(wǎng)站設(shè)計(jì)指南｜「學(xué)一學(xué)」
網(wǎng)頁網(wǎng)址：http://www.bm7419.com/news37/313487.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、服務(wù)器托管、Google、品牌網(wǎng)站設(shè)計(jì)、軟件開發(fā)、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)