设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 投稿文章 > Chainco交互利器--交互设计教程

Chainco交互利器--交互设计教程

桃子CC1233
2016-07-07
107716

Chainco一款交互软件,根据不同的设备可设置各种交互效果,
在这里跟大家分享一下我的经验,尤其是希望能帮助一下刚进入这行的小白菜,
因为是第一次写这种文章,所以说的有哪里不好不对的地方,希望大家能够谅解并指出,感激不尽~~

今天要介绍的这款软件叫Chainco
大家可以用电脑登录https://www.chainco.cn/user/login

c2f1577e04180000012e7edefad5.jpg

简单注册一个帐号就可以开始使用了,
注册完进去的页面如下图,
点击新建项目就可以开始做自己的
交互效果图啦~

b2c6577e04670000012e7ecad51e.jpg

这里是我创建的两个项目,
依次是项目名称、项目机型、创建时间,
右侧则依次是编辑、演示、克隆、删除。

首先点击新建项目,
将会有下面页面弹出

在这里对自己的项目起一个名字,方便记忆查找。
选择自己要设计的设备的机型,这里目前几乎包括了各大主流的设备机型
选择好之后点击创建就OK啦,
看到木有~揍是辣么简单~

这里我创建的是iOS 6plus的
箭头标识的地方都可以添加页面。


这里上传图片可以一次上传N张,所以还是很便捷的

ba2d577e05800000018c1bbd4e52.jpg

我们对所有界面的操作都在平铺那里,
所以点完排序记得回平铺那里哦~

48db577e05b50000012e7e294177.jpg看到红色箭头指向的小角标了嘛
这个是用于我们来固定区域的
我们在演示一个移动界面的时候,往往顶部搜索框和底部导航栏
都希望他能够固定在那里,
拖动小脚表,想要多大的区域固定就拖动多高,很方便。

把所有界面中带固定区域的都固定好之后,
就要开始设计交互流程啦。
当鼠标放在要设计的图片上的时候是不是有一个黑色的十字架,
我们要给哪里做交互,就用这个十字架框选要做交互的部分。
这里截图,截不到十字架,
亲们就意会下子吧<(‵^′)>

44fe577e060e0000018c1b5b2f9b.jpg

这里框选了商品分类

框选完之后,会出现一个线条,
这时候把这个线的一头连接到你要链接的页面就可以,
这是你会发现操作框的左侧会有一堆功能出现

fece577e06490000018c1b369027.jpg

触发方式顾名思义就是想对框选的部分
进行什么样的手势操作出现链接的页面,
首页的功能块一般都是点击触发的,所以默认选择第一个点击触发,
转场的意思也很简单,
就是你希望你链接的页面以什么样的动画出现,
我这里设置的是推动向←
想看效果的话可以都试一下,选择最合理最人性化的交互方式(*^__^*)

接下来就是体力活了,给所有要做交互的页面设置效果、触发方式吧~

fc5a577e06820000018c1bd30dc0.jpg

都做好之后,点击界面右上角的演示,就可以看效果啦~

dc72577e06a30000018c1bcfb95a.jpg

我们的Chainco更加强大的一点就是这个扫描二维码啦~
扫描二维码还可以在移动设备上查看,
在手机界面中会有生成一个icon,
打开就是我们刚刚做的交互效果,
拿着它去给客户演示,
瞬间高逼格有木有o(∩_∩)o

af9f577e06c70000012e7e16e8b5.jpg

串这个icon就是我们刚刚制作的交互效果,
赶紧打开看看吧~
有了他以后再也不用担心跟程序沟通不明白啦,
直接把这个生成的APP演示甩他一份,
就照着这个效果、这个流程做晓得不,
<(‵^′)>
瞬间觉得自己好屌有木有~

如果我写的东西对你有所帮助的话,
那么亲~
点个赞再走呗~


上一篇
日本UX站点Uxmilk.jp对Mockplus的介绍 - ​简洁快速的原型图设计工具Mockplus使用指南

三瓶亮   07/08

Mockplus发布HTML第三个 demo

jongde   07/04

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com