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