網站設計評論#10:Forefathers Group with RWD

關於網站

Forefathers Group是一間擁有網站、品牌、開發等相關服務的團體(或工作室?),整體網站充滿了獨特的風格,強烈的馬戲團氛圍設計讓人不知不覺的想繼續看完整個網站的內容,很想知道在哪裡還會蹦出其他人物或是有趣的設計,而且選單分類明確,很快就可以獲得所需的資訊,最重要的Forefathers Group還擁有RWD設計,非常符合現今網站要跨平台的趨勢,到底Forefathers Group有多好?跟著文章一起來發掘吧!

初次遇見網站

看到Forefathers Group網站時,我當下的第一反應是Forefathers Group應該是使用Open Source再加上客制化設計所架設出來的網站,仔細一查就會發現原來是使用Drupal這套Open Source去做內容管理,接著我開始縮放瀏覽器視窗,發現Forefathers Group擁有RWD設計,這讓我對Forefathers Group這個網站產生更容厚的興趣,就好像找到另外一個像Ghost Horses一樣精彩的網站,而Forefathers Group也與電影奧茲大帝有著相同的馬戲團主題,帶著濃厚的神秘色彩,不由得想要仔細瀏覽這個網站,這樣營造氛圍的方式常常都是網站成功的原因之一。

網站色系

 #eeeae1  #231313  #72a6a7  #f14546  #ccae39 

Logo這回事

Forefathers Group的Logo裡,你可以感受濃厚的外國氛圍,而F跟S下方捲曲的形狀會聯想到音符或是中世紀時代紳士會流的細長捲曲鬍子,也會讓我聯想到到瘋狂達利。而那樣的紳士形象其實也很容易出現在電影的馬戲團情境中,通常這樣的男子都可能帶著高帽、留著鬍子,可能還帶了單片眼鏡,這樣的男子都會擔任嚮導類的工作,我想這就是為什麼在Logo上會有一個帶著單片眼鏡的眼睛之緣故,不過也有可能我想像力太過豐富了(笑)。不過有一點是確定的,那就是Forefathers Group開始於2011年,至今未滿兩年的組織,卻在網站上使用了一些復古的元素,讓我會有一種這個品牌已經經營許久的錯覺,一個單色系的LOGO居然就可以把我的時空拉到中世紀去,真的有點不可思議!而且logo外圍不規則曲線讓logo凸顯的立體感,但是又不像一般陰影那樣的死板,讓logo增添了趣味性。

選單這回事

Forefathers Group的選單裡,採用簡潔乾淨的排版,由於選項不多,字母也不多,所以很容易會有空洞的感受,在這裡Forefathers Group加上了小字說明選項裡面的東西,除了有點前情提要的作用外,也可以泥補選單過於空洞單調的排版設計。雖然說Forefathers Group在選單上並沒有製作太多的細節,但是也沒有忽略當滑鼠移過去後要有明確的變化這件事,看的出來就算是很簡潔的設計排版,依然沒有忘記最重要的細節。

在首頁主選單下方有一排文字,清楚標示出Forefathers Group的服務項目,把服務項目這個重點放在首頁的主選單下方,這樣的排版方式非常簡潔明瞭,又可以讓網友在第一時間內清楚Forefathers Group有哪些服務,對於想找Forefathers Group服務的網友來說,無疑是最棒的排版方式,省略了翻閱網站尋找服務項目的時間,又很明確地表達出Forefathers Group的服務,至少對於我這個網友來說就是非常貼心的排版設計。

在RWD的處理上,如果遇到螢幕較小,選單就會變成垂直排列,一行一個,這樣的設計方式很容易讓選單占滿了第一屏的畫面,如果今天網友是用手機來瀏覽,那非常可能會忽略首頁下方的內容就到達內頁去了,不過這裡也可以驗證選單下方的說明文字真的在視覺表現上是有尼補選單過於空洞的感受的。

頁面右上角有個藍青色信封icon,傳達著點擊信封icon就會開啟聯絡他們的方法,當網友點擊信封icon後就會重上方展開一個聯絡表單,而信封icon也會變成叉叉圖示,很容易理解點擊一下叉叉就會關閉表單。Forefathers Group的表單是踩橫向排列,一般使用桌機或筆電當然在填寫表單上不會有問題,但是如果遇到螢幕較小的平板甚至手機,那可能就沒這麼好填寫了,而Forefathers Group的聯絡表單欄位也不算多,正當我以為當我縮小視窗會看到表單從橫向轉變成直向排列時,Forefathers Group又給了我一個驚喜!

天啊!原來遇到螢幕較小的時候,聯絡表單就會替換成email連結,網友點擊後就會自動開啟mail app了,完全不需要填寫表單,這種做法還真是一絕。

大話網站主視覺

由於Forefathers Group是一個營造氛圍引人入勝的網站,所以在設計上你會發現許多地方都很像主視覺,但是又好像不是,在Forefathers Group中,主視覺其實並沒有特別突出太多,但是又會發現許多地方都有類似主視覺的設計,像這樣的分散式視覺分布是一種跳脫常見官方網站設計的手法,這樣的設計排版會讓網站不至於太過老套或死板,再加上搭配Forefathers Group網站營造的馬戲團氛圍,你真的會有一種好像有個魔術師在帶你瀏覽整個馬戲團的感受。

在首頁服務項目之後你會看到上圖這樣的區塊,這樣的區塊就像我剛剛說的,好像有個魔術師在帶你導覽這個網站,我們先不思考這個網站,一般官方網站通常要強調的點除了公司本身以外就是公司所有的服務項目或產品,這點在Forefathers Group網站來說也是一樣的,所以一開始的導覽就是從Forefathers Group本身以及服務項目等等開始介紹起,當你點了左邊類似票券形狀的按鈕之後就會到Specialties(專長) 這個頁面來,至於內頁部分我們等一下再來一起看,讓我們繼續在首頁往下看下去。

一般常在拿來當主視覺的輪動式Banner出現了!可是一般輪動式Banner都會下連結,讓滑鼠可以Click,但是奇怪了,為什麼他們家的輪動式Banner都不能Click勒?為什麼不能點擊呢?既然不能點擊就讓我們繼續往下看下去。

咦?男主角出現了嗎?在輪動Banner下方出現的是Forefathers Group的介紹,大大的金色標題寫出現在是他們品質黃金年代,右邊還有放大鏡可以切換瀏覽一些作品的細節,原來輪動式Banner無法點選是因為重點在下面,但是我覺得這裡的動態可以在更多一些,比方說點擊放大鏡左邊的原點時放大鏡會稍微轉一下之類的,對於圖片更換只有淡入淡出的效果來說,我覺得在互動視覺上的衝擊性不太夠,讓我有一種畫面很美麗,但是卻跟我有隔閡的感受,好像在說你想看更多就繼續往下看吧!

噢天啊!這種復古的馬車還真是搶眼,左邊跟右邊的選擇好像西洋版的東西軍,當滑鼠移過去會整個半邊變淡,這裡我個人覺得有點奇怪,因為一般移過去都是變深色比較多,但是為了搶眼所以一開始的顏色就頗重的,如果全部換色好像又有點不搭,所以想來想去好像還是變淡是最好的選擇,我仿佛可以看到設計師當初這既這裡那種煩惱的情境,搭配左右邊的選擇還真是可以把煩惱的氛圍發揮出來阿!下方就是客戶見證之類的東西,只要按了NEXT或BACK就會往上或往下滑動,除了左側Logo是圓形樣式外,其他部分感覺上就有點中規中矩了。

在下方客戶列表的地方,可以看到傳說中的男主角一般雜耍一邊騎單輪車,如果這部分採用動態影格動畫來處理的話,肯定可以提升這個網站的有趣程度,透過這張插圖可以與上方的插圖做呼應,讓氛圍與故事性延伸。但說實在的,我自己都覺得我剛提的動畫處理好像有點多餘,單純只是為了讓視覺上看起來比較好玩一點,對於客戶列表只是排排站的公司名稱外,我覺得Forefathers Group的插圖實力就已經將這區變得有趣了,比起客戶見證的中規中矩來說,客戶列表我覺得處理上有比客戶見證稍微好一些。

