【干貨】25個故事性網頁設計,輕松講述網頁獨有

日期:2019-09-29 10:38作者:北大青鳥西安建大IT學院

摘要:25款最優故事化網頁設計,助你輕松掌握講故事秘訣 最佳故事性網頁設計 實例 1. Pierre Herme Nicolas Buffe 網頁類型 : 小說閱讀類網頁 作為一款真正講故事的小說類網頁設計案例,此網頁并
關鍵詞: 北大青鳥ui培訓

25款最優故事化網頁設計,助你輕松掌握“講故事”秘訣

最佳故事性網頁設計實例

 

1. Pierre Herme Nicolas Buffe

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 小說閱讀類網頁

作為一款真正講故事的小說類網頁設計案例,此網頁并未像同類網頁一般,直接通過小說書籍羅列的方式,供用戶選擇和查閱,而是選擇了另一種更具故事性和視覺效果的方式進行展示。

當用戶進入,故事的閱讀就已經開始。在一系列簡潔易懂的文字引導下,用戶不僅能夠層層深入地了解相關小說情節,還能夠實時與網頁互動,同小說主人公一起完成冒險。

其逼真的背景人物場景、配樂、動畫以及交互設計,也使整個小說閱讀過程更具代入感,讓用戶深陷其中,不能自拔。

 

2. Borgo Veneto

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 時尚工作室類網頁

本款視覺故事性網頁設計,通過左側的線性導航設計,向用戶逐一展示其工作室和以往設計項目的相關信息,娓娓道來。結合極具視覺效果的切換、交互以及鼠標懸浮動畫,動靜結合,賦予網頁活力。

黑白配色的選用,也使整款設計時尚、高端而神秘。

總之,小編是非常喜歡界面上懸浮展示的各類簡筆畫模特設計,優雅時尚、吸睛炫酷。你覺得呢?

 

3.Mi Banxico

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 銀行金融類網頁

相較于以往嚴肅正式的銀行金融類網頁設計,此款設計更像是一款售賣兒童類產品的網頁設計。無論是卡通人物繪畫、糖果配色以及圓潤字體的選擇,還是動態視頻的選用、文本內容的設計以及交互動效的添加等等,處處都充滿著童趣。

作為一款專為墨西哥銀行(一個專為學校教育類機構提供投資服務的銀行機構)而設計的網頁,設計師把握住學校學生這一受眾特色,選擇了充滿童趣的故事展開和呈現方式,極具創造性。

看多了嚴肅正式的網頁,此款五顏六色、童心滿滿的設計是不是更能引起你的注意呢?

 

4. Domaine Glinavos

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 酒類網頁

作為一款專為知名希臘葡萄酒品牌(Domaine Glinavos)而打造的在線網頁,本款設計選用了極其簡單自然的敘述方式展開。用戶輕松點擊,即可逐步了解必選該酒類品牌的8個理由。

無論是其直接展示原料種植、生產和加工場景的背景視頻,還是高清的產品圖片和文字介紹,都體現出其產品“自然、安全和放心”的制作和經營理念。

簡約的設計風格、恰到好處的微交互以及炫酷的交互動畫等等,都讓輕松脫穎而出。

是一款非常適合設計師學習和模仿,打造優質品牌或產品介紹類網頁的設計案例。

相關閱讀極簡網頁設計技巧,打造簡約之美

 

5.The Boat

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 小說類網頁

此款小說類網頁設計,從設計風格上更像是圖文漫畫類網頁。用戶進入網頁,即可根據圖文指導,一步步閱讀相關小說內容。搭配炫酷的背景音效、動畫以及交互設計,則更像是一款以水墨畫風格為基調的動畫游戲設計。

總之,是一款非常逼真、且代入感極強的小說類網頁設計。

 

6.Popitas

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 零食類網頁

如今,虛擬化的公仔或吉祥物設計,已然成為公司推廣產品、樹立企業產品形象、傳播公司企業文化的重要方式。

而本款網頁設計案例(一款主營爆米花之類零食產品的網頁),就選用了一個類似爆米花的吉祥物設計,作為其網頁產品介紹的主人公,依次介紹各類零食產品的同時,也向用戶介紹著一種休閑娛樂的生活方式。潛移默化中感染用戶,從而促使銷售達成。

此外,吉祥物本身豐富的面部表情設計、網站文本動畫的完美搭配以及橫向導航設計等等,都使整款設計生動而極具吸引力。

 

7.Bagigia

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 電商類網頁設計

Baggia是一款專業的皮包類電商網頁。不同于同類網頁通常選用對稱網格或卡片類設計,直接展示所有在線產品、相關價格和規格數據的方式。本款網頁設計,創造性地只選取了一款熱門商品進行展示。

每一個產品細節,從圖樣設計到拉鏈設計,從材料選取到設計師介紹等等,面面俱到。清晰地向用戶傳達著其企業理念:“為用戶,專注每個細節”。

底部搭配的拉鏈式導航設計,也是非常有趣了。

 

8.The Hybird Graphic Novel、

Pierre-herme-nicolas-buffe-storytelling-website-example-image.png

網頁類型: 小說類網頁

作為另一款小說類網頁設計案例,本款設計選用了非常炫酷的視覺滾動差設計來展現網頁相關信息。用戶簡單滾動鼠標,即可跟隨小說主人公一步步冒險、做任務。

一幕幕令人振奮的小說場景,搭配各類背景音效(例如狗吠聲和窗戶破碎的聲音以及尖銳的剎車聲等等)、切換動畫以及交互動效等,引人入勝,有效降低了網站跳出率。

此款設計算是小編本篇文章中展示的各類故事化網頁設計中,最炫酷的一個。不妨看看呢!







轉載請保留本文網址http://www.cpnradio.com/qqwd/ui/493.html
上一篇:做一次實實在在交互設計競品分析吧
下一篇:按鈕的禁用狀態 | 設計詳解
人妻 清高 无码 中文字幕