状态集

教程与案例

状态集是整个软件的核心组件之一,也是cellz独创的容器类交互组件之一。 关于状态集,很多用户喜欢叫它幻灯片, 源自于PPT中的幻灯片(slider)。没错,状态集就是类似于幻灯片的组件,每一个状态都是独立的一个PPT页面。你可以在这个状态中添加任何组件,比如在 查看全部
状态集是整个软件的核心组件之一,也是cellz独创的容器类交互组件之一。
关于状态集,很多用户喜欢叫它幻灯片, 源自于PPT中的幻灯片(slider)。没错,状态集就是类似于幻灯片的组件,每一个状态都是独立的一个PPT页面。你可以在这个状态中添加任何组件,比如在状态中再添加一个状态集,或者动画。

cellz定义了多种状态的“过渡方式”,如纵向吸附、3D翻转、覆盖、飞驰、渐变等。设置好过渡方式后,你还需要设置对应的操作来定义用户的行为, 比如是点击切换还是滑动切换,滑动又分为左右滑动与上下滑动等等。
 
“状态集”有一个隐藏属性,即每个状态具备同样的区域范围。比如,若你设置两个状态,但只有状态二有内容,那么你在滑动状态集区域的时候,状态一虽然是空白,依然可以接受你的操作,切换到状态二。
 
“状态集”可以有很多现实的用处,比如最简单的轮播图效果,3D翻转式图集。在cellz中,状态集除了展示效果,很多时候也起到了交互流程的管理与连接作用。
 
 
细心的你会发现,在工程属性中,有页面切页效果的设置。而这个设置与状态集切换方式是一致的。 对的,你也可以把状态集理解为页面中的页面。
说明:状态集单个状态的切换也可以实现“触发”与“关联”。

滚动

教程与案例

滚动的英文名叫“scroll”,相信很多用户对这个组件并不陌生。它几乎在所有APP或者网页上都出现过。可以说,“滚动”组件是数字展示与传统展示最大的区别点,它解决了如何在有限的屏幕上显示无限内容的问题。 在cellz中滚动一共有三种滑动方式:连续滚动,均匀分页 查看全部
滚动的英文名叫“scroll”,相信很多用户对这个组件并不陌生。它几乎在所有APP或者网页上都出现过。可以说,“滚动”组件是数字展示与传统展示最大的区别点,它解决了如何在有限的屏幕上显示无限内容的问题。

在cellz中滚动一共有三种滑动方式:连续滚动,均匀分页,以及吸附点分页。
相信大家对于“连续滚动”都清楚是怎么回事。我们重点说说“均匀分页”与“吸附点分页”。
 
“均匀分页”,自动将滚动中所有内容按照滑动方向的设置(垂直/水平),等分成若干份,当最后一页不足时将会留白补足。这个效果如同状态集的横向吸附/纵向吸附效果。这个效果主要是为了突出在滚动中心点区域内容的重要性,不希望用户因为快速连续的滚动而忽略掉。
 
“吸附点分页”,你可以认为“均匀分页”是一种特殊的“吸附点分页”。它自动将从第二页开始的中心点设置为“吸附点”,当吸附点到达滚动中点位置的时候,滚动就会停止。并且在“吸附点分页”的滑动方式下,cellz也开放了“吸附点”的设置,你可以在半屏幕之后任意位置设置“吸附点”,按滚动方向滑动,此“吸附点”到达滚动中心位置时,滚动将停止。除非你继续进行滑动操作。
那么使用“吸附点”,你就可以让用户的注意力集中在任意你想让用户注意的地方。
 
“吸附点”,还有一个很强大的功能。任何一个吸附点都可以设置“触发”与“关联”。
说明:使用“触发”的必要条件是,当吸附点达到滚动中心时。

当我们设置关联的时候,只需要选择关联对象与被关联对象就可以了。那么关联是什么意思呢。我们将一个状态集从起始状态到最终状态,动画从第一帧到最后一帧,页面的切换的始瞬间到完全移出屏幕,滚动的开始到滚动的终止,使用“轻扫”时对象的起始位置与终点位置等认为是一个完整的过程,当两个或多个组件发生关联关系时,他们的这个过程将会同步进行,你操作状态集A从第一状态到第二状态,与它关联的状态集也会对应的切换到第二状态。

我们通过关联可以设计出很多出彩的效果,比如视差滚动,比如图片的交错运动构成一张整图。

而“吸附点”关联是与状态集中某状态的关联(选中状态集单个状态),动画中的某帧关联(选中动画的某一帧)是同样的逻辑。 吸附点从进入滚动区域边缘位置到到达滚动区域中心位置被认为是一个完整的过程,这个过程可以与状态集整个状态播放,或整个动画的播放相关联。 比如你用状态集来实现一朵花的绽放,当这朵花在滚动边缘时还是花骨朵,而当花移动到滚动区域中心时,已绽放开来。当继续滚动,花又慢慢合拢成为一个花骨朵。
 

