Principle教程(二):静态、拖拽、滚动、翻页(附源文件)

用户头像
深圳/产品设计师/9年前/31713浏览
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)
利用检查器中的“静态、拖拽、滚动、翻页”4个功能来实现APP中最常见的交互—翻页、滚动、点击、转场、移动。
下面来看看最终效果和重点功能,接下来就是教大家怎样让设计稿实现交互和动效。
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjE3ODA=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
最终效果
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjE4MzY=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
重点功能翻译—by lina178(站酷)
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjE4NDQ=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
重点功能翻译—by by 矿泉(站酷)
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjE4ODA=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
接下来就是教大家怎样去实现我们想要的最终效果
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjE5MTY=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
将做好的sketch文件导进Principle。(有源文件可以下载)
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjE5ODA=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
点击Import(右上角钻石形状的图标),选择x1,然后点击Import。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjI1MzI=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
导入成功后有个细节可以注意一下,就是sketch里3个Artboards命名都是iPhone 6,到了Principle里命名按照顺序自动变为了iPhone 6、7、8。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjI0OTY=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
如何导入—GIF演示
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjI2NjA=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
选中3个色块编组后(编组快捷键和sketch里一样),选用检查器里的Page(翻页)功能进行编辑。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjI3MDA=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
按住ALT键+鼠标拖动(边框左右两边可同步变长变短),编辑区域范围。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjI3MjA=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
选中文字组,选用检查器里的Scroll(滚动)功能,然后对Clip Sublayers打钩,再进行编辑。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjMxMDQ=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
用事件触发器里的Tap来进行转场效果。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjMxMDg=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
继续完善每个页面之间的转场效果。在GIF最后的预览效果里,当标签TWO页面进标签ONE页面时,会发现文字是从上到下显示,这个问题是因为两个Artboards里的btn组命名相同,接下来改一改。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjMwODQ=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
对相同命名的组,重新命名。最后在预览里进行交互,发现显示正常了。
Collect
Principle教程(二):静态、拖拽、滚动、翻页(附源文件)(图ZNjU3NjMzMDg=) - 动效设计 - 站酷设计师有时疯癫原创素材 - 站酷ZCOOL
选中红色图标,同时选用检查器里的两个Drag(拖拽)功能,然后在预览窗口进行查看。到这一步整个交互也就完成了,想导出视频和GIF就点预览窗口右上角的播放图标,之后会出现touch cursor 触摸鼠标、arrow cursor 箭头光标、cursor hidden光标隐藏选项,选一个进行操作录制即可,录制完后再点击播放图标就会暂停保存,可以选择保存尺寸。想导出交互文件就点击最上方的FILE,选择Export for Mac即可。

Collect
146
Report
|
192
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
You may like
相关收藏夹
大家都在看
Log in