網站設計評論#9：Ghost Horses in HTML5 and CSS3

關於網站

Ghost Horses這個詞，就會讓我想到幽靈馬車，小時候很紅的黑白郎君殘影就出現在腦海中，所以當我看到這個網站的配色時，我深深開始懷疑是不是真的跟黑白郎君有關。Ghost Horses是位於英國英格蘭曼徹斯特郡，是一個微型的網頁設計公司，他們的目標很簡單，就是創造良好的網站，並且讓網站帶來更大的效益。他們真的可以讓網站提高效益嗎？讓我們繼續看下去。

初次遇見網站

Ghost Horses的網站色系是天空藍、灰、白三種配色，第一眼看到這個網站你會覺得怎麼東西都這麼大一顆，看起來很普通，但是如果你移動了你了滑鼠，你會發現每個區塊都有它意想不到的小細節，那種可以觸動我專心瀏覽這個網站的小細節，讓Ghost Horses這個網站瞬間在我心中的喜愛指數飆高，馬上破口而出“太酷了這個！”，也難怪會得到Site of the day。

網站色系

 #5da9f5  #727272  #f7f7f7

Logo這回事

你可以在Logo就看出這個網站的色系搭配，還有主要用色，因為名稱有Horses所以icon設計理所當然的是一匹馬！不知道為什麼會讓我想到很久以前的影集“黑神駒”。在名稱部分有1px沒有模糊過的淡淡陰影，讓簡單的Ghost Horses加上了立體感，而名稱下方也很直接的點出公司的重點“Website Design”，這裡我覺得比較特別的是他不是寫Web design，而是Website，所以會讓我自然而然地想到他們是設計“整體”網站使用經驗，而不是單一Web頁面，會這樣聯想主要原因就是這個網站的細節真的還不少，尤其是互動的部分，很多都是值得學習的部分。

選單這回事

在主選的部分，總共只有四個選項，這間距似乎異常的寬廣，也因為間距寬廣所以按鈕相對起來就要設計較為大顆。先前有提到Ghost Horses的細節非常多，首先看到的就是按鈕，一般按鈕頂多做到滑鼠移過去會變色，但是Ghost Horses的按鈕除了變色以外還加上了3D視覺效果，讓按鈕好像凸了出來，而這個凸起來的效果甚至還像播動畫一般，在1秒內的時間裡凸起，所以你不會有按鈕突然凸起來的突兀感，相較之下反而覺得這樣的設計非常柔和。

在中間網站標題的位置，你可以看到滑鼠移過去之後就會出現一個鐵灰色小房子，這個小房子除了有外光暈還有內陰影，讓整個房子好像皮雕一般的呈現出來，常常細節就在這種微不足道的小地方上，果然魔鬼都藏在細節裡啊！

在這裡我特別想提一下他的搜尋框設計，老實說實在太小了！雖然在主視覺上方，而且也有一隻放大鏡圖示在那邊，但是顯然的看不出來是個按鈕，所以當你滑鼠移過去之後，灰色放大鏡就會用類似拉霸遊戲那種上下捲動的方式換成了藍色放大鏡，這樣的做法可以讓你立即發現放大鏡好像可以點，接下來你點了放大鏡後，輸入框就以動態效果方式展開，游標也在輸入框前端閃爍著，如果我說到這裡你還覺得好像沒什麼，那我只能說你已經中計了！為什麼我會這樣說呢？原因在於剛剛那一連串的動作與反應都是Ghost Horses設計好的使用者行為，你根據了Ghost Horses所設計的使用者行為做了那些已經“預先”設計好的流程在行動。搜尋在Ghost Horses這個網站顯然並不是特別重要，所以一開始的灰色放大鏡當然就不需要在明顯的位置，但是如果你發現了，Ghost Horses也規劃了接下來的一連串使用者行為，看似一個好像不太好的設計，其實卻是根據了功能的重要性去做規劃，而且後續一連串的細節都沒有放過，看到這裡你是不是跟我一樣對Ghost Horses覺得越來越有趣了呢？

當你的頁面往下卷，你會發現上面的灰色bar一直都會存在，差別在於中間有沒有一匹馬，這匹馬看起來好像只是網站Logo在宣誓品牌，但是實際上，當你滑鼠移上那匹馬，你會看到“Bake to top”的字樣，是的沒錯，這匹小馬可以幫助你迅速回到頁面最上方，雖然設計的位置不太順手，但是當你發現後會覺得還蠻貼心的。

大話網站主視覺

光看到Ghost Horses的主視覺所佔領的疆土這麼遼闊，就會知道這東西真的是超級無敵重要，Ghost Horses的主視覺包含兩個部分，第一個部分是最新消息，內容是最新案例，當滑鼠移過去就會出現該專案名稱，點擊後就可以看到詳細介紹，而第二個部分是核心理念與服務項目，這部分可以做左右切換，一開始看到的就是核心理念：創意、聰明、熱愛、汗流浹背，看得出來就是為了專案會認真地擠出一切的團隊，之後的服務項目幾乎就是一般網頁公司會擁有的部分。比較特別的是中間那匹馬，當你滑鼠移過去之後會有好玩的視覺效果，這樣設計巧妙的把上下兩區塊給融合在一起，減少了區塊感，也讓上下兩個主題不一樣的區塊變的更加擁有整體性。

