Cybeer Bar
Keep Portland Weird
Happy Prehistoric Holidays from Urban Influence
SHFT
Happy New Year
A Short Journey
Uber Brand Experience
Admir Hadzic
Flying Piñata
Beer 34
El Burro – Mexican Street Food in Oslo
PROCESS
How much is your spare time worth?
FRAMES
Golden Thread Tarot
Spotify Year in Music 2015
Circles Conference
Live To Change
Crisis
Eighty East
The Montues
Letterboxd 2015
Experience The Gift Of Giving
Bryant Hughes
Frank Underwood 2016
#p#副標(biāo)題#e#
Valio Con 2016
Blue Stag
Condé Nast
Bloomberg Businessweek Design 2016
HKG Portfolio
Aplitap
Impatia
Shoutouts
Leo’s Red Carpet Rampage
Mood Swings in Delhi Metro
Strömma Projekt
Pixelosaur
Who is Mr. Robot
Experience Economy – Stimmt Studie 2016
Plastics Unlimited
Knowyourbod
Flywheel – Interns
BUBB WEB STUDIO
Hashtags Unplugged
Armor
單頁(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ì)用戶更加友好。繼續(xù)閱讀，你將了解它的益處，何時(shí)使用（或不該使用），還有一些你該遵循的絕佳慣例。
單頁(yè)設(shè)計(jì)的益處
很顯然，單頁(yè)設(shè)計(jì)并非所有項(xiàng)目的理想選擇。但假如可能的話，有一大堆理由使用它。
直觀易用
默認(rèn)情況下，用戶要瀏覽單頁(yè)網(wǎng)站，只要知道如何滾動(dòng)就行。你也可以加入箭頭或其他瀏覽暗示，但除了少數(shù)例外，其實(shí)滾動(dòng)就足以讓用戶在各部分間穿行。
完全不用擔(dān)心用戶身陷多層導(dǎo)航中，無休止地尋找他們所要的東西。如果頁(yè)面上有多個(gè)部分，頁(yè)頭或其他導(dǎo)航鏈接通常很有幫助，不過即使沒有它們，網(wǎng)站仍然是可用的。
維護(hù)起來更快速、更簡(jiǎn)單
這點(diǎn)并非既成事實(shí)，編碼良好的單頁(yè)網(wǎng)站，或許編寫起來比多頁(yè)網(wǎng)站更快。設(shè)計(jì)過程有時(shí)可以花更少的時(shí)間，盡管這取決于單頁(yè)網(wǎng)站的復(fù)雜程度。
一旦你腦海中有基本的布局，單頁(yè)網(wǎng)站還能利用某些特定的設(shè)計(jì)約束來加快進(jìn)程。尤其較之于多頁(yè)網(wǎng)站而言，單頁(yè)網(wǎng)站各個(gè)部分要保持無縫銜接。如果你已經(jīng)明確哪些能做哪些不能，這類約束的確能加速頁(yè)面開發(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è)毫無用處的市場(chǎng)宣傳。你必須直截了當(dāng)、開門見山。
更具SEO潛力
高質(zhì)量的站內(nèi)鏈接，是網(wǎng)站在搜索引擎中的表現(xiàn)的重要組成部分。盡管搜索引擎并不是很多網(wǎng)站必須的最大流量源，它們?nèi)匀恢匾?/p>
單頁(yè)網(wǎng)站的鏈接總是指向自己。搜索引擎抓取時(shí)，這可以增加網(wǎng)站的權(quán)重。
敘事的手法促使用戶有所行動(dòng)
單頁(yè)網(wǎng)站往往從敘事角度出發(fā)，這點(diǎn)多頁(yè)網(wǎng)站可不擅長(zhǎng)。這可以促進(jìn)轉(zhuǎn)換，激發(fā)用戶采取行動(dòng)。
人們習(xí)慣于聆聽故事，不論在線上還是線下，所以這點(diǎn)有著顯而易見的用戶體驗(yàn)優(yōu)勢(shì)。我們兒時(shí)就開始閱讀和聽故事，于我們而言，這是自然而然的事情。
易于組織
再也不需要組織一列列數(shù)不清的頁(yè)面和子頁(yè)面了。無需多慮每個(gè)頁(yè)面是父級(jí)還是子級(jí)。也沒有龐雜的導(dǎo)航菜單和子菜單。所有都在一頁(yè)上。是要包含導(dǎo)航鏈接，還是讓用戶滾動(dòng)，這取決于你，就看是否有助于提升用戶體驗(yàn)。網(wǎng)站如果有多個(gè)頁(yè)面，是絕對(duì)不會(huì)這么考慮的。
減少帶寬占用
盡管不像從前，對(duì)服務(wù)器而言已經(jīng)不成問題，不過想想近年來有多少用戶通過移動(dòng)設(shè)備訪問你的網(wǎng)站。減少網(wǎng)站的帶寬占用，會(huì)贏得流量有限的用戶的感激。
消滅了移動(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ì)總體來說更容易。簡(jiǎn)化導(dǎo)航和類似改變，也更容易成就適用于小屏幕的設(shè)計(jì)。
要不要用視覺差滾動(dòng)？
視覺差滾動(dòng)可能是互聯(lián)網(wǎng)中發(fā)生過的最美妙的事情，也可能是個(gè)被濫用的噱頭，來蹂躪我們?yōu)g覽器，這取決于你怎么看。無論你站在哪一方，它似乎近期并不會(huì)消失。
就我而言，我希望有時(shí)間和地方來實(shí)現(xiàn)視覺差滾動(dòng)。這個(gè)效果對(duì)于某些單頁(yè)網(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í)使用單頁(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)站可以讓它看起來更豐富。
單頁(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)域。如果你只賣一種產(chǎn)品，無論它是實(shí)體或是虛擬的，何必勞煩使用多個(gè)頁(yè)面呢？一個(gè)簡(jiǎn)單的單頁(yè)網(wǎng)站才是更好的銷售工具。
可能你覺得更復(fù)雜的電商網(wǎng)站不適合用單頁(yè)網(wǎng)站，但它仍然可行。當(dāng)然，有十多種產(chǎn)品的網(wǎng)站中我會(huì)避免使用，不過單張頁(yè)面也足以輕易支撐一個(gè)簡(jiǎn)單的在線商店，通過彈出窗口來承載產(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)站，但通過ajax、彈出窗和類似技術(shù)，它們事實(shí)上包含了多頁(yè)內(nèi)容。
網(wǎng)站Dang & Blast就是這方面的絕佳案例。
如果無法讓所有東西徹底融入單個(gè)頁(yè)面，這會(huì)是和很好的解決方案。
說到單頁(yè)網(wǎng)站，某些站點(diǎn)用了某種“取巧”的辦法。它們的主站是個(gè)單頁(yè)網(wǎng)站，但在其他域名下也有個(gè)博客（有時(shí)是Tumblr或托管在WordPress.com的網(wǎng)站）。這么做沒有問題，它能突出主站的信息，也不用舍棄博客帶來的好處。
單頁(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)容而言過于復(fù)雜，對(duì)你和你的用戶都沒有任何好處。相反，要盡可能簡(jiǎn)化設(shè)計(jì)和內(nèi)容，還能表達(dá)出你要的信息。
導(dǎo)航鏈接還是有幫助的
正因?yàn)橛脩艨梢酝ㄟ^滾動(dòng)來瀏覽你的網(wǎng)站，但并不意味著這是最友好的方式。如果你的網(wǎng)站很長(zhǎng)，有很多部分，這點(diǎn)尤其正確。除非有特別好的理由，還是應(yīng)該加入直達(dá)特定部分的鏈接，來使你的網(wǎng)站更加友好。
分割內(nèi)容
單個(gè)頁(yè)面不代表一整個(gè)冗長(zhǎng)部分。實(shí)際上也不該如此。將內(nèi)容根據(jù)邏輯劃分為幾大塊，用戶才能更容易找到他們所需。
讓所有的背景都有所作為
單頁(yè)網(wǎng)站常常有大幅背景。當(dāng)然，有時(shí)候這些背景很樸素，或帶有平鋪紋理；不過也有單頁(yè)網(wǎng)站利用所有的空間來?yè)]灑創(chuàng)意。前面提到了，這也有助于劃分內(nèi)容。背景未必要是單一的圖片?？梢允且幌盗袌D片，如果這樣做與內(nèi)容更相符的話。
單頁(yè)網(wǎng)站的資源
單頁(yè)網(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ú)一無二的庫(kù)，適用于移動(dòng)端和桌面。不需要jQuery，只有原生JavaScript。
Stellar.js：Stellar.js是另一個(gè)簡(jiǎn)單易用的視覺差滾動(dòng)庫(kù)。它提供了很多設(shè)置選項(xiàng)和iOS支持。
One Page Website Wireframes：如果你不確定如何構(gòu)建你的網(wǎng)站，這個(gè)單頁(yè)網(wǎng)站線框圖集是很好的出發(fā)點(diǎn)。免費(fèi)下載。這里還有第二集可供下載。
One Page Love：One Page Love是首屈一指的單頁(yè)網(wǎng)站集合，里面有超過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)買。
結(jié)論
對(duì)各種網(wǎng)站來說，單頁(yè)設(shè)計(jì)都是非常棒的選擇。盡管它們不是小型網(wǎng)站的唯一設(shè)計(jì)方案，對(duì)很多項(xiàng)目而言它都是值得考慮的。思考使用單頁(yè)設(shè)計(jì)的理由，然后也思考不用的理由，再做決定。
原文：可樂橙
]]>