沒想到原本只是想談一下主視覺,我卻幾乎把整個首頁的講完了,這麼長的首頁如果換到手機上會是什麼情況?一般來說太長的頁面在手機上並不容易瀏覽,雖然說內容豐富是件好事,但是在螢幕較窄的手機上,太多豐富的內容,尤其是太多字的地方,都變成使用者在瀏覽內容上的困擾,所以對於Forefathers Group這麼籠長的首頁,我當然對於他們在手機上的處理方式很有興趣,沒想到Forefathers Group在這裡又是一絕,直接拿掉文字較多的客戶見證,並隱藏部分插圖,於是用手機Forefathers Group就會發現頁面比大解析度下的少很多,但是由於Forefathers Group的首頁原本就很豐富,所以即使減少內容,在手機上瀏覽也不會有一種被“截斷”或“刪除部分內容”的感受。

比較值得一提的是,當用手機瀏覽Forefathers Group首頁時,會發現輪動視覺banner部分的比例與桌機剛好相反,使得寬度較寬的圖片換到手機瀏覽時會完全看不懂輪動視覺banner要傳達的內容,即使可以透過箭頭來操作banner,也會因為版面設計上的排版緣故,導致這個區塊有遺珠汗,這個問題在RWD網站上算是很常見的問題。

內文排列方式分析

Forefathers Group在美個頻道內頁開頭都會有像上圖一樣的頻道設計,而且每個頻道單元顏色皆不同,下方會有標題說明跟小標題說明文字,以SEO角度來看個很不錯的設計方式,但在RWD下就要小心這些文字過長導致與下方間距過小而產生擁擠感。

大部份的Forefathers Group內文排列都走中規中矩路線,與首頁比起來豐富性是比較少的,但是部分細節上也是有處理的,比方說像上圖中每個頻道內文反白的顏色都使用藍青色,但如果說今天的設計是每個頻道的反白顏色就跟該頻道主色系一致,那這樣的反白的色系設計會更加到位。

Forefathers Group在作品集部分採用滑鼠移過會出現專案名稱與專案類型的互動方式,由於這裡大部份都是矩形方框的排列方式,這樣與滑鼠互動的設計雖然算常見,但是卻讓作品排列增加了幾分趣味。

作品集內頁排版的方式在手機或平板上瀏覽,視覺上感受還算舒暢,但是遇到大螢幕就會產生壓迫感,尤其是遇到網站截圖的部分,由於圖片太大又是完整頁面截圖,很容易會有到了另外一個網站的感受,雖然說這樣的大型截圖可以看見許多細節,但是除了檔案較大在網路頻寬較少的情況下會讀取較慢以外,圖片的壓迫感也會太大,如果說是採用部分截圖,然後踩兩欄式排版(當然螢幕較小的情況下可以恢復成單欄排版)應該可以解決圖片太大造成壓迫感的情況。

Forefathers Group在插圖的運用上可以說是非常不錯,比方說在講述組織的時候就以簡單的數學公式加上插圖來表現,這樣的內文排版非常使得網友不需要仔細閱讀太多文字,光是圖片就可以了解Forefathers Group是由兩個組織合併而成,比起下方個人員的介紹真的簡單很多,而Forefathers Group也非常了解自己的專長在何處,所以在人員介紹的大頭照上也做了一些插圖處理,透過色系調整讓現代人的頭像也帶有融融的復古風,所以也將網站的氛圍延伸至頭像上,可以想像如果這些頭像沒有經過插圖與色系處理,在這個畫面上就會顯得突兀、格格不入。

頁尾設計這回事

在頁尾部分放置了大大的訂閱電子報訂閱表單,在頁尾的比重顯得非常重要,傳達了Forefathers Group強力希望網友輸入mail訂閱的含義,中間的網站選單比重上就較輕。比較可惜的是頁尾左側的Latest Tweet沒有任何資料,不然這裡的社群性就會顯得很高,但是由於內容空空如也,所以也只剩下copyright的Facebook按鈕跟右下角的社群連結。

總體來說Forefathers Group的網站在氛圍表現上非常的不錯,運用大量的插圖把網站變的復古,但是內頁處理上就顯得沒有首頁來的用心,整體表現變得中規中矩了起來,部分細節上還是有處理,但是驚豔程度就沒有首頁來的高,不過光是首頁的佈局與氛圍處理上,個人就覺得還蠻值回票價了,更何況我還沒有買票呢!

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見方法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#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的頁尾充滿了許多社群的元素,像是TwitterLast.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會是不錯的參考網站。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見方法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#8:CSSPiffle Pitch Deck in HTML5 and CSS3

 

關於網站

CssPiffle是一個線上CSS編輯工具,透過圖形界面讓你不需看懂CSS也可以編輯出漂亮的頁面。它在網站上點出了Photoshop在哪些地方的細節是網頁上無法層限,點出了Photoshop其實不適合用在網頁設計上,但是直接弄成網頁又要不斷的Code、debug、Code、debug,相較之下就麻煩許多,所以CssPiffle就是直接讓你透過界面化編輯,不用撰寫Html,直接產出Code,讓你不用一直Code、debug、Code、debug的迴圈之中。

初次遇見網站

第一次到CssPiffle就被它的開場loading給嚇到,因為除了白茫茫一片以外只有一個不斷淡入但出的logo,什麼東西都看不到,一直到loading完,出現的畫面居然是這樣的精簡又有創意,整個網站整體來說非常簡單,但是看起來卻非常精美,而且畫面與技術上的搭配可以混合出像CssPiffle這樣的視覺效果,也可以說是非常不容易,不只是技術,還要很清晰的資料脈絡與簡潔設計的能力才能達到這樣的成果,話不多說,就趕快來分析一下CssPiffle這個網站吧!

網站色系

 #149be1  #d51705  #fafdff 

Logo這回事

CssPiffle的LOGO採用3D視覺風格,通常這樣的風格會讓人聯想到跳出框架、創新、不平凡等關鍵字組,也因為這樣的3D視覺容易帶來衝突的感受,再加上CssPiffle在Logo上方採用紅色處理了一個角落,會有突破重圍的或集中施力點的感受,對CssPiffle這樣的創新工具來說的確是蠻符合他們的產品特質,而藍色系通常都會聯想到科技,紅色則是熱情,淺色系通常都會有年輕、新意的涵義,所以在色系上的選擇就會聯想到這是帶有熱情的新科技產品的涵義。

選單這回事

CssPiffle的選單非常的單純,採用純文字平均分配詞距來排列,然後用紅色按鈕形式代表目前所在位置,並且固定於整體頁面上方,不會隨著滾動而消失,會這樣處理主選單主要是因為CssPiffle全部只有一個頁面,這也是為什麼一開始需要loading的原因,由於整體內容都會一次loading進來,所以為了不讓網友過度等待,才做了loading畫面,接著主選單的固定也可以讓網友明確知道目前看到哪裡,後面還有多少內容等等,除了選單功能也有目錄索引的效果。不過如果滑鼠停止移動一陣子,選單就會隱藏,當滑數移動,選單就又會出現。

大話網站主視覺

CssPiffle的主視覺非常的簡單、清楚,中央大大的Logo讓你無法忘記它的品牌,下方的文字加的恰到好處,左右兩邊的手繪風圖案,仔細觀看就會發現很多事瀏覽器、螢幕、曲線、html標籤等等與網站相關的內容,背景模糊的襯底、周圍再加上霧化,帶出了整體的氛圍,並且凸顯了中央的3D視覺風格logo,這樣的視覺設計佈局,你怎麼可能不被它所吸引呢?

內文排列方式分析

一頁式網站設計的要點就是在每個區塊都要可以吸引網友的注目,不管是有有趣的還是吸引人的方式,都要讓網友聚焦在當前的頁面上,所以頁面資訊勢必是精簡在精簡過的東西,而CssPiffle的內文排版除了點出細節以外,文字說明部分接採用手寫效果,在內容精簡又做特殊效果處理的情況下,會讓人不由得想看完每一個字,仔細觀看每個箭頭說得說明到底是什麼涵義,而左方的Photoshop工具列則可以達到吸引目標網友群的功能,畢竟這樣的工具是提供給專業人士,所以帶入專業人士熟悉的畫面勢必會讓專業人士更加注目。

