推薦：天極產品設計流程
寫這個的目地，主要是系統理下目前產品設計的流程,提醒自己盡量去避免一些常見的問題，也能讓大家系統的了解天極網的產品設計流程。當然，不保證任何產品都能套

什么是真正的益處?

框架的真正好處是能夠快速啟動工作，你可以創建一個新的(X)HMTL文件，引入你框架，你不用再處理重置padding 和 margins的事情，漂亮的排版，干凈的表單，整潔的布局，有效的widgets，等等。很明顯，很明顯，雖然，你一定要來定制外觀和感覺為每個站點。為實現這一目標,所有你需要做的是復寫,并添加到默認的風格是必要的。

很顯然，盡管你必須為每個網站定制外觀，為了完成這一任務，你所需要做的就是在默認的樣式上加幾行代碼。舉個例子，假如在你的框架里，為所有的 class屬性為“tabs”的UL標簽設置了基本的水平導航樣式，并且有一個灰色的邊框，你只需要幾行CSS代碼，就可以定制成你的網站所符合的外觀樣式。

ul.tabs li {
border: none;
background-image: url(’/images/tabs/ ?site-specific-tab-look.jpg’);
}

列表左浮動，并且將鏈接以塊的形式置于列表當中，鏈接也左浮動，字體居中，象煩人的廣告一樣的這些工作，框架以幫你完成，在你的網站設計工作中，只需集中精力處理非凡的、有趣的網站細節，而不是寫已經寫過百萬次的CSS代碼。

如何構建一個CSS框架?

構建一個框架有幾種可能的方式，但最常見，可以說是最有用的，抽象通用的CSS放到一個獨立樣式表文件，該樣式表文件只包含整體的一個特有部分。例如,你可以，一個樣式處理排版，另一個處理大量重置。這種好的方法能使你選擇性引入你需要的樣式，在你框架里可能有六七個不同的樣式文件，但不需要其中的一兩個，只要不引入即可。我們團隊創建的框架包含5個樣式文件：

• reset.css —處理重置
• type.css —處理排版
• grid.css —處理布局
• widgets.css —處理小零件（widgets），如tab菜單、下拉菜單、以及“更多”按鈕
• base.css —包含所有的其他樣式表文件，以便我們只需要在(X)HTML引用base.css即可使用整個CSS框架

然后，我們把框架存放在一個單獨的地方，使每一個站點都引入這個框架。當然，每一個網站也需要有特有樣式表，特有樣式對框架進行了必要的補充。

忠告

這種方法不錯,但也帶來新的問題：增加了每一個頁面的http鏈接數。對于大流量和中等流量的網站，每個頁面增加5個以上HTTP連接數，系統治理員可能就麻煩大了。兩個可能解決辦法：

1. 把所有樣式都放到一個文件里，而不是分成多個模塊。這里的問題是，失去了框架只包含特定文件的靈活性，而且維護也變得麻煩。
2. 有一個服務器端程序,動態把多個單個文件處理成一個響應。我還沒看到這種做法，但假如做好了應該是很有效率的。以我上面框架為例，當請求（Request）base.css時候，而不是請求（Request）type.css , grids.css 等的時候，這一動態處理過程觸發。這樣一來,單個文件仍然可用，而在平臺版本上整個框架也有效的。

總之，我們目標不是盡可能的抽象，這點非常重要。相反,其目標是提供了一個快速啟動和更有效率的設計過程，這是絕對有可能去做過的。假如你過于的抽象，事情會變得混亂，太多的HTTP鏈接數會影響你網站的性能。記住：一個好的框架不是把事情搞更難更復雜，而是一個簡單的從零的開始。

總結

我們web設計師往往經常重復自己，就像我程序世界里的那些朋友，我們重置瀏覽器默認樣式、設計布局和導航菜單寫了一遍又一遍——幾乎每個項目。花一點時間整理CSS 框架，可以使你快速的啟動每一個網站項目，更輕松的維護網站，并幫助團隊里其他的設計師理解你作品。要注重的一點，這些益處的獲得必須以不影響網站的性能為前提。

分享：交互行為三部曲
臭魚的blog：www.chouyu.com.cn之所以會出現“交互設計”這個詞兒，很大程度上是alancooper想區別于以往的界面視覺效果設計，重新定義一下基于電腦的軟件設