构建您的 UI

Capacitor 应用核心上是 Web 应用。但要提供出色的原生质量移动应用体验，需要的远不止包装一个网站。

如今，团队在其应用 UI 方面有多种选择。让我们探索一些最流行的选项。

Ionic Framework

Ionic Framework 是一个专注于移动端的 UI 工具包和一组实用程序，使使用 Capacitor 的 Web 开发者能够获得遵循平台约定的原生质量应用体验。Ionic Framework 由制作 Capacitor 的同一家公司创建，并且是专门为 Capacitor 设计的。

如今，Ionic Framework 是我们推荐的 Capacitor UI 框架，因为我们相信它能帮助团队获得最高质量的原生应用体验。但是，在 Capacitor 应用中并不要求使用它。

Ionic Framework 为 Angular、React 和 Vue 提供原生质量的过渡和路由，并深度集成到每个框架中最流行的路由解决方案中。此外，Ionic 还提供了强大的组件，如 Modal、菜单、列表，以及强大的项目功能，如滑动项目、表单输入、日期时间选择器、卡片、标签页、iOS 风格的紧凑型标题，以及更多功能。

Ionic Framework 需要 Angular、React 或 Vue，因此只适用于使用这些技术的团队。

要开始使用，请查看将 Capacitor 与 Ionic 一起使用文档以了解更多信息。

Tailwind CSS

Tailwind CSS 是一个流行的 CSS 框架，附带配套的 UI 模板库，许多 Capacitor 开发者使用它来构建出色的应用体验。我们最喜欢的一些示例包括 Reflect 和 LogSnag。

还有一些有趣的专注于 Tailwind 的移动 UI 框架，例如 Konsta UI。

使用 Tailwind 时，重要的是要记住 Tailwind 不提供移动风格的导航和路由原语，因此团队需要注意构建符合平台惯例的 UX。一种方法是将 Tailwind 与 Ionic Framework 混合使用，如这个 Next.js + Tailwind + Ionic Framework + Capacitor 模板所示。另一种方法是设计避免传统前进/后退导航的 UX，而是使用标签页或模态框。最后，如果需要，团队也可以自由构建自定义的导航和路由体验。

Framework7

Framework7 是一个流行的专注于移动端的 UI 库，由 Swiper（一个强大的移动触摸滑块库）的开发者创建。

Quasar

Quasar 是一个 Vue.js 框架，具有移动端组件和对 Capacitor 的官方支持。

Material UI

Material UI 是一个流行的专注于 React 的库，实现了 Material Design 指南。

自行构建

如果您已经有现成的 UI 工具包，或者想要实现自己的 UI，我们建议查看 Ionic Framework 和这里介绍的其他选项以获取灵感。Capacitor 为您提供了构建梦想的空白画布，但如果您选择自行构建 UI，您需要负责构建用户所期望的出色体验。这在构建应用的同时可能会很有挑战性，因此我们通常只建议非常高级的团队或已经针对移动端优化的 Web 应用这样做。