手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

網(wǎng)站設(shè)計(jì)之一:怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

2022-6-13    博博

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

@十萬(wàn)個(gè)為什麼 :?jiǎn)雾?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)就足以讓用戶在各部分間穿行。


Green13


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

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

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

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


Andreaballerino


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

一旦你腦海中有基本的布局,單頁(yè)網(wǎng)站還能利用某些特定的設(shè)計(jì)約束來(lái)加快進(jìn)程。尤其較之于多頁(yè)網(wǎng)站而言,單頁(yè)網(wǎng)站各個(gè)部分要保持無(wú)縫銜接。如果你已經(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è)毫無(wú)用處的市場(chǎng)宣傳。你必須直截了當(dāng)、開門見山。


Varsity


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

更具SEO潛力

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

單頁(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)。


Wild


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

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

易于組織

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

Stefansohlstrom

怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

減少帶寬占用

盡管不像從前,對(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ùn)用響應(yīng)式設(shè)計(jì)總體來(lái)說(shuō)更容易。簡(jiǎn)化導(dǎo)航和類似改變,也更容易成就適用于小屏幕的設(shè)計(jì)。


Bearonunicycle


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)


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


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

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

如果要使用視覺差滾動(dòng),還要考慮一件事,使用Javascript還是純CSS技術(shù)來(lái)實(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)站可以讓它看起來(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)格是很合理的。


Clientsy


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

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


Franzsans


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

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


Simplygum


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

不該使用單頁(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、彈出窗和類似技術(shù),它們事實(shí)上包含了多頁(yè)內(nèi)容。

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


Dangblast


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

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

說(shuō)到單頁(yè)網(wǎng)站,某些站點(diǎn)用了某種“取巧”的辦法。它們的主站是個(gè)單頁(yè)網(wǎng)站,但在其他域名下也有個(gè)博客(有時(shí)是Tumblr或托管在WordPress.com的網(wǎng)站)。這么做沒有問(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ì)你和你的用戶都沒有任何好處。相反,要盡可能簡(jiǎn)化設(shè)計(jì)和內(nèi)容,還能表達(dá)出你要的信息。


Petertoth


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

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

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


Fraudforcesummit


分割內(nèi)容

怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

分割內(nèi)容

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


Ritchiejacobs


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

讓所有的背景都有所作為

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

相關(guān)資源:


Johnjacob


怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)


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


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

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

Skrollr:“為剩下的人準(zhǔn)備的視覺差滾動(dòng)”。這是個(gè)獨(dú)一無(wú)二的庫(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)下載。這里(Graphicburger)還有第二集可供下載。

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)買。


結(jié)論


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

作者:程遠(yuǎn)

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)m.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

網(wǎng)站設(shè)計(jì)之一:怒馬!超實(shí)用的單頁(yè)網(wǎng)站設(shè)計(jì)指南(附大量資源)

網(wǎng)站設(shè)計(jì)之二:旅游網(wǎng)站設(shè)計(jì)分析!教你10個(gè)小技巧

網(wǎng)站設(shè)計(jì)之三:實(shí)例教學(xué)!如何將極簡(jiǎn)風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計(jì)中?

網(wǎng)站設(shè)計(jì)之四:另辟蹊徑談創(chuàng)新!提升網(wǎng)站設(shè)計(jì)形式的幾種方法

網(wǎng)站設(shè)計(jì)之五:經(jīng)驗(yàn)分享:移動(dòng)網(wǎng)站設(shè)計(jì)應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計(jì)之六:4000 字快速回顧20多年的網(wǎng)頁(yè)設(shè)計(jì)發(fā)展史!

網(wǎng)站設(shè)計(jì)之七:騰訊出品!2021-2022設(shè)計(jì)趨勢(shì)報(bào)告:動(dòng)態(tài)篇

網(wǎng)站設(shè)計(jì)之八:為什么千萬(wàn)別隨便學(xué)國(guó)外的極簡(jiǎn)設(shè)計(jì)?

網(wǎng)站設(shè)計(jì)之九:高手出品!2020~2021年UI界面設(shè)計(jì)趨勢(shì)

網(wǎng)站設(shè)計(jì)之十:如何做好網(wǎng)頁(yè)頭部?jī)?nèi)容設(shè)計(jì)?來(lái)看 58 設(shè)計(jì)師的總結(jié)!






分享本文至:

日歷

鏈接

個(gè)人資料

存檔