摘要：國(guó)內(nèi)網(wǎng)站建設(shè)領(lǐng)域，比較優(yōu)秀頂尖的設(shè)計(jì)公司基本布局在北上廣深四大城市。因?yàn)檫@四大城市的人才輩出，同時(shí)客戶對(duì)于北上廣深網(wǎng)站建設(shè)公司輸出的作品案例也更高。我們沒(méi)有辦法三言兩語(yǔ)就道破這些優(yōu)秀公司為什么能設(shè)計(jì)出那么高大上的作品，但通過(guò)今天的八個(gè)精致的...

國(guó)內(nèi)網(wǎng)站建設(shè)領(lǐng)域，比較優(yōu)秀頂尖的設(shè)計(jì)公司基本布局在北上廣深四大城市。因?yàn)檫@四大城市的人才輩出，同時(shí)客戶對(duì)于北上廣深網(wǎng)站建設(shè)公司輸出的作品案例也更高。我們沒(méi)有辦法三言兩語(yǔ)就道破這些優(yōu)秀公司為什么能設(shè)計(jì)出那么高大上的作品，但通過(guò)今天的八個(gè)精致的網(wǎng)站案例，可以簡(jiǎn)單分析一下他們?yōu)槭裁春?jiǎn)潔大氣。

NO.1 Tripgoals. 公司網(wǎng)站

這個(gè)網(wǎng)站是做旅游相關(guān)產(chǎn)品和服務(wù)的品牌網(wǎng)站。單純從網(wǎng)站的標(biāo)志中，我們解讀出，這個(gè)品牌的符號(hào)很簡(jiǎn)潔，線條明快，且有藍(lán)色和綠色的搭配。果不其然，從頁(yè)頭到第一屏幕，再到下面，基本上都嚴(yán)格控制了2種顏色的布局，而且每個(gè)地方的組件，如按鈕、圖片的選取和制圖都非常用心，顏色得到很好的控制，保持統(tǒng)一。

部分圖片邊緣，海域地圖等元素交叉組合，讓圖片的邊緣不會(huì)太生硬，尖銳。首頁(yè)同屏下來(lái)，保持了實(shí)——虛——實(shí)的節(jié)奏進(jìn)行敘述故事。

在部分模塊區(qū)域，還結(jié)合交互設(shè)計(jì)，對(duì)圖片的外觀進(jìn)行銳角、圓角的處理。而這些都是跟品牌符號(hào)有關(guān)系的，并非設(shè)計(jì)師想怎么做就怎么來(lái)。

NO. 2 City Guide.

這一個(gè)網(wǎng)站案例，我們只看第一屏就能看得出設(shè)計(jì)師的設(shè)計(jì)能力，它包含它的版式設(shè)計(jì)、配色、圖形運(yùn)用以及對(duì)內(nèi)容的主次的劃分。非常有經(jīng)驗(yàn)。我們先看頁(yè)頭，那頁(yè)頭，右上角有一個(gè)登登錄入口和一個(gè)召喚按鈕。Add Business就是用戶要做任務(wù)的，Logo旁邊，還有一個(gè)城市的選擇，這些都是功能型的組件，再下來(lái)，第二屏，跟我們往?？吹降哪且恍┤羈anner全屏圖片，這種風(fēng)格有很大的差異。

我們可以看得出，首先是slogan的設(shè)計(jì)就很不一樣，先是一個(gè)黑的welcome to（副標(biāo)題），再來(lái)一個(gè)，Vancouver（主標(biāo)題）這樣一個(gè)大小的對(duì)比，再來(lái)一個(gè)正文的灰色字體的對(duì)比，這一塊就很出色。接下來(lái)是有幾個(gè)位置，是有多少人入住了，有什么日期，進(jìn)行選擇，就是訂房的三三三劍客，在下邊，還有一個(gè)popular search。這一個(gè)，是比較熱搜的一些關(guān)鍵詞，也是用戶體驗(yàn)的一種，再下來(lái)讓我讓用戶來(lái)選擇，我們要選的是哪一種服務(wù)，是餐飲，購(gòu)物，還是酒店訂房還是娛樂(lè)？

所以整體上來(lái)看，出色的地方就是頁(yè)頭有功能性做得很好，中間banner區(qū)域做了很多的功能型的任務(wù)，而且班的區(qū)域的三張圖的組合也很有特色，主要就是下面的一些工具箱的入口，這是這一個(gè)作品的亮點(diǎn)的地方。

