在廣告圈里，如雷鋒般奔波賣命的乙方，只顧著建設(shè)客戶的品牌形象，卻很少認(rèn)真扮靚自己，甚至連本司的官網(wǎng)建設(shè)也很少放在心上。而若是談到做官網(wǎng)，大家往往會覺得沒有太大的必要：

現(xiàn)在是豎屏?xí)r代，大家都刷手機(jī)、看雙微，誰愿意特地打開電腦登網(wǎng)頁，我司有公眾號還不行嗎？

這說對了，沒多少人愿意“特地”來官網(wǎng)到訪——除非他們對你真的很感興趣。

這些人最有可能是：求職者、競爭對手和潛在客戶，是一些不了解你卻想了解你的人。他們或許被你的某個(gè)作品打動(dòng)，希望能進(jìn)一步了解關(guān)于作品、理念和公司，而官網(wǎng)就是你的地盤，也是一件集大成的、最有價(jià)值的作品。雖然雙微的建設(shè)和操作更簡便，但其中往往夾雜著冗余信息，難以匹敵網(wǎng)站所具備的長久性、正式性和精煉性。所以，作為一個(gè)正式的官方平臺，官網(wǎng)建設(shè)必不可少。

那如何做出更高水平、更吸睛、更讓人過目不忘的官網(wǎng)呢？我從國內(nèi)外500余家廣告公司的官方網(wǎng)站中，精選30家并總結(jié)出這篇《乙方官網(wǎng)設(shè)計(jì)指南》，一起看看這些有趣的網(wǎng)站能給我們帶來哪些設(shè)計(jì)啟發(fā)！

*本文不涉及編程內(nèi)容，僅從視覺設(shè)計(jì)出發(fā)給予參考；部分網(wǎng)站加載慢，請稍等或刷新

一、扮靚之前，先厘清內(nèi)容邏輯

就像買房一樣，在裝修之前，要安排清楚各個(gè)房間區(qū)域的功能。網(wǎng)站也是同樣的道理。大到每一屏頁面、小到每一次點(diǎn)擊，都要賦予其特定的意義。

在代理商的官網(wǎng)設(shè)置中，以下6部分內(nèi)容必不可少：

• 我們是誰？即公司名稱、公司介紹，有必要時(shí)可做延伸解釋；

• 我們的理念？即公司的Slogan、信仰和堅(jiān)持；

• 我們的作品？是最主要、最重要的部分；

• 我們能為客戶提供哪些服務(wù)？ATL/BTL/IMC、單個(gè)或是全案的Campaign……

• 我們的人員？團(tuán)隊(duì)核心成員介紹；

• 我們的招聘信息、地址和聯(lián)系方式？可附社交媒體賬號。

二、一眼定生死的首屏設(shè)計(jì)

網(wǎng)站一般分為三個(gè)部分：頭部、內(nèi)容和尾部(header、body和footer)。代理商的官網(wǎng)不必做到一絲不茍，但最值得花心思打造的地方是首屏，也就是landing page（著陸頁）。這是用戶打開網(wǎng)站時(shí)最先映入眼簾的頁面，也在最大程度上奠定了網(wǎng)站的風(fēng)格和基調(diào)。

如何讓用戶第一眼就愛上，看看這些公司都用了哪些招數(shù)？

首屏互動(dòng)

優(yōu)秀的交互設(shè)計(jì)網(wǎng)站能給用戶帶來愉悅感，提高用戶體驗(yàn)。比起滿屏都是復(fù)雜的文字信息，具有沖擊力的視覺圖像更能引起用戶的興趣。而在此基礎(chǔ)上加入有趣的交互設(shè)計(jì)，例如動(dòng)效、鼠標(biāo)狀態(tài)、流體效果等，更會產(chǎn)生多重感官刺激，延長用戶在網(wǎng)站的停留時(shí)間。

1、Active Theory

