國內網(wǎng)站建設領域，比較優(yōu)秀頂尖的設計公司基本布局在北上廣深四大城市。因為這四大城市的人才輩出，同時客戶對于北上廣深網(wǎng)站建設公司輸出的作品案例也更高。我們沒有辦法三言兩語就道破這些優(yōu)秀公司為什么能設計出那么高大上的作品，但通過今天的八個精致的網(wǎng)站案例，可以簡單分析一下他們?yōu)槭裁春啙嵈髿狻?/p>

有設計師認為，簡潔大氣，就是極簡主義的一種。也有人認為，用戶進入官網(wǎng)后，想找什么，不需要思考，不需要學習，就可以快速找到想要的東西。還有人認為，進入公司網(wǎng)站后，瞬間被一張非常有深度和內涵的圖片、色彩給吸引住了，沒有多余的元素干擾，這也是一種簡介大氣。看來，不同的用戶，不同的設計師，對于簡潔大氣的理解還是有些偏差的，沒有統(tǒng)一標準。

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

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

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

在部分模塊區(qū)域，還結合交互設計，對圖片的外觀進行銳角、圓角的處理。而這些都是跟品牌符號有關系的，并非設計師想怎么做就怎么來。

NO. 2 City Guide.

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

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

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

NO.3 Chalatix Agency

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

另外，就是有第二屏，第三屏的地方，它一些圖的布局，是大小不一的，這種是有一定的難度的，在后期做交互的時候有一定的難度，以及最下邊的一些，服務的選擇12345這種，它是當?shù)冗叿殖晌逦宀糠郑挟斍暗牟糠?，就展開放大，這個是一個常見的一種逐漸交互，但是它這里用的非常好，它的一些小的單詞是豎著放的，展開的是橫著放，這種是一種別致的做法。

NO.4 Artisans

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

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

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

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

NO.5 Adventure

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

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

下面是剛才作品的內頁延展設計，保持統(tǒng)一的調性，刪格系統(tǒng)。

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

NO.6 Morritika.

Monica這一個網(wǎng)站，大家看這個背景，能首先自己能猜測到這是做什么行業(yè)的嗎？也是跟旅游相關的，因為這么大一個大自然的背景，后面這么精美的山，云，樹林，哈很很明顯，就是一個，生活的，探險的，旅游的一個氛圍的。那這個網(wǎng)站的特點是什么，因為這個一看起來就是一個旅游的平臺了，它的信息量會很大，在信息量很大的情況下，我們怎么布局這些信息？讓它看起來既有成就感又不亂。

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

到了第二瓶，就是用戶的旅游計劃就進來之后，他會旅游，哪一些景點？他這里并沒有直接把信息放出來，而是通過交互之后，圖片往上推，下邊就會看到這每一個板塊的是是什么，旅游計劃，它的時間是多久，費用是多少。

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

最后就是一些用戶的評價了，就這地方是論證他們服務的有質量，用了一些用戶評價，類似這種評價的評論的，這樣的板塊一般都會有五到十個，他是用了一個左右切換的按鈕來進行更多的切換，所以到了頁面的最底端，是一個定，subscriber，郵件訂閱的一個功能，頁腳就做的很簡單。

NO.7

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

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

NO.8 Bali

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

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

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