NO.3 Chalatix Agency

這個(gè)網(wǎng)站作品，非常吸引人，吸引地方有兩點(diǎn)非常突出，首先就是布局，跟我們常見(jiàn)的不太一樣，第二個(gè)是也就是板式，第二個(gè)是它的配色，一張圖，它里面的波紋的這一張圖跟一個(gè)圓圈的按鈕，Getting touch有一個(gè)呼應(yīng)，以及下面的小icon的顏色，這三個(gè)，地方是品牌色的布局，非常優(yōu)秀，因?yàn)檫@都是來(lái)自logo。再到具體的地方，就比如banner區(qū)域的一些文字，大標(biāo)題，小標(biāo)題的對(duì)比，這個(gè)以前我們講過(guò)非常好，大小對(duì)比。

另外，就是有第二屏，第三屏的地方，它一些圖的布局，是大小不一的，這種是有一定的難度的，在后期做交互的時(shí)候有一定的難度，以及最下邊的一些，服務(wù)的選擇12345這種，它是當(dāng)?shù)冗叿殖晌逦宀糠?，有?dāng)前的部分，就展開(kāi)放大，這個(gè)是一個(gè)常見(jiàn)的一種逐漸交互，但是它這里用的非常好，它的一些小的單詞是豎著放的，展開(kāi)的是橫著放，這種是一種別致的做法。

NO.4 Artisans

我第一次看到這一個(gè)作品，比較欣賞它，首先它這個(gè)布局，它不是完全按照電腦端的規(guī)格來(lái)去設(shè)計(jì)的，它既考慮電腦端，又考考慮手機(jī)端，它是這樣子來(lái)做，所以它的布局，是用滿屏的比例，這是第一點(diǎn)。第二點(diǎn)，它的菜單導(dǎo)航有一部分重要的是展示出來(lái)的，有一部分更多的服務(wù)，它放在漢堡菜單里邊，第三。就是首屏里邊，你會(huì)看到很多信息量，但是并不擁擠，比如說(shuō)believers in humanity，就是一個(gè)大的slogan，右邊要加一段小的文字，就形成一個(gè)強(qiáng)烈的對(duì)比，那下邊要配一張比較比較，有藝術(shù)的這種繪圖，這種插圖，最后下面的兩個(gè)內(nèi)容又分的一分為二，就非常有藝術(shù)。

在第二屏里邊，可以看得出這里用了一個(gè)油爆琵琶半遮面的手法，他就是用了互聯(lián)網(wǎng)來(lái)進(jìn)行滾動(dòng)屬性，右邊只看到了內(nèi)容的百分之10%，用戶可以通過(guò)左邊的箭頭按鈕來(lái)點(diǎn)擊一樣的情況，也可以通過(guò)拖拽鼠標(biāo)，滾動(dòng)屏幕的就看得到。這種是完除了平面設(shè)計(jì)之外，還考慮交互部分的出彩的地方。

第三部分，就就到了一些正文部分了，他用的是居中結(jié)構(gòu)，標(biāo)題居中結(jié)構(gòu)，在這種藝術(shù)性的英文字體里邊，大家都是正常的字體，有一部分是用斜體的話，會(huì)看起來(lái)很特別，會(huì)打破一些視覺(jué)的堅(jiān)固的地方。再往下是一行為二的布局，再繼續(xù)往下，就是剛才那一個(gè)滾動(dòng)的一個(gè)樣式的延展，它這里是用來(lái)展示一個(gè)公司的發(fā)展歷程的。

再往下就是有也是FAQS的這種形式的，常見(jiàn)問(wèn)題，那它這里就結(jié)構(gòu)的話，是完全既兼容電腦端，又兼容手機(jī)端，看起來(lái)都很舒服，最后一講一講，就是所謂虎頭蛇尾，這個(gè)尾巴做的很精致，只放了一個(gè)很簡(jiǎn)單的東西，就是讓我們來(lái)聊一聊，就是一個(gè)咨詢的一個(gè)入口，非常簡(jiǎn)潔，其他不不相關(guān)的信息不展示。

NO.5 Adventure

