Angular Material 的设计之美

Angular Material 的设计之美

前言

Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量组件库。

官方列举了如下几点来解释“高质量”的含义。

国际化和可访问性,以便所有用户都可以使用。

不会让开发人员感到困惑的简单 API。

在各种各样没有 bug 的用例中按预期行事。

通过单元测试和集成测试更好地测试行为。

可在 Material Design 规范的范围内进行定制。

将性能开销降至最低。

代码简洁,文档友好,可以作为 Angular 开发人员的一个例子。

Material Design 作为一个非常流行的设计语言,它有多个版本的实现。React 版的 Material Design 有着很高的人气,大家可以自行对比,我就不赘述了,以免引起无谓的争吵,进而扯到框架层面。我可以说一下自己的感受,Angular Material 的交互更加流畅,细节做的更好。

Angular Material 组件库虽然很优秀,但是却被带上了只适合做 C 端界面的帽子。这也是我刚开始不敢选择 Angular Material 的一个原因。但是编写 ng-matero 的过程中,随着对 Angular Material 的深入了解,我发现这种说法稍显狭隘甚至产生了一定的误导,所以我希望这篇文章可以让大家对 Angular Material 有一个更加正确的认识。接下来我会从相对宏观的角度介绍 Angular Material 设计的一些亮点,并且简单介绍 Angular Material 的一些使用技巧。

题外话:为什么 ng-matero 会选择 Angular Material?

抛开官方提到的亮点不谈。首先我是那种比较激进的开发者,对于先进的设计理念,我都有跃跃欲试的执念。国内的 Element UI 以及 Ant Design 都是 Bootstrap 3 时代的风格。随着业务人员对界面细致紧凑的要求越来越高,我发现 Material 的设计风格更加符合需求,层次感更强。不过最主要的还是 Material Design 的交互吸引了我。另外,Angular Material 的样式是基于 Sass 编写,而我最喜欢的也是 Sass,所以基于 Angular Material 编写 ng-matero 就是命运的归宿。顺便插一句,如果大家纠结用 Sass 还是 Less,可以看一下这篇文章 CSS 预处理器中的循环,个人不建议用 Less,请原谅我无意引战

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspwdf.html