可能是因為實現這種效果比較復雜,視差滾動的概念對于很多設計師來說仍然是相當陌生。我看到過眾多優秀的例子,例如像 Pixel Stadium 這樣的杰出代表,這個網站易于瀏覽,紋理也是讓人眼花繚亂。
當你向下滾動頁面的時候,頂部導航欄會出現并鎖定到窗口,這使得用戶可以快速跳過或轉換頁面到不同的部分。布局是完全響應式設計的,會自適應瀏覽器窗口的寬度!這一切都說明,單頁的布局可能會非常好看,也很靈活。
移動應用程序著陸頁面Android 和 iOS 應用程序開發人員知道,推出品牌對于自己的營銷努力是至關重要的。這就是為什么更小的移動應用程序的網站包含的信息通常設在一個頁面上。它花費更少的精力而且效果看起來也好多了。
這個網站采用了相當簡約的布局,沒有很多細節。大部分的設計是圍繞應用程序的屏幕截圖,環繞著 App Store 的徽章按鈕。您想促進銷售的話,使用單頁布局是實現這個目標最好的布局風格。
隱藏的導航欄為了在在屏幕上節省空間,網站的導航條只有在滾動條滾動一定的距離,頭部的內容看不到了之后才出現。網站 Radiologie 為這種技術提供了一個很好的示范。
讓當前的導航欄和網站的主題匹配是很好的做法,但是,因為它會在頁面上保持固定,理論上你可以使用任意數量的設計風格。我想一個更好的例子是 Rule of Three。
他們的網站是專注于一個撰稿人行業協會的專業人士,使用暗色風格紋理,配色方案也符合版面設計。當你向下滾動頁面,你會發現導航鏈接固定在頂欄,這是一個很好的解決方案。
動態轉換效果創建自己的動態頁面動畫的過程很復雜的。我不建議剛開始使用 JavaScript 的開發者走這條道路,但它可以是一個很好的學習經驗。看一個例子:FK-Agency website。
這個網站是可以同時在垂直和水平方向擴展。請注意,你不能在布局上/下翻頁,必須滑動導航鏈接。在某些類似的服務和作品集網站中也會這種設計,你必須水平方向上滾動頁面。對于一些訪客,這種技術會讓他們困惑,所以要小心使用。
水平滑動板這種技術和動態過渡風格是非常相似的,但水平滑動效果只要通過谷歌搜索就能找到很多的開源插件可以實現。因此這種效果相比上面幾種更簡單。下面是我很喜歡的一個網站例子。
優秀作品案例
這里收集的單頁網站非常值得關注,都是單頁面布局的優秀作品??梢则炞C上面這些觀點,為設計師提供更多的幫助。這些網站使用不同的布局,你會發現各種各樣的不同的用戶界面技術。另外,請記得給個評論,讓我們知道您的想法。
TeamgeekLost Phone Experiment
Marketing Facts
Laymon
新聞熱點
疑難解答