第六個(gè)網(wǎng)站建設(shè)案例，出彩的地方就兩點(diǎn)了。第一點(diǎn)我們先觀察它的標(biāo)志，標(biāo)志的造型非常有藝術(shù)感，流流線型的，那么它在界面當(dāng)中一級(jí)標(biāo)題用的就是這種帶有波浪線條的這種，忽大忽小的這種造型的字體是跟logo是呼應(yīng)的，或者應(yīng)該說(shuō)這個(gè)字體可能就是他們的品牌字體。這是第一點(diǎn)，第二點(diǎn)，是布局很簡(jiǎn)單，就是尤其從從第二第二篇，開(kāi)始是左右左右，這樣分開(kāi)了布局，它里面的一些文字的推推也地布局的地方也值得推敲，非常特別，你看它是有小標(biāo)題，大標(biāo)題引言，正文加一個(gè)線條。

第三個(gè)地方就是配網(wǎng)站的配色，我們看到首屏里邊山的顏色，天空的顏色，再到第二屏里面放的海底的顏色藍(lán)，這個(gè)藍(lán)跟上面是呼應(yīng)的，再到第三屏出現(xiàn)的這個(gè)房子的這種結(jié)構(gòu)的顏色，就跟第一屏的山的顏色，棕褐色是對(duì)應(yīng)的，是從上到下都是統(tǒng)一呼應(yīng)的，再到比較具體的一些細(xì)節(jié)的處理，比如文字的間距，行高，都是經(jīng)過(guò)精心的設(shè)計(jì)的，這些地方非常OK。

下面是剛才作品的內(nèi)頁(yè)延展設(shè)計(jì)，保持統(tǒng)一的調(diào)性，刪格系統(tǒng)。

到了這一個(gè)列表頁(yè)，除了公共框架是保持統(tǒng)一之外，海報(bào)區(qū)域往下的一些圖標(biāo)的設(shè)計(jì)、布局、篩選的條件以及信息陳列，每單個(gè)模塊的布局都非常OK。大家可以看一下圖片的比例大小，大標(biāo)題，摘要以及下邊的幾個(gè)icon，關(guān)于地點(diǎn)，日期等等，以及一個(gè)進(jìn)行更多了解的按鈕以及價(jià)格，這些都是經(jīng)過(guò)精心布局的。

NO.6 Morritika.

Monica這一個(gè)網(wǎng)站，大家看這個(gè)背景，能首先自己能猜測(cè)到這是做什么行業(yè)的嗎？也是跟旅游相關(guān)的，因?yàn)檫@么大一個(gè)大自然的背景，后面這么精美的山，云，樹(shù)林，哈很很明顯，就是一個(gè)，生活的，探險(xiǎn)的，旅游的一個(gè)氛圍的。那這個(gè)網(wǎng)站的特點(diǎn)是什么，因?yàn)檫@個(gè)一看起來(lái)就是一個(gè)旅游的平臺(tái)了，它的信息量會(huì)很大，在信息量很大的情況下，我們?cè)趺床季诌@些信息？讓它看起來(lái)既有成就感又不亂。

首先是第一屏，第一屏的頁(yè)頭就比較簡(jiǎn)單了，菜單在中間，Logo在左邊，然后有一個(gè)購(gòu)物車在右邊，這是一個(gè)常規(guī)的布局，那就在班的區(qū)域的做的比較特別，首先是班的區(qū)域的圖片的切換，它序號(hào)一到五，它的切換是放在右邊的，還加上一個(gè)很豎著的長(zhǎng)長(zhǎng)條的白色底，非常藝術(shù)感。下邊選選酒店，選人，選日期，入住的一日期和離開(kāi)的日期，以及一個(gè)定預(yù)定的按鈕，非常凸顯，右邊還有一個(gè)視頻的入口，這些用了一些錯(cuò)位的布局，非常有意思。

到了第二瓶，就是用戶的旅游計(jì)劃就進(jìn)來(lái)之后，他會(huì)旅游，哪一些景點(diǎn)？他這里并沒(méi)有直接把信息放出來(lái)，而是通過(guò)交互之后，圖片往上推，下邊就會(huì)看到這每一個(gè)板塊的是是什么，旅游計(jì)劃，它的時(shí)間是多久，費(fèi)用是多少。

往下是住房的選擇了，這個(gè)地方也不是中規(guī)中矩，來(lái)一個(gè)豎圖，右邊是橫圖，是用了三等分的這種九宮格變形的布局。

最后就是一些用戶的評(píng)價(jià)了，就這地方是論證他們服務(wù)的有質(zhì)量，用了一些用戶評(píng)價(jià)，類似這種評(píng)價(jià)的評(píng)論的，這樣的板塊一般都會(huì)有五到十個(gè)，他是用了一個(gè)左右切換的按鈕來(lái)進(jìn)行更多的切換，所以到了頁(yè)面的最底端，是一個(gè)定，subscriber，郵件訂閱的一個(gè)功能，頁(yè)腳就做的很簡(jiǎn)單。