在上訴同樣的區塊中設有左右箭頭可以切換內容,由於網站是採一頁式,所以當區塊內的資訊不是一個畫面就可以說明完的時候,改用橫向左右切換的方式是最佳的選擇,當然在這樣的區塊中你可以看到CSS code,更加可以吸引專業人士的注目,而且這個區塊還做了一些視覺上動態效果處理,下方說明文字也會跟著效果次數而增加,彷彿就好像目前的畫面正在跟你對話一般,唯一比較可惜的事這個網站的高度設定比我目前的解析度(1440X900)還高,我是來回看了幾次才發現這個有趣的設計。

依然在同區塊中,你可以看到畫面上有兩個黑色圓圈,就跟apple目前在介紹Retina的方式一樣,透過局部放大與左右對比可以明顯看出兩邊的差異,而且還可以達到與網友互動的效果,雖然不會回饋給網站,但卻可以在網友心中留下深刻的印象。

在產品介紹的部分採用三欄式排列,明顯讓網友一眼就可以看到操作介面、實際畫面、CSS code的部分,依然保持簡潔、乾淨、清晰的設計。

在案例介紹部分也是一絕,直接連承載的形式也都一同展示出來,背景的霧化效果再次把氛圍營造出來,不管是螢幕、iPhone、iPad展示都有,更妙的是點擊該案例還會跳出模擬實機與內容的demo頁面,利用實際產品的吸睛程度帶出中心的結果畫面,效果就是好上加好。

工作人員名單採用了兩欄式排列,由於是區塊呈現,所以不會與剛剛的三欄式有衝突,而照片圓角框部分也讓這區塊不至於太過嚴肅,顯得活潑了許多。

老實說這個Business的區塊是我最看不懂得部分,但是雖然看不懂卻覺得還蠻酷的,大概可以知道想表達的就是購物籃中可以裝各式各樣在設計中所需的東西。

Market部分更是一絕,將數字圖像化,並且將重點數字加粗或加上顏色,這個部分的效果運用在簡報上也是非常不錯的噢!

直接在網站中放置timeline讓網友清楚看到發展歷程,這招真的很棒!你想不注意都難,但是如果沒有背景的霧化創造氛圍,那這個區塊也會若許多,這就是精簡設計最厲害的地方,多一分太多,少一分太少!

表單設計這回事

CssPiffle的表單非常簡單,只有兩欄,單純的不得了,上方三個圓圈除了mail資訊外還有社群功能,最後用紅色的send按鈕,明顯絕對不會找不到!

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

CssPiffle是一個HTML5+CSS3的網站,看似很炫的效果其實不外乎也還是用javascript做製作出來的,在頁面結構上除了Html5的hack項目與modernizr(檢測瀏覽測是否支援HTML5標籤)是放在meta之前匯入以外,其餘的javascript都放在頁尾匯入,通常這樣放置可以讓網站內容讀取更加快速,當然就會延緩javascript的執行時間,當然如果需要大量匯入javascript相關資源,那還是建議放在頁尾會比較好。

CssPiffle本身有用到Google的fonts api,javacript是採用jQuery相關資源,但是幾乎所有的class都是自行開發的,沒看到其他像是直接取用線上資源的部分,比方說區塊的路徑部分就是自行辨別網址#號後面的單詞來判斷應該停留在哪個內容區塊,或是選單在滑鼠不動後多久影藏接著移動又出現等等,透過這些javascript class觀察看來,CssPiffle本身的coding能力應該是非常好的,已經超出我可以介紹的範圍了,如果對運用jQuery開發class或套件有興趣的朋友應該是可以參考到很多內容才對。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#7:Quarter Rest Studios - HTML5

關於網站

Quarter Rest Studios是一個位於美國紐約布魯克林區的數位媒體工作室,所以網站裡充滿了他們的影片或音樂作品,是一個簡約清新、主題明確的網站,在許多地方的設計方式上也充滿巧思,雖然簡單,不過這種媒體網站如果無法吸引瀏覽者,那跳出率會非常高,不過這個網站卻會讓人認真的瀏覽喔。

初次遇見網站

一直以來都沒有看過這種數位媒體工作室的網站,像這樣的數位工作者通常都可以運用畫面或聲音帶動觀者的情緒與心理,是非常了解如何掌控氛圍的一個工作類別,所以剛看到這個網站的時候覺得還蠻新鮮的,尤其是線上音樂播放的部分還可以看到波型,播放過還會覆蓋一層淡灰色顯示播放過,就跟一些音樂剪輯軟體一樣,感覺真的非常新鮮,也由於他們的專業就是數位影像跟音樂,所以在整體網站上無形中就加分非常多,也因為他們專長與重點是影像與音樂,所以網站走簡潔風更能讓焦點聚集,可以說這個網站看似一般,但是卻隱藏著無限的潛能喔!

網站色系

 #d5d110  #565656  #ffffff 

Logo這回事

Quarter Rest Studios的Logo非常的妙,一眼就可以看出與音樂有關係,因為他們的Logo就是一個四分休止符,為什麼會是休止符,其實就我個人猜測,應該是希望大家可以暫停一下,專心看看他們的傑作,在音樂中,這樣暫時的寧靜,反而可以讓大家更專心的等待接下來會出現的旋律,簡單,卻引人入勝。

選單這回事

選單的設計很簡潔卻也很大氣,沒有擁擠感反而有排場,與Logo做搭配更是絕妙,我一向很喜歡把Logo放置在版頭中央的網站,因為會比大部分都放在左上角的網站還要吸引我的注意,如果那個Logo百看不厭,那也代表著我會反覆一直看著網站的選單,久久不能忘懷。Quarter Rest Studios的選單分類把他們的專業項目分開來擺放,所以不會看到一個選項叫做“作品”而是會看到“影像”、“音樂”兩個分類,如果我一直反覆看著Logo,那也代表我一直看著他們的專長項目,看似沒有什麼的選單,卻隱藏了深層的涵義。

大話網站主視覺

Quarter Rest Studios的主視覺我覺得很棒,因為每一張都是他們的影片廣告作品,連結都在左下角中,但是如果一開始進入網站就播影片那網站會顯得很慢,而且如果很快點選了主選單,那等於什麼都看不到,除了白搭還會黑一大塊在那邊,在畫面上當然就會被打折扣,但是Quarter Rest Studios卻放上了一張朦朧美的圖片,不知不覺的就會讓人非常想要點擊左下角的播放鍵,讓人想要看清楚內容是什麼,小小一個圖片效果就可以引發瀏覽者的興趣,真的很利害。

內文排列方式分析

在影片類別的排版我只能說厲害,其實運用了跟首頁的主視覺一樣道理的設計排版,只是首頁需要的大圖像來當主視覺,並且營造氛圍,但是內頁顯然就不需要這麼大一個視覺,所以在這裡他們使用“局部”這樣的圖片,一樣可以引起瀏覽者的興趣,就像瞎子摸象那種感覺,你只摸到象腿並不會看到整隻大象,如果想要看到全貌,你勢必需要點擊播放按鈕,就是這樣的運用,讓人很想要一部一部的一直點下去,我只能說他們真的很會運用心理學去做整體的佈局,很多國外的網站其實佈局也都很簡單,但是越是簡單的佈局,就隱藏著更深層的涵義,這是台灣許多網站都看不到的部分,這點真的需要好好的學習學習。

在音樂部分,由於音樂沒有畫面,當然就不可能像影片那樣有個畫面截圖去運用,所以這裡他們很聰明的直接將音樂的波型放上去,除了讓人一看就聯想到音樂以外,還會讓人不自覺的想要播放看看這樣的波型會是什麼樣的音樂,沒想到我一點下去,一聽更是了得,那音樂的優美跟意境會讓我很認真的聽完,而且還會想要一次再一次的聽下去,無形中就有中了他們的“詭計”。

