當(dāng)我們?cè)跒g覽Facebook、知乎、Twitter等網(wǎng)站時(shí)，大家一定發(fā)現(xiàn)了這些網(wǎng)站的共同點(diǎn)，就是在頁(yè)面元素的設(shè)計(jì)上都以藍(lán)色調(diào)為主。為什么在網(wǎng)頁(yè)設(shè)計(jì)中，藍(lán)色會(huì)這么受歡迎呢？

心理學(xué)研究證明，藍(lán)色通常可以給人帶來(lái)大氣、愜意、平和的感覺(jué)，能夠傳遞強(qiáng)烈的信任感。不僅如此，藍(lán)色深沉的色調(diào)也可以讓人更快進(jìn)入平靜、專注的狀態(tài)，在長(zhǎng)時(shí)間瀏覽網(wǎng)頁(yè)時(shí)也不會(huì)產(chǎn)生強(qiáng)烈的視覺(jué)刺激。因此許多設(shè)計(jì)師在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，都十分青睞藍(lán)色調(diào)。

今天為大家?guī)?lái)一組以藍(lán)色為主色調(diào)的創(chuàng)意網(wǎng)頁(yè)設(shè)計(jì)，希望可以帶給大家不一樣的創(chuàng)作靈感。

1.Whale Synth

Whale Synth是一個(gè)專為音樂(lè)人打造的非常有趣的網(wǎng)站，可以將不同種類鯨魚(yú)的聲音進(jìn)行合成，變成音樂(lè)。網(wǎng)站背景由其中深淺不一的藍(lán)色組成，顏色深淺代表了不同的音高，隨著鼠標(biāo)的移動(dòng)，網(wǎng)站會(huì)變成層層疊疊的波浪，各種各樣的鯨魚(yú)音也會(huì)隨之產(chǎn)生，讓人仿佛徜徉在海洋中，享受著被鯨魚(yú)包圍的幸福感。

2.WizardingWorld

作為哈利波特的官方網(wǎng)站，WizardingWorld可以帶領(lǐng)每一個(gè)哈利波特愛(ài)好者進(jìn)入神奇的魔法世界。在這里你可以創(chuàng)建個(gè)人檔案，進(jìn)行分帽院測(cè)試。深藍(lán)色星空背景為網(wǎng)站增加了幾分神秘色彩，也能讓用戶產(chǎn)生更強(qiáng)烈的代入感。

3.NPO

日本NPO就業(yè)支援事業(yè)所網(wǎng)站，在設(shè)計(jì)上采用了較高飽和度和明度的藍(lán)色進(jìn)行了搭配，借助卡通風(fēng)格的插畫(huà)設(shè)計(jì)和手寫(xiě)風(fēng)格字體，配合適量的動(dòng)態(tài)效果，使整個(gè)網(wǎng)站設(shè)計(jì)在契合主題的前提下，顯得生動(dòng)有趣，別具一格。

4.MICT

韓國(guó)MICT網(wǎng)站整體風(fēng)格偏冷，充滿冷靜、理智的情感色彩，符合醫(yī)療機(jī)構(gòu)網(wǎng)站的定位。同時(shí)，為了中和網(wǎng)站色調(diào)，在輪播圖片的選取時(shí)，加入了暖色系的圖片，整體搭配和諧，降低了設(shè)計(jì)上的距離感。

5.Ondaparts

Ondaparts是一家專門(mén)生產(chǎn)管道連接組件的日本公司。其網(wǎng)站設(shè)計(jì)風(fēng)格干凈清爽，除了充滿藍(lán)色元素的導(dǎo)航、功能按鈕等部分，在選擇背景輪播圖時(shí)，也以藍(lán)色調(diào)圖片為主。同時(shí)網(wǎng)站設(shè)計(jì)了大面積的留白空間，提升整個(gè)頁(yè)面的呼吸感，降低訪客視覺(jué)壓力。

6.Wonder

