10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
留言板 小程序 交流群 关于我

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源

产品组件库:Element,饿了么团队出品的WEB UI 组件库

8月前 1573 0

Element:是饿了吗团队研发,一套为开发者、设计师和产品经理准备的基于vue2.0的桌面端组件库,同时提供Sketch、Axure模板资源文件方便快速产品设计。

介绍

由饿了么团队出品,一套为开发者、设计师和产品经理准备的组件库,提供了配套axure、sektch设计资源,可以直接下载使用,能帮我等搬砖人员节省大量的时间。

使用现成的UI组件库,能快速搭建项目,后期也容易维护,在敏捷开发项目中尤为常见。设计师可以下载设计文件,在做设计图时直接使用模板,既能快速出图,也保证了前端还原实现。

我是一个喜欢研究前端开发的爱好者,当我第一次看到element时,卧槽真漂亮!那个时候优秀的前端ui框架还不多,等我把官网所有的组件一一体验下来,发现惊叹得太早了,不仅好看,体验做得非常到位,另我深有体会的是,原来在做产品设计时很难解决的交互问题,element都解决得非常好。

为了用它,于是花了1周时间学了vue.js,之后就开始策马奔腾了。

特点

element ui是一款设计和交互非常优秀的前端UI框架。基于 Vue 2.0,同时也有基于React和Angular的实现。

  • 视觉设计优秀,细节处理到位;

  • 交互体验很好,即使是复杂的表单操作,反馈也非常清晰,操作简洁直观;

  • 较容易上手,基于vue.js开发,官网实例代码很充足;

  • 支持定制主题;

  • 支持Vue\React\Angular,满足各前端技术型。

设计原则

一致性 Consistency

  • 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;

  • 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。

反馈 Feedback

  • 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;

  • 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

  • 简化流程:设计简洁直观的操作流程;

  • 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;

  • 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。

可控 Controllability

  • 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;

  • 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。

使用体验

对于设计师,官网提供主题定制功能,可以快速按需生成符合自己设计风格的界面,同时提供sketch、axure模板文件下载,非常良心的企业级UI框架;

对于产品经理,element ui 解决了大量的交互问题,能让产品经理们专注于解决更深层次的问题,同时可以使用设计文件快速做出原型。

前端开发初期在选择组件库尤为重要。成熟的第三方组件库包含了你需要的组件,会省很多精力和时间,而且可以按需求定制主题,大气,易用逼格高,外包公司搬砖的同学绝对非常喜欢。

这是一款为桌面端设计的UI库,出道即巅峰,特别适合做项目管理后台的前端框架,复杂的操作完全不在话下,官网的有充足的代码例子,使用很简单,可以配合webpack等工具按需引入,对于没有工程化开发经验的同学也很友好,支持引入js、css文件直接开发。

唯一不好的是,国内官网偶尔会抽风,速度有时也不是很快。

虽然一般用于 pc 端开发,但由于是响应式的设计,因此在移动端的表现也不赖,如果开发交互简单的界面,移动端表现也非常优秀。如果你还没用过 element ,强烈推荐你现在开始吧。

就算没能把 element 用在生产项目上,在官网体验这些高质量的组件,也能学习到很多设计和人机交互知识。特别是对 vue.js 组件化开发感兴趣的前端工程师,如果还不是那么熟练,可以多看 element 的例子来学习组件设计的思路。

组件下载

Element_Components_v2.0.0

访问官网

https://element.eleme.cn

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
#组件库 #前端组件库 #UI组件库 #产品组件库 
收藏 1
推荐阅读
  • 产品组件库:Ant Design,阿里巴巴旗下蚂蚁金服团队出品的的企业级 UI 组件库
  • 产品组件库Bulma CSS UI框架:免费开源的响应式Web界面解决方案
  • 产品组件库Arco Design:字节跳动开源的企业级产品设计系统
  • 产品组件库Ant Design Mini:免费开源,支持支付宝与微信小程序的高效UI组件库
  • 产品组件库:Element,饿了么团队出品的WEB UI 组件库
评论 (0)
请登录后发表评论
分类精选
产品组件库:Vant,有赞出品轻量、可定制的移动UI组件库
1798 8月前
产品组件库:Element,饿了么团队出品的WEB UI 组件库
1574 8月前
产品组件库Arco Design:字节跳动开源的企业级产品设计系统
1312 5月前
产品组件库:Ant Design,阿里巴巴旗下蚂蚁金服团队出品的的企业级 UI 组件库
1288 8月前
产品组件库:NutUI ,京东出品的快速开发商城类h5、小程序的移动端 UI 组件库
1110 8月前
产品组件库Ant Design Mini:免费开源,支持支付宝与微信小程序的高效UI组件库
951 4月前
产品组件库:SUI Mobile - 阿里出品的IOS风格的手机H5前端UI库
920 8月前
产品组件库:Cube UI, 滴滴出品的精致移动端组件库
913 8月前
开源组件库:Tippy.js免费开源可定制Web 工具提示、弹出框、下拉列表组件库
851 6月前
产品组件库:AT UI ,京东出品的轻量、模块化前端UI组件库
849 8月前

文章目录

  1. 介绍
  2. 特点
  3. 设计原则
  4. 使用体验
  5. 组件下载
  6. 访问官网

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 产品组件库:LobeHub UI 组件库发布!基于Ant Design AIGC UI 的AI 组件!
2 产品组件库ChatUI:对话式界面组件,AI 组件库 ChatUI 3.0 正式发布!
3 产品组件库Ionic Framework:构建跨平台移动应用的领先UI工具包
4 FastBootstrap:Atlassian设计出品的免费开源的 Bootstrap 主题,免费响应式UI 组件
5 产品组件库Bulma CSS UI框架:免费开源的响应式Web界面解决方案
6 产品组件库Ant Design Mini:免费开源,支持支付宝与微信小程序的高效UI组件库
7 产品组件库Fighting Design:个人开发的Vue3前端组件库,灵活且易于上手
8 产品组件库daisyUI:基于Tailwind CSS的开源组件库,加速构建美观网站
9 产品组件库BalmUI:基于Vue 3的模块化Material Design风格UI组件库
10 产品组件库Element Plus:Vue 3.0时代的全新桌面UI组件库
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
免费影视APP 花式玩客 免费字体下载 产品经理导航 Axure RP 10 免费Axure模板 Axure原型设计 Axure元件库下载 原创Axure模板 申请友联
1 / 3