Active Theory是一家位于加利福尼亞州威尼斯的創(chuàng)意數(shù)字制作工作室，專注于構(gòu)建人們喜愛的數(shù)字體驗(yàn)。

鼠標(biāo)懸浮和點(diǎn)擊效果

仿佛置身于午夜的街道，隨著鼠標(biāo)移動(dòng)，界面出現(xiàn)波紋狀的流體效果；單擊閃爍出高亮度的Logo，搭配低像素的模糊感營造出迷幻氛圍。

2、Major Tom

是一家提供全方位服務(wù)的互動(dòng)機(jī)構(gòu)，旨在幫助客戶在當(dāng)今日益復(fù)雜的營銷環(huán)境中茁壯成長。Major Tom在紐約\多倫多和溫哥華設(shè)有辦事處，擁有超過85名專家團(tuán)隊(duì)，涵蓋全方位的戰(zhàn)略、營銷和創(chuàng)意方案。

官網(wǎng)首屏的互動(dòng)效果

非常有沉浸感的網(wǎng)站，波點(diǎn)的律動(dòng)營造出移動(dòng)和翻轉(zhuǎn)的感覺。

3、Martin Agency    

一家提供全方位服務(wù)的機(jī)構(gòu)，在廣告、戰(zhàn)略規(guī)劃、數(shù)字化、數(shù)據(jù)分析、設(shè)計(jì)和品牌內(nèi)容方面具有獨(dú)特的能力。

鼠標(biāo)懸浮移動(dòng)效果

公司成員的目光隨著你的鼠標(biāo)移動(dòng)，是不是有種神奇的臨場感？

4、HOTSAR

HOTSAR位于上海，是一家由95后團(tuán)隊(duì)運(yùn)營的24小時(shí)創(chuàng)意便利店。

鼠標(biāo)懸浮移動(dòng)效果

鼠標(biāo)飄來飄去就能“打散”這個(gè)拳頭，非常解壓。網(wǎng)站僅有單個(gè)頁面，下方設(shè)有引流提示。

視差滾動(dòng)（頁面切換）

視差滾動(dòng)(Parallax Scrolling)，是指多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，滾動(dòng)時(shí)會有一種“一鏡到底”的感覺，帶來非常出色的視覺體驗(yàn)。最常見的一種，就是用戶在向下滾動(dòng)頁面或跨頁面時(shí)的3D滾動(dòng)效果。視差設(shè)計(jì)如果做得好，將會大大提升用戶體驗(yàn)，吸引更多的用戶。

5、fleava

Fleava是一家全球性的數(shù)字廣告代理商，一直致力于走在新媒體技術(shù)的最前沿。在亞洲提供全方位的數(shù)字營銷，網(wǎng)絡(luò)和移動(dòng)應(yīng)用，品牌開發(fā)和體驗(yàn)設(shè)計(jì)服務(wù)。

滾輪滑動(dòng)效果

以紅、藍(lán)、紫為主色調(diào)的網(wǎng)站，每次滑動(dòng)滾輪都會有一種神奇的“彈力感”。   

6、Canvas

Canvas是一家位于紐約市的數(shù)字機(jī)構(gòu)，致力于不斷合作和深思熟慮的創(chuàng)作。該機(jī)構(gòu)為世界級公司創(chuàng)造了卓越的多平臺體驗(yàn)。

滾輪滑動(dòng)效果

只需要往下滑動(dòng)滾輪，就可以觀看如電影般流暢的網(wǎng)頁切換。

7、Mekanism

Mekanism是一家屢獲殊榮的全方位服務(wù)創(chuàng)意機(jī)構(gòu)，在舊金山，紐約，芝加哥和西雅圖設(shè)有辦事處，創(chuàng)造可吸引觀眾的綜合廣告、品牌娛樂和社交媒體計(jì)劃，以激發(fā)可衡量的品牌忠誠度并推動(dòng)銷售。

滾輪滑動(dòng)效果，網(wǎng)站加載比較慢