內文排列方式分析

在主視覺下方的排版，看似簡單，卻也藏有很多細節，比方說上圖的手就會一直來回擺動，你就會不自覺的想看向那個地方，而每個區塊上方的頁簽大標題，當你滑鼠移過去就會拉長，標題處會看到文字有白色1px的描邊再加上陰影，讓文章標題更加凸顯，滑鼠移過也會改變文字顏色，而下方一條短線區隔了內文與標題，在內文最後有藍色的”Read More“，讓你可以看更多的文章，當滑鼠移到”Read More“也會有動態效果，讓你聚焦在”Read More“上。大標題、標題、內文三個部分的文字比例也可以看出其重要性，內文行距也有整整一行高，仔細看看這段文字，上面寫著”我們不是網頁設計工廠“，明確點出Ghost Horses與其他網頁設計公司不同的地方，在文案撰寫上也是非常用心。

內頁標題非常明顯，就如同整體網站的大氣設計，內文採用左右兩欄，左邊是小標題右邊是內容，差別在於有加粗或沒有。

在About裡面你可以看到一個類似和多繽紛樂的東西，組合出來的東西基本上都是他們對Websites的執著與熱情，這樣的互動的確還蠻有趣的，而且在網站上似乎不常見，讓Ghost Horses這個網站更加有趣了。

同樣的About裡頭有兩欄內容也有三欄內容，所以你看到這兩種排列方式在Ghost Horses是如何處理的，比較特別的是，上圖上半部的三欄標題，那淺淺的icon底圖是有配合各標題去做特殊設計的，所以雖然大致上都長一樣，但是在細節上還是有些微不同的喔。

在Portfolio裡你可以看到作品的排列方式，當滑鼠移過去就會有該專案的名稱，這裡的設計與主視覺還蠻類似的，但是呈現方式就沒有向主視覺這麼的凸顯，走清淡路線，這樣的設計是為了怕搶走最上方的藍色彩帶標題，你可以看出這個部分各區塊的權重，這樣的權重設計還蠻容易被設計師忽略的，如果說滑鼠移過去的六角形與彩帶顏色一樣，那這樣的情況下眼睛就會有短暫的不知道重點在哪裡，或者把這六角形的重要性看的以為跟標題一樣重，雖然只有滑鼠移過去才會產生這樣的問題，但是由此就可以看出Ghost Horses對細節的掌握程度有多高。

在News裡你看到另外一種兩欄式排列方式，當然右手邊的圖如果滑鼠移上去，你還是會看到六角形出現，但是不同的是，上面是寫Read More，而當你滑鼠移到某篇文章上時，整篇文章會被框起來，讓你聚焦在一篇文章之中，這樣的細節其實不常見，Ghost Horses運用這樣的方式區隔了文章與文章之間，讓原本無趣的條列式排列變的有趣。

表單設計這回事

在表單排列方式還蠻中規中矩的，下拉選單做得跟一般input text的外觀一樣，要點擊後才會出現下拉選項，另外就是有做input focus的部分，這也是常常會被設計師忽略的部分，因為很容易覺得“反正點下去就會出現游標了”就忽略這樣的細節處理，當然如果真的不處理，在這裡我也覺得只有0.5分的差別就是了。

頁尾設計這回事

Ghost Horses的頁尾充滿了許多社群的元素，像是Twitter、Last.FM以及設計師社群Dribbble，你可以在其他社群上也找到Ghost Horses。頁尾的配色非常沈穩，而藍色六角形白馬logo扮演著句點的角色，點擊後也會立即回到上方，呼應了最上方的Logo，讓網站更具整體性。很多網站常常拉到Footer會沒辦法辨識出是哪個網站，甚至同一個設計師出品的網站Footer常常都長一樣，這反而讓Footer淪為容易忽略的角落，這是很可惜的一件事。而Ghost Horses就是一個很好的Footer設計範例，簡單的一個Logo擺設就可以做到前後呼應，而且透過這樣的設計排版，讓下方的文字不會跟頁尾的沈重配色有疏離感，這也是我覺得Ghost Horses處理很好的地方。

其他網頁技術(CSS、jQuery等)

Ghost Horses的網站有徹底的製作出響應式設計，針對480px、600px、768px、992px、1200px、1380px甚至Apple的Retina螢幕，都有其對應的CSS。Ghost Horses採用Wordpress作為內容管理後台，並且採用HTML5，整體來說不管是針對手機或是各式瀏覽器都有非常好的相容性，如果對於跨瀏覽器或跨手機瀏覽器有需要參考的網站，Ghost Horses會是不錯的參考網站。