程序化陳列館
以程序化著色器鋪滿首屏的電影感產品陳列館:大字索引懸停即可顯示預覽,點擊進入獨立詳情頁,視覺隨捲動連續變化。複製提示詞,一鍵生成同款陳列館網頁。
Loading preview...
2565 views
從這段提示詞開始
生成由著色器驅動、具電影感的產品陳列館
為虛構電動車品牌「極境汽車 Nexus Automotive」打造一個具電影感的產品陳列館網站。首屏採用全螢幕程序化著色器背景:以片元著色器即時生成的流動光影作為主視覺,上方疊放「行於 / 無界」兩行大型襯線字與一句副標題,向下捲動後進入品牌宣言段落。核心是一個車型索引:旗艦轎車、旅行 SUV、高性能超跑、都會小車四款車型以超大字級逐行垂直排列,懸停於某一行時,在側邊顯示相應車型的大圖,並壓暗其餘項目;點擊後進入獨立詳情頁——每款車皆附一段定位引言與三組圖文篇章(造型、座艙、性能),並可返回列表。另加入品牌體驗影片區與聯絡頁尾(體驗中心地址與營業時間)。整體採近黑白色調,襯線標題搭配等寬字體標註,捲動流暢,轉場使用淡入與輕微視差效果。交付可直接開啟的靜態網站,捲動、懸停顯影與頁面跳轉皆可實際使用。 將陳列內容換成一個精品咖啡品牌:五條產品線對應五款不同產地的咖啡豆,著色器主視覺改為暖棕色調的熱氣與咖啡豆粒子,詳情頁補充產地、處理法、風味與沖煮建議。
為虛構電動車品牌「極境汽車 Nexus Automotive」打造一個具電影感的產品陳列館網站。首屏採用全螢幕程序化著色器背景:以片元著色器即時生成的流動光影作為主視覺,上方疊放「行於 / 無界」兩行大型襯線字與一句副標題,向下捲動後進入品牌宣言段落。核心是一個車型索引:旗艦轎車、旅行 SUV、高性能超跑、都會小車四款車型以超大字級逐行垂直排列,懸停於某一行時,在側邊顯示相應車型的大圖,並壓暗其餘項目;點擊後進入獨立詳情頁——每款車皆附一段定位引言與三組圖文篇章(造型、座艙、性能),並可返回列表。另加入品牌體驗影片區與聯絡頁尾(體驗中心地址與營業時間)。整體採近黑白色調,襯線標題搭配等寬字體標註,捲動流暢,轉場使用淡入與輕微視差效果。交付可直接開啟的靜態網站,捲動、懸停顯影與頁面跳轉皆可實際使用。 在每個詳情頁底部加入預約諮詢表單,包含姓名、電子郵件與留言欄位,送出後顯示成功狀態;導覽列新增固定顯示的「預約」按鈕,點擊後平滑捲動至表單。
為虛構電動車品牌「極境汽車 Nexus Automotive」打造一個具電影感的產品陳列館網站。首屏採用全螢幕程序化著色器背景:以片元著色器即時生成的流動光影作為主視覺,上方疊放「行於 / 無界」兩行大型襯線字與一句副標題,向下捲動後進入品牌宣言段落。核心是一個車型索引:旗艦轎車、旅行 SUV、高性能超跑、都會小車四款車型以超大字級逐行垂直排列,懸停於某一行時,在側邊顯示相應車型的大圖,並壓暗其餘項目;點擊後進入獨立詳情頁——每款車皆附一段定位引言與三組圖文篇章(造型、座艙、性能),並可返回列表。另加入品牌體驗影片區與聯絡頁尾(體驗中心地址與營業時間)。整體採近黑白色調,襯線標題搭配等寬字體標註,捲動流暢,轉場使用淡入與輕微視差效果。交付可直接開啟的靜態網站,捲動、懸停顯影與頁面跳轉皆可實際使用。 將全站文案改為英文,包括大字索引、詳情頁內文與導覽,依英文重新調整字級與行距,著色器視覺與懸停互動維持不變。