总之,滚动的“吸附点”设计就是为了通过各种效果吸引用户关注滚动区域的内容。合理的使用这个效果,你可以做出引人瞩目的交互效果。
不得不说的是,滚动其实也是一个容器类组件。所谓容器类组件是指,你可以在滚动中添加状态集,动画,甚至其他任意组件。

开关

教程与案例

cellz中设计了“开关”交互组件。 所谓的“开关”,一般称之为“button”(按钮),我们命名为“开关”,是为了让大家能更好的理解。   创建“开关”的快捷键是“B”。 按下“B”之后,用鼠标拖出一个矩形,这个矩形则是你要创建“开关”的大小。 就如同现实中 查看全部
cellz中设计了“开关”交互组件。 所谓的“开关”,一般称之为“button”(按钮),我们命名为“开关”,是为了让大家能更好的理解。
 
创建“开关”的快捷键是“B”。 按下“B”之后,用鼠标拖出一个矩形,这个矩形则是你要创建“开关”的大小。

就如同现实中我们常见的开关,有两种:一种有明确“开”与“关”的两个状态,按下去之后不会自动弹起来,除非你再点击一次;另一种则是点击之后,他会给你一个点击按下的反馈,当你松手时,它仍会回复到原来的状态。cellz中的“开关”也具备这样的功能。如下图:


屏幕快照_2015-12-03_上午9.55_.46_.png

“保持按下”,即第一种情况,按下后不会立马弹起来,会保持按下的效果;
 
“高亮效果”,则是第二种,会在你按下的瞬间给你一个点击的反馈,当你松手后,又会回到原来的状态。
 
勾选“默认高亮”,则表示按钮在页面上默认展示时就是“按下”的状态。
 
在cellz中,由于“图形”(图片)、“文本”本身就可以设置点击操作,你应该只有在需要“有点击效果”的情况下,才会使用到“开关”。
 
 
“开关”带有两个触发行为,一个是“点击普通状态时”,另一个是“点击按下状态时”。

而触发行为有13种,有与移动设备功能相关的,比如“打开摄像头”、“发送邮件”、“发送短信”、“拨打电话”等;也有状态与流程控制相关的,比如控制动画、状态集、音频、视频的“播放”与“暂停”,控制一切组件的“出现”与“消失”;还有控制页面跳转和状态集切换状态的。

 
 
开关还有一个很有意思的功能,你可以用来控制“状态集”或“动画”,在多长时间后,从哪个状态/帧播放到任意状态或某一帧,而这个任意状态可能会是任意数(随机),这样就方便你用来做转盘、老虎机等抽奖游戏。
爱动脑筋的同学可以思考下,如何用状态集来实现更酷的开关效果哦^-^

 

切页效果—牢记工程属性的设置

教程与案例

很多时候,设计师在设计完页面之后因急于发布,而忘记对工程属性的设置。 工程属性中有以下信息: 封面,工程名,描述,以及页面切换方式。 “封面”将会作为产品封面展示在cellz.cn上,同时也将会作为分享转发时(比如微信好友,朋友圈)的icon出现在转发信息中 查看全部
很多时候,设计师在设计完页面之后因急于发布,而忘记对工程属性的设置。

工程属性中有以下信息: 封面,工程名,描述,以及页面切换方式。

“封面”将会作为产品封面展示在cellz.cn上,同时也将会作为分享转发时(比如微信好友,朋友圈)的icon出现在转发信息中。而“描述”一样会作为有效信息显示在转发好友的图标右侧。
 
cellz支持多种切页方式,细心的同学会发现这些切页方式和状态集的切换方式是一样的。你可以通过设置页面的层级选择不超过2个切页效果。
 
若你的切页方式选择“无”,页面将不会通过点击或者滑动切换。这个时候你只有设置按钮,通过页面跳转的方式来设置页面切换了。

 

灵活使用command键与结构数来选中目标图层

教程与案例

你在使用cellz的时候,也许常常会通过多种组件嵌套的方式来实现比较复杂炫酷的动效。在这个时候,如何选中目标图层是个很重要的问题。   在选中图层的时候,按住command键,cellz将忽略“组”以及各种容器类组件,直接选中当前位置最上层的资源文件,比如图形, 查看全部
你在使用cellz的时候,也许常常会通过多种组件嵌套的方式来实现比较复杂炫酷的动效。在这个时候,如何选中目标图层是个很重要的问题。
 
在选中图层的时候,按住command键,cellz将忽略“组”以及各种容器类组件,直接选中当前位置最上层的资源文件,比如图形,文本。
 
