網站設計評論#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或套件有興趣的朋友應該是可以參考到很多內容才對。