相信多數科技公司都沒有自己動手設計UI的能力！ 看到這個開頭，估計很多程序猿很不服氣，我們那個美工可NB了，各種切圖，各種特效！
如果你跟我講這些，就說明你還沒有明白UI具體指什麼。通常我們所講的UI包含如下幾個方面
1. 頁面的整體佈局設計，例如左側的菜單設計，頂部的用戶信息區域
2. 通用的配色方案
3. 公用的組件，例如按鈕，Tab，Dropdown
4. 交互式設計，例如點擊按鈕首先顯示動畫等
如上只是UI包含的大課題！UI設計還需要考慮許多細節化方面的方面，例如：業務場景，產品的戰略性考慮等等。正因爲如此複雜，UI設計就需要諸如【產品經理】【美工】【網頁設計】【交互設計】等等職位的參與。
聊到這裏，你心中肯定是一萬隻烈馬奔騰，原來設計一個UI是如此困難！
正因爲如此困難，目前市面上出現了設計UI最多的兩種方式，第一種就是使用通用的CSS框架，例如Bootstrap！
相對於第一種，我更推薦第二種方案，它簡單優雅，零成本，在短時間就可以設計出趕超喬布斯逼格的UI，關鍵是還沒有任何風險！想必你肯定動心了。
讓我大聲的告訴你吧！ 那就是：參考！ 你沒有看錯，就是“參考”！做手機就參考Apple手機，做社交軟件就參考微信，做購物網站就參考京東。是不是百試不爽？
一般性的軟件，使用第二招足以應付，如果稍微複雜，例如做一個大型系統，這時候不得不結合第一種方案使用。
言歸正傳，市面上的CSS框架是如此之多，如何在抄之餘選擇一款契合自己的，是一件非常重要的事情。(講錯，是參考之餘)
今天我們就來對各種CSS框架進行一個全面的評測，徹底解放你們的選擇恐懼症。
首先，我們來講講Foundation
Foundation是嚴格的“移動優先”。這跟其他框架的“移動適配”是截然不同的！ 在使用Foundation時，是需要在不同的寬度下設計不同的佈局。即800px一套，120px一套，1400ox一套，這種設計方式，針對移動端確實有用，但也無故增加開發的複雜度。
Foundation是面向Mobile端的，考慮到Mobile端的性能問題，在功能組件上無限弱化，僅包含幾個通用的組件。目前移動端開發，HTML5只是佔據很小的一部分，網頁開發又因其功能不足，多數都不會選擇。冷冷清清應該是形容Foundation最好的詞語。
臨幸的人不多，社區必然也是......你懂得！ 其中文網站，多數鏈接還是直接鏈接到英文原版網頁，讓人不禁心涼。
Semantic
Semantic是最近很火的一個CSS框架，很多人會在Bootstrap和Semantic之間徘徊！
Semantic和Bootstrap都是“移動適配”，即所有設備上代碼是一套，只是保證“適配”而已，這和Foundation的理念截然不同。
Semantic在很多方面是集美貌與才華於一身的框架。它設計精細，例如Header,Title，分割線，動畫，這些細節樣樣俱全！可以說，開發中要用到的組件，樣式，動畫等，Semantic基本都能滿足！
其中文的網站也做的非常好，社區也相對較爲成熟。在很多方面，Semantic絕對是首選！
但是！！！這討厭的但是！Semantic有兩個我不能忍受的缺點：
-
API的方式是組合式開發，即通過很多CSS組合成想要的效果，記得第一次嘗試使用Dropdown，苦苦追尋了 幾個小時才搞定！過程真是痛苦不堪，它真的就如瑞士軍刀，我知道它能幫我搞定很多事情，可是我卻看着它一籌莫展。
-
不支持自動綁定。自動綁定的意思是：你只管寫HTML代碼，不用寫JS即可實現效果（Bootstrap的方式）。Semantic每一個組件都需要手動調用JS代碼，你想象一下，界面那麼多的組件，我需要一個一個寫代碼！哎！怎麼能忍受。
很多讀者肯定會說：怎麼可能，是你自己不會用吧？ 我遍查國外各種網站，很多人反映存在該問題，我也想過自己實現其自動綁定，最終因爲其精力就放棄了。
Bootstrap
Bootstrap是目前最爲流行的一款CSS框架了吧。她就如一個大腳美女，從不在意自己的形象，但是性格溫和，深得羣衆喜愛。
使用Bootstrap多年，對其有深深的吐槽！不夠精細，例如分割線，標題，動畫這些統統沒有，不得不再尋找其他組件結合使用。
沒有主題，使用Bootstrap的系統，基本都是一個死樣子。
很多組件特別粗糙，例如Dropdown，但凡加個箭頭，來個slideDown動畫立馬高大上好不好！ 想起現在那個死樣子，我就煩躁的難以入睡！
正是因爲它有如此多缺點， 現在市面上到處都是基於Bootstrap做的Template，在二級市場是相當火爆，我還偷偷買過一套呢！
雖然它有如此多缺點，可是很多程序猿還是愛到無法自拔（主要是沒有更好的）！它API簡潔優雅，社區火爆到不行，你需要任何東西，隨便Google，分分鐘找幾十個插件。 所有組件全自動化綁定，根本不用關心JS，讓你省心到爆。你說作爲我等圖方便的程序員，怎能不愛？
最後聊一聊最近國產的AmazeUI，俗稱妹子UI，最近一段時間，我非常討厭Bootstrap，由於它太粗糙，在調整系統風格時，怎麼調都感覺力不從心。思來想去，想要換一套框架，綜合考慮，就選中了AmazeUI，隨後在真實環境中嘗試替換Bootstrap。
試用之後，感覺其並沒有想象的那麼好。主要表現在幾點：
-
API定義冗餘。所以的CSS類都在Bootstrap的基礎上加一個am前綴。例如am-tab-pabel，感覺不倫不類。“參考”的太過分了吧。
-
慢! 是真的有點卡，其官方網站就是使用AmazeUI開發，用戶可以直接去嘗試，打開時會有幾秒鐘的卡頓。Bootstrap 的JS文件69K，而AmazeUI的JS文件458K, 爲什麼這麼大？搞不懂。
-
沒有社區。 遇到問題，只能看源代碼，當你忙到焦頭爛額時，就會失去使用的信心了。
整體感覺，AmazeUI“參考”Bootstrap太過明顯和深入，讓人感覺很Low，萌生我爲什麼不直接使用Bootstrap Template呢！ 可能很多國內用戶，不知道有Bootstrap Template吧。
很多人到這裏，肯定要問，爲什麼不講jQueryUI，YUI這些？ 其實這些還稱不上CSS框架，他們僅僅叫做“組件庫”。他們並沒有給你統一的佈局，統一的界面風格，只是給了你各種組件而已。
當然，市場上還有很多其他的UI框架，比如FlatUI，MetroUI，但是它們要麼太過小衆，要麼太過簡單，我們就不單獨討論了。
