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

productcompass productcompass     2022-12-04     451

关键词:

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

有赞Vant组件库

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

 
技术图片

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

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

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

 

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

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

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

 

基础类组件

 
技术图片

 

表单类组件

 
技术图片

 

反馈类组件

 
技术图片

 

展示类组件

 
技术图片

 

导航类组件

 
技术图片

 

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

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

 
技术图片

 

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

“地址编辑组件”

 
技术图片

 

“省市区选择”

 
技术图片

 

“商品卡片”

 
技术图片

 

“优惠券”

 
技术图片

 

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

 

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

 
技术图片

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

 
技术图片

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

 

技术图片

 

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

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

微信号:zuodong

 

原型设计工具比较及实践

原型设计工具比较及实践目录一、原型设计工具比1.墨刀2.Proto.io3.Axure二、原型设计作品名称特点界面设计界面切换流程一、原型设计工具比较1.墨刀适用领域:作为国内目前广受认可的一款在线原型设计和协同工具,墨刀有内置... 查看详情

rp文件怎么用墨刀打开

...P下载登录首页教程软件问答文章APPAxure原型文件怎么导入墨刀里面?墨刀导入原型文件方法神明浏览:5027发布时间:2021.07.27众所众知,墨刀是一个原型设计软件来的,可以创建制作原型设计!当然也是可以导入其它的软件的原型... 查看详情

二.移动端组件库

...资源。UIframeworksformobileSetofcomponentsformobile官方文档Vant是有赞商城前端开发团队开发的一个基于Vue.js的移动端组件库,它提供了非常丰富的移动端功能组件,简单易用。下面是在Vant官网中列出的一些优点:在我们的项目中主要使... 查看详情

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

分享一款适用于产品经理和设计师的原型工具——墨刀。相对于axure等传统设计软件,它最大的特点是轻、快,不需要下载,打开浏览器就能使用,没有复杂的中继器、函数概念,上手非常快,可以满足大部分场景的原型... 查看详情

哪些网站有直接可以复用的产品原型模板?

...型模板资讯类原型模板金融类产品原型模板“账户”首页墨刀提供了覆盖电商,资讯,医疗,音乐,金融等领域的产品原型模板资源,都可以直接复用,提高工作效率。 参考技术B现在的产品工具有很多,但是提供产品原型模板... 查看详情

软件原型设计工具介绍

目录:MockplusAxureRPJustinmindInvisionFlintoProto.ioBaisamiq_Mockups墨刀POP(PrototypingonPaper)UXPinTeambition蓝湖1. Mockplus产品简介:  Mockplus(摹客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其... 查看详情

原型设计工具比较及实践

目录一,原型设计工具比较1.墨刀2.Axure3.Mockplus二,原型设计1.主题名称2.功能3.界面设计考虑因素4.切换页面界面交换流程一,原型设计工具比较1.墨刀适用领域  墨刀是一款在线原型设计与协同工具,借助墨刀,产品经理、设计... 查看详情

了解原型设计工具:墨刀

 了解原型设计工具:墨刀墨刀,一款在线的移动应用原型与线框图工具。借助于墨刀,创业者、产品经理及UI/UX设计师能够快速构建移动应用产品原型,并向他人演示。目前墨刀支持创建移动端(iPhone、iPad、Android)、web端... 查看详情

墨刀原型教程:如何轻松做出菜单导航动态效果

文章作者:小龙来自公众号:产品原型工匠  可通过变形实现,让顶部菜单更加丰富   1、拉取一个矩形,大小为宽375,高60,位置是X:0,Y:202、一个向左图标大小默认,位置X:26,Y:383、一个向右图标大小... 查看详情

常见原型设计工具介绍

...存储,共享1个规范以及原型。 (XD的图片模糊功能)3.墨刀国内的原型设计工具,支持Sketch设计稿的导入拖拽式创建交互链接,可以通过链接或者二维码在电脑端或者移动端快捷预览原型。此外,设计师也可以通过墨刀进行自... 查看详情

vantweapp的使用

...考技术A官网:https://vant-contrib.gitee.io/vant-weapp/#/introVant是有赞前端团队开源的移动端组件库,于2017年开源,已持续维护4年时间。Vant对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。目前V... 查看详情

我是怎么做到从墨刀设计大赛到产品设计上线的?

去年年末的时候,我参加过由知群联合墨刀举办了一档“时间管理”主题的产品设计大赛,虽然没有获奖,但我学习到了各路小伙伴的优秀产品构想和原型!(真的超级棒!)没有让我想到的是:其中有一个叫“每日专... 查看详情

原型设计工具比较及实践

目录一、原型设计工具比较1.墨刀2.Axure3.Mockplus二、原型设计1.主题名称2.功能3.界面设计考虑因素4.切换界面5.界面切换流程一、原型设计工具比较1.墨刀适用领域    墨刀是一款原型设计工具,借助墨刀可以简单的... 查看详情

介绍主流原型设计工具

0.墨刀:①不用学习!简单易用的原型设计工具,0到1绘制原型、还是设计师导入设计稿制作交互,都可以快速轻松完成可交互原型。②电脑、手机、微信等多种设备完美演示你可以将你的作品分享给任何人,无论在PC、手机或微... 查看详情

软件工程-第二组-墨刀原型设计

...院计算机系       个人任务熟悉墨刀使用,完成墨刀原型设计熟悉过程参 查看详情

小程序使用vant快速创建页面

参考技术AvantUI组件库是有赞前端团队开发的一个Vue组件库,提供了一整套的UI基础组件和业务组件,通过vant可以快速搭建出风格统一的页面。官方地址:vantUI组件库将app.json中的"style":"v2"去除,小程序的新版基础... 查看详情

基于墨刀的视频剪辑软件xshow原型化系统

于墨刀的视频剪辑软件Xshow原型化系统系统在线展示Xshow是一款IOS平台的视频剪辑软件,本原型化系统以MVP(MinimumViableProduct)为设计目的,避免开发出客户并不真正需要的产品的开发策略,用最低成本快速地构建出符合产品预期... 查看详情

全站开发好用vue库api框架等好用网站合集

...0的桌面端组件库https://element.eleme.io/#/zh-CN/component/menu2.Vant有赞前端团队开源的基于vue的移动端组件库https://vant-contrib.gitee.io/vant/#/zh-CN/swipe3.MintUI基于vue的移动端框架http://mi 查看详情