【教程】初识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的最主要的两个工具

                   联动动画，主要是指同一页面内的不同交互元素 动作关联

                   栗子：拖动红色btn，正文的页面高度和位置发生对应的动作关联变化

                              

                     补间动画，主要是指不同页面内的同一交互元素 动作间隙自动补偿

                    栗子： 矩形和圆形高度、位置、填充色动作间隙的自动补偿变化

 Tip 1：两个页面中的同一交互元素，必须保持命名一致！必须保持命名一致！否则软件无法识别为同一元素。

 Tip 2： 可以补间的内容有（位置、宽度、高度、形状、透明度、圆角、颜色等） 

                              

        ·  【打组】、【上移一层】【下移一层】【官方教程】【Mirror】不再赘述

c.检查器    类似Sketch中的属性检查器

       从上到下依次为：对齐方式、位置、宽度高度、画板类型、填充、描边、阴影、交互方式选择【静止Static、拖动Drag、滚动Scroll、翻页Page】（水平和垂直方向）、子切片剪切（直译....）

d.图层面板  和SK相同，不赘述

e.实时预览器  软件自带的实时预览器，配合手机端Principle Mirror及MAC的自带preview，极大的方便实时检查动效

            ·【返回初始状态】

            ·【录制】

                        录制中的操作可以选择模拟点击、鼠标点击、隐匿点击

                        录制可输出dribbble 800px稿、dribbble 400px标清稿、100%不压缩的gif及mov格式，32个赞！