当目标图层上有其他图层的时候,你可以通过右键调出选择功能,精准选择你的目标图层,或者你也可以通过结构树上选择目标图层,然后在操作区中选中他。
 
在选择目标图层之后,有的时候为了设计需要,我们会旋转它到某个角度。 你可以通过属性板中的旋转来操作,也可以将鼠标放在图层的四个边角,按住command键来手动旋转。

 

Shift键的作用有哪些

教程与案例

当你在改变图形大小的时候,按住shift键,cellz将会等比缩放图层;   拖动图形来改变它位置的时候,按住shift键,cellz将按照水平与竖直方式拖动;   通过属性板旋转图层的时候,按住shift键,旋转将会以45°的整倍数旋转;   同时按住comm 查看全部
当你在改变图形大小的时候,按住shift键,cellz将会等比缩放图层;
 
拖动图形来改变它位置的时候,按住shift键,cellz将按照水平与竖直方式拖动;
 
通过属性板旋转图层的时候,按住shift键,旋转将会以45°的整倍数旋转;
 
同时按住command键与shift键旋转图层,旋转将会以15°的整倍数旋转。

快速寻找图层之空格键的作用与两个你需要知道的快捷键

教程与案例

按住空格键,鼠标将会变成一只手的样子。这时候,你可以拖动整个操作区进行移动。   command+2: 放大选中节点到合适你编辑的大小,并将其放在操作区中心位置。 command+1: 将页面放到操作区中心。 command+3: 将选中节点放入操作区中心。   查看全部
按住空格键,鼠标将会变成一只手的样子。这时候,你可以拖动整个操作区进行移动。
 
command+2: 放大选中节点到合适你编辑的大小,并将其放在操作区中心位置。
command+1: 将页面放到操作区中心。
command+3: 将选中节点放入操作区中心。
 
以上这些操作,都将帮助你快速找到你想选择的图层。

Cellz能导出哪些格式

教程与案例

Cellz可以导出多种格式,如:MIX、M4C、 HTML及图片   MIX与M4C都是我们自定义的文件格式。   其中,MIX格式主要使用在APP打包或者数字内容出版。没错,如果你需要生成一个APP,或者在手机、iPad(android平板)上以一个APP或者 查看全部
Cellz可以导出多种格式,如:MIX、M4C、 HTML及图片
 
MIX与M4C都是我们自定义的文件格式。
 
其中,MIX格式主要使用在APP打包或者数字内容出版。没错,如果你需要生成一个APP,或者在手机、iPad(android平板)上以一个APP或者在APP中展示你的创作,那么以mix的格式导出是最合适不过的了。导出后,通过cellz.cn的个人中心打包服务来生成APP,或购买官方书架实现你的交互富媒体内容常态化出版。
 
而m4c格式是cellz.cn指定上传的文件格式。通过cellz的“发布”功能,将导出的m4c工程文件上传到cellz.cn,通过分享对应的作品链接,就完成你作品的发布了。
 
导出HTML是cellz的高级功能,需要付费用户才能使用。
 
导出图片,这个功能似乎比较鸡肋,我们是想提醒你,cellz本质上是可以作为一个排版软件使用的。

Cellz支持哪些文件格式

教程与案例

cellz支持多种文件格式作为资源输入。 图片类: PNG,JPG,GIF,PSD分层文件 若你的MAC系统是OS X10.9以上的,你将发现cellz无比强大的psd解析功能,它会将你的psd文件分层创建,以便你可以在cellz中根据需要再次编辑这些图层。 查看全部
cellz支持多种文件格式作为资源输入。

图片类: PNG,JPG,GIF,PSD分层文件

若你的MAC系统是OS X10.9以上的,你将发现cellz无比强大的psd解析功能,它会将你的psd文件分层创建,以便你可以在cellz中根据需要再次编辑这些图层。

需要注意的是,为了更好的用户体验,建议导入的图片尽可能是优化处理后的图片(尽可能保证文件体积最小)。虽然cellz会帮你优化图片的大小,但在很多时候,体积越小的图片最终输出的时候也会越小。
 
你可以通过创建图形,使用“图形填充”的方式来导入图片,也可以在任何位置直接拖入图片到cellz的工作区中。当然你也可以通过资源管理器的文件列表来拖入图片。


音频格式:MP3        视频格式:MP4

为了网页与客户端的兼容性,cellz只支持mp3、mp4两种多媒体格式。

文本:你可以从外部直接复制文本到cellz,cellz会为你保留原有的版式。

 

Cellz的安装配置

教程与案例

cellz是一个轻量级的设计软件,体积不足10M。   目前,cellz只提供MAC版本, 支持OS X 10.8以上的安装与使用。  
cellz是一个轻量级的设计软件,体积不足10M。
 
目前,cellz只提供MAC版本, 支持OS X 10.8以上的安装与使用。