如何快速用墨刀制作一个APP首页原型

如题所述

如何快速用墨刀制作一个APP首页原型

墨刀是一款原型设计工具,可以快速搭建移动应用原型和线框,支持云保存和实时手机预览.今天主要做一个墨刀基本使用的教程,所以不重点介绍和比较各个原型工具的优缺点(有时间的话单独做一个原型工具的对比分析).希望这个教程能帮助墨刀初学者快速入门.

创建应用程序.

首先打开墨刀软件,新建一个应用,选择应用类型(这里我选择iPhone设备),输入应用名称、设备类型、应用大小,点击create按钮,完成应用创建.

制作底部导航栏.

新创建的应用的标题栏会自动显示应用的名称(大家都是产品经理),标题栏文字可以自行修改.

制作内衬导航栏,从左边的“组件”栏找到底部的组件,拖拽到应用中.尺寸和款式可以自己修改.然后拖动三个导航标签并修改标签的位置和名称.此时,底部导航栏完成.

制作原型页面.

然后我们开始做“产品经理”首页的原型,在左边的“组件”栏找到搜索组件,拖到App首页,在“主”栏找到轮播模板,拖到应用中.墨刀里有一些现成的组件或者大师,可以直接拖进去,用来加快原型创作的时间.

然后回到“组件”栏,为第一页插入图片和文本.图片在右边的设置栏中调整.建议你直接拖动图片,然后用鼠标调整大小.文本的调整在左边的主题栏,可以调整文本的大小和样式,然后用鼠标放在合适的位置.

创建页面.

点击软件右上角的“+新建页面”生成新页面,每个页面都有复制、删除和添加子页的功能.向新页面添加标题栏,复制第一页的底部导航,并将其粘贴到新页面中.粘贴时注意“原位置”.这样做“发现”页和“我的”页.

页面跳转.

介绍了墨刀一个很有特色的功能,就是通过连线在页面之间跳转.如果在应用程序中选择了任何控件,可以通过添加手势和切换图片或文字的页面来实现页面跳转.优点是操作简单,直观.缺点是页面复杂,跳转多,会有很多交叉线,容易出现连接错误.

可以通过连线快速切换底部导航.设置完成后,选择右上角的运行按钮查看实际效果.效果如下:

添加全局手势.

最后,移动端更重要的一个功能是添加全局手势,在左侧的“组件”栏中找到全局手势组件,将其拖动到应用程序的任意位置,然后在启动手势后选择要跳转的页面,选择手势模式和动画效果.

使用全局手势组件,将滑动页面切换效果添加到应用程序中.运行测试.

手机预览.

手机预览功能,可以直接将原型导入手机查看.只需在运行界面点击Share,用手机浏览器扫描二维码(墨刀app中有),就可以直接在手机上查看原型,让你更方便的为团队演示和讲解你的原型.

结束语.

总的来说,“墨刀”操作起来很方便.如果有其他的原型工具,可能会更容易使用.支持手机预览功能,更方便手机产品的创建和展示.我也推荐app产品或者设计师用墨刀快速创建原型,可以加快自己的制作和展示时间.

温馨提示:答案为网友推荐,仅供参考
相似回答