江苏龙网

  1. 主页 > 生活百科 > >

浅谈前端八大UI库

UI库


浅谈前端八大UI库

文章插图
 
Element UI开发团队：饿了么前端官网：https://element.eleme.cn/#/zh-CNgithub（ star：44.1k ）：https://github.com/ElemeFE/element特性：Element-UI 是目前针对于 Vue 开发 PC 端项目的时候所使用到的一个主流 UI 库 。在座的有学习 Vue 开发的同学或多或少应该都知道 Element-UI。那我们就从它开始聊 。
? 大家有没有想过，对于一个 UI 库来说，它是如何被广大的开发者所接受的？或者说它是如何被用户所接受的？
? 我认为，一个产品，具体到当前就是 Element-UI 这个库，这个库对于我们开发者来说就是产品，我们开发者就是它的用户 。而一个产品之所以可以被用户所接受，所依赖的无非是三点：
1. 产品的文档对于用户来说足够清晰
2. 产品的功能对于用户来说足够简单
3. 产品的 UI 对于用户来说足够友好
? 什么意思呢？我们一个一个来解释 。
? 首先我们来看第一个：产品的文档对于用户来说足够清晰 。这是什么意思呢？大家想一下当我们买了一个东西的时候，最初我们不知道这个东西是怎么用的？那么我们一般都会去看一下它的说明书，或者直接去网上搜索一些这个产品的资料，对吧 。那么这个时候如果它的说明书写的不清不楚，甚至有些地方写的根本就不对 。那么你如果想要把这个东西使用熟练，是不是要花费特别大的精力 。也就是我们开发者常说的，这个框架拥有了过高的学习成本，或者说这个框架学习曲线过于陡峭，不够平滑 。那么这样的话无疑会劝退一部分用户 。对吧 。
? 所以说如果一个框架如果想要被开发者广为接受，那么一个清晰的文档肯定是首要的条件 。那么对于 Element-UI 来说，它的一个文档就比较清晰 。在组件部分，从安装 Element-UI 到各个组件的效果描述的都是非常清楚的，每一步应该如何做，这样做会产生什么样的结果都在文档上描述的很清楚 。这个就是一个清晰的产品文档 。
? 第二条：产品的功能对于用户来说足够简单 。这一条也好理解 。对于我们开发者来说，当我们使用一个框架的时候，我们想要的是什么？我们想要一个框架：你的功能要足够的复杂，但是你的接口要足够的简单 。什么意思呢？大家可以参照一下自己的手机 。现在智能手机的功能已经非常复杂了 。可以打电话，可以玩游戏，可以看电影 。但是一旦你熟悉了它之后，它使用起来确实非常简单的 。你不会去关心它的功能是如何实现的，你关心的只是是否可以通过简单的操作来完成复杂的功能 。就是这个道理放到我们开发者身上也一样 。我不关心你组件封装的如何复杂，我所关心的只是你暴露出来的接口 。
? 第三条：产品的 UI 对于用户来说足够友好 。这一点是什么意思呢？其实这一点主要是对于产品经理和设计师来说的 。大家有过开发经验的同学，特别是有过在公司工作过的同学 。应该很清楚，你的项目最终开发出来帐什么样子，不是你决定的 。是产品经理和设计师来决定的 。那设计项目的 UI 他们的依据是什么呢？他们会依据产品的特性、产品的定位等等，但是绝大部分的 UI 依据都是目前用户的一个普遍审美 。
? 大家有没有发现对于现在的 App 、网页甚至手机来说，他们的 UI 同质化非常严重吗？差不多都是一个风格的，对吧 。出现这个问题的原因就是因为大众的一个审美会定位到同一块区间，而设计根据大众的审美来定位产品的样式，所以才会出现这种同质化的问题 。
? 那么这个和我们开发者有什么关系呢？大家想一下，如果一个 UI 库它能够符合大众的普遍审美，并且提供了一种良好的交互体验，那么如果你是设计师的话，你会不会参照或者直接使用 UI 库所提供的样式 。因为对于这种 UI 库来说，它的样式会比大部分的设计做出来的样式还要好 。
? 那么对于我们开发者来说，当你拿到设计稿的时候，你发现设计稿上的样式和 Element-UI 一样，你是不是到 Element-UI 上直接拿过来用就可以了呀 。
? 并且对于 Element-UI 它额外还提供了 自定义主题 和 国际化的功能 。这些具体怎么做，文档说的很详细，我们就不展开说了 。
? 那么总结一下 Element-UI。
【浅谈前端八大UI库】1. Element-UI 是现在基于 Vue 的一个非常好用的桌面端 UI 组件库
2. 支持 @vue/cli 项目的直接添加，支持按需导入、国际化、支持自定义主题
3. 文档清晰，学习成本低
4. 提供的组件足够使用


推荐阅读


上一篇：防御sqlmap攻击之动态代码防御机制

下一篇：Jackson注解详解