第一次覺得內頁需要整體截圖才可以讓大家明白他們想營造的氛圍,這就表示在這一樣上的佈局是考慮到整體的畫面,所以非得整頁一起講才能讓人明白,主選單下來就是非常精簡的介紹,還有一張所在位置的簡圖,我覺得像這樣類型的工作者,非常明白簡短的文字就非常足夠讓別人了解他們,而下方的照片是一個環境簡介的小相簿,談白說我一開始不知道這裡的照片可以輪播,是當我覺得下面灰色一條底,又這麼厚實,實在與網站不配時,一個不小心滑鼠移到上方,才看到圖片切換的箭頭,才明白原來那裡是文字描述的區域。有的時候一張照片就可以勝過千言萬語,看完這些照片,我真的可以明白為什麼他們的作品這麼吸引人,因為他們的生活真的還蠻讓人嚮往的,就光是那幾張照片,就足夠讓我想到實地去看看實際的情況了。

下方的客戶Logo排排站部分,對於他們把客戶的Logo顏色簡化之後,放置於網站上的確看起來非常整齊,而且不會因為太多顏色顯得雜亂無章,而且每個Logo的排列方式都不一樣,我覺得這樣的處理非常是最適當的,我相信一定有些客戶會反應不能這樣放,畢竟顏色對企業來說也是非常重要的,可見他們與客戶的關係應該是不錯的才對。

表單設計這回事

老實說看到表單欄位這麼大一個,一開始我有點訝異,想說這難道是給老人家填的不成?但是仔細看看右半邊的資訊,我突然覺得也許左邊是為了配合右邊才將表單弄這麼高,整體看起來還蠻清爽的,其實並不會太過突兀,而表單的說明文字在表單上方這樣的排列方式,在國外還蠻常見的,這樣就可以避免文字在右方長短不一的情況,也會讓版面看起來更加清爽。

頁尾設計這回事

通常這樣的頁尾除了可以幫助SEO頁面與頁面的連結性以外,還可以提升瀏覽者在頁面本身上的瀏覽順暢度,當頁面過長時,我不需要在回到上方也可以切換頁面,而這個網站的頁尾也加上了一些社群連結,提升了這個網站在社群部分的運用,讓瀏覽者可以切換到其他社群網站參與其他的事物,老實說看完網站我也不經意的點擊了這些連結,想看更多網站上沒有的資訊,可見我真的很喜歡這個網站。

其他網頁技術

Quarter Rest Studios是採用HTML5技術製作,由於有許多影片與音樂的緣故,又為了支援手機瀏覽,所以採用HTML5是最好的選擇,該網站也有設定viewport是隨設備的寬度做調整,而且在原始碼中我看到了一些wp字樣,似乎該網站是採用wordpress架構所製作的網站,並且運用了ColorBoxSoundcloudisotopeBBQ等jQuery plugin 。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#6:Cherry Blossom 蛋糕店 -HTML5網站

關於網站

Cherry Blossom是一間手工蛋糕店,所以提供客制化蛋糕服務,不管是婚禮、生日、畢業、紀念、退休等等,只要是值得慶祝的日子,都一定少不了蛋糕這個焦點,而這家蛋糕店位於紐西蘭皇后鎮,酷吧!我們今天看的是一個紐西蘭的網站!

初次遇見網站

Cherry Blossom這個網站看起來非常一般,但是你絕對想不到這是一個HTML5的網站!最近跟很多朋友聊天,大家似乎都以為HTML5的網站就是很絢麗,會有很多動畫飛來飛去,跑來跑去,很多效果都比Flash好,坦白說,真正的HTML5網站,其實很多地方看起來都跟現在的HTML4或XHTML網站並沒有落差太多,所以我覺得Cherry Blossom就是一個很好的例子,它真的是HTML5,只是我如果沒提,我想很多人也不會發現到這點。

網站色系

 #e38a9e  #4e3226  #ffffff 

Cherry Blossom字面上的翻譯就是櫻花,而這個網站色系也就採用櫻花樹的配色,櫻花花朵的粉紅色與櫻花樹幹的咖啡色,搭配白色,就會不自覺的讓人聯想到日本冬天櫻花盛開的感覺。

Logo這回事

你可以看到Cherry Blossom的圖形部分Logo是已精簡的三個弧線代表三層蛋糕,在上面點綴著櫻花樹枝,下方的字體會讓我想到提姆波頓的地獄新娘,從動畫中衍生出來的字體Corpse Bride Font,不過Corpse Bride Font有著重重的陰沈感,但是Cherry Blossom卻讓人覺得可愛、有趣、又特別!但個人覺得OCCASIONAL CAKES字樣如果可以換個字體可能會比較適合,現在看起來有點突兀,就是有那麼一點無法融入上方的感覺。

選單這回事

Cherry Blossom的選單非常單純,是純文字形式,當前頁會顯示白色,滑鼠移過去其他連結也會從咖啡色選變成白色,看似簡單的調換顏色,很多網站卻會忘了做,最後面的Facebook滑鼠移過去會變成Facebook的藍色,點擊後會跳出新視窗連結到Cherry Blossom的粉絲頁,目前有1,389位粉絲,還算不錯。

內文排列方式分析

Cherry Blossom的內文排列其實還蠻粗魯的,很像把字貼上就搞定了,所以在很多頁面都可以看到需要改進的地方,唯一比較OK的部分大概就是首頁了。

標題處字體明顯變大很多,一點就可以看見標題的訴求,右方的圖片搭配合宜,使用櫻花點綴蛋糕的商品圖片可以讓Cherry Blossom的品牌名稱具體化,並加深在網友的腦海中。標題與內文的間距明顯比內文段落間距大,幾乎是1倍的落差,很多時候常常看到台灣的頁面標題行距與內文一樣大,這樣的排列會讓內文與標題中間有擁擠感,如果行距隨著字體大小一同作調整,那說不出來的奇怪或擁擠感就會消失了。

表單設計這回事

在Contact us這一頁可以看到一個聯絡表單,表單排列靠左對齊,上方兩排表單的寬度與下方的多行textarea一樣寬,所以會達到齊頭齊尾效果,不會尾端突然凹進去或凸出來,唯一比較可惜的就是畫面左下角空白區塊太大,如果可以放張產品圖或是地圖應該都可以更加豐富這一個頁面。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#5:大友克洋原畫GENGA展覽

關於網站

大友克洋是日本知名漫畫家與動畫導演,在1988年《阿基拉》這部作品發佈後開始揚名國際,押井守的《攻殼機動隊》也深深受大友克揚洋的《阿基拉》影響,在台灣近期較讓人印象深刻的動畫片莫屬於2004年的《蒸氣男孩》,而今天這個網站就是大友克洋原畫GENGA展覽的官方網站,這次展覽除了展示大友克洋生平與原畫以外,還有將收入部分作為公益鎮災使用,而且展覽採用預約制,沒有預約無法進入觀看展覽,所以現在可以說是動漫迷爭相搶訂預約的狀況噢!

初次遇見網站

剛到大友克洋原畫GENGA展的官方網站,映入眼簾的就是大友克洋的原畫圖稿,那樣的背景很容易會吸引動漫迷注意,所以透過背景的運用就可以抓住目標網友的眼睛,這樣的作法既簡潔又明確,是個很棒的做法,運用原畫把主題很清楚的呈現出來,在那樣黑白灰的畫面加上了代表注意的紅色,就可以把區塊與內容完整呈現出來,所以在整體第一屏的設計是非常優質的,如果在快速的往下捲動,你會發現背景的圖案會有層疊,這與傳統的背景呈現不同,比較不會有圖片突然換圖片的突兀感受,反而增加了一種流動感,而這個流動感又與網站的瀏覽動線是有一致性的,就會讓網友在瀏覽網站的過程更加的順利也更加的順眼!

網站色系

 #d72130  #353535  #ffffff 

灰色與白色主要是原畫謄上螢幕的色彩,而紅色就是整體網站區塊的主色系,但是由於正紅色太過搶眼,所以網站的紅色除了用淡一點的紅色以外,還做了一點透明效果處理,除了讓背景可以透到前面來以外,也可以消除一部分紅色的緊張感。

Logo這回事

