写在前面
掘金的同学们大家好呀,两个月不见,甚是想念~。先自我介绍一下,作者是 Vue3 Material Design 移动端组件库 varlet 的作者,与 varletjs
团队近两个月的主要精力都放在 varlet
组件库的设计资源制作上,现在做的差不多了,觉得应该可以跳出来说一说了~。有的同学可能会疑惑为什么组件库已经发布了这么久了,现在才想起来做设计资源?之前没有设计资源的时候,组件库的组件又是遵循什么开发出来的呢?
先开发组件,后出设计稿。先有蛋再有鸡
按照常理来说,组件库的开发应该先存在组件设计稿,开发者再遵循设计进行开发。但是由于 varletjs
团队起初并没有专业的 UI 设计师,所以我们选择使用 Material Design
官方提供的设计资源并进行适当优化(魔改)来作为我们的原始设计。
在我们哼哧哼哧的把组件库的功能实现完了之后,我们将组件库开源了出来。在维护的过程中我们收到了很多同学们的相同反馈,大概的中心思想就是在 varletjs
团队没有第一方提供设计资源的情况下,由企业的 UI 设计师手动绘制是不太现实的,如此一来 UI 设计师就没有办法高效的产出高质量的产品设计图。
这时候我们逐渐意识到了问题的严重性,我们在本着什么不会就学什么的态度,开始学习使用 sketch
进行组件的 视觉设计
。
开源团队寻觅专业的 UI 设计师十分困难
在软件开发圈子中,我们谈起开源是可以如数家珍的。但是在设计圈中的很多设计师对于开源的概念是极为陌生的。我们在组件库发布的这几年中也经常会去寻觅专业的设计师,希望他们可以帮助我们完善组件库的设计,但是大多数情况都很难让对方理解我们在做的事情而劳而无功。
不过......
最近几个月我们的运气比较不错,我们在掘金遇见了一个很优秀的前端工程师 唯心 ,并且我们也邀请她加入了我们的团队,她还将她的好朋友(一个很专业很靠得住的 UI 小姐姐)引荐给了我们。在我们制作设计资源时,给我们提供了很多的帮助,最后我们才得以完成了设计资源的制作。
组件资源预览
图标资源预览
如果同学们有需要,可以在我们的官方文档 Varlet Design Resources 进行下载。我们暂时只提供亮色的设计稿,暗黑模式会在未来提供,同时也欢迎社区贡献。
顺道一提,除了设计资源,还做了一些功能特性的小更新
在我们专注于设计资源制作时,社区的小伙伴们也没有闲着,他们自发的贡献了许多的新 feature
。下面简单介绍一下他们的劳动成果。
VSCode 插件增强,鼠标悬浮查阅组件文档信息
现在鼠标移动到组件名上可以看见一个悬浮框,里面包含了组件的属性,事件,插槽的文档信息,使得查阅文档更加的容易,详情见 Varlet VSCode Extension。
Input / Select 重做,支持新的外观
Input
和 Select
进行了一次大重构,提升了代码的可维护性的同时,增加了新的外观。
Slider 垂直模式
支持上下拉~
Rate 可清除
在之前的版本里,评分组件用户一旦打分之后就没有办法评 0 分了,这一点得到了优化。(作者实际上同时也很疑惑为什么某些应用没有办法评 0 分,最低都要评上 1 分,某些店家真的是差到爆炸了,甚至希望能打负分 😭)
Image 支持错误插槽
提供了一个通用的错误插槽,更容易处理图片错误时的后备展示。
ImagePreview 支持长按事件
长按图片时触发事件。
最后
在这两个月里,varlet
同时也迈过了 🎉🎉🎉4000star
🎉🎉🎉 这道坎。 十分感谢大家的支持和喜爱,同时感谢长久以来社区贡献者们的努力。这次就唠叨到这吧,感谢掘金的同学们能耐心看到这里,期待下一次再会~