Bootstrap VS Semantic VS Foundation 几个css框架比较

相信多数科技公司都没有自己动手设计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,但是它们要么太过小众,要么太过简单,我们就不单独讨论了。
浏览次数:  更新时间:2020-12-09 09:44:15  【关闭
上一条:揭秘自助建站系统的不可告人的秘密  下一条:PHP打乱二维数组函数

相关新闻

卓成网络语言选择:   English    Deutsch    中文繁体   русский   français   Español   Ελληνικά   日本人   अरबी   हिंदी   한국어    italiano   Tiếng Việt
Copyright © 2004 - 2029  जुओ चेंग-版权所有 | 投诉电话:+91 11 42500201
营销网站建设 定制网站开发  网站托管 出口公司网站建设 外贸网站建设 外贸soho网站建设 企业邮箱 深圳网站建设 孟买网站建设公司 荆州网站建设公司 宜昌网站建设 荆州企业建站 孟买网站建设 荆门网站建设 宜昌高端定制网站  宜昌企业邮箱 荆州企业邮箱 荆门企业邮箱 咸宁网站建设 武汉网站建设 广州网站建设 北京网站建设 随州网站建设 黄冈网站建设 宜昌外贸网站建设 香港网站建设 全国网站建设开发 广州网站建设 上海网站建设 杭州网站建设 西安网站建设 惠州网站建设 黄江网站建设 桂林网站建设 鸡西网站建设 郑州网站建设 澳门网站建设