當我們在瀏覽Facebook、知乎、Twitter等網站時，大家一定發現了這些網站的共同點，就是在頁面元素的設計上都以藍色調爲主。爲什麼在網頁設計中，藍色會這麼受歡迎呢？
心理學研究證明，藍色通常可以給人帶來大氣、愜意、平和的感覺，能夠傳遞強烈的信任感。不僅如此，藍色深沉的色調也可以讓人更快進入平靜、專注的狀態，在長時間瀏覽網頁時也不會產生強烈的視覺刺激。因此許多設計師在進行網頁設計時，都十分青睞藍色調。
今天摹客團隊爲大家帶來一組以藍色爲主色調的創意網頁設計，希望可以帶給大家不一樣的創作靈感。
Whale Synth是一個專爲音樂人打造的非常有趣的網站，可以將不同種類鯨魚的聲音進行合成，變成音樂。網站背景由其中深淺不一的藍色組成，顏色深淺代表了不同的音高，隨着鼠標的移動，網站會變成層層疊疊的波浪，各種各樣的鯨魚音也會隨之產生，讓人彷彿徜徉在海洋中，享受着被鯨魚包圍的幸福感。
作爲哈利波特的官方網站，WizardingWorld可以帶領每一個哈利波特愛好者進入神奇的魔法世界。在這裏你可以創建個人檔案，進行分帽院測試。深藍色星空背景爲網站增加了幾分神祕色彩，也能讓用戶產生更強烈的代入感。
3.NPO
日本NPO就業支援事業所網站，在設計上採用了較高飽和度和明度的藍色進行了搭配，藉助卡通風格的插畫設計和手寫風格字體，配合適量的動態效果，使整個網站設計在契合主題的前提下，顯得生動有趣，別具一格。
4.MICT
韓國MICT網站整體風格偏冷，充滿冷靜、理智的情感色彩，符合醫療機構網站的定位。同時，爲了中和網站色調，在輪播圖片的選取時，加入了暖色系的圖片，整體搭配和諧，降低了設計上的距離感。
Ondaparts是一家專門生產管道連接組件的日本公司。其網站設計風格乾淨清爽，除了充滿藍色元素的導航、功能按鈕等部分，在選擇背景輪播圖時，也以藍色調圖片爲主。同時網站設計了大面積的留白空間，提升整個頁面的呼吸感，降低訪客視覺壓力。
6.Wonder
Wonder是著名編劇帕拉西奧處女作《Wonder》的官方網站，該書自出版以來，就長期佔據《紐約時報》的暢銷書榜單。書中講述了一個頭戴太空頭盔的男孩戰勝自己，融入社會的溫暖故事。在Wonder 的官方網站中，也採用了溫暖的手繪小插畫形式，將書中的故事通過簡單的線條呈現在天藍色的背景布中，極具趣味性。
Fontstore是一家風格獨特的字體設計公司，旗下包含多種可付費使用的獨家字體。該公司官方網站在設計上也別出心裁，通過用藍白線條在黑色背景上逐漸繪製出主題圖案，來呈現歡迎頁、字體瀏覽、價格信息、安裝方式、訂閱五個部分。整體設計獨具一格，趣味性十足，很容易給人留下深刻的印象。
Peekabeat是一款有趣的音樂播放軟件，用戶只需拍照，該軟件就能根據用戶的臉自動推薦播放列表。Peekabeat的官網延續了APP的趣味性，背景色彩還會隨機在藍色到紫色之間發生漸變，極具魅力。背景人物隨着色彩的變化，也表現出了不同的情緒，突出了軟件可以“根據心情推薦歌曲”的特色。整體設計很好地凸顯出了Peekabeat的與衆不同。
Radio Canada是加拿大廣播電臺的官方網站，該網站採用了抽象主義設計風格，通過棱角分明的圖案和豐富的色彩碰撞，創造出強烈的視覺衝擊感。同時網站採用了視差滾動的交互效果，增加了其互動性，也讓加拿大廣播電臺的形象變得豐富了起來。
10.Spectral
Spectral是由Production Type設計的參數化Google字體，在該字體官網，可以實現在線快速生成新風格字體，提高了字體設計的創造力。該網站風格簡潔，藍色背景布上，使用白色線條將主要工作區進行了劃分，讓用戶對各功能區可以一目瞭然，爲用戶提供了很不錯的字體在線設計體驗。
11.Womanhood
Womanhood是一個互動式紀錄片的官方網站，網站導航以萬花筒的方式呈現。選擇一個字母后，點擊對應單詞即可進入相關紀錄片的頁面。網站的交互方式簡單，但通過巧妙的色彩搭配和風格突出的導航呈現方式，整體互動感極強。
12.Fotonaut
這是捷克Fotonaut攝影工作室的官方網站。網站背景使用了紫藍色，在頁面的重要元素設計上，使用了大量紅色，配色顯得非常大膽，創意十足，與攝影工作室現代時尚的風格相符合。
作爲近兩年極具話題性和爭議性的品牌，Luckin Coffee（瑞幸咖啡）可謂是賺足了眼球。在官方網站的設計上，毫無意外地選擇了藍色作爲其主色調，在輪播背景圖的正中心，固定展示Luckin Coffee的Logo。網站整體畫風一致，強化了小藍杯的形象，使品牌推廣更加深入人心。
14.Mozaik
Mozaik是一家位於雅典的綜合性的數字營銷機構，其官方網站每個頁面均採用了藍色作爲背景色，無論是背景視頻還是背景圖片，均進行了色彩處理。單個頁面的關鍵信息使用白色字體呈現在頁面正中，主次分明，重點突出。
15.Benediktas
這是立陶宛攝影師、作家Benediktas的個人網站。網站設計非常簡單，通過簡單的線條將信息呈現在深色背景中，幹練的設計很好地表達出了Benediktas的處事風格。UI動效是該網站的一大特色。
該網站採用了扁平的設計風格，去除了冗餘、厚重和繁雜的裝飾效果，突出了網站的重點信息。爲了符合網站的主題，設計師從頁面動態元素和字體的排版上進行了創新，讓整個UI界面變得靈活跳脫，充滿創意。相信對於許多設計師來說，這個網站無論是內容還是設計風格，都能帶來豐富的創作靈感。
Bay Street Biergarten是查爾斯頓的第一座當代啤酒花園，致力於爲啤酒愛好者提供市場上最好的精釀產品。其官方網站爲用戶提供預約、通訊、活動促銷信息發佈等服務。網站整體色調爲深藍色，導航和背景圖選擇使用燙金色，搭配雙線條圖標的使用，在突出了網站重要信息的同時，也讓網站看起來更有質感和格調。
18.Molamil
Molamil是一間爲客戶提供品牌打造、網站搭建、APP設計、廣告設計等服務的工作室。網站背景採用2.5d的等距元素排列，表達出了團隊多元化的服務理念。嚴謹整齊的背景元素，搭配淺藍色的色調，讓整個網頁看起來清新簡潔。
19.Type Terms
這是創意團隊Supremo推出的字母排版術語網站，深藍色背景上陳列了“Terminology”一詞，通過對該單詞字母的各部分進行單獨剖析講解，讓瀏覽者可以對字母排版的術語進行生動地理解。
20.Animalmade
Animal是一支有趣的藝術家團隊，涉及領域包含平面海報設計、遊戲研發、視頻製作、動畫設計、網站設計、品牌設計等方面。其團隊的官方網站風格與日常創作風格相似，壓抑的深藍色背景上陳列着造型怪異的動物與粗獷的文字，配色大膽有趣，充滿狂野的創造力和想象力。
以上就是本期摹客團隊爲大家分享的內容。在摹客官網， 也有許多設計精美的原型模板可以直接下載使用。除了藍色系網頁設計，我們還會分享更多各具特色的網頁設計風格，爲各位小夥伴帶來更多的創意和靈感。敬請期待吧~