相信多数科技公司都没有自己动手设计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，但是它们要么太过小众，要么太过简单，我们就不单独讨论了。