一個網頁最先吸引人的地方必定是它的設計,不同的設計帶來不一樣的視覺效果( Visual Effect)。精美而引人入勝的網頁設計 (Website Design) 才能讓到訪者對你的品牌留下深刻的印象,良好的網頁設計亦能增加到訪者的參與度和網頁轉化率。效果理想的話,更會有回頭客的出現。
網頁設計效果
今次將介紹數種常見的網頁Visual Effect,激發網頁設計的靈感,幫助你打造有質素、有品味的專屬網頁,為你的潛在客群留下深刻的印象。
1.動態搜尋欄(Search Bar)
少即是多(Less is more)是現今審美的普世價值,極簡主義通常會刪除多餘的元素,並在基本結構上擴大必要的視覺效果,這樣人們就可以在視覺效果( Visual Effect)被吸引的同時看到網頁的必要功能,而無需額外的文字、動畫和附加效果。
這時,Search Bar就起了作用。只需在動態搜尋欄搜尋你想查看的資訊,便能快捷地獲取所需資訊。有些網頁還會在Search Bar下方加入「熱門搜尋結果」,豐富網頁設計及功能。
2.懸停顯示(Hover Reveal)
懸停顯示能豐富網頁設計的視覺效果,當滑鼠移動到附有懸停顯示的圖片或文字上,就會出現新的圖像或文字設計,讓網頁設計的整體效果錦上添花。
當然網頁設計者都可以透過懸停顯示的功能來設計一些獨特的品牌故事,讓網頁設計變得更有層次及深度。隨了能加深到訪者的印象之外,都能提升用戶體驗。
3.陰影(Shading)
適量的陰影能打造立體感,讓物件變得更真實,陰影同時都能突出物件的重要性。在網頁設計中,都能為網頁內的各種素材添加陰影。陰影的作用十分微妙,細微的陰影就能突出重要的部份,讓網頁整體設計更有深度,亦能打造良好的視覺效果( Visual Effect)。
4.回到頂端(Back To Top)
現今,不少商家都會選擇寫單頁式網站(One-Page Website) ,原因就是方便快捷,到訪者只需向下滾動就能瀏覽整個網站。但當你想重新查閱頂部內容時,就必需要慢慢從下到上滾動回去,這操作絕對會讓到訪者感到不耐煩。所以 “Back to Top” 功能幫到你。這個簡單的按鈕可以簡化用戶的旅程之外,亦可以改善用戶體驗。
5. SVG動畫
很多時候,設計人員會用圖標替代文字來幫助用戶消化信息, 而當你在網站添加動畫時,的確能吸引客戶。網頁設計的許多部分都可以加入一些動畫,如菜單、反饋等。這些動畫會為用戶帶來意想不到的互動體驗和視覺效果。
6. 動態圖像 (Animation)
動畫與動態圖像不同,動態圖像就像一段短片那樣是有內容的,並不單單是會動的圖像。動態圖像多數是融入在網站的背景設計中,而網站的移動性能做到與用戶間的互動,同時都大大提升視覺效果和吸引力。
7. 畫廊或幻燈片放映 (Banner Slider)
幻燈片放映在許多網站上都很流行,它們可以自動播放不同的圖像,用戶不需操作亦能欣賞各式各樣的圖片,有效改善用戶體驗。不過,必須注意的是圖像數量及其播放速度。要留意的是播放速度至關重要,如播放速度太慢就有可能讓用戶感到不耐煩,影響網站的用戶體驗。
8. 具風格的字體
有些網站會包含眾多的內容,冗長乏味的內容欠缺吸引力,如果想要留住用戶的話,就要在網頁設計上花點心思啦!網站設計師可以用大膽風格的字體突出重點標題,這個做法就能直接吸引用戶的目光!
網頁設計的本質是提高用戶參與度,延長停留的時間,增加銷售機會。網頁設計最終得目的不僅是提供一個吸引用戶的演示稿,而且還要創建一個具品味、美感的場所。良好的網頁設計增加了與用戶間的互動,也提升了網站的Visual Effect與用戶體驗。