Bootstrap VS Semantic VS Foundation

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

?

时间: 2024-10-17 08:29:53

Bootstrap VS Semantic VS Foundation的相关文章

类似Bootstrap热门前端框架大集合

Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长.结果受到周围各种基友的引诱开始了 Bootstrap 旅程.本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间长

Boostrap & ZURB Foundation —— Web开发前端框架

webflow: Webflow 允许设计师通过自由的拖拉拽与 CSS 类互动,而定义它们的过程无需写任何一行代码. 用户在完成从设计到 CSS 构架之后,甚至可以在线直接将建好的网页发布,而不需要导出代码到其他发布工具上. 类似的这些 B2D 市场,之所以现在很受欢迎就是在于它们将技术门槛降到了最低,网络产品的开发对于非技术人员变得不再遥不可及. 传统上来说,设计师们通常会自己使用 Photoshop 或者 Illustrator 完成设计这一部分,还有一些构架建造的工具,比如 Twitter

90网论坛推荐10大H5前端框架,建议好好学习一下

作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一 下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了. 原本写这篇文章想围绕着 CSS 框架来的,但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架,并且自己靠着一点 JS 功 底,就想专门针对 CSS,所以最后来个大锅乱炖都大致聊聊.下面的框架也没有什么先

2016国内最值得期待的响应式前端框架pintuer(拼图)--http://www.pintuer.com

近期,需要将项目从pc端的应用扩展到移动端. 当然移动框架的第一选择必然是bootstrap,但是bootstrap作为移动端明显过于死板,而且作为国外的产品,对于国内的应用明显水土不服.框架里总有那么些部分不符合心意,如果自己扩展,那就不是一般的工作量了. 然后是wex5,宣传上是最强大的移动开发框架,一旦测试,采用java的模式,将一个简单的工作直接变成了另一个windows编程的学习,那是一次痛苦的体验.当然也是因为wex5主要目标是app,而我要的仅仅是移动wap端.(wap这个词实际上

10大H5前端框架,让你开发不愁

作为一名在前端死缠烂打6年并且懒到不行的攻城狮,这几年阅过很多从知名到很知名的前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖,凑够字数也就全剧终了.下面的框架也没有什么先后顺序之分,我想到啥就写啥啦( 作为前端,我一向都这么的任性 ^_^ ). Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道

如何编写轻量级 CSS 框架

Github 地址: https://github.com/nzbin/snack Demo 演示: https://nzbin.github.io/snack/ 前言 这篇文章我已经酝酿了半年之久,或者说拖沓了这么久吧.想说的东西很多,却又无从说起.如今轻量级框架如雨后春笋,层出不穷.我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架.在之前的文章中,我提到了面向对象的 CSS(比如 BEM.OOCSS.SMACSS,详见 http://vanseodesign.com

【转载】Web前端开发技术栈

前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度 核心概念 HTML|-- DOM|-- Element|-- Attribute JavaScript|-- 原型 Prototype|-- 作用域 Scope|-- 闭包 Closure|-- JSON|-- AJAX CSS|-- 选择器 Selector|-- 优先级|-- 特性 Specificity|-- 盒子模型 渲染引擎 |-- Trident

(转)10大H5前端框架

http://www.cnblogs.com/kingboy2008/p/5261771.html 作为一名做为在前端死缠烂打6年并且懒到不行的攻城士,这几年我还是阅过很多同门从知名到很知名的各种前端框架,本来想拿15-20个框架来分享一下,但在跟几个前辈讨教写文章的技巧时果断被无情的打击了,所以这里我还是低调的只拿出10个框架来个大锅乱炖来简单介绍,凑够字数也就全剧终了. 原本写这篇文章想围绕着 CSS 框架来的,但因为目前界内比较流行并遍地开花的主要还是 JS+CSS 模式的框架,并且自己靠

10大html5前端框架

Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者废的决心,来让自己成长.结果受到周围各 种基友的引诱开始了 Bootstrap 旅程.本人虽然是个设计+前端的万里有一的人才,但是老天只让我会用 PS 和各种设计工具却不给我跟设计妹子一样的审美,所以这也是我最初选择 Bootstrap 的原因之一,它让我做出来的东西好歹能在妹子面前装个逼,不过时间