浅谈前端八大UI库

2401_84092456 2024-06-23 11:33:01 阅读 86


下面是本博客所涉及到的八个UI库

Element UI

vuetify

Ant Design

Bottstrap

layui

Vant UI

Framework7

WEUI


这是我从前端的众多 ui 库中选出来了八个,但是并不是说没有被列出来的 UI 库都不好,没有这个意思,不要把我置身于水深火热之中哈。这里之所以选出这个八个,是因为咱们的一个篇幅关系,不可能把所有的好的前端UI库都拿出来说一遍,所以我就挑出来了我个人感觉八个比较有代表性的 UI 库。那么下面我们一个一个来看。


在这里插入图片描述

Element UI


开发团队:饿了么前端
官网:https://element.eleme.cn/#/zh-CN
github( 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 同质化非常严重吗?差不多都是一个风格的,对吧。出现这个问题的原因就是因为大众的一个审美会定位到同一块区间,而设计根据



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。