形式非常新穎，每個(gè)界面都是一個(gè)迷你的故事場景，飽含浪漫色彩的想象力。

8、W

不做創(chuàng)意人，只做創(chuàng)造者。一家深耕亞太市場的全案互動(dòng)營銷代理商。

滾輪滑動(dòng)效果

將公司打造成了一個(gè)IP，隨著滾輪的下滑，進(jìn)行不同部分的信息呈現(xiàn)。

動(dòng)態(tài)圖像

加入動(dòng)態(tài)圖像是首屏展示的第三種方式，也是相對易操作、較常見的設(shè)計(jì)。例如文字出現(xiàn)動(dòng)畫設(shè)置、品牌視頻播放等，沒有額外的互動(dòng)設(shè)計(jì)，但比純圖片展示更加生動(dòng)，缺點(diǎn)是體量大，加載時(shí)間長。

9、cossette

cossette是一個(gè)坐落于加拿大魁北克的創(chuàng)意代理商，擁有多方面專業(yè)知識，共同創(chuàng)造重要的事物，并超越事物。

首屏動(dòng)態(tài)圖像

將字詞的解構(gòu)和重組制作成動(dòng)態(tài)圖像；小寫字體也頗具時(shí)尚感。

10、heimat    

一家位于德國的廣告代理商，由Matthias von Bechtolsheim，Guido Heffels和Andreas Mengele三位合伙人于1999年創(chuàng)立，并在2014年被TBWA收購。

首屏品牌視頻，加載會非常慢，建議先瀏覽其他版塊

將品牌宣傳片和官網(wǎng)融為一體，不同頁面的色彩搭配鮮明，營造出極具沖擊力的視覺體驗(yàn)。

三、配色選彩色還是黑白？

配色也是網(wǎng)頁設(shè)計(jì)中至關(guān)重要的一環(huán)。界面色調(diào)的把控和搭配，能夠營造特定的氛圍，而具體選擇哪種配色方案，和品牌本身的調(diào)性有強(qiáng)相關(guān)。在精選出的幾十份案例中，這些優(yōu)秀的色彩設(shè)計(jì)分為兩派：彩色和黑白。

彩色

11、AEXELE

一家上海的獨(dú)立創(chuàng)意代理商。通過概念化和開發(fā)量身定制的創(chuàng)意和數(shù)字解決方案，幫助針對中國消費(fèi)者和網(wǎng)民的品牌。

粉藍(lán)兩種高飽和色彩的碰撞，增添了畫面的活躍度，令人印象深刻。

12、FRESCO

FRESCO是一家提供全方位服務(wù)的數(shù)字營銷機(jī)構(gòu)，總部設(shè)在香港。專注于品牌推廣、網(wǎng)頁設(shè)計(jì)、電子商務(wù)和數(shù)字營銷服務(wù)。

對比色的運(yùn)用、圖像的切割和重組、寬間距的排版令網(wǎng)站看起來十分時(shí)髦。

13、Bates Creative

華盛頓特區(qū)都市區(qū)的一家全方位服務(wù)設(shè)計(jì)機(jī)構(gòu)。Bates Creative真正的目標(biāo)是創(chuàng)意人員的合作，他們將挑戰(zhàn)轉(zhuǎn)化為積極的品牌結(jié)果。

6個(gè)界面、6款顏色、6個(gè)概念，每一屏的任務(wù)都十分清晰。

14、Your Majesty

Your Majesty擁有不斷增長的強(qiáng)大思想，也擁有先鋒品牌和人才，希望成為創(chuàng)造未來數(shù)字體驗(yàn)的先行者，在紐約和阿姆斯特丹設(shè)有辦事處。

在畫面中慢慢移動(dòng)的漸變色塊，為空白的底色增添了柔和的生機(jī)；襯線字體有種復(fù)古的優(yōu)雅。

黑白

15、Yeti Society

