ANT DESIGN 初学习(9.18)

description

TWU 回来的第一天，看了下ant design,完成user-center 页面的样式。

Question

Q：与Bootstrap相比，相同点和区别在哪里？

• 相同点：个人的理解是都是用于前端页面的库，都可以结合React，CSS来使用。

• 不同点：Ant-design 是一个UI设计语言，个人的理解它是基于React 的开箱即用的组件库，而Bootstrap 则只是一个样式库。 BootStrap的这个样式库类似于html, css, javascript的工具集，使用部分的javascript来完善Bootstrap框架的视觉效果，而ant-design 内部则是封装好功能的React组件。

uderstanding

今天看完 Ant-design官网上的十大设计原则，个人的明显感觉是ant-design 比BootStrap 更好用。

• 亲密性原则中提到的通过封装横向间距和纵向间距，实现页面的组织性，对页面结构和信息层次一目了然。这个是BootStrap做不到的，使用Boostrap,相信页面的结构只能靠审美和经验来决定了。
• 个人感触最深的就是栅格系统了，在BootStrap的12格基础上变成了24格，太棒了。在之前的项目中用Bootstrap写栅格时,需要各种的计算，有时候，我需要偏移2.5个栅格的距离，这怎么办，只能栅格中嵌套栅格或CSS来实现了，代码很长也不好阅读，但是24个栅格，想要实现偏离距离，明显容易很多。
• 最喜欢的ant-design 的另一个特点就是：“自己的事情自己做”，什么意思呢？能在这个页面解决的问题，就不要去其它页面解决。简单的例子，之前的项目中，当用户想要删除一张试卷的时候，就要弹出一个模态框去confirm删除。当初写这个代码的时候就觉的这不是一个很好的用户体验设计，但自己也想不出更简单的方式来做这件事。现在用一个Popconfirm 的小弹窗来替换模态框，用户体验真不错。。。

action

今天小小试了一把这个ant-design,完成user-center页面样式，感受到它的强大，接下来就要探索它更深层次的东西了。。。。