國内網站建設領域，比較優秀頂尖的設計公司基本布局在北上廣深四大城市。因為這四大城市的人才輩出，同時客戶對于北上廣深網站建設公司輸出的作品案例也更高。我們沒有辦法三言兩語就道破這些優秀公司為什麼能設計出那麼高大上的作品，但通過今天的八個精緻的網站案例，可以簡單分析一下他們為什麼簡潔大氣。

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

NO.1 Tripgoals. 公司網站

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

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

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

NO. 2 City Guide.

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

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

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

NO.3 Chalatix Agency

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

另外，就是有第二屏，第三屏的地方，它一些圖的布局，是大小不一的，這種是有一定的難度的，在後期做交互的時候有一定的難度，以及最下邊的一些，服務的選擇12345這種，它是當等邊分成五五部分，有當前的部分，就展開放大，這個是一個常見的一種逐漸交互，但是它這裡用的非常好，它的一些小的單詞是豎着放的，展開的是橫着放，這種是一種别緻的做法。

NO.4 Artisans

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

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

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

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

NO.5 Adventure

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

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

下面是剛才作品的内頁延展設計，保持統一的調性，删格系統。

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

NO.6 Morritika.

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

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

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

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

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

NO.7

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

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

NO.8 Bali

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

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!