导航菜单

ProtoPie详解

10bet体育官网

  2019-07-12 11:13

  来源:马克笔设计留学

  原标题:ProtoPie详解 初识界面

  ProtoPie 作为交互软件的后起之秀,它有着非常大的优势:轻松实现各种复杂的动效,兼容 Mac 和 Windows 系统,可以在 ios 和安卓手机上预览,支持中文等等,从国外设计师对 ProtoPie 的评价就可以看出它的强大。

  751909e20ca9410e867aff93b60c49b5.png

  7d6ce6a2106c470783d4f2c1aabdf204.png

  ProtoPie 专题将从这期开始,由马克笔设计留学的MUzi老师向大家详细解读这款软件的使用。本期主要介绍这款软件的基础部分,界面布局和功能。

  ProtoPie 的布局整体走的简约风格,和 Sketch 的界面十分相似。最上方一横条是工具栏,左侧是图层栏,中间是画布,画布右边是交互动作拦,最右边是属性栏。此外还有一个预览窗,用来实时预览动效。

  07efcf399588422aac50eae618c5e5cc.png

  说完界面布局,下面来讲讲每个按钮的功能

  0116f5bd93014c67bcf7e0dc2e97f134.png

  直接从其他设备中倒入交互原型,目前兼容 Adobe XD,Figma 和 Sketch。

  倒入系统中的图片。

  倒入系统中的视频和音频文件,媒体中的相机是在交互界面中打开系统中的相机功能。

  图形包含矩形(快捷键R)和圆形(快捷键V)。

  包含文本输入和输入框。文本输入就是普通的输入文本工具;输入框是模拟手机输入框的效果,在原型预览时点击输入框会弹出键盘,如果在电脑上预览,弹出键盘不能使用,直接用电脑键盘键入就行,在手机上预览时可以使用弹出的键盘键入。

  容器层包含容器层,滚页容器层和滑页容器层。容器层是通过将物体移入容器层来实现类似编组和热区的功能;滚页容器层和滑页容器层用来实现内容上下左右滑动的效果,具体详情见下期。

  046345222f81404597ab3642d2ef94c5.png

  对画布大小进行调整,这里有很多预设尺寸,可以根据需要进行选择。

  场景等同于页面,在protopie中无法同时编辑多个页面,通过 场景 功能来实现添加,管理和切换页面。

  触发是为物体添加交互动效,这一部分是 Protopie 的核心,详情见下期。

  打开/关闭预览窗,在预览窗中可以时时的预览交互动效,并且可以录制视频。

  可以让手机连接 ProtoPie,需要手机下载App,可以实现不连接数据线预览以及两个设备之间的交互。

  将 Protopie 上传到云端,方便团队协作开发。

  那么以上就是本期的内容,下期开始马克笔设计留学的MUzi老师将为大家详细介绍动效的制作。

  文章作者:MUzi

  南安普敦大学交互设计硕士

  擅长交互设计与用户体验相关专业辅导和课程知识体系建立

  任何关于院校和作品集的问题

  欢迎随时和马克君沟通

  知无不言,言无不尽返回搜狐,查看更多

  责任编辑:

  声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。

  容器层

  预览窗

  马克笔

  输入框

  界面

  阅读 ()

  投诉

达到当天最大量