推薦：天極產(chǎn)品設(shè)計(jì)流程
寫這個(gè)的目地，主要是系統(tǒng)理下目前產(chǎn)品設(shè)計(jì)的流程,提醒自己盡量去避免一些常見的問題，也能讓大家系統(tǒng)的了解天極網(wǎng)的產(chǎn)品設(shè)計(jì)流程。當(dāng)然，不保證任何產(chǎn)品都能套

什么是真正的益處?

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

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

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

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

如何構(gòu)建一個(gè)CSS框架?

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

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

然后，我們把框架存放在一個(gè)單獨(dú)的地方，使每一個(gè)站點(diǎn)都引入這個(gè)框架。當(dāng)然，每一個(gè)網(wǎng)站也需要有特有樣式表，特有樣式對框架進(jìn)行了必要的補(bǔ)充。

忠告

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

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

總之，我們目標(biāo)不是盡可能的抽象，這點(diǎn)非常重要。相反,其目標(biāo)是提供了一個(gè)快速啟動(dòng)和更有效率的設(shè)計(jì)過程，這是絕對有可能去做過的。假如你過于的抽象，事情會變得混亂，太多的HTTP鏈接數(shù)會影響你網(wǎng)站的性能。記�。阂粋�(gè)好的框架不是把事情搞更難更復(fù)雜，而是一個(gè)簡單的從零的開始。

總結(jié)

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

分享：交互行為三部曲
臭魚的blog：www.chouyu.com.cn之所以會出現(xiàn)“交互設(shè)計(jì)”這個(gè)詞兒，很大程度上是alancooper想?yún)^(qū)別于以往的界面視覺效果設(shè)計(jì)，重新定義一下基于電腦的軟件設(shè)