Craft 强势更新!帮你在Sketch 上快速做交互原型

2017/05/27 7102

酸梅干超人:InVision Craft Prototyping 功能终于上线了,从两年前开发到现在,千呼万唤始出来,有生之年系列既视感!

可能很多人对 InVision 是做什么的不太清楚,这里稍微科普一下,除去需要搭梯子来提速,这家公司应该是目前所有原型工具中最优秀的,没有之一。无论是对于产品的理解、体验的设计,还是对于前端技术的追求。

Craft 的原型工具,可以快速在 Sketch 把页面的交互设置做好,然后生成网页的链接分享出去。可以让任何人,通过任何设备的浏览器进行访问和操作。这里面很多优点就不说了,大家可以自己研究。

下面直接进入今天的主题,没有下载的可以去官网下载最新的安装包,https://labs.invisionapp.com/craft。以及保证自己更新到最新的版本,开启了最下方的 Sync + Prototype。

△  Craft 的面板

然后我们在 Sketch 界面中的 Craft 的功能栏最下方(位置比较坑),可以看见一个闪电按钮,点击开就可以开启原型编辑模式,同时底部会有提示框弹出。

△  开启原型编辑模式时弹出的提示

在这个状态下,只要我们选中画布中的组件,再按快捷键 C ,就会生成一个箭头,把剪头指向组件对应跳转的页面再点击,就会弹出一个新的弹窗进入下一步操作。

△  定位组件跳转的页面

这个弹窗是用来设置交互动作和效果的。最上方的单选弹窗,用来选择交互目的,是链接到新页面或者页面遮罩的模式。下方 Gesture 代表手势,比如点击、滑动、长按等。Transition 代表在触发了上方交互动作以后执行的交互效果,比如常见的 Push 、Slide、Flip 。再下面那个选项不好解释,后面自己操作一下就明白了。这时我们按保存,就代表已经创建了一个交互动作——点击该组件下个页面会从右向左推进。

△  交互设置的面板

这里要说到,当我们在选择交互目的的时候,在上方会有两个特殊的按钮是可以选中的,一个是交互跳转到上一页,一个是跳转到制定 URL 链接。

△  跳转上一个页面和网页链接

这时候我们就要对其它可交互元素进行设置,完成所有跳转和返回的逻辑(用以前的某个飞机稿做的测试)。

△  编辑完跳转后的样式

这时候在本地我们是不能直接进行操作的,需要对内容进行上传,也就是右上方的上传按钮。

△  页面设置上传和演示的面板

如果没有登录的话在这个页面会有提示,完成登录操作即可。这时上方的这个单选框,点开,选择或新建一个画板,我命名为测试。

△  新建一个画板

然后可以选择是上传所有画布,还是自己手动选择的画布,推荐手动选择的。按下方 Sync to InVision 就可以把这些页面和完成的交互信息全部上传到服务器上去。当然,如果你之前已经在本地修改过页面,只需要一样的方法再次上传就可以覆盖旧的记录。我们需要耐心等待上传过程,面板左下角会有上传进程。当完成后,就可以点击右侧的按钮进行浏览啦!

△  上传中的进度展示

其中 Open 是用来在线上开启页面的文件夹进行精确的编辑。最右侧的箭头,就是直接可以让我们进行交互操作演示的按钮,点击就可以打开浏览器,在网页中访问。把这个页面的链接复制黏贴下来发给别人,就可以让项目其它成员一起浏览了。

△  电脑中访问的样式

△  手机中访问的样式

InVision Craft Prototyping 目前应该还处在前期的测试阶段,还有很多不完善的地方。但相信按他们的风格会不断优化和呈现出最好的产品,大家都可以试试。最后,这个工具可以很好的用来做原型的交互演示,请趁早淘汰 Axure 吧!

欢迎关注作者的微信公众号:

「用Sketch 做交互原型的软件」

  1. 工具随心用!教你用KEYNOTE快速制作高保真交互原型
  2. 新晋神器!超厉害的原型设计新玩具Kite Compositor 深度测评


【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量200万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/sketch-craft-interaction-prototype

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里