Yeti反向構(gòu)建營銷解決方案，從目標(biāo)出發(fā)考慮設(shè)計(jì)和傳播。如果你在平庸的營銷森林中感到有些迷茫，Yeti Society會在這里提供幫助。

粗獷的黑白插畫昭示了不羈的品牌調(diào)性。

16、DAVID

在2011年底，為慶祝大衛(wèi)奧格威誕辰100周年，奧美宣布成立一家新機(jī)構(gòu)DAVID，就像David Ogilvy一樣年輕，聰明，精力充沛，充滿激情。

以黑白為主色調(diào)，將作品海報(bào)夸張地鋪滿整個(gè)屏幕，輔之以簡約有力的無襯線字體。

17、m2mind

是2011年起成立的一家品牌數(shù)字營銷創(chuàng)意公司，提供以品牌為核心的一站式網(wǎng)絡(luò)傳播策劃及執(zhí)行服務(wù), 始終致力于幫助國際品牌本土化及中國品牌全球化。

模擬草稿紙的手繪插畫設(shè)計(jì)，最后招聘的界面很有趣。

18、鯨夢

鯨夢，專注于碎片化時(shí)代的整合內(nèi)容營銷，相信好的內(nèi)容是品牌傳播的導(dǎo)火線。

首屏呈現(xiàn)出廣袤無垠的星河之景。

19、有門互動(dòng)    

以創(chuàng)意策略為核心，堅(jiān)持獨(dú)立運(yùn)營，為那些敬畏創(chuàng)意和相信社交網(wǎng)絡(luò)力量的客戶提供創(chuàng)意、內(nèi)容及傳播解決方案。

映入眼簾的這句文案，有態(tài)度又不失風(fēng)度。網(wǎng)站只設(shè)置了單個(gè)引流界面。

20、環(huán)時(shí)互動(dòng)

環(huán)時(shí)的官網(wǎng)不著一詞，同樣只設(shè)置了一個(gè)觀影場景般的引流界面。可見其自信和灑脫。

四、做出好品味的排版，理性在左、想象在右

相對以上幾點(diǎn)，排版設(shè)計(jì)是更加理性的一步。如果網(wǎng)站布局為太緊密的字間距、段間距，用戶會很費(fèi)力才能確定信息內(nèi)容；但如果留白空間太多，就會缺少司的各項(xiàng)詳細(xì)信息。

井然有序、簡潔、嚴(yán)肅的理性排版

21、King and Partners

成立于2010年，總部位于紐約市，幫助全球客戶發(fā)展業(yè)務(wù)。King and Partners擁有一支由才華橫溢，經(jīng)驗(yàn)豐富的人才組成的多元化團(tuán)隊(duì)，不斷精進(jìn)如何以不同的方式做事，以及如何做得更好。

畫面按2：1分布，規(guī)整有序。稍做變化的襯線字體彰顯品牌獨(dú)特性。

22、Wieden + Kennedy

W+K是一家獨(dú)立的，創(chuàng)造性的廣告代理商，在優(yōu)秀的公司和客戶之間建立強(qiáng)大而富有挑戰(zhàn)性的關(guān)系。

畫面為主，文字懸浮，看得出對作品的自信和重視。官網(wǎng)最底部有一條持續(xù)閃動(dòng)的區(qū)域，交替著若干句slogan。    

23、idea

idea是圣地亞哥領(lǐng)先的戰(zhàn)略品牌開發(fā)機(jī)構(gòu)之一。我們提供品牌咨詢和創(chuàng)意代理服務(wù)。

簡潔的界面，較多的留白和間隔空間，一種絕對不會出錯(cuò)的設(shè)計(jì)思路。

24、Blanct

位于新加坡的品牌和互動(dòng)機(jī)構(gòu)，通過一系列技術(shù)啟發(fā)的媒體和互動(dòng)數(shù)字平臺闡明其想法。

