本文件收錄業主提供的「珍珠海岸國際音樂節」官方延伸視覺,並以四個核心單體——波浪、飛機、太陽、人魚尾——示範它們如何被帶進官網的載入動畫、區塊分隔、背景紋理與吉祥物動態。下方所有示意皆為可即時互動的真實網頁元件。
業主提供的延伸視覺由兩部分組成:上排為五款主視覺鎖定圖(lockup),下排為五個品牌色塊,各自承載一個圖形單體。我們把這些單體抽出,作為官網的設計語彙。
FILE — 珍珠海岸音樂節_延伸.svg / 已存入 assets/brand-extension-official.svg
取自延伸視覺橘色色塊。兩道圓頭緞帶是整套視覺最具識別度的單體,象徵聲音上岸、海潮起伏。
波浪是音樂節「聲音上岸」概念的具象。它的線條已內建節奏感,因此最適合用在會動與分隔的場景:載入時由下而上湧入、段落之間作為水岸線、以及大面積平鋪成背景織理。
.wave-bottom 已沿用此曲線。取自延伸視覺粉色色塊。呼應桃園「機場城市」與國際連線的意象,是移動感最強的單體。
飛機代表桃園與世界連線。它天生有方向與速度,最適合做橫向穿越的動態點綴——載入時劃過天空、滑鼠停留時微微傾斜、或作為回到頂端、外部連結的互動圖示。
取自延伸視覺棕色色塊。最簡單卻最有力的單體,是夏日與夕陽的核心,也是版面上的呼吸點。
太陽是一個純粹的圓。它能當載入時的主角(緩緩升起)、背景上的大色塊(半遮於段落邊緣),或縮小平鋪成點點織理。圓形也呼應延伸視覺裡的圓形徽章。
取自延伸視覺米色色塊,也是主視覺裡那隻大美人魚的尾鰭。全套視覺唯一的「角色」單體,最適合當吉祥物,替畫面注入生命感。
不同於波浪、飛機、太陽這些「景」,人魚尾是一個角色。它不該只是靜靜躺著——而是會擺動、會躲進浪裡、會探頭跟你打招呼。把它設計成有動態的吉祥物,是這套延伸視覺最有記憶點的一手。
三個單體在官網中的落點一覽。整合後皆可由官網右上角 Tweaks 面板開關動態與裝飾密度。