首页 > 其他分享 >UI/UE统一设计与前端组件库建设

UI/UE统一设计与前端组件库建设

时间:2023-07-31 15:47:02浏览次数:26  
标签:开发成本 封装 组件 UI UE antd

一、当前问题( 主要在管理后台)

1、输入框、下拉选择框figma样式不一致

2、search 组件、table组件、翻页导航样式与交互不一致


3、UI/UE设计成本高
4、前端开发成本高

二、原因分析

1、设计师需要拥有全局视角,各平台统一规划。通常来说当一个界面设计美观、交互体验感好、并且统一的时候,用户体验一般比较好
2、技术沉淀,建网站像搭积木,如果已经有合适组件,可大幅节约设计与开发成本

三、解决方案

1、平台思维,利用第三方组件库(比如antd、antd-pro),或建设公司组件库(适合个性化设计)是当前行业主要解决方案
2、基于chakra-ui二次封装,需要开发大量 js 与 css,开发成本高很多bug
3、基于antd二次封装,只改 css样式,大幅降低开发成本与 bug
4、storybook搭建组件库文档,方便设计师与开发人员查阅

四、当前进展

已封装 DC 组6个常用组件Input、InputCount、InputBefore、TextArea、Select、Modal

标签:开发成本,封装,组件,UI,UE,antd
From: https://www.cnblogs.com/jerry-mengjie/p/17593611.html

相关文章

  • Redis proxy 组件之 Predixy
    Predixy是一款高性能全特征redis代理,支持redis-sentinel和redis-cluster组件特性:Predixy支持的功能为什么需要redisproxy?屏蔽redis架构的复杂性,使后端开发人员无论是用redissentinel还是rediscluster集群,都像使用单机redis实例一样方便。集群扩缩容......
  • 手把手教你在云环境炼丹(部署Stable Diffusion WebUI)
    前几天写了一篇《手把手教你在本机安装StableDiffusion秋叶整合包》的文章,有些同学反映对硬件的要求太高,显卡太TM贵了。今天我再分享一个云服务器炼丹的方法,方便大家快速入门上手,这个云服务不需要特殊网络设置,能连接公网网盘,随开随用,有3090显卡,也有4090显卡,不过我经常使用的是A5......
  • vue实现浏览器端大文件分块上传
    ​ 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了:上传文件实体类:看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性。如MD5秒传的信息。pub......
  • DRF之Request常用参数
    登录成功,将token封装好返回给前端,前端再放到locallsession里永久化存储。导航守卫拿到token后就进行第一层守卫防止没登录用户通过。再由拦截器进行校验。这个请求头'Authorization'主浊JWT搞得那个加密token,后端就是要校验这个玩意儿我想。获取时在jwtauth里加上HTTP_就OKjwt其实......
  • VUE3、ElementPlus 重构若依vue2 表单构建功能
    Vue3+ElementPlus+Vite重构若依Vue2表单构建功能若依官方的Vue3版本发布已经有段时间了,就是这个表单构建功能一直没有安排计划去适配到Vue3!前段时间公司需要做个类似的功能,就直接借鉴若依Vue2的来直接改了吐槽下:vuedraggable-vue3坑真多,官方文档一言难尽,现在不推荐使......
  • 坑:vue2在props时仅接受第一次返回数据的解决办法
    今天在做项目时遇到了一个bug,在列表页进入详情页时带入list以便子组件遍历使用,使用props传参,该list在父组件由created生命周期函数访问接口获取,然后子组件在使用时,直接使用props接收并调用,大概代码如下://父组件<Child:list='list'/>...created(){getListApi().then(list......
  • 浅聊一下,React会不会被VUE取代?
    看到知乎上有比较多的类似问题,正好这两个框架在以往的一些项目中都有实践过,就借着本篇文章说说我个人的看法。 先摆个结论:不会,毕竟各有千秋,除非跨端框架有被更好的概念所替代,又或者App已经彻底过气了。 什么是React?什么是VUE?维基百科上的概念解释,Vue.js是一个用于创......
  • p2:认识requests库的常用方法与实战
    二、全面认识requests库的常用方法requests是python第三方库安装命令方法如下:pipinstallrequestspython的默认的测试用来规则1、模块名必须以test_开头或_test结尾;2、类名必须以Test开头;3、测试用例名必须以test_开头#核心的六个方法#post、delete、put、get==......
  • 【5.0】DRF之序列化组件
    【一】序列化组件介绍做序列化做反序列化在反序列化保存到数据库之前,做数据库校验【1】介绍DRF(DjangoRESTframework)是一个用于构建基于Django的WebAPI的强大框架。在DRF中,序列化组件是其中一个核心组件,用于在API请求和响应中处理数据的转换和验证。序列......
  • 【4.0】DRF之Request类源码分析
    【一】引入classBooksView(APIView):defpost(self,request):''':paramrequest:新的request,不是原来的那个:return:'''print(type(request))#rest_framework中的新request#继承APIView......