雖然這個網站是一個展覽網站,不會有顯眼的特殊Logo設計,但是為了呈現出主題,你可以發現在第一屏就有很顯眼的“大友克洋原畫GENGA展”字樣,還帶有日期、時間與地點,對於一個展覽來說,展覽名稱、展覽日期、展覽時間與展覽地點這四個部分是非常重要,而且缺一不可,另外我們可以看到網站有座一個小小的ico圖示,可以很清晰的看見大友克洋四個字,加上網站Title又重復了一次,這在主題性明確的網站上是很容易發現卻也是很容易忽略的一個小部分。

選單設計這回事

大友克洋原畫GENGA展的選單設計其實非常單純,而且設計比較非常的小,你可以看到選單被小小的放在左上角,原因在於整體網站幾乎都是用直線瀏覽方式,除了消息公佈以外,剩下的內容都在同一個頁面中做流動,所以左上角的主選單反而變成一個導引,當然選單的重要性就沒有這麼高,設計比重上自然就會顯得區塊比較小,但是由於這個區塊是固定在左上角,所以只要一捲動頁面,就會發現選單的存在,更加讓選單友導引的意味存在,在資料量較小的頁面,這樣的選單設計是非常合宜的,並且看起來非常大氣。

內文排列方式分析

內文排版以整齊的靠左對齊為主,直線型排版標題字體大小是內文的三倍大,而標題與內文的行距是內文行距的兩倍大小,這樣的字體大小比例很常在日本網站看到。而左右兩欄式排版,標題部分就僅止於左邊標題加租,可能是因為整體設計上是一個表格巢狀排列的緣故。相較於其它網站,大友克洋原畫GENGA展的官方網站內文排版就相對比較沒有變化。

表單設計這回事

很遺憾的在這個網站翻來翻去就是沒看到表單的部分,但是這個網站有一個特別的部份是,最新消息採用blog方式呈現,由於Blog很容易融合所謂的社群媒體,所以可以看到在每篇文章最上方都會出現社群分享按鈕,總共有twitter、hatena、facebook、google +1、mixi四家社群,可以由此觀察出目前日本較有人氣的社群媒體有哪些,在透過觀察分享按鈕上的數字呈現,可以發現使用Facebook分享的人數較多,再來是twitter。

頁尾設計這回事

一般展覽或活動的頁尾通常都會有很多贊助商或協辦單位的Logo,各家廠商Logo一但放上就會顯得異常繽紛,常常到頁尾反而搶走了整個網站的重點,但是在大友克洋原畫GENGA展的官方網站中卻採用文字連結方式,除了可以詳細交代初每家廠商或單位以外,可避免了頁尾的紛亂情況,讓整體重點依然保留在網站中。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#4:Home Plus企業官方網站

關於Home Plus

全球知名連鎖超市Tesco在進軍韓國後,以Home Plus為名進駐韓國,而Home Plus是南韓第二大實體連鎖超市,在去年展開了將超市搬到捷運站的QR code行銷活動,大獲好評並且大量提升銷售量,成為整合行銷界新穎的成功案例。Home Plus致力成為南韓最大超市品牌,並且提供顧客更快、更便利的購物環境,讓到超市購物這樣的行為變得越來越簡單容易,顧客不用再花多餘的時間跑超市,而超市也可以將所想購買的商品直接宅配到府,希望做到你在外頭下單,到家就可以收到商品的簡單購物生活。

初次遇見Home Plus

對於這樣一間大公司來說,官方網站肯定會出現許多數據化的資訊,比方說何時建立公司每年有什麼大事記、目前公司員工多少人、店面數與全國佈局等等,對於這樣數據的圖像化處理,韓國網站通常都有他們一套的方法,每每看到都會覺得非常驚奇,個人也覺得這是韓國網站的特色,希望透過網站的分析拆解,可以學習到韓國人把數據圖像化的設計功力。在Home Plus的首頁部分,一映入眼簾的就是很大的輪動式Banner設計,在幾張Banner上我就可以看見一些數據圖像化的跡象,比方說我們常用的四象限分析圖表,在Home Plus就以四葉幸運草來設計,讓原本生硬的四象限變得活潑了起來,這樣一個小小的變動,就襯托出設計的價值,真的非常不容易。

網站色系

 #e90013     #0f258b   #181818  #ffffff
紅色為Home Plus的企業主色系,藍色則是紅色的相近色,使用相近色來做設計會讓成品感覺較為柔和自然,不至於太過突兀。

Logo設計這回事

Home Plus的Logo非常簡單,前面一個看起來很像Home的房子造型,後面跟隨著Home Plus的公司名稱,下方畫了一條線,有將兩個單字聯結在一起的意味,企業主色系就是紅色,對超市來說紅色可以代表魚肉類的新鮮,也可以代表充滿熱情,加上名稱是Home Plus就顯得是要熱情服務每位顧客,提供每戶人家最新鮮的食材。而房屋內示意窗戶的圓圈,則可以表示作業上流暢,與服務講求圓滿和諧,一個簡單的Logo設計卻充滿了很多涵義。

選單設計這回事

Home Plus的選單設計非常單純,採精簡設計,當滑鼠移過去會調換影像,偏黑色會變企業紅色,當點擊後進入選單內頁,該選項也會換為紅色,顯示出當前頁面位置,在簡單的設計下也沒有遺忘標示,對使用者經驗設計上沒有忽略。

子選單部分,設計上延續主選單,但在前方加上數字,讓網友可以很快明瞭在這個選項下有多少資料,而數字上的線段就與Logo上Home Plus的線段相做呼應,不但不會突兀,還會顯得整齊且似曾相識。

內文排列方式分析

內文排列就如同選單一般,採用簡潔設計,右上角可以看到麵包屑設計,最前面的首頁icon採用的就是Home Plus的Logo前面的icon,標題字體與次標題字體大小落差大概1:0.7左右,兩者之間的行距大概是三行內文的行距,內文行距與一般常見的1.5倍行距不同,行距大概只有0.5,並沒有為了要讓閱讀舒適就拉開行與行的距離,但是由於內文顏色是採灰色,相較於全黑的內文來說,閱讀久了眼睛比較不會有壓力,所以對舒適度的考量還是有的。

在時間表部分,利用折線圖設計,讓整體的時間與事件做了密切的結合,也讓網友願意仔細的閱讀進而提高了閱讀率,自然而然對Home Plus的印象與奮鬥史就更加了解。

另外一個頁面(應該是指公司核心價值,我看不懂韓文只能用猜測的),那兩張臉的設計真的讓人印象深刻,一個代表成長,一個代表回餽,讓看過這一頁的網友都能夠說出Home Plus的核心價值是整體的成長與對社會的回餽。

在看另外一頁,我相信到了這裡,大家對韓國人在數據圖像化的設計能力上都會感到敬佩,這樣的一個圖表把整個Home Plus的核心價值與企業整體概況都描繪出來,透過一張圖表就可以了解是怎樣的架構撐起整個Home Plus,而且除了印象深刻以外,真的會想多看幾眼,認真看完每一個角落。

在同一頁下方有個列表,標題部分文字加粗以顯示重要性,內文與標題對齊而不是與前面的紅點對齊,在很多網站上常常會看到內文排版對其的部份部份是與前面紅點對齊,但是真正對其的方式應該是與標題第一個字對齊,這樣才是正確的排版方式。

在企業大事記詳細記錄的頁面上,Home Plus有一個簡單時間軸作為選單(也就是上圖中間淺灰色區塊),右邊紅點顯示當年年份,所以可以看到2012年的紅點比較大,意思就是指今年,而年份下方的列表是以月份做列表分類,可以看到2011年是以02、04做開頭,意思就是2月、4月的意思,詳細列出每一年每個月的重大事件,透過這一個頁面,可以詳細了解每個時間點的Home Plus,這是我在台灣的企業官方網站比較少看到的部分,真的記錄的太仔細了。

再來上張是Home Plus員工的基礎價值,也就是進入Home Plus後你會變成什麼樣的員工,這件事對員工來說是很重要的,對Home Plus來說更是重要,因為什麼樣員工就會表現出什麼樣的企業,如果要落實企業核心價值,最重要的一環就是員工,所以在這樣的頁面透過一個六環圖就詳細傳達所有的基礎價值,簡單、明瞭。