Wonder是著名編劇帕拉西奧處女作《Wonder》的官方網(wǎng)站，該書(shū)自出版以來(lái)，就長(zhǎng)期占據(jù)《紐約時(shí)報(bào)》的暢銷書(shū)榜單。書(shū)中講述了一個(gè)頭戴太空頭盔的男孩戰(zhàn)勝自己，融入社會(huì)的溫暖故事。在Wonder 的官方網(wǎng)站中，也采用了溫暖的手繪小插畫(huà)形式，將書(shū)中的故事通過(guò)簡(jiǎn)單的線條呈現(xiàn)在天藍(lán)色的背景布中，極具趣味性。

7.Fontstore

Fontstore是一家風(fēng)格獨(dú)特的字體設(shè)計(jì)公司，旗下包含多種可付費(fèi)使用的獨(dú)家字體。該公司官方網(wǎng)站在設(shè)計(jì)上也別出心裁，通過(guò)用藍(lán)白線條在黑色背景上逐漸繪制出主題圖案，來(lái)呈現(xiàn)歡迎頁(yè)、字體瀏覽、價(jià)格信息、安裝方式、訂閱五個(gè)部分。整體設(shè)計(jì)獨(dú)具一格，趣味性十足，很容易給人留下深刻的印象。

8.Peekabeat

Peekabeat是一款有趣的音樂(lè)播放軟件，用戶只需拍照，該軟件就能根據(jù)用戶的臉自動(dòng)推薦播放列表。Peekabeat的官網(wǎng)延續(xù)了APP的趣味性，背景色彩還會(huì)隨機(jī)在藍(lán)色到紫色之間發(fā)生漸變，極具魅力。背景人物隨著色彩的變化，也表現(xiàn)出了不同的情緒，突出了軟件可以“根據(jù)心情推薦歌曲”的特色。整體設(shè)計(jì)很好地凸顯出了Peekabeat的與眾不同。

9.Radio Canada

Radio Canada是加拿大廣播電臺(tái)的官方網(wǎng)站，該網(wǎng)站采用了抽象主義設(shè)計(jì)風(fēng)格，通過(guò)棱角分明的圖案和豐富的色彩碰撞，創(chuàng)造出強(qiáng)烈的視覺(jué)沖擊感。同時(shí)網(wǎng)站采用了視差滾動(dòng)的交互效果，增加了其互動(dòng)性，也讓加拿大廣播電臺(tái)的形象變得豐富了起來(lái)。

10.Spectral

Spectral是由Production Type設(shè)計(jì)的參數(shù)化Google字體，在該字體官網(wǎng)，可以實(shí)現(xiàn)在線快速生成新風(fēng)格字體，提高了字體設(shè)計(jì)的創(chuàng)造力。該網(wǎng)站風(fēng)格簡(jiǎn)潔，藍(lán)色背景布上，使用白色線條將主要工作區(qū)進(jìn)行了劃分，讓用戶對(duì)各功能區(qū)可以一目了然，為用戶提供了很不錯(cuò)的字體在線設(shè)計(jì)體驗(yàn)。

11.Womanhood

Womanhood是一個(gè)互動(dòng)式紀(jì)錄片的官方網(wǎng)站，網(wǎng)站導(dǎo)航以萬(wàn)花筒的方式呈現(xiàn)。選擇一個(gè)字母后，點(diǎn)擊對(duì)應(yīng)單詞即可進(jìn)入相關(guān)紀(jì)錄片的頁(yè)面。網(wǎng)站的交互方式簡(jiǎn)單，但通過(guò)巧妙的色彩搭配和風(fēng)格突出的導(dǎo)航呈現(xiàn)方式，整體互動(dòng)感極強(qiáng)。

12.Fotonaut

這是捷克Fotonaut攝影工作室的官方網(wǎng)站。網(wǎng)站背景使用了紫藍(lán)色，在頁(yè)面的重要元素設(shè)計(jì)上，使用了大量紅色，配色顯得非常大膽，創(chuàng)意十足，與攝影工作室現(xiàn)代時(shí)尚的風(fēng)格相符合。

13.Luckin Coffee

作為近兩年極具話題性和爭(zhēng)議性的品牌，Luckin Coffee（瑞幸咖啡）可謂是賺足了眼球。在官方網(wǎng)站的設(shè)計(jì)上，毫無(wú)意外地選擇了藍(lán)色作為其主色調(diào)，在輪播背景圖的正中心，固定展示Luckin Coffee的Logo。網(wǎng)站整體畫(huà)風(fēng)一致，強(qiáng)化了小藍(lán)杯的形象，使品牌推廣更加深入人心。

