微信小程序云开发教程-墨刀原型工具入门

本小节,我们将学习墨刀原型工具的基本使用。

微信小程序云开发教程-墨刀原型工具入门_第1张图片

    墨刀主要有3大功能,1是用来做产品原型设计,2是可以非常方便地进行功能和效果演示,3是为前端工程师提供了样式的开发标注。

微信小程序云开发教程-墨刀原型工具入门_第2张图片

    原型的开发,我们可以分为5步,第一步,建立页面,第二步,使用组件进行布局(页面结构),第三步,为组件设置样式(变得更好看些),第四步,给各个按钮之间添加跳转链接,第五步,将做好的原型进行预览和发布。

    下面我们具体一步步来看。

    1. 进入墨刀官网:https://modao.cc/,注册墨刀账号;

    2. 点击“进入工作台”;

微信小程序云开发教程-墨刀原型工具入门_第3张图片

    3. 点击“新建”->“项目”;

微信小程序云开发教程-墨刀原型工具入门_第4张图片

    4. 点击新建页面;

微信小程序云开发教程-墨刀原型工具入门_第5张图片

    5. 使用组件布局;

微信小程序云开发教程-墨刀原型工具入门_第6张图片

 

    6. 设置组件样式;

微信小程序云开发教程-墨刀原型工具入门_第7张图片

 

    7.设置按钮的跳转链接;

微信小程序云开发教程-墨刀原型工具入门_第8张图片

 

    8. 运行预览原型的效果;

微信小程序云开发教程-墨刀原型工具入门_第9张图片

下面,请根据教学视频进行学习和操作。

 

想看视频版?

关注公号“微程序学堂”,我们的视频教程即将上线

 

如果你自己写了好文章想投稿

请联系我们

你可能感兴趣的:(微信小程序,小程序,原型设计)