單頁設計,是一項處理小型網站的絕佳技法,甚至一些網站你可能認為一張頁面搞不定,也同樣適用。從易于維護,到減輕帶寬占用,操作單頁網站的益處不勝枚舉。
假如你面對的是個小型網站,通常只有幾個頁面的那種,能夠思考操作單頁設計,瞧瞧它是否能簡化項目,對客戶更加友好。繼續(xù)閱讀,你將理解它的好處,什么時候操作(或不該操作),還有有些你該遵循的絕佳常規(guī)。
單頁設計的好處
很顯然,單頁設計并非所有項宗旨理想選取。但假如可能的話,有一大堆原因操作它。
直觀易用
默認情形下,客戶要瀏覽單頁網站,只要知曉怎樣滾動就行。你也能夠加入箭頭或其他瀏覽暗示,但除了少數(shù)例外,其實滾動就足以讓客戶在各部分間穿行。
完全不用擔心客戶身陷多層導航中,無休止地尋找他們所要的東西。如果頁面上有多個部分,頁頭或其他導航鏈接通常很有幫助,不過即使沒有它們,網站仍然是可用的。
維護起來更火速、更簡易
這點并非既成事實,編碼優(yōu)秀的單頁網站,也許編寫起來比多頁網站更快。設計進程有時能夠花更少的時間,盡管這取決于單頁網站的復雜程度。
一旦你腦海中有基礎的部署,單頁網站還能借助某些特定的設計約束來加快過程。尤其較之于多頁網站而言,單頁網站各個部分要保持無縫銜接。如果你已經明晰哪些能做哪些不能,這類約束的確能加速頁面開發(fā)。
維護也更簡易。當你只需要處理一個頁面,維護工作就大大簡化了,只要網站本身編碼優(yōu)秀。
它迫使你實行簡化
這條構筑了上面一點。當你只有一個頁面要處理,你不得不把一切簡化為它們最基礎的形態(tài)。不再需要一頁頁毫無用處的市場傳播。你必須直截了當、開門見山。
更具SEO潛力
高質量的站內鏈接,是網站在搜索引擎中的表現(xiàn)的緊要組成部分。盡管搜索引擎并不是許多網站必須的最大流量源,它們仍然緊要。
單頁網站的鏈接一直指向自己。搜索引擎抓取時,這能夠提升網站的權重。
敘事的方法促進客戶有所行動
單頁網站往往從敘事角度開始,這點多頁網站可不擅長。這能夠促使轉化,激發(fā)客戶采取行動。
人們習慣于聆聽故事,不論在線上還是線下,所以這點有著顯而易見的客戶體驗優(yōu)點。我們兒時就著手閱讀和聽故事,于我們而言,這是自然而然的事宜。
易于組織
再也不需要組織一列列數(shù)不清的頁面和子頁面了。無需多慮每個頁面是父級還是子級。也沒有龐雜的導航菜單和子菜單。所有都在一頁上。是要包括導航鏈接,還是讓客戶滾動,這取決于你,就看是否有利于提高客戶體驗。網站如果有多個頁面,是絕對不會這么思考的。
減輕帶寬占用
盡管不像從前,對服務器而言已經不成問題,不過想想近年來有多少客戶通過移動設備訪問你的網站。減輕網站的帶寬占用,會贏得流量有限的客戶的感謝。
消滅了移動版網站
當然,響應式設計不只限于單頁網站。但即使采用了響應式設計,網站越復雜,讓它適應小屏幕還是愈發(fā)困難。單頁網站并不復雜,這是必然的。使用響應式設計總體來講更容易。簡化導航和類似改變,也更容易成就適用于小屏幕的設計。
要不要用視覺差滾動?
視覺差滾動可能是互聯(lián)網中發(fā)生過的最美妙的事宜,也可能是個被濫用的噱頭,來蹂躪我們?yōu)g覽器,這取決于你怎樣看。無論你站在哪一方,它似乎最近并不會隱沒。
就我而言,我希望有時間和地方來實現(xiàn)視覺差滾動。這個效益對于某些單頁網站大有裨益,而對于另有些則是噱頭,甚至更糟:難以操作。關鍵是要明晰一點,你操作視覺差滾動真的能提高網站的易用性嗎,還是由于你覺得它看起來很酷?
如果要操作視覺差滾動,還要思考一件事,操作Javas cript還是純CSS技術來實現(xiàn)。關于這兩個選取,請參見資源部分理解更多信息。
什么時候操作單頁網站,什么時候不用
固然有單頁網站大有利處,但它們也不是完美的全尺寸適配計劃。固然許多時候單頁網站比多頁網站更合理,但也有許多時候不應當操作單頁設計。
總之,假如你的網站只有少數(shù)頁面,單頁網站也許是最好選取。將一切濃縮在一個頁面上,能讓網站整體具備更現(xiàn)代的外觀,如果內容精簡,那么單頁網站能夠讓它看起來更豐富。
單頁網站的另一個普通案例,就是發(fā)布預告頁面。它們通常是單頁網站,帶有新聞郵件的注冊表單。多數(shù)情形下,發(fā)布預告期間面向大眾的信息很容易組織在一個頁面上,所以,設計這些頁面時優(yōu)先思考這種風格是很合理的。
不該操作單頁網站的情形十分明晰:龐大、復雜,或必須保有海量信息的網站不合適做成單頁網站。在這些情形下,操作相對傳統(tǒng)的網站構架更加明智。
混合型網站
固然有大量的單頁網站存在,但也有許多混合型網站。它們給人印象是個單頁網站,但通過ajax、彈出窗和類似技術,它們事實上包括了多頁內容。
網站Dang & Blast就是這方面的絕佳案例。
如果無法讓所有東西徹底融合單個頁面,這會是和很好的修復計劃。
說到單頁網站,某些站點用了某種“取巧”的方法。它們的主站是個單頁網站,但在其他域名下也有個博客(有時是Tumblr或托管在WordPress.com的網站)。這么做沒有問題,它能突出主站的信息,也不用舍棄博客帶來的益處。
單頁網站的絕佳常規(guī)
優(yōu)質設計的多數(shù)標準,在單頁網站中仍然適用,其實也適用于任何網頁設計。還有有些額外的東西需要牢記,其中一些以前已經提到了。
保持簡易
設計如果對于你試圖表現(xiàn)的內容而言過于復雜,對你和你的客戶都沒有任何益處。相反,要盡可能簡化設計和內容,還能表達出你要的信息。
導航鏈接還是有幫助的
正由于客戶能夠通過滾動來瀏覽你的網站,但并不意味著這是最友好的方式。如果你的網站很長,有許多部分,這點尤其精確。除非有特別好的原因,還是應當加入直達特定部分的鏈接,來使你的網站更加友好。
分割內容
單個頁面不代表一整個冗長部分。實際上也不該如此。將內容按照邏輯劃分為幾大塊,客戶才能更容易找到他們所需。
讓所有的背景都有所作為
單頁網站常常有大幅背景。當然,有時候這些背景很樸素,或帶有平鋪紋理;不過也有單頁網站借助所有的空間來揮灑創(chuàng)意。前面提到了,這也有利于劃分內容。背景未必要是單純的圖片。能夠是一系列圖片,如果這樣做與內容更相符的話。
單頁網站的資源
單頁網站的資源成百上千,還包含模版;我們這里難點關注表現(xiàn)突出的幾個。
PureCSSParallax Scrolling:Keith Clark的這篇文章闡釋了怎樣通過純CSS打磨視覺差滾動效益。如果你不想用Javas cript(或者不懂)的話,這是個很好的選取。
Skrollr:“為剩下的人籌備的視覺差滾動”。這是個獨一無二的庫,適用于手機端和桌面。不需要jQuery,只有原生Javas cript。
Stellar.js:Stellar.js是另一個簡易易用的視覺差滾動庫。它提供了許多設立選項和iOS支持。
One Page Website Wireframes:如果你不確立怎樣構建你的網站,這個單頁網站線框圖集是很好的開始點。免費下載。這里還有第二集可供下載。
One Page Love:One Page Love是首屈一指的單頁網站集合,里面有超過5000個網站案例,并且總是在更新。他們還主打大量模版和其他資源。
Start Bootstrap:Start Bootstrap集成了海量的免費單頁網站Bootstrap主題。主題合適機構、自由職業(yè)者、作品集、著陸頁等等。
One Page Love Templates:除了豐富的網站集合,One Page Love也提供免費和收費的模版。
One Page Mania:One Page Mania提供獨特的網站和模版集合,供你下載或購買。
答案
對種種網站來講,單頁設計都是極其棒的選取。盡管它們不是小型網站的唯一設計計劃,對許多項目而言它都是值得思考的??紤]操作單頁設計的原因,然后也考慮不用的原因,再做決定。