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