.png)
很多朋友喜歡看外國電視劇時，英劇美劇都會接觸到，但如果大家有細心地留意英美劇的片頭設計，會發現這些設計真的令人嘆為觀止。每套劇的開頭，就像電影海報一樣深深地吸引着觀眾，讓人瞬間就走進劇集所創造的世界。
但大家有沒有想過，其實從英劇美劇中同樣學習到網頁設計的手法，尤其是有關banner設計。想知道如何「追個劇也可以學會網頁設計」，跟着香港網頁集團一起了解下!
EMMYS最佳片頭設計獎
片頭好與壞，不僅是抓住觀眾目光的關鍵，更是讓關注對劇情產生想像，激起追劇的慾望。優秀片頭設計，不僅是劇集的點睛之筆，更是價值非凡的設計學習素材。
以往片頭只是將劇情中的片段簡單地進行拼接，缺乏劇集的生命力，觀眾也因此直接忽略片頭介紹。或許製片商逐漸發覺片頭的重要性，片頭也從簡單的片段拼接，逐漸延伸到提取劇情的精華，利用各種呈現手法重新建模，讓片頭更加吸引，更具藝術感。
另一方面，由於日益精良的片頭製作越來越受到觀眾的喜愛，主要針對影視劇集的EMMYS，將原本的「最佳平面設計獎」改為「最佳片頭設計將」，並從1997年開始將其設置為常設獎項。本次文章，將從幾部大家所熟知的英美劇片頭進行拆解。雖然這些劇集並不全都是大獎得主，但各自都有其值得學習借鑒的地方。
一、動畫篇
● 平面插畫風——《The Durrells》
網頁設計技巧
作為一部慢調子的暖心治癒小品，清新復古的平面風插畫搭配清爽的配色，用來製作《The Durrells》的片頭就再適合不過。動畫鏡頭的運用與精心設計的轉場，完美地描繪出美麗的希臘風光與美好愜意的田園生活，和劇集自身一樣，自愈力超強!
● 8bit像素風動畫——《The IT Crowd》
網頁設計技巧
《The IT Crowd》是一部可以媲美美劇《The Big Bang Theory》的英式喜劇。《The IT Crowd》的片頭設計師使用8bit像素動畫的形式，與它的劇情非常符合。無論是如電腦開機音樂般魔性的片頭音樂，亦或是非常復古的8bit像素動畫所展現的Geek相得益彰，彷彿將我們帶入一個由虛擬數據組成的互聯網世界。
● 復古拼貼風插畫動畫——《Mad Men》
講述上世紀六十年代美國廣告業黃金時代的年代劇《Mad Men》可謂是廣告人的必看劇集，而且《Mad Men》更多次獲得EMMYS最佳劇集，甚至在今年英國《衛報》的「21世紀100部最佳電視劇」中獲得第3位。
網頁設計技巧
片頭動畫一開始是主角Draper步入辦公室後，原本身處一片光明的地方，四周開始出現崩塌，自己也墜落到高樓大廈林立的廣告世界。設計師利用Draper墜落的鏡頭，暗喻Draper起起伏伏的人生歷程，也可以理解為劇情發展每次都是由逐漸絕望到峰迴路轉的過程。而復古拼貼風格的動畫以及充滿想像力的場景設計，不僅符合「廣告圈」追求創意的特點，也非常適合設計師去參考和借鑒。
● 剪紙插畫風動畫——《Feud: Bette and Joan》
網頁設計技巧
《Feud: Bette and Joan》使用剪影插畫的手法來做片頭動畫，十分便於展現(Bette 和Joan把對方當作一生之敵的女演員明爭暗鬥)的故事情節。此外《Feud: Bette and Joan》的剪影片頭還隱喻了故事中不少耐人尋味的情節，如被資本黑手操控如牽線木偶般提起的兩位女演員的剪影動畫，隱喻「演員的命運從來都不是掌握在自己手中」;又如女演員將對方退下Hollywood的深淵，隱喻着娛樂圈中明爭暗鬥的情形。
● 水墨動畫——《Marco Polo》
可能這部劇存在東西方文化理解上的差異，所以劇集評分並不高，並受到很多非議，但其美輪美奐的水墨動畫片頭卻受到外界一致的好評。
網頁設計技巧
片頭動畫以代表東方文化的水墨畫作為視覺媒介，向觀眾展現出一幕幕讓人震撼的場景，同時也將劇集中所講述的貪婪、背叛、權謀競爭等利用水墨畫一一呈現。悠揚激昂的片頭音樂結合大氣磅礴的潑墨動畫，極具視覺美感。
● 2.5D風動畫——《Silicon Valley》
網頁設計技巧
《Silicon Valley》的動畫片頭設計是借用3D建模技術，製作的 2.5D風動畫片頭。看過這部劇的朋友可能會發現，這部劇每一季的片頭裏面暗藏着很多驚喜細節，如片頭會出現某些企業的Logo或APP圖標，狀態與劇集上映時相對應。它們的命運和變化也會藏在片頭當中，增加這部劇的真實性和戲劇性，同時，也增加了這部科技劇集的趣味性。
● 手稿與影像結合動畫——《Da Vinci\’s Demons》
網頁設計技巧
《Da Vinci\’s Demons》是結合達芬奇本人的手稿和劇集中的影像合而為一，製作成動畫片頭。雖然這部劇情飽受爭議，奇幻構想與真實歷史重合的片頭，卻獲得非常一致的好評。
● 綜合視覺動畫——《Manhattan》
網頁設計技巧
《Manhattan》的片頭設計，巧妙地借用設計圖紙、演算草稿、絕密檔案等信息量，將故事背景和劇情巧妙地呈現出來。片頭結尾使用人模仿原子呈現核裂變和原子彈爆炸的場景，隱喻上乘又高級且富有時代感，點題非常到位。
二、3D篇
● 冰冷的賽博朋克感——《Westworld》
網頁設計技巧
《Westworld》不僅劇情細緻考究，片頭設計也毫不遜色。片頭透過3D建模動態演示機器製造機械人的過程，模擬人的肢體結構等，都非常真實細緻。片頭結尾處隱晦地致敬了《攻殼機動隊》中草薙素子誕生的場景，以賽博朋克風格，講述「人與機器之間的關係」，在精神內核上產生了呼應。
● 強反差的膠片光影——《The Man in the High Castle》
網頁設計技巧
這部美劇的片頭使用3D建模渲染，製作成老實膠片投影電影的光影效果。整個片頭被細緻渲染出原本應當成為戰勝國的美國，被日德兩個瓜分的過程。殘酷的局面，配上經典柔美的《雪絨花》唱腔，形成強烈的對比，強化了緊張壓抑的感覺。
● 奇幻的粒子特效——《His Dark Materials: The Golden Compass》
《His Dark Materials: The Golden Compass》是改編經典小說《His Dark Materials》三部曲的美劇，整部作品來自聖經和《失樂園》中的諸多隱喻，並混合著蒸汽朋克和奇幻元素。
網頁設計技巧
其片頭視覺設計也沒有採用寫實的設計，而是圍繞「塵埃」大玩粒子特效，無論是人物角色、精靈，亦或是神秘的黃金羅盤，都使用粒子特效呈現，凸顯作品中那股神秘的感覺。
● 迷離冷硬的科技感——《Fringe》
網頁設計技巧
謎團是《Fringe》最為核心的元素，而解密則是其劇集的主題，這在《Fringe》的片頭中就有體現。片頭沒有任何一個角色出現，全都是奇異的符號，(包括每集的名字都會有相應的特殊符號)穿插在劇集的轉場當中。如果你是偵探迷，就會發現整部劇集裏面都隱藏着很多有趣的秘密。
● 哲學德味的視覺藝術——《Counterpart》
網頁設計技巧
這部劇的片頭設計同樣精妙而令人心醉，使用3D建模動畫呈現，整體質感非常包豪斯，同時帶有奇妙哲學思考和二元對立的思想屬性。表現的介質就是我們非常熟悉的「圍棋」，劇情詭譎的局面如同棋局，兩個世界的人則彷彿是黑白棋子，涇渭分明，讓觀眾一眼就get到其中隱喻。在視覺美學中，東西方文化屬性又和諧地融為一體，非常精巧且協調。
三、現實篇
● 屬於愛情的剪影——《Modern love》
網頁設計技巧
《Modern love》除了擁有打動人心的劇情，它的片頭同樣讓人印象深刻。一張張不同場合下的情侶們親吻擁抱的照片，伴隨着輕快的片頭曲。這一切都與劇情所表達的宗旨非常一致。
● 古典優雅的玄機——《Downton Abbey》
網頁設計技巧
片頭雖然並沒有直接出現人物或劇情介紹，卻運用一組長鏡頭將喬治五世時期英國上層貴族的精緻生活一一呈現在我們眼前，伴隨充滿英倫風情的古典弦樂，彷彿暗喻着這看似寧靜的城堡卻暗藏玄機。而一個家族的興衰成敗也在這首主題曲中展現得淋漓盡致。
● 偵探的上帝視覺——《Sherlock》
網頁設計技巧
片頭運用「移軸攝影」的手法將都市遠景的宏觀世界，逐漸移向顯微鏡下的微觀世界結束，宛如查案中抽絲剝繭的偵辦過程。各種案件相關線索片段與車水馬龍的都市場景，都被蒙太奇處理，營造出符合偵探片的神秘感與喜劇感。
● 精緻的成長嬗變——《Great Expectations》
網頁設計技巧
片頭通過多個角度及大量局部特色，完整地呈現蝴蝶破繭成蝶的全過程，用意象電梯，表達出主人公成長蛻變的主題。片頭的視覺設計充滿優雅的氣質與讓人驚艷的美感，簡單卻極具視覺張力。
● 閃現的森冷與驚悚——《Mindhunter》
網頁設計技巧
片頭主要畫面以探員組裝經典的開盤式錄像機的過程，質感極強。為了渲染影片的驚悚懸疑的分為，畫面不斷閃現犯罪現場，配上略顯詭譎的配樂，讓人知道它的存在，卻無法抓得住，這種感覺非常到位。
● 老照片里的惶然躁鬱——《Homeland》
網頁設計技巧
《Homeland》的片頭透過晃動、翻轉、負片甚至錯位的視頻效果，搭配低飽和度甚至黑白的畫面，以及冷感的音樂，營造出極其強烈的不安感和疏離感，也隱喻着主人公起伏波動的精神狀態，以及波譎雲詭的劇情走向。
● 宏大敘事下的權謀詭計——《House of Cards》
網頁設計技巧
《House of Cards》的片頭剪輯素材大多是華盛頓街頭的景象，加速播放的鏡頭，光影變化，暗示着白宮裡的人不斷變化，但這座建築與政治鬥爭確實白宮裡永遠不變的東西。
此外，《House of Cards》的片頭開始有更為清晰的時間感，從昂揚變為深沉，暗喻白宮的政治鬥爭即將開始，為陰謀設好舞台，給詭計一片天地，
● 推向極致的雙重曝光——《True Detective》
網頁設計技巧
《True Detective》借用大量的雙重曝光的影響技術，將當前角色和場景重合、疊加，也將角色的情緒、精神和隱喻都藏在這些疊加的場景和姿態當中，悄無聲息地呈現，以一種緩慢瀰漫的氛圍，堅定地包圍每一個觀者。
很多劇集的優秀片頭設計給我們帶來震撼的同時，也給我們帶來不少設計靈感。而事實上很多設計靈感都是源自生活，因此各位設計師不妨從生活發掘美，創造更多設計靈感，給我們帶來更多優秀的設計。