接著是一個循環圖示,這張圖顯示出Home Plus在品管上的運作,四大主軸下方又有許多細項,注意到了嗎?主軸對齊的是細項內的第一個字,為什麼要這樣排列?主要是因為細項前面的點太過細小,與文字相比,區塊比例過小,所以主軸的文字如果與點對齊,整體反而會顯得歪一邊,但是如果與細項第一個字對齊反而就不會有歪一邊的感受,這麼細微的排版設計,我不說,你會注意到嗎?

再來一張,一樣是四個象限,Home Plus將此設計成四葉幸運草,整體看起來不在這麼枯燥,就只是一張圖表,這張圖的內容指出Home Plus對於整體的社會貢獻,而四葉幸運除了讓人覺得幸運以外,也會感覺到幸福,這樣的延升感受就表現出了Home Plus對社會的貢獻是讓社會更加幸福。

內文排版部分整體來說都偏向雜誌設計排版方格,以上圖來說就很明顯的有雜誌三欄式內文排版的格局出現,欄與欄之間間隔約30px,標題與內文行距約ㄧ行距,這樣的排版方式會讓我想把左邊第一欄的標題,想辦法變成兩行,讓整體看起來正家整齊劃一,而不會產生內文齊頭的行數落差一行,整體看起來就會讓區塊比例顯得有點奇怪。

接著是比較特別的地方,這個地方似乎是客戶留言板,除了讓顧客回饋以外,也讓整體服務透明化,對照現今的台灣網站,這樣的留言板似乎已經消失了,因為隨便來一個負面評論就會讓網站上上下下顯得驚恐萬分,但是通常危機都是轉機,如果處理得宜,讓其他顧客看到反而會是一種安心,唯一要思考的問題,就是公司有沒有人力可以去處理,以目前我所接觸過的客戶通常都沒有這樣的人力分配,自然而然也就無法有提供這樣的線上服務了,就我來看這是蠻可惜的一件事。

表單設計這回事

Home Plus的表單設計依然與網站一樣走向簡潔風格,表單格式與類型有所不同,所以是混合型的表單,這樣的表單要讓欄位對齊的可能性非常低,所以Home Plus在這方面的設計就採用齊頭式設計,在項目部分也採靠左對齊,與人吉旅館的置中對齊不同,但是整體來說感覺卻比人吉旅館還好,會有這樣的感覺,主要的原因就是Home Plus是混合式表單,有填寫文字的input也有核取項目的radio button,所以整體來說就比較不會出現人吉旅館那種尾端沒有對齊的問題,自然整體看起來就會覺得還不錯。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#3:人吉旅館

關於人吉旅館

人吉旅館是位於日本熊本縣人吉市的老字號旅館,擁有天然溫泉資源,有著濃濃古式日本風味的地方,從1943年發覺溫泉,1955年開始蓬勃發展,至今已經經營到了第三代,60幾年的歷史讓人吉擁有獨特的韻味,在第三代的經營下也跟隨的時代的潮流開始復古,希望將人吉旅館繼續傳承下去,讓旅客都能賓至如歸。

初次遇見人吉旅館

剛到人吉旅館網站,背景的紙質就讓我想到浮世繪的畫紙,搭上書法風格的Logo,一整個彌漫了濃濃簡樸的日式風情,剛映入眼簾的照片牆也非常吸睛,讓看似純樸的網站充滿了活潑的生命力,由於照片進場的效果,讓人很難不想在多看照片一眼,我只能說人吉旅館用了很直接的方式讓我留了下來。旅館就是旅人休息的地方,勢必也要有點風景,再帶到室內裝潢,真的!不用多想,就會覺得自己來到了一個旅館網站,整體來說首頁的佈局真的十分的成功了得,真的讓我深深愛上這個網站!風格上除了覺得復古,內文排版也有時尚設計雜誌的感覺,讓整體網站復古又時尚,很符合現代設計潮流。

網站色系

 #e6e6dc   #000000  #ffffff 

Logo設計這回事

看似簡單的Logo其實也隱藏了一些細節,左邊是網站上的Logo,字體雖然很明顯採用書法體,但是顏色卻是 #221e18深棕色,不是一般書法的黑色,而右邊是細節放大圖,你可以看到為了讓Logo凸顯,文字還採用了外光暈效果,在外面帶了一層淡淡的白色細邊,這樣的做法可以讓Logo的筆畫更跳一點,Logo看起來也不會太過死板,如果只是一般打字打上去不做這樣的效果,那味道肯定會少很多,一點點小小細節,就可以帶來大大的效果,也讓Logo的質感提升不少。接著還有一點還蠻好玩的,就是如果你的解析度高度是夠的,你看到的Logo會是直的,但是如果你的解析度高度不夠,你會看到橫的Logo,隨著瀏覽器視窗大小不同會產出不同的結果,雖然很大原因是由於右欄完全是固定在那裡,為了畫面美觀才製作這樣效果的介面設計,但是這種小細節的介面設計如果不測試,你還真不曉得設計者有多細心!

選單設計這回事

人吉旅館的網站選單,坦白說真的乾淨的我不知道該說什麼才好,選單開頭的線段真的加的恰到好處,唯一讓我覺得可以稍微改善一點的,就屬於當前頁的標記這部份,淺灰色實在讓我覺得不夠明顯,一般當前頁的設計都是需要明確標示出目前所在的頁面,尤其人吉旅館的網站非常特殊,你只要看完這個部分,網站就會自動載入下一個單元,於是你就到了下一頁去了,完全都在你沒有任何感覺之下,右手邊的選單就會一直往左邊移動,在這樣的情況下,把當前頁設計成淺灰色,會很容易忽略當前位置,因為淺灰色跟背景的顏色太過雷同了,不過換個方式想,也許設計者當初這樣設計就是希望大家忽略當前頁面的選項,去點選其他頁面選項,如果是因為這樣的原因去做設計,那當前頁的淺灰色就會變得恰到好處了!

對於旅館來說,“線上訂房”或“預約資訊”這樣的訊息一定是極端重要的部分,所以可以看到人吉旅館把這個選項固定在Logo左手邊,一個離主選單很近,離Logo更近的顯眼位置,你很難不去注意到這個選項,加上白色光暈的設計,非常有在畫紙上的感覺,讓整顆按鈕明顯又有質感,這樣的佈局與設計,除了一百分我想不出別的分數!不過一般在台灣都喜歡直接秀出大大的電話號碼,在這樣的佈局上就會顯得不知道該放哪裡,如果是我應該也會放在Logo附近,畢竟一個網站最吸精的位置就是Logo附近了,重要的資訊當然就要往這個黃金地段靠近囉!

內文排列方式分析

人吉旅館內文排列方式挺固定的,第一個也是最特別的就是標題,如上圖所示,人吉旅館的標題是直排,與一般常見橫排(幾乎90%以上都是橫排)有非常大的差異,而且在標題下方在搭配上字體較小的英文,兩者行距約1.5倍,整體排列完全不會突兀,甚至還有國際化的觀感,坦白說這樣的直行文與英文的排列,在中文字來說,通常會遇到的困難都是中文字太過方正,但是英文字卻又太過於不方正,當兩者結合時就會有很明顯的落差,所以通常都會加條線段做區隔或把英文字部分顏色弄淡,讓兩者結合起來不至於突兀,但是人吉旅館卻是直接採用直行文與橫行文,雖然會有許多留白區塊,可是這樣的留白卻恰到好處,而且可以很明顯的區分段落,不會有區隔不清、不夠明顯的問題,這樣的標題排版方式除了特別,效果也超乎想像中的完美。

內文排版就比較中規中矩,次標題字體較內文大這是必然的,圖片採用交錯排列並有約3px的邊框,並且與內文間隔約10px,內文行距採單行行距(也就是兩行之間的留白約一行這麼多),段落與段落之間又區隔了一行,加上單行行距,前後落差就是兩行,也就是兩倍行距,說了這麼多,這樣中規中矩又乾淨的內文排版技巧其實就在留白與行距,只要調整得宜,網站就會讓網友覺得閱讀起來很舒服、沒有壓力,自然可以達到乾淨又有質感的內文排版。

