今天下午看了几个基于angular的UI框架,发现Google自主开发的Angular Material挺不错的。虽没有仔细研究,但官方提供的demo我决定在自己的项目上用上一用。UI框架不同于其他前端模块和插件,在选择的时候开发人员一般会采用比较保守的态度,因为一旦从项目开始采用某种框架,中途发现问题再进行替换的成本极大,而且基本也不能多种框架混用,只能一条道走到底。
目前被应用最为广泛的应该是Twitter提供的Bootstrap了,之前接触的项目中Bootstrap可以算是标配了,所以用起来也比较顺手,但是感觉一直采用这个框架会陷入设计和审美上的局限,这次借着自己的新项目打算换换口味。查了一下网上的UI库还是很多的,看了看演示的demo都很酷炫fancy,最后选择Angular Material主要还是觉得Google出品,质量有保证。然后就在想,为什么Bootstrap能从众多框架中脱引而出,除了产品本身的特性外,一个良好的文档绝对是很重要的一个原因。
开发者了解产品的最主要途径就是产品的官方网站和Github,Bootstrap的所有使用指导都可以在官方网站找到:http://v3.bootcss.com
首页提供了下载链接,一些简短的的特性说明,大多数偏技术的互联网产品的官网多采用此风格,让初次来到网站的访问者能快速了解和接触到产品,作出初步判断该产品是否符合自己的期望。同时首页也是一个技术团队展示自己能力的所在,Bootstrap的网站采用自身的响应式技术对页面的自适应做了不错的设计和处理。
起步页面介绍了常用的下载和使用方法。包括源码下载,CDN引用,bower和npm安装,基本入门指导,版本升级和浏览器支持等常见问题。值得注意的是页面布局是左侧内容,右侧固定导航栏,在页面滑动到某一部分,对应的导航栏就会展开该部分的子目录,非常清晰明了。
Bootstrap的主要功能介绍放在了CSS样式,组件和JavaScript插件三个页面。这也是使用过程中经常查看的页面。其中CSS介绍通过元素设置class得到CSS样式和布局效果,比如text-left达到字体左对齐等等。其中对于一个UI框架最为重要的布局-栅格系统也在这里做了非常详细的介绍。通过实例+实现代码的方式把使用过程中的所有情况都做了展示和介绍,基本可以达到所见即会用。如果是新手,在看了如此详尽易懂的说明后,应该都会很有信心去尝试和使用。颜色的使用上所有使用方法采用红色,重点文字加粗,标题采用超大字体和正文对比明显,很容易理解页面结构。
组件和JavaScript插件页面分别介绍了常用的静态和动态组件。在组件页的一开始,采用了完全罗列的方式展示了所有自带的icon,虽然占据了比较长的篇幅,但我想在设计的时候应该是希望人们查阅的同时就可以最快速的复制到自己的代码中使用,相比之下font-awesome就麻烦不少。应该说制作文档的工作人员真的把贴心做到了极致,针对每一个部分可能遇到的问题都用最准确的文字和代码提供了尽可能的介绍和说明,而不是采用问题汇总的方式需要遇到问题再花精力查找。
本来晚上是想写写文档对于产品的重要性,结果不知不觉把Bootstrap的网站夸了个遍。其实在开发产品的同时,维护一个好的文档花费的时间和精力也是蛮多的,但好的文档不能成就一个产品,优秀的产品绝对需要好文档。