ui组件是什么?USER INTERFACE Module，即用户界面组件。组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分。用户界面组件包含了这样一个或几个具有各自功能的代码段，最终完成了用户界面的表示。UI组件可以用于设计网页、APP和软件的用户界面。
vue ui组件库
Radon UI.一个帮助你快速开发产品的Vue组件库，简洁好用，效率高，让你摆脱各种定制化的烦恼。
1.特性
基于 Vue 开发的高质量UI组件
基于 npm + webpack + ES6 + postcss开发
数据驱动，简单易使用
2.安装
使用 npm 安装
vue ui组件库使用 npm 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 可以通过 npm 直接安装到项目中，使用 import 或 require 进行引用。
3.基本组件的使用
引入 rdDatepicker 日历组件并局部注册并定义日历组件的数据对象及配置。
ui组件库是干嘛的
1、为了一个项目有统一的主题（颜色），外观，和操作体验。一般来说一个项目由一个团队开发，如何保证团队里面的每个人都对同一个事情有同一个认知，而这几乎不可能。这样说大家可能不太能理解，举例来说：同一种情况下，同一个按钮，不同的人用的颜色，底色，边框圆角不可能完全一致。就算是同一个人，也不一定能保证在同样的情况下，按钮的主题，外观，操作反馈一定是一样的。所以大公司制定统一的开发标准，开发底层公共组件库，保证同一个项目中同一种情况下用户的体验是一致的。（这里包括颜色，外观，操作反馈等）。
2、从结果论的角度说，一个完善的组件库能极大提高我们的开发效率。一般来说，一个完善的组件库能帮我们提高30%的开发效率，让我们只需要专注于业务逻辑，而不需要考虑基础组件复用性、扩展性、稳定性的问题。因为我们需要的一般基础组件它都帮我们封装好了，我们直接用就OK，而且复用性，扩展性，稳定性极高。如果是我们自己写一个通用的组件，一般需要我们考察需求，探索原理，解决复用性，扩展性，稳定性的问题。这对于开发效率要求高的项目几乎是不可行的。
3、组件库给我们了一套最佳实践，供我们借鉴，学习，参考。一般来说，一套组件库是基于一种设计原则的最佳实践。何为最佳实践，就是面对同一个问题，A方案可行，B方案也可行，C方案也可行，后面还有N多方案，但是在众多的实践中，发现A方案在效率，外观，体验等等方面综合价值最高。那么A方案即为此问题的最佳解决方案。
UI组件——按钮介绍
按钮是任何用户界面中最重要和最普遍的交互元素之一。它们可以有各种形状和大小，用于表单、号召性用语、注册表单、登录链接以及网站或应用程序的其他地方。
根据用户期望与它们交互的方式，有 3 个主要类别的按钮：主要的、次要的和第三的。视觉层次结构定义了不同的应用程序用例，设计人员应该对何时使用这些变化有深刻的理解。
主要按钮 突出显示界面想要或期望用户做什么。它们应该从界面的其余部分和其他按钮中脱颖而出，尤其是那些靠近的按钮。主要按钮通常以 CTA 形式出现，例如表单上的提交按钮。
在设置主按钮样式时，使用更饱和的颜色以使它们更醒目。对于号召性用语按钮，使用与界面其余部分形成对比的颜色特别有用。
避免每页有太多的主按钮，以防止超载和混淆用户。
辅助按钮 是主按钮的替代品。如果提交按钮是主要按钮，则取消按钮将是次要按钮。辅助按钮应该有更柔和的样式，让主按钮在设计中占据中心位置。
尽管辅助按钮应该不那么显眼，但请确保用户可以识别他们的不同状态（启用、禁用、悬停、聚焦等）。
第三级按钮 用于执行较少的操作——用户不太可能执行的操作。因此，它们根本不应该引人注目。事实上，您可能希望将第三个按钮与界面中的其他按钮分开放置，以防止用户意外选择它们。
图标按钮 ，顾名思义，仅包含一个图标。因为图标没有文字，所以这些按钮只能用于日常操作，例如编辑或将某些内容移动到垃圾箱。符号的含义需要熟悉且可立即识别，以防止混淆用户。
从可访问性方面来看，仅图标按钮对于辅助技术用户来说意义不大。有几种方法可以使此类按钮更易于访问。例如，您可以将图标与文本一起使用或在<button>元素中定义按钮的名称。
如果您仍然认为使用纯图标按钮值得冒险，请确保提供信息丰富的工具提示。
与仅图标按钮相比， 文本按钮 仅包含文本，没有图标。它们也不包括边框或填充颜色。纯文本按钮的视觉重量显着减少，因此建议仅将它们用于不太重要的操作。
例如，您不想将纯文本按钮用作 CTA。在设计纯文本按钮时，请务必使用与其他按钮大小相同的不可见容器，以保持一致的间距。
轮廓按钮 ，也称为幽灵按钮，仅包含边框和文本标签。它们比纯文本按钮具有更多的视觉重量，但并不是特别突出。轮廓按钮非常适合作为二级或三级按钮，但它们在视觉上不够突出，无法指示主要操作。
如果您想要一个视觉重量更重的按钮，请考虑使用 凸起的按钮 。凸起的按钮由于使用阴影而脱颖而出。阴影使它们在设计中更加突出并引起用户的注意。但是，请注意不要过度使用它们，因为它们会使用户不知所措。
较大的阴影表示与表面的距离较大，并强调按钮的重要性。
与凸起按钮相比，我们有 扁平按钮 。它们不使用阴影或其他样式来模仿高度或体积，但由于它们的形状和颜色，它们仍然看起来像按钮。
最好避免使用扁平按钮，因为它们缺乏交互性的任何视觉指示。换句话说，它们看起来不可点击或可点击，从而使用户感到困惑。
拆分按钮 是菜单按钮的变体。然而，它不仅仅是它的主要作用。拆分按钮提供默认的单击操作，同时还通过下拉菜单提供替代选项。他们经常使用箭头图标来指示辅助功能可用。
拆分按钮与常规菜单按钮的唯一区别是按钮的主要功能和下拉功能之间的某种视觉分隔符。它可以防止用户假设整个按钮都会暴露下拉菜单。
限制选择的数量以防止选择麻痹。将其保持在桌面的 10-12 个选项之内，而对于移动设备则更少。
如果您想将多个功能（通常是 2 或 3 个）组合到一个按钮中，同时保持所有功能可见，那么 切换按钮 就是答案。他们总是群居，共享一个容器。在每个组中，一次只能选择一个按钮。
确保使用颜色或覆盖清楚地传达选择了哪个选项。
如果您需要对同等重要的类似操作进行分组，但又不想将它们与切换按钮并排显示，请考虑使用 菜单按钮 。菜单按钮只需在单击/点击时打开操作列表。在对相关操作进行分组时，它们是节省空间的绝佳选择。
浮动操作按钮 (FAB) 最初是由 Google 的 Material Design 指南推广的。它们提供一致且固定的主按钮。通常，它们是圆形的、仅图标的、固定在屏幕边缘或角落的凸起按钮。您可能已经在 Google 的应用程序中看到过它们，例如 Google 日历中的加号添加事件按钮。
通常每页只应使用一个 FAB 来进行建设性的主要操作，例如创建、添加或共享。
相关推荐：
