首頁部落格創意滿分的網頁設計視覺效果

Ryan

Sep 09, 2016

讓公司平均年齡上漲的宅男，經營過動漫社團、當過電玩雜誌特約作者。興趣是電競與科技，關注新趨勢購物，尤其是冷門商品、或尚未上市的群眾募資商品。網路行銷一做就是十幾年，認為這個業界需要更開放交流，才能成長與突破。

創意滿分的網頁設計視覺效果

已經厭倦了一成不變的網頁設計視覺效果了嗎？其實歐美的許多產業與企業，利用了網站的特效與視覺效果，大膽的打造出企業求新、求變、熱情、創新的效果，建立企業年輕的印象。

也許以下的特效您覺得太過花俏、或是特異獨行覺得不適合用於企業，但其實以下的範例不少源自於跨國品牌，因此不妨以開放的態度，參觀以下網站的視覺之美！

1. 垂直視差效果

http://www.nikebetterworld.com/
想要呈現出簡報的視覺效果，但是又不希望讓觀眾畫面有被切斷的感覺，這時使用了垂直視差的製作技術，就能夠產生出相當好的網站視覺效果。以這一個範例的Nike網站來說，用大量的圖示呈現了品牌的精神，而並非落落長的文字來呈現。

由於技術並不困難，因此這樣的類似技術用於目前許多主流的網站，但全畫面的垂直視差效果卻十分的罕見，不過視覺效果卻物超所值。

2. 滑鼠拖曳特效

http://yessbmx.com/
當滑鼠移動主視覺畫面時，你會希望看到什麼資訊呢？聰明的視覺設計者，會利用捲軸移動層次加上速度差，打造出如同3D電影的視覺感受。不過這樣的設計會耗用大量的網路資源，對於處理器速度不足的小筆記電腦或是平板電腦，容易產生延遲問題。

為視覺的效果十分的戲劇化，因此經常用於娛樂產業，例如：電影、影集、運動、賽事等網站。

3. 滑動的畫面

https://www.sponstour.com/
當你的網站主題眾多，一個頁面無法呈現時，你會使用傳統的頁面點擊轉連結的方式？還是精彩的全畫面捲動效果！這個範例網站透過滑鼠的點擊，整個網頁的畫面會滑動到一個全新的網頁，在視覺上可以說搶盡了風采。

4. 科拿米密碼

http://philipandrews.org/
這是一個源自於電玩的知名秘技：只要輸入了：上上下下左右左右BA之後，遊戲的玩家可以作弊取得破關的法寶。

現在也有網頁公司，把這樣的巧思設計於自家的活動網頁上，只要輸入了密碼之後，就會出現一想不到的畫面。這樣的設計大多會用於電玩的產業網站中，不過據聞Google以及某些社群網站，將這樣的秘技暗藏於網站中，引發起網友瘋狂的轉載，達到另類的行銷效果。

5. 飄出的文字

http://www.designflavr.com/
大概各位已經看過無數次這樣的效果：將滑鼠移動到圖片，就會浮出文字介紹，雖然十分的平淡，但是卻充滿的動態的力量與美感，是網頁設計師最愛使用的視覺設計技巧之一，經常出現於旅館、新聞、自然、生態、教育等類型網站。

6. 讀取進度

http://www.vivascom.com.br/
這也是十分普及的網頁設計技術，大多用於Flash等大檔案讀取網頁資料的用途，不過善於使用創意點子的設計師，絕對不會讓這一段等待的時間，讓觀眾看著枯燥的畫面。

7. 捲軸畫面

http://www.sapphiresound.ca/
如果你希望可以在一個網頁內塞入許多文字的內容，但又不希望整個畫面捲動，那麼這樣的特效會非常的適合您，您可以到這個網站的關於我們的網頁中，體驗一下這種文字效果。

不過這樣的設計字體較小，也無法透過放大的功能來改變字體的大小，更糟糕的是對於平板電腦與智慧手機無法相容。一般的視覺特效或許無須介意智慧手機無法正確呈現，但如果捲軸的文字為重要的公司資訊，那可就不建議了。