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

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