為你的網頁設計加個啟用動畫

這就是宇宙第一IDE Visual Studio的啟動畫面,學名叫Splash Screen(或者Splash Window)。同樣,Javar們一定對Eclipse的啟動畫面不會陌生。不只是IDE,很多桌面程式都會有這個Splash 視窗,在程式進行初始化時顯示。

這方面做得最贊的非Adobe旗下的設計類軟體莫數了,畢竟是搞藝術出身的啊。博主從PS 8.0用起,每次升級新版本激動的不是新功能,首先是激動新的啟動畫面。下圖是最新CC版PS的Splash Screen。視覺效果震撼的一逼。。張牙舞爪的,無出其右。

啟動畫面也不是桌面程式所獨有,完全可以在我們的網頁設計中實現。並且隨著時間的推移,現在網頁設計應用越來紛繁複雜,載入也是很費時的,一個Splash Screen就顯得很有必要了不是麼。
比如Google的Gmail,要是全屏運行,就一個原生App的感覺。
展示靜態圖片還好,如果你的啟動介面要顯示程式進行的進度的話,一個很棘手的問題來了,如何獲取進度。經過大量的調研(寫過論文的同學都知道,類似'經過大量實驗表明…'的表述其實很有可能是只做了一次實驗就開始寫結論了)我發現,沒有辦法獲取一個網頁設計頁面的實際下載進度!當然,不排除我孤陋寡聞,如果你知道這樣的方法請告訴我。
對於網頁設計頁面中的非同步操作,倒是可以監聽到進度的。但也得分情況。HTML5規範中,Ajax多了個progress事件,通過它可以獲取非同步操作的完成情況,但前提是event.lengthComputable屬性為真是才管用。也就是說有些請求的結果我們是可以知道大小的,但更多時候伺服器返回的內容的大小是不確定的,這種情況下即使你監聽了progress事件也無法獲取真實的操作進度。
既然如此,那我們就不要那麼死版,具體進行到百分之幾意義不大,我們的目的是提高用戶體驗,在用戶等待的這個過程中有東西可看,或者有一個活著的會動的東西表明程式還在跑而不是出錯了卡死了。所以給用戶展示一個會動的進度條即可(我相信大多數帶進度條的程式也是這麼幹的),直到網頁設計頁面全部載入完成時把進度條拖到100%。
轉貼來源:網頁設計知識分享
文獻參考:
1.李青蓉等編著.(1998).人機介面設計,台北縣:空大。
2.邱柏清.(2004).網頁介面愉悅行之研究,國立台灣科技大學設計研究所碩士論文。
3.許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網頁設計首頁為例,第六屆設計學術研究果研討會論文集。
相關文章
創新網頁設計的架構及突破規則的冒險「網頁設計需求」與「網頁設計市場」的差別網頁設計APP的一些特點解釋網頁設計的登錄鈕應用網頁設計常犯的幾種錯誤寫法
最新文章
HVACKer:入侵隔離網絡的新型攻擊技術還有什麼不會被入侵?路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌,最狂的是一家估值 124 億美的數據分析新創!【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala,下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了