NO.7

第八個(gè)網(wǎng)站建設(shè)案例，也是跟旅游有關(guān)的，不過(guò)這個(gè)旅游，它，探險(xiǎn)的成分少一些，故鄉(xiāng)的鄉(xiāng)村氣息的成分多一些，它的布局非常簡(jiǎn)單，而且不復(fù)雜，大家可以看一下第一屏，首先是遠(yuǎn)處的山脈作為背景，非常有那種走進(jìn)大自然的這種氣息在里邊，而且班的里邊的文字設(shè)計(jì)很有特點(diǎn)，上面附小標(biāo)題居中。中間slogan，主標(biāo)題居中，兩行，不能多，第三個(gè)是日期，或者是說(shuō)一個(gè)按鈕。是不是常規(guī)的那種按鈕，連連幽靈按鈕都不是，非常有藝術(shù)。再下來(lái)是三個(gè)主主打的服務(wù)，是三個(gè)三等分，中間部分也是居中，居中對(duì)齊。

再下來(lái)，第二屏的后半部分就是介紹這個(gè)服務(wù)的，Hello there!，就有一段文字的背，這個(gè)地方，一個(gè)是文字的對(duì)齊方式很特別，第二個(gè)是這個(gè)背景色，就是logo的主色，這一塊，它會(huì)壓在第四第三屏的圖片的上面，而且第三屏的圖片上面又是以主綠色為主的，這樣看起來(lái)就顏顏色的延展和連續(xù)性非常好。到最后一屏，就是用戶的留言，也設(shè)計(jì)的非常，這個(gè)留留言表，設(shè)計(jì)的非常更。

NO.8 Bali

最后一個(gè)網(wǎng)站建設(shè)案例，我們一起來(lái)看一下，大家有沒(méi)有發(fā)現(xiàn)，網(wǎng)站界面當(dāng)中元素越少，對(duì)齊的方式越少，顏色搭配越少，看起來(lái)越專業(yè)，非常干凈簡(jiǎn)潔，這個(gè)這個(gè)案例非常優(yōu)秀，如果是用來(lái)參與一些比賽的話，應(yīng)該是可以入圍，可以獲獎(jiǎng)的。我們看一看有哪些點(diǎn)值得學(xué)習(xí)，首先是班的區(qū)域，一個(gè)遠(yuǎn)遠(yuǎn)景的背景圖渲染這個(gè)。巴黎巴黎的這一個(gè)氛圍，就網(wǎng)站主題的氛圍，接下來(lái)是有一個(gè)猴子的一個(gè)小的圖片壓在band上面，再下邊，就是第二篇的文字部分，畫杭州沒(méi)有對(duì)齊，跟下面正文對(duì)齊，這種對(duì)齊沒(méi)有凌亂，非常好。接下來(lái)是一些地圖，地圖還有灰色跟綠色的一個(gè)部分的對(duì)比。

第二屏下半部分，這個(gè)標(biāo)題沿用了剛才第二屏用到的特點(diǎn)，就是換行之后沒(méi)有直接對(duì)齊，而是空了兩格，下面是正文，有一些字體的大小，這個(gè)行高都是統(tǒng)一的，再有一個(gè)圖片壓在右邊，再往下第三屏，同樣是用了一些地圖，壓在圖片上，標(biāo)題文字等等，這個(gè)布局是統(tǒng)一的一種規(guī)范，但并沒(méi)有感覺(jué)到，就是看第一屏，第二屏，第三屏有內(nèi)容重復(fù)的情況，沒(méi)有，從其中，最后一屏還有一些小小圖標(biāo)，用于切換左邊內(nèi)容的，這些精致，這個(gè)地方非常細(xì)致。

透過(guò)以上八大簡(jiǎn)潔大氣的網(wǎng)站設(shè)計(jì)案例的講解，相信大家都能理解為什么一些網(wǎng)站經(jīng)過(guò)精心設(shè)計(jì)后，一看就有獨(dú)具一格、不尋常、高端的視覺(jué)感受。這些都是跟設(shè)計(jì)執(zhí)行時(shí)的一些技巧、經(jīng)驗(yàn)有關(guān)的。希望今天的網(wǎng)站定制設(shè)計(jì)案例講解對(duì)大家有幫助。