萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

20 個令人驚艷的產品宣傳網站:創意、交互與動效的極致演練

比起純商務站,設計師更青睞允許自由發揮的專案。產品宣傳網站擁有最大創意空間,是尋找設計靈感的寶庫。以下 20 個案例涵蓋精致產品頁、氛圍營造活動頁、創意爆棚個人站,無一非設計精美典範,更包含精心設計的交互與動效。若有時間,逐個把玩,定獲益匪淺!

DEATH IS COMING ——《權力遊戲》視差敘事

HBO 著名劇集宣傳頁。Sarit Evrani 用 Webydo 免費代碼構建,10 角色 10 種死亡方式以視差滾動呈現,沉浸感極強。

BATMAN: ARKHAM KNIGHT —— 多向探索的超級英雄體驗

非單純上下滑動,可左右探索。大量精美原畫容納於極具探索性的瀏覽視圖,蝙蝠車 3D 視圖頁面令人欲罷不能。

THE ART OF TEXTURE —— 藝術家故事的視覺拼貼

Tom Lawrence 個人故事展示拼貼藝術完成過程。向下滾動穿梭視頻、文字、圖片,全程參與度極高。

THE UNIVERSAL TYPEFACE —— BIC 打造的手寫字體探索場

可按性別、年齡、國家、慣用手篩選手寫字體,亦可上傳自己的字體。加載時音視頻互動答題,趣味性強。

THE STYLEPIT LOOKBOOK —— 街拍風格指南的交互購物體驗

支援自動/手動滾動速度控制,點擊十字標識查看產品圖片、價格、搭配,一鍵購買,交互動畫流暢。

FESTIVAL DES BATISSEURS —— 魁北克建造者節的扁平大氣風

扁平化設計承載大量圖片視頻,大氣值得借鑒。

NEWTON RUNNING —— 品牌個性與視差滾動的完美融合

個性化色調、幻燈片動畫、視差滾動三位一體,瀏覽愉悅感極強且不影響信息獲取。

FREE ICON FONT —— 顏值與干貨並存的資源站

華麗佈局、扁平設計、鮮艷色彩、簡約動畫,值得反復觀摩。

TRANSITIONS 1020 —— Nokia × Burton 跨界視覺敘事

用 Lumia 1020 拍攝照片作背景,結合不同地點的人與故事,引人入勝。

YMUNO SUMMER —— 緊湊佈局與創新導航的媒體整合

不同頁面交錯多種佈局方式,導航欄置於屏幕中間圖片下方,滾動時自然懸浮頂部。

THE BROOKLYN BREWERY MASH —— 旅遊站的視覺衝擊與動效誘惑

重要信息優先呈現,向下滾動見新鮮活動,動效極強吸睛。紋理與色彩搭配極美。

AYR SS14 EDITION —— 高端女裝春夏新品的幻燈片美學

每張圖配說明、門店路線、促銷代碼,幻燈片形式極合理,購買便利度高。

DOCK BY CRESTYL —— 復古色調下的 3D 動畫驚艷

整體復古色調,圖片與頁面間 3D 動畫驚艷,導航動畫過渡自然優雅。

AETHER CONE —— 高大上的極致:大圖、纖細字體、精準佈局

滾動停頓感明顯,體驗優異,瞬間感知高端質感。

BOSTON HOOPS —— 籃球穿越時空的趣味地圖

John Boilard 設計,籃球穿越各種籃筐,每筐代表一地點,點擊跳轉 Google Maps,妙趣橫生。

ART OF THE CAP —— 限量奧運泳帽背後的運動員故事

多媒體形式展現每頂泳帽來源、設計、藝術家與運動員想法。故事與設計結合力量驚人。

ESSENTIALS MIJLO

17

這 20 個案例證明:產品宣傳網站是創意、交互、動效綜合能力的試金石。設計師應跳出模板思維,用敘事性視覺語言講好產品故事。

copyright © 萬盛學電腦網 all rights reserved