網頁設計案例分享:如何設計出動人的故事性網頁

2019 / 09 / 27
好的網頁設計,不僅僅要將公司和產品的重要信息一一羅列,還要利用好的「故事」,賦予網頁思想和靈活,讓用戶願意停留,產生共鳴,繼而選擇購買。

但……要設計出極富故事性和視覺效果的網頁設計並非易事,如果你有興趣嘗試這種故事性網頁設計,不妨看看這些大神們的網頁設計案例,說不定你能從中獲得不少啟示。

【故事性網頁設計案例分享】

小說閱讀類網頁:Pierre Herme Nicolas Buffe

storytelling-web-design


與其他小說類網頁不同,該網頁選取極具故事性和視覺效果進行展示。其逼真的背景場景、配樂、動畫以及交互設計等,都增加了網頁的代入感,讓用戶更容易投入故事的情節當中。

銀行金融類網頁:Mi Banxico

storytelling-web-design


相較於嚴肅乏味的傳統銀行金融類網頁,Mi Banxico其受眾目標主要以「學生」為主。因此在網頁設計上,不僅選擇非常童真的元素,動態視頻的選用、文本內容的設計以及交互動效的添加等,也極具創造性。

食品類網頁:The Side of Rice

storytelling-web-design

The Side of Rice以單頁網頁設計模式、水彩畫設計風格以及簡潔易懂文本解說,增強網頁的可讀性和可操作性;透過翻閱食譜書籍的展現方式,使整個交互設計都極具趣味性和代入感。

酒類網頁:Pacto Navio

storytelling-web-design


作為一款酒類響應式網頁設計,Pacto Navio採用橫向滾動設計向用戶介紹產品的相關歷史;吸睛動畫和背景音樂,也使整個敘述過程變得有趣且極賦可讀性。

文化教育類網頁:The View from Above

storytelling-web-design


當用戶打開The View from Above閱讀新聞資訊時,隨機可,可感受到鳥語花香、微風拂面的感覺,彷彿置身於真正的伊甸園,讓讀書看報從此不再枯燥!

工作室類網頁:Borgo Veneto

storytelling-web-design


Borgo Veneto通過左側的線性導航設計,向用戶逐一介紹工作室及其項目相關信息。結合極具視覺效果的交互設計,賦予網頁更多活力。黑白配色的選用,使整款設計時尚、高端而神秘。

【如何設計出動人的故事性網頁】

storytelling-web-design


看完介紹的故事性網頁設計案例後,相信不少朋友都想嘗試設計類似的網頁,但關於「如何設計出動人的故事性網頁」,還需要注意以下幾點:

1. 文章也好,網頁設計也好,都需要找到好的主題和切入點,選擇引人入勝的敘述方式,賦予網頁靈魂與內涵。

2. 故事講解很大程度需要背景氛圍的渲染,高清圖片、圖表,以及逼真音效的渲染,能更好營銷敘事背景和氛圍,增強其界面的代入感。

3. 靜態的故事敘述,結合適當動畫和交互設計,能賦予網頁生命力,讓用戶更好地代入網頁的角色中,增強界面的參與性。

4. 採用視覺滾動差設計,營造出動感又獨特的視覺體驗,促使用戶更加專註於網頁內容,提升整體的參與度。


香港網頁提供一站式數碼營商方案服務,包括、網頁設計、網絡推廣、網頁管理與寄存、系統開發及其它增值服務,全方位滿足客戶的業務需要,歡迎隨時聯絡我們,香港網頁是您開拓網路商機的最佳伙伴。

聯絡電話: 37499734
電郵地址: [email protected]
網址: www.hkweb.com.hk

更多文章