2013-1-29 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源： http://www.cnblogs.com/lhb25/archive/2013/01/30/creative-techniques-for-single-page-websites.html
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在過(guò)去的幾年中，不斷涌現(xiàn)出新的自定義網(wǎng)站設(shè)計(jì)技術(shù)。一個(gè)非常流行的想法是把所有的主要內(nèi)容放在一個(gè)頁(yè)面，使用動(dòng)態(tài)滾動(dòng)動(dòng)畫(huà)來(lái)定位內(nèi)容，這種單頁(yè)布局在只需要顯示相關(guān)信息的一小部分的目標(biāo)網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序制作網(wǎng)站經(jīng)常使用。
在這篇文章中，我想向大家介紹單頁(yè)網(wǎng)站中一些有趣的技術(shù)。希望這些想法能夠給正在尋找這方面內(nèi)容的年輕設(shè)計(jì)師提供靈感。
可能是因?yàn)閷?shí)現(xiàn)這種效果比較復(fù)雜，視差滾動(dòng)的概念對(duì)于很多設(shè)計(jì)師來(lái)說(shuō)仍然是相當(dāng)陌生。我看到過(guò)眾多優(yōu)秀的例子，例如像 Pixel Stadium 這樣的杰出代表，這個(gè)網(wǎng)站易于瀏覽，紋理也是讓人眼花繚亂。
當(dāng)你向下滾動(dòng)頁(yè)面的時(shí)候，頂部導(dǎo)航欄會(huì)出現(xiàn)并鎖定到窗口， 這使得用戶可以快速跳過(guò)或轉(zhuǎn)換頁(yè)面到不同的部分。 布局是完全響應(yīng)式設(shè)計(jì)的，會(huì)自適應(yīng)瀏覽器窗口的寬度！ 這一切都說(shuō)明，單頁(yè)的布局可能會(huì)非常好看，也很靈活。
Android 和 iOS 應(yīng)用程序開(kāi)發(fā)人員知道，推出品牌對(duì)于自己的營(yíng)銷(xiāo)努力是至關(guān)重要的。 這就是為什么更小的移動(dòng)應(yīng)用程序的網(wǎng)站包含的信息通常設(shè)在一個(gè)頁(yè)面上。 它花費(fèi)更少的精力而且效果看起來(lái)也好多了。
這個(gè)網(wǎng)站采用了相當(dāng)簡(jiǎn)約的布局，沒(méi)有很多細(xì)節(jié)。大部分的設(shè)計(jì)是圍繞應(yīng)用程序的屏幕截圖，環(huán)繞著 App Store 的徽章按鈕。您想促進(jìn)銷(xiāo)售的話，使用單頁(yè)布局是實(shí)現(xiàn)這個(gè)目標(biāo)最好的布局風(fēng)格。
為了在在屏幕上節(jié)省空間，網(wǎng)站的導(dǎo)航條只有在滾動(dòng)條滾動(dòng)一定的距離，頭部的內(nèi)容看不到了之后才出現(xiàn)。 網(wǎng)站 Radiologie 為這種技術(shù)提供了一個(gè)很好的示范。
讓當(dāng)前的導(dǎo)航欄和網(wǎng)站的主題匹配是很好的做法，但是，因?yàn)樗鼤?huì)在頁(yè)面上保持固定，理論上你可以使用任意數(shù)量的設(shè)計(jì)風(fēng)格。我想一個(gè)更好的例子是 Rule of Three 。
他們的網(wǎng)站是專(zhuān)注于一個(gè)撰稿人行業(yè)協(xié)會(huì)的專(zhuān)業(yè)人士，使用暗色風(fēng)格紋理， 配色方案也符合版面設(shè)計(jì)。 當(dāng)你向下滾動(dòng)頁(yè)面，你會(huì)發(fā)現(xiàn)導(dǎo)航鏈接固定在頂欄， 這是一個(gè)很好的解決方案。
創(chuàng)建自己的動(dòng)態(tài)頁(yè)面動(dòng)畫(huà)的過(guò)程很復(fù)雜的。 我不建議剛開(kāi)始使用 JavaScript 的開(kāi)發(fā)者走這條道路，但它可以是一個(gè)很好的學(xué)習(xí)經(jīng)驗(yàn)。 看一個(gè)例子：FK-Agency website 。
這個(gè)網(wǎng)站是可以同時(shí)在垂直和水平方向擴(kuò)展。 請(qǐng)注意，你不能在布局上/下翻頁(yè)，必須滑動(dòng)導(dǎo)航鏈接。在某些 類(lèi)似的服務(wù)和作品集網(wǎng)站中也會(huì)這種設(shè)計(jì)，你必須水平方向上滾動(dòng)頁(yè)面。 對(duì)于一些訪客，這種技術(shù)會(huì)讓他們困惑，所以要小心使用。
這種技術(shù)和動(dòng)態(tài)過(guò)渡風(fēng)格是非常相似的，但水平滑動(dòng)效果 只要 通過(guò)谷歌搜索就能找到很多的開(kāi)源插件可以實(shí)現(xiàn)。 因此這種效果相比上面幾種更簡(jiǎn)單。下面是我很喜歡的一個(gè)網(wǎng)站例子。
這里收集的單頁(yè) 網(wǎng)站非常值得關(guān)注，都是單頁(yè)面布局的優(yōu)秀作品?？梢则?yàn)證上面這些觀點(diǎn)，為設(shè)計(jì)師提供更多的幫助。 這些網(wǎng)站使用不同的布局，你會(huì)發(fā)現(xiàn)各種各樣的不同的用戶界面技術(shù)。 另外，請(qǐng)記得給個(gè)評(píng)論，讓我們知道您的想法。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com