14.Mozaik

Mozaik是一家位于雅典的綜合性的數(shù)字營(yíng)銷機(jī)構(gòu)，其官方網(wǎng)站每個(gè)頁(yè)面均采用了藍(lán)色作為背景色，無(wú)論是背景視頻還是背景圖片，均進(jìn)行了色彩處理。單個(gè)頁(yè)面的關(guān)鍵信息使用白色字體呈現(xiàn)在頁(yè)面正中，主次分明，重點(diǎn)突出。

15.Benediktas

這是立陶宛攝影師、作家Benediktas的個(gè)人網(wǎng)站。網(wǎng)站設(shè)計(jì)非常簡(jiǎn)單，通過(guò)簡(jiǎn)單的線條將信息呈現(xiàn)在深色背景中，干練的設(shè)計(jì)很好地表達(dá)出了Benediktas的處事風(fēng)格。UI動(dòng)效是該網(wǎng)站的一大特色。

16.Thing Of Wonder

該網(wǎng)站采用了扁平的設(shè)計(jì)風(fēng)格，去除了冗余、厚重和繁雜的裝飾效果，突出了網(wǎng)站的重點(diǎn)信息。為了符合網(wǎng)站的主題，設(shè)計(jì)師從頁(yè)面動(dòng)態(tài)元素和字體的排版上進(jìn)行了創(chuàng)新，讓整個(gè)UI界面變得靈活跳脫，充滿創(chuàng)意。相信對(duì)于許多設(shè)計(jì)師來(lái)說(shuō)，這個(gè)網(wǎng)站無(wú)論是內(nèi)容還是設(shè)計(jì)風(fēng)格，都能帶來(lái)豐富的創(chuàng)作靈感。

17.Bay Street Biergarten

Bay Street Biergarten是查爾斯頓的第一座當(dāng)代啤酒花園，致力于為啤酒愛(ài)好者提供市場(chǎng)上最好的精釀產(chǎn)品。其官方網(wǎng)站為用戶提供預(yù)約、通訊、活動(dòng)促銷信息發(fā)布等服務(wù)。網(wǎng)站整體色調(diào)為深藍(lán)色，導(dǎo)航和背景圖選擇使用燙金色，搭配雙線條圖標(biāo)的使用，在突出了網(wǎng)站重要信息的同時(shí)，也讓網(wǎng)站看起來(lái)更有質(zhì)感和格調(diào)。

18.Molamil

Molamil是一間為客戶提供品牌打造、網(wǎng)站搭建、APP設(shè)計(jì)、廣告設(shè)計(jì)等服務(wù)的工作室。網(wǎng)站背景采用2.5d的等距元素排列，表達(dá)出了團(tuán)隊(duì)多元化的服務(wù)理念。嚴(yán)謹(jǐn)整齊的背景元素，搭配淺藍(lán)色的色調(diào)，讓整個(gè)網(wǎng)頁(yè)看起來(lái)清新簡(jiǎn)潔。

19.Type Terms

這是創(chuàng)意團(tuán)隊(duì)Supremo推出的字母排版術(shù)語(yǔ)網(wǎng)站，深藍(lán)色背景上陳列了“Terminology”一詞，通過(guò)對(duì)該單詞字母的各部分進(jìn)行單獨(dú)剖析講解，讓瀏覽者可以對(duì)字母排版的術(shù)語(yǔ)進(jìn)行生動(dòng)地理解。

20.Animalmade

Animal是一支有趣的藝術(shù)家團(tuán)隊(duì)，涉及領(lǐng)域包含平面海報(bào)設(shè)計(jì)、游戲研發(fā)、視頻制作、動(dòng)畫(huà)設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、品牌設(shè)計(jì)等方面。其團(tuán)隊(duì)的官方網(wǎng)站風(fēng)格與日常創(chuàng)作風(fēng)格相似，壓抑的深藍(lán)色背景上陳列著造型怪異的動(dòng)物與粗獷的文字，配色大膽有趣，充滿狂野的創(chuàng)造力和想象力。