菜單部分依然是採用圖片交錯排列,不同的是這裡的照片全部去背處理,讓照片與背景融合在一起,這樣的設計有一個很重要的要點就是—食物的照片角度,如果每張食物角度都有嚴重落差,那整體來說就會覺得混亂,相信你只要仔細瀏覽,就會發現所有的菜單區域的照片,角度都是雷同的,一但有出現角度過大的部份,你就很容易發現(比方說白米飯的部分)。

再來是很少見的建築平面圖,線條充滿濃濃的古味,當滑鼠移到1、2、3、4等標上數字的區塊,會在浮出一個小視窗(如上圖),這樣一個介面上的互動讓平面圖添加了許多趣味性,而且透過這樣的互動,其實我會很認真的看平面圖,一般拿到的房屋紙本DM,如果有平面圖幾乎我都會掠過不看,也許主要的原因應該是我不想買吧!但是那樣的一個東西放到網路上來,如果沒有透過互動讓圖增加趣味性,我想我也不會認真的去看。

地圖的部分,我個人覺得設計可以在加強一點,因為線條有點太過生硬,但是可以把地圖精簡成這樣,坦白說也不容易,雖然網站也有擺放Google Map,但是對於某些網友來說Google Map資訊太多了,這樣精簡的地圖才是他們所需要的,因為簡單、明瞭,一眼就很清楚,不需要多加思考其他有的沒的,現在網路資訊過多,網友通常都會喜歡不需要思考的資料,所以這樣的一張簡圖的確可以打進網友的心坎裡,對網友來說肯定大大有幫助,也可以確定這個網站在設計上是以網友為導向,而不是單純為了客戶(也就是人吉旅館的老闆)所設計的一個網站。

當然,就人吉旅館老闆的立場,我很希望網站可以吸引很多網友來,不管是訂房還是詢問,所以最重要的是什麼?當然是電話號碼囉!有沒有看到上圖中的電話號碼有多大?如果整個網站的設計可以營造氛圍,內容佈局也非常吸引網友,剛好這個網友又想渡假,以AIDA模式來看,在後面加大電話號碼,對於讓網友直接撥打電話的機率肯定會大大提升!

表單設計這回事

對於人吉旅館的表單,感覺上似乎有點美中不足,如果最下面的留言內容寬度可以跟上方對齊,那肯定會比現在感覺還要好得多,左邊表單的項目部分是採用置中對齊,並且把整個區塊弄了一個色底,原則上沒有什麼特別的部分,就是依然很中規中矩,除了最下面的留言框我會希望寬度與上面的input對齊以外,送出按鈕如果可以在做一點設計會更完美,很可惜的到目前為止我還沒看到我覺得滿意的表單設計,就連人吉旅館也在這一塊顯得有點失色不少。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#2:HIGASHIYA和菓子屋

關於HIGASHIYA和菓子屋

HIGASHIYA和菓子屋是一個日本網站,專門販賣日本和菓子。所謂的和菓子就是一些日式糕點,通常很甜,常見內陷有紅豆、麻署等,常常拿來配茶一起吃。和菓子的外觀非常多樣子,有長形、圓形、魚形甚至桃子型等等,並且外觀都會包裝的非常有日式精簡美,簡單樸實卻又落落大方,HIGASHIYA和菓子屋除了提供線上購物、產品介紹外還有和菓子的豆知識(冷知識),裡面說明了和菓子外盒包裝的一些禮儀,對於節慶想和菓子卻不知道外盒需附上什麼樣的禮儀裝飾比較適合的日本人,就顯得非常親切了。

初次遇見HIGASHIYA和菓子屋

剛踏進HIGASHIYA和菓子屋就被他那簡潔的風格所吸引,在照片中看到精美的包裝會讓我納悶裡面包的是什麼?可能是因為我不是日本人的緣故,所以我並沒有在第一時間就明白這是一個線上和菓子店,等到我一直陸續往下看那些精美的圖片時,我才漸漸知道這是一間線上和菓子店,對於愛甜食的我當然就很容易吸引我停留在網站上,而且對於首頁照片的不規則排列(說不規則卻又有那麼一點規則),很容易讓我想到雜誌,感覺就很不像我在看網站,反而像在看和菓子雜誌,讓網站的趣味度無形中提高了,而且也因為設計很像雜誌,在產品價值上無形中也把質感拉高了許多,雖然說和菓子在我印象中一直都是很有"價值"的食物,但是想象一下如果要把中式糕餅弄的這麼簡潔有質感,我還真覺得有點棘手呢!

網站色系

 #ffffff   #000000 

LOGO設計這回事

HIGASHIYA和菓子屋的LOGO帶有濃濃的日本風味,一眼就可以看出類似家徽的圖騰,雖然無法明確說出是哪一家的家徽,但是卻容易辨別出國別應該八九不離日本,對於整體LOGO來說,旁邊搭配的英文字採取較寬的間距,不知怎麼的我覺得有點戲劇性效果,會讓我聯想到PIXAR那個小檯燈畫面,我到現在還無法理解這樣的字距含義在哪,除了感覺格局較大以外,我還覺得帶有幾分專業感,因為一般文字打上去是不會有這樣特殊的字距,而且加上字型是有特殊性質的,仔細看A會讓我聯想到甲骨文象形文字之類的,這樣的獨特性會讓字距拉開的LOGO更加特殊,而且由於這些地方都是很小的細節,無形中就會替LOGO加值不少。

選單設計這回事

在選單部分除了每個選單文字上下都擁有1倍行距以外,可以看到每一個選項前面都有專屬的小圖示,那些圖示都會帶出選項的內容,無形中將產品露出,而且旁邊就是選項,滑鼠移過還會有反黑效果(如上圖中的羊羹),這樣的設計除了可以增加用戶體驗,讓網友馬上瞭解選項內的內容,這種不用網友思考的設計是一種很棒的用戶體驗設計,但是通常這樣的設計是必要很小心,如果前置圖示與內容關聯性太小,反而會造成網友困惑,就會讓選單變的難以理解,原本是希望網友不需思考就可以使用的“良性用戶體驗”,反而就會變成“很糟糕的用戶體驗”。

內文排列方式分析

對於日本網站的內文排列,我一直都充滿景仰的心情,因為不管怎麼看都會覺得井然有序,不會零亂,就算頁面資料文字很多,也可以看起來很清爽,這其中一定存在著什麼日本設計排版的魔法方程式!我們現在就來仔細研究一下HIGASHIYA和菓子屋這個網站的內文排列方式。

首先我們來研究一下首頁的圖片排列,圖片與圖片間的間距大概兩倍行高的寬度,實際丈量約26px,再來我們看看左上角,這個畫面是滑鼠停留在圖片上的樣子,除了在照片上蓋上透明黑色凸顯上頭的白色文字,標題除了字體大於內文以外,間距也有所不同,內文約1倍行高,但是標題的部分就有1.5倍行高,所以標題與內文距離就比內文的兩行間距還要在高一些,這樣做會讓標題更加凸顯,而且因為標題字體較大,所以居然較高的行距來做比例上的協調,這樣些微的差距就會照成視覺上舒適度的不同,微妙的運用字體大小與行距將會獲得意想不到的效果與質感!

在內頁排版部分,我覺得比較可惜的是這裡的內文選單太過平淡(如上圖左側),使得選單與內文的區隔沒有很大,雖然中間間隔一樣差不多26px,但是我個人覺得距離有點不夠遠,很容易與內文融合在一起,再加上選單並不會跟隨頁面(如小倉屋左側主選單),所以往下看的時候會有一種強迫觀看的感覺,必須要自己往上捲或按鍵盤上的Top鍵,這樣的瀏覽方式我就覺得很不順暢,如果可以在每一個段落下放個Top或者右下角有個固定的Top設計,我相信這樣對網站親和力上應該是有加分無減分的。撇開內文選單不提,內文的標題與內文排列方式就比首頁圖片上的更加明顯,除了標題再加大以外,標題與內文間距又拉的更開了,從原本的1.5倍行距現在拉到了3倍行距,仔細測量後是35px,另外內文也有分一般內文與註記,註記部分除了開頭有一個※號外,就是字體有加粗,除了與內文區隔以外,也有強調的涵義在。說完了文字,換說圖片,圖片與圖片的間距又比標題和內文還要寬,這樣設計的原因也是在於取得區塊與區塊的平衡,就如同標題與內文以及圖片與文字區塊,圖片的區塊比例更大了,所以區塊與區塊間的間距自然也會跟著加大再加大。

