本篇主要介绍Principle的软件基础,便于后续跟进实例教程。
Principle可能是目前制作可交互Demo最易上手、综合体验最棒的交互设计软件了。
废话不多说,进入正题。
Part 1 基础介绍
a.使用平台 因为开发者基于mac开发,所以目前只支持mac端应用。
b.操作基础 面板、操作逻辑、快捷键等几乎跟Sketch如出一辙,Sketch用户福音。
c.使用步骤 构思/纸面原型 - -Sketch制作DEMO/效果图 - -导入【钻石标-Import】--制作交互/动效
· 最好在脑海中/纸面构思好,没有清晰的思路很可能迷失在各种参数上
· P也提供了【矩形工具-R】及【文本工具-T】来制作简单Demo,但是终究没有我大Sketch来的方便痛快
· 【钻石标-Import】要点:导入时保持Sk打开对应文件的状态,自动识别。
· 制作动效及调参数
Part2 软件面板
a.操作区 主要的操作区域,跟PS/Sk类似,此处就不赘述了。
b.工具栏 Principle的工具栏,如下图:
· 【矩形工具-R】、【文字工具-T】、【增加画板-A】 可做交互Demo
· 【导入工具】可以选择1x、2x、3x,无快捷键
· 【建立组件】P2.0后更新了组件功能,类似SK的symbol及PS的智能对象
· 【联动动画参数Dricers】、【补间动画参数Animate】 P的最主要的两个工具
· 【打组】、【上移一层】【下移一层】【官方教程】【Mirror】不再赘述
联动动画,主要是指同一页面内的不同交互元素 动作关联
栗子:拖动红色btn,正文的页面高度和位置发生对应的动作关联变化
补间动画,主要是指不同页面内的同一交互元素 动作间隙自动补偿
栗子: 矩形和圆形高度、位置、填充色动作间隙的自动补偿变化
Tip 1:两个页面中的同一交互元素,必须保持命名一致!必须保持命名一致!否则软件无法识别为同一元素。
Tip 2: 可以补间的内容有(位置、宽度、高度、形状、透明度、圆角、颜色等)
c.检查器 类似Sketch中的属性检查器
从上到下依次为:对齐方式、位置、宽度高度、画板类型、填充、描边、阴影、交互方式选择【静止Static、拖动Drag、滚动Scroll、翻页Page】(水平和垂直方向)、子切片剪切(直译....)
d.图层面板 和SK相同,不赘述
再次重申:涉及到不同页面的补间动画,请保持命名一致!
e.实时预览器 软件自带的实时预览器,配合手机端Principle Mirror及MAC的自带preview,极大的方便实时检查动效
·【返回初始状态】
·【录制】
录制中的操作可以选择模拟点击、鼠标点击、隐匿点击
录制可输出dribbble 800px稿、dribbble 400px标清稿、100%不压缩的gif及mov格式,32个赞!
本文来自:http://m.ui.cn/details/237474