畫面左右或上下分布，隱隱可見底層的淺色分隔線。大量的留白搭配無襯線字體顯得簡約優(yōu)雅。

饒有趣味、天馬行空的想象排版

25、design army

Design Army是戰(zhàn)略品牌建筑師，通過設(shè)計(jì)語言影響了現(xiàn)代商業(yè)的各個(gè)方面。與全球和本地品牌合作開展廣告、藝術(shù)方向、品牌、設(shè)計(jì)合作、實(shí)驗(yàn)營銷、時(shí)裝設(shè)計(jì)、室內(nèi)設(shè)計(jì)各種項(xiàng)目合作。

大膽、跳躍的圖像搭配加粗無襯線字體，平衡了過分跳脫的腦洞。

26、Zajno

Zajno是一家數(shù)字產(chǎn)品代理商。從研究和規(guī)劃到定制設(shè)計(jì)和開發(fā)，幫助初創(chuàng)公司和企業(yè)實(shí)現(xiàn)目標(biāo)。

襯線字體搭配陰影，加之飛魚、人類，看似毫不相干的事物，奏成了一曲超現(xiàn)實(shí)主義的驚嘆。

27、Barbarian Group

Barbarian Group是一家在波士頓成立的互動(dòng)營銷公司，目前總部設(shè)在紐約，在波士頓和舊金山設(shè)有辦事處。

夸張的異形寬體吸引了全部的注意力，無論在黑白底色中，明黃色都十分惹人注目。

28、Designercity

Designercity（WPP旗下公司）是香港的一家數(shù)字創(chuàng)意和技術(shù)公司，擁有數(shù)十項(xiàng)國際獎(jiǎng)項(xiàng)，被認(rèn)為是該地區(qū)最具創(chuàng)新性的公司之一。

把官網(wǎng)像報(bào)紙一樣排版，你敢嗎？    

29、pill & pillow

是一家提供全方位服務(wù)的設(shè)計(jì)工作室，專門從事互動(dòng)網(wǎng)頁設(shè)計(jì)。該公司由Henry Chu于2004年3月創(chuàng)立于香港。

整篇是一篇用emoji寫的自我介紹信，很像年輕人的作風(fēng)。

30、DICE205 Co.

來自菲律賓的代理商團(tuán)隊(duì)，通過專業(yè)知識幫助企業(yè)在線取得成功。

非常獨(dú)特的一個(gè)代理商，把官網(wǎng)做成了大富翁游戲盤。一般情況下加載會非常慢。

“再小的個(gè)體也有自己的品牌”，對于廣告公司來說，無論規(guī)模大小、凡有能力者，都應(yīng)該意識到官網(wǎng)建設(shè)和美化的重要性。這種稀缺的注意力值得一棒一棒接力下去，也會為每家代理商都增添無價(jià)的品牌資產(chǎn)。

有心的朋友會發(fā)現(xiàn)，這篇文章只放了代理商的網(wǎng)站，沒有涉及到其他領(lǐng)域，或者介紹所謂的“模板”。因?yàn)橄啾容^來說，好看的模板雖然數(shù)不勝數(shù)，但實(shí)則是紙上談兵，只有確確實(shí)實(shí)落地的創(chuàng)意和執(zhí)行，才能為行業(yè)提供有價(jià)值的、真實(shí)的參考，我們也能從中了解到世界各地創(chuàng)意人的設(shè)計(jì)思路和技巧。

不妨把網(wǎng)站當(dāng)做一張畫布，盡情揮灑吧！

參考資料：

topinteractiveagencies.com及30家代理商官方網(wǎng)站
80%的用戶時(shí)間停留在前三屏，然而八年前完全不是這樣
網(wǎng)站設(shè)計(jì)缺乏創(chuàng)意？視差滾動(dòng)網(wǎng)站設(shè)計(jì)讓你與眾不同

數(shù)英原創(chuàng)內(nèi)容，轉(zhuǎn)載請遵守規(guī)范