PEARL COAST · 延伸視覺應用
BRAND EXTENSION → WEB ← 回到官網
Brand Extension Application Guide

延伸視覺
應用指南業主提供的官方延伸視覺 / 拆解每個單體在官網中的應用方式

本文件收錄業主提供的「珍珠海岸國際音樂節」官方延伸視覺,並以四個核心單體——波浪、飛機、太陽、人魚尾——示範它們如何被帶進官網的載入動畫、區塊分隔、背景紋理與吉祥物動態。下方所有示意皆為可即時互動的真實網頁元件。

00 — SOURCE

官方延伸視覺The Source Artwork

業主提供的延伸視覺由兩部分組成:上排為五款主視覺鎖定圖(lockup),下排為五個品牌色塊,各自承載一個圖形單體。我們把這些單體抽出,作為官網的設計語彙。

珍珠海岸國際音樂節官方延伸視覺

FILE — 珍珠海岸音樂節_延伸.svg / 已存入 assets/brand-extension-official.svg

ORANGE#F89041
主強調・夕陽
BLUE#4896F3
海洋・波浪
PINK#F4A1C2
珍珠・人魚
CREAM#FFF5E9
底色・留白
BROWN#95502B
山丘・線條
波浪 WavesSET OF TWO RIBBONS · #4896F3

取自延伸視覺橘色色塊。兩道圓頭緞帶是整套視覺最具識別度的單體,象徵聲音上岸、海潮起伏。

01 — UNIT

波浪From Sound to Shore

波浪是音樂節「聲音上岸」概念的具象。它的線條已內建節奏感,因此最適合用在會動分隔的場景:載入時由下而上湧入、段落之間作為水岸線、以及大面積平鋪成背景織理。

A區塊分隔・水岸線
官網 — section ↔ section
關於音樂節 About
演出陣容 Lineup
把單體放大成滿版水岸線,替每個段落收尾。每段用不同品牌色填色,形成像延伸視覺一樣的色塊堆疊。.wave-bottom 已沿用此曲線。
B背景織理・平鋪
官網 — section 底圖
repeat · 8% 透明度疊在色塊上
波浪縮小後平鋪成低調織理,鋪在純色區塊上增加層次,不搶內容。色塊+織理=延伸視覺的色票語言。
飛機 AirplaneTOP-DOWN SILHOUETTE

取自延伸視覺粉色色塊。呼應桃園「機場城市」與國際連線的意象,是移動感最強的單體。

02 — UNIT

飛機World Connected

飛機代表桃園與世界連線。它天生有方向與速度,最適合做橫向穿越的動態點綴——載入時劃過天空、滑鼠停留時微微傾斜、或作為回到頂端、外部連結的互動圖示。

A載入動畫・劃過天空
官網 — 首次載入 overlay
SOUND COMES ASHORE
太陽升起、飛機劃過、波浪湧上——三個單體合演 2.8 秒的開場。
B互動點綴・hover 傾斜
官網 — 裝飾 / 圖示
把指標移到飛機上 → 抬頭起飛。同一手法用在票券卡、市集卡的角落裝飾,滑過即活起來。
太陽 SunSOLID DISC · #F89041

取自延伸視覺棕色色塊。最簡單卻最有力的單體,是夏日與夕陽的核心,也是版面上的呼吸點。

03 — UNIT

太陽Endless Summer

太陽是一個純粹的圓。它能當載入時的主角(緩緩升起)、背景上的大色塊(半遮於段落邊緣),或縮小平鋪成點點織理。圓形也呼應延伸視覺裡的圓形徽章。

A背景色塊・半沉夕陽
官網 — section 角落
大圓沉在段落邊緣
超出畫面的大圓在深色區塊(如 footer、CTA)邊緣製造夕陽感,呼應延伸視覺棕色塊上的橘色太陽。
B點點織理・平鋪
官網 — 純色區塊底圖
小圓平鋪 · polka 質感
縮小的太陽平鋪成圓點織理,為大面積純色帶來復古海灘的顆粒感。
人魚尾 TailTHE MASCOT · #F4A1C2

取自延伸視覺米色色塊,也是主視覺裡那隻大美人魚的尾鰭。全套視覺唯一的「角色」單體,最適合當吉祥物,替畫面注入生命感。

04 — UNIT

人魚尾The Living Mascot

不同於波浪、飛機、太陽這些「景」,人魚尾是一個角色。它不該只是靜靜躺著——而是會擺動、會躲進浪裡、會探頭跟你打招呼。把它設計成有動態的吉祥物,是這套延伸視覺最有記憶點的一手。

A擺動吉祥物・idle 擺尾
官網 — 角落 / 回到頂端
以尾鰭底部為支點來回擺動,像在水裡輕輕打水。可固定在頁面角落作為吉祥物,或作為「回到頂端」按鈕——滑過時擺得更歡快。
B潛入浪裡・section 揭示
官網 — 區塊轉場
尾鰭從浪裡探出、甩兩下、再潛回水面下——點綴在區塊轉場或滾動揭示時出現。
05 — MAP

單體 × 應用對照Where Each Unit Lives

三個單體在官網中的落點一覽。整合後皆可由官網右上角 Tweaks 面板開關動態與裝飾密度。

單體
應用場景
手法
波浪
區塊分隔 / 背景織理 / 載入收尾
滿版水岸線曲線;縮小平鋪成低透明度織理;載入時由下湧上。
飛機
載入動畫 / hover 點綴 / 圖示
橫向劃過天空;指標停留時抬頭起飛;卡片角落裝飾。
太陽
載入主角 / 背景大色塊 / 圓點織理
緩緩升起;半沉於深色段落邊緣;小圓平鋪。
人魚尾
吉祥物 / 回到頂端 / section 揭示
底部支點 idle 擺尾;潛入浪裡再探出;滑過時擺得更歡快。