墨刀联合有赞Vant组件库,让你轻松设计出电商原型

Posted productcompass

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了墨刀联合有赞Vant组件库,让你轻松设计出电商原型相关的知识,希望对你有一定的参考价值。

继上周新上线了简历模板之后,本周墨刀的原型模板库又欢喜地增添一名新成员! 

有赞Vant组件库

(做电商的宝宝要捂嘴笑了)

 
技术图片

Vant 组件库有赞前端团队开源的一套基于Vue的UI组件库,目前版本收录了50+个组件,都是来源于有赞的微商城业务,经过有赞业务的检验,轻量可靠 (目前在Github上已经收获星星7857颗)

相比于其他Vue UI组件库,Vant 组件库不只是提供基础的UI组件,还增加了许多移动商城内常用的业务组件,可以让开发者快速构建移动商城。

 
技术图片
   墨刀的 Vant 组件库模板

 

正如有赞团队所说,“如果你需要开发一个移动商城,用Vant就再合适不过了”

如今墨刀把 Vant 组件库搬上原型模板库(感谢墨刀模板大使周祚栋制作),也让产品经理和设计师更快捷地搭建电商类原型,设计师和开发者交付起来也更顺畅!

来一睹为快这套Vant组件库有哪些实用组件吧!

 

基础类组件

 
技术图片

 

表单类组件

 
技术图片

 

反馈类组件

 
技术图片

 

展示类组件

 
技术图片

 

导航类组件

 
技术图片

 

而最具特色的业务类组件,包含 “地址编辑”, “省市区选择”,“优惠券选择”,“Sku商品规格”这些相当实用的电商组件。

在墨刀,你都可以十分便捷地一键复用。

 
技术图片

 

(抢先欣赏下部分业务组件)

“地址编辑组件”

 
技术图片

 

“省市区选择”

 
技术图片

 

“商品卡片”

 
技术图片

 

“优惠券”

 
技术图片

 

如何在墨刀一键复用Vant组件?

 

1  登陆墨刀之后,点击“新建项目”——“从模板中创建项目”,找到“Vant移动端组件库”,点击“使用模板”,即可进入该模板。

 
技术图片

2  选中想要复用的组件,右键点击,然后“添加到我的组件”。下次在新的项目,你就可以直接从“我的组件”库里直接拖出来使用了!方便快捷!

 
技术图片

特别感谢我们的墨刀原型模板大使 周祚栋,为刀友们制作了此模板!想和大神交流的可以加他微信哦!

 

技术图片

 

知识付费方向产品经理,为200+企业提供内容变现方案,平时很喜欢用墨刀去设计一些有意思的东西,像制作了蚂蚁金服/Weui/有赞等组件库的墨刀模板,又比如独立设计了飞机大战小游戏,再比如画了“墨刀的第一台挖掘机”,以及实现了很多炫酷的交互。

强迫症、细节控、好奇心旺盛,拥有产品、运营、设计一体化的思维和管理能力,擅长底层业务逻辑设计和用户行为研究。

微信号:zuodong

 

以上是关于墨刀联合有赞Vant组件库,让你轻松设计出电商原型的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js+Koa2移动电商实战2

推荐几款微信小程序常用组件库

vant weapp的使用

小程序:使用Vant Weapp

让你的原型不再LOW-一套设计师倾情奉献的组件库免费下载

可协作的原型设计工具(附行业模板素材)