24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » 網頁設計優秀案例:盤點令人驚嘆的滾動效果設計
  • 近期文章

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
  • 網上推廣

    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
    • SEO公司緊急警報:網站流量突然暴增?小心黑帽SEO植入
  • 網頁設計

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
    • 網頁設計中最基礎的配色技巧 讓網頁在色彩海洋中脱穎而出
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

網頁設計優秀案例:盤點令人驚嘆的滾動效果設計

分類: 最新資訊, 網頁設計 Tags: #網頁設計案例, 用戶體驗, 網頁設計 日期: 2017-10-09

隨着網頁設計的趨勢不斷變化,網頁設計師經常會做一些令人驚歎的設計作品,而在這些非比尋常的設計中,大多數都會帶有滾動效果。滾動效果做得好,可提高訪客對網站的興趣;但是如果滾動效果不盡人意,就有可能會影響整個網站的用戶體驗。

盤點令人驚嘆的網頁設計滾動效果

優秀案例一:TOMORROW SLEEP

網址:https://www.tomorrowsleep.com/

網頁設計優秀案例:盤點令人驚嘆的滾動效果設計

TOMORROW SLEEP網站採用非常柔和的滾動瀏覽動效,設計師在設計網頁時,並沒有讓元素都默認隱去,而是讓絕大多數的圖片、背景已經裝飾元素都保持顯示,在滾動過程中,各種文本和CTA元素會隨着滾動逐步顯現,這樣的設計會更容易吸引用戶。

優秀案例二:TWIST

網址:https://twist.com/

網頁設計優秀案例:盤點令人驚嘆的滾動效果設計

和TOMORROW SLEEP網站不同,TWIST採用常見的滾動瀏覽動效:頁面原本空無一物,隨着加載和滾動,所有元素會逐步在頁面顯現。雖然有些元素會因為加載原因未必能在短時間內全部展現,但也不會讓用戶等太久。而與TOMORROW SLEEP網站的相同之處在於,TWIST的動效同樣保持着柔和自然的特點。

優秀案例三:DASHFLOW

網址:http://dashflow.co/

網頁設計優秀案例:盤點令人驚嘆的滾動效果設計

與上述網頁的動效設計相比,Dashflow所採用的動效設計是最常見的。整個頁面採用時下最流行的但也是佈局,動效大多是沿着橫向或者縱向運動。動效雖然簡單,但是通過合理的搭配,同樣能製造出流暢順滑,令人難忘的體驗。

優秀案例四:PROJECT FI

網址:https://fi.google.com/about/

網頁設計優秀案例:盤點令人驚嘆的滾動效果設計

Google Project Fi 的介紹頁面採用夢幻般的動效來強化整個體驗,隨着頁面的滾動,內容區塊會小幅度地加速運動,而其中所承載的圖標和扁平插畫,則以更快的速度,從下方向上浮現,創造出動態的視覺體驗。元素的展現速度並不慢,幅度也控制得恰到好處,速度差則將信息的層次感得到了強化。而更加有趣的是,當你滾動到頁面底部,再向上滾動的時候,你會發現動效的運動方向會正好相反。

雖然滾動瀏覽動效並不一定使用每個網站,但是一般使用此動效的網站都會有着更加有趣和優雅的體驗。所以在設計網頁的時候,不妨多留意一下優秀的網頁設計,這對你的創造靈感有很大的幫助。

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理