上圖是同篇文章的中間片段,這個區塊出現了標題、表格狀排列、註記等四種內文排列方式,標題與內文在上段已敘述過,接著表格部分,第一行的文字都有底線,一般文字有底線很容易聯想到超連結,的確這五個有底線的部分都可以點擊,但效果卻是更換下方的表格,所以你可以看到上圖中第一個底線下方有一條粗線,即代表目前所觀看的表格是哪一底線文字內的資訊,這樣設計方式其實是由tab所簡化而成,但是對我來說有點太過簡化,以至於我跟本無法辨別出它是一個tab設計,這是這個網站第二處我覺得需要改善的地方。再來我們接著看表格內容,這裡的標題與內文字並沒有與其他地方有太大差異,但是透過格線的運用改變了區塊的大小,也調整了整體的比例,但是如果是我自己來設計這裡的文字排列,我會讓內文對齊第二個底線文字的第一個字,並且不會讓灰色分隔線特別凸出來,這是個人與這個網站設計比較不同之處。

再來在關聯性列表的部分,我們可以看到上圖數目4下方分為三個項目,分別以[]包附,接著項目下方又各有兩點,前置的菱形符號與內文中間有很大的距離,這樣距離我個人認為有點太大了,但是會這麼大的原因是,設計師希望內文對齊[]內的第二個字,讓整體看起來整齊些,有發現到這點了嗎?不過如果是我,我會把菱形符號對齊[]內的第一個字,讓這兩點與項目有個主從關聯性,雖然只是微微往內縮排一點點,但是最後的視覺效果將有很大的差別。

表單設計這回事

這部份是我對這個網站最失望的部分,因為整體來說所有的表單和購物車部分都像最後硬塞上去的,沒有一致的設計模式,而且與其他頁面設計的質感落差非常大,完全感覺不出這是一個相同的網站,我非常希望這個網站可以改善這個部分,不然整體網站就敗在表單設計質感沒有出來,真的是十分地可惜與無奈。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。

網站設計評論#1:IdentyMe

關於IdentyMe

IdentyMe是一個數位名片網站,跟about.me是一樣類型與主題的網站,簡單的說就是把你的vcard變成網站,而且只有一頁,讓你把你最重要的資訊都擺放在上頭,你可以寫一些基本介紹然後開始連結各地,舉凡Facebook、Blog、Linkin等等,將一些社群或個人化的連結放置在上頭,這樣可以讓看見你的電子名片的朋友連結各處,更加了解你,比起傳統紙本名片更加直接與實際,如果真要說IdentyMeabout.me的差別,我會覺得about.me主要都是會把自己的照片當做佈景,在偌大的頁面上很清楚的表現出個人,接著才會注意到內文,但是在IdentyMe照片比例與內文就有比較平衡的情況,當然IdentyMe提供許多佈景,你還可以選擇你最喜歡的照片比例,而且IdentyMe提供的佈景都很炫,畫面也都不錯看,比起about.me自由度高,凡事都可以DIY的設計來看,IdentyMe比較適合不太會DIY的網友使用,當然上手速度也會比較快。

初次遇見IdentyMe

第一次進入IdentyMe感覺網站非常單純,背景有漸層但在選單與最下方資訊列部分又採純色,兩種配色方式搭配得宜,而且在佈局上非常特別,一般網站Logo都在左上角,但是IdentyMe卻在中間偏下方的位置,這樣的佈局與一般Logo要一眼就映入眼簾的左上佈局真的非常不一樣,另外中間大圖像的微笑人物增加的網站的親和度,並且透過一個大圖像就把IdentyMe能做的事情顯示出來,就是這樣的簡單又有親和度,所以讓整個網站變的很親切,即使第一次進入IdentyMe,也不會覺得難以接觸,不會因為看不懂是什麼服務而離開,這樣的設計對於留下我來仔細閱讀是非常有用的,無形中就增加了我這個訪客的停留時間了。

網站色系

 #dde091  #e8e2d2  #fa9509  #fee123 

LOGO設計這回事

Logo採取藍色與橘色,猜測使用藍色是因為科技感,也就是把名片數位化,而橘色是為了凸顯個人,為了強調凸顯個人這個部份,所以Logo在設計上字型也與前面不相同,而網站背景的主色系為綠色,主要是因為藍色與橘色是綠色的相近色,使用相近色配色會讓網站看起來更加自然,下方的主標題與副標題除了字體粗細不同以外,在字型大小上也有差異,更加顯示出這兩個句子的主副關係,整體搭配在行距上也有不同,Logo與主標約1行距,但主標與副標僅剩0.5行距,行距的不同會讓主副標的關聯性更加強烈,關係也會更密切。

選單設計這回事

選單的部分是我個人認為這個網站最需要改造的地方,因為跟中間的大圖相比,實在太不突出,選單位於最上方很容易辦別,但是相較於IdentyMeLogo的佈局來說就顯得較沒創意,在選單的最左邊我們可以看到一個綠色小方塊,這個方塊在中央的大圖有指出這個是vCard的意思,也就是IdentyMe的小Logo,識別度其實沒有很高,如果我換成藍色,很容易被誤會成Facebook之類的,雖然到目前為止主選單看起來似乎沒什麼特別的,但是對於“顯示當前位置”的設計還是給予肯定的,這樣除了可以減少麵包屑的設計,還可以更一眼明瞭目前的當前位置,不過如果還有麵包屑的設計,個人覺得還是會為網站加分。

內文排列方式分析

首頁下方的文字區塊排列還蠻活潑的,行距大約0.5左右,但是在區塊與區塊間的垂直間距抓的就有點近,如果可以在適當的留點空白會比較不會有擁擠的感受,不過旁邊的iMac設計讓人非常想看影片,可惜點擊後是跳到youtube,而不是直接播放,如果是直接播放應該會很High!

在內頁區塊的排列上整體來說非常整齊,不管是間距還是行距都非常適當,但是請見上圖的右下角,你發現他的區塊標題是兩行,導致內文排列就無法與右邊區塊對齊,顯得有點突兀,通常這種情況我都會修改文案,讓標題短一點,看起來會更加整齊。

在內頁區塊設計中,其中Themes頁面中,區塊與區塊的左上角還有標籤設計,讓區塊顯得更加突出,在陰影部分的設計還蠻細的,所以看起來不會非常突兀,有些網站在運用這樣的設計時會顯得突兀,主要原因在於顏色的選擇與陰影的處理上比較不精細,就會顯得有點奇怪,不過在這裡,顏色選擇的是Logo的色系,所以看起來很清爽不突兀,但是又很明顯,這是還蠻值得提的一點。

在Help頁面的設計上我再度看到草率,在問題列表部分可以說根本沒有設計,只有排列,可能是我自我預期太高了,所以才會有這樣失望的感受,但是在左邊的問題分類上到是設計的非常用心,尤其是當滑鼠移到選項會出現藍色底的整個動態,吸睛度蠻高的,不過在反覆測試後發現有點小Bug在,但整體來說就問題分類選單部分,我個人還蠻滿意的,可以列為日後的參考。

表單設計這回事

網站在表單處理上個人覺得還蠻草率的,但是首頁的註冊倒是非常經典,你只需要填入三樣東西:帳號、信箱、密碼,你就可以馬上建立新帳戶,這樣的註冊流程還真的蠻酷的,簡單不囉嗦,看得我都想註冊一個帳號了,無疑的如果網站有會員註冊制度,可以參考一下這樣的註冊方式,應該可以提升不少註冊率喔。

網站設計評論系列文章的目的,是為了提升自我設計與新網站研究,主要的重點在於吸收新知與吸收設計方法,希望透過一連串網站的評比與討論後,可以提出對於網站設計的常見法或設計法則,提供日後相關設計的參考,歡迎網友留言一起討論該網站的設計,不管是視覺面或技術端,都非常歡迎留言提出,感謝您看完冗長的介紹與文章,如果覺得不錯歡迎與朋友分享。