Principle菜鸟入门到精通教程

2017-08-22 20:18发布

本篇主要介绍Principle的软件基础,便于后续跟进实例教程。

Principle可能是目前制作可交互Demo最易上手、综合体验最棒的交互设计软件了。

Image title

废话不多说,进入正题。

Part 1 基础介绍

a.使用平台    因为开发者基于mac开发,所以目前只支持mac端应用。

b.操作基础    面板、操作逻辑、快捷键等几乎跟Sketch如出一辙,Sketch用户福音。

c.使用步骤    构思/纸面原型 - -Sketch制作DEMO/效果图 - -导入【钻石标-Import】--制作交互/动效

              · 最好在脑海中/纸面构思好,没有清晰的思路很可能迷失在各种参数上

              · P也提供了【矩形工具-R】及【文本工具-T】来制作简单Demo,但是终究没有我大Sketch来的方便痛快

              · 【钻石标-Import】要点:导入时保持Sk打开对应文件的状态,自动识别。

              · 制作动效及调参数图1-1(已压缩)

                      

Part2  软件面板

a.操作区    主要的操作区域,跟PS/Sk类似,此处就不赘述了。

b.工具栏    Principle的工具栏,如下图:

Image title

        · 【矩形工具-R】、【文字工具-T】、【增加画板-A】 可做交互Demo

        · 【导入工具】可以选择1x、2x、3x,无快捷键

        · 【建立组件】P2.0后更新了组件功能,类似SK的symbol及PS的智能对象

        · 【联动动画参数Dricers】、【补间动画参数Animate】 P的最主要的两个工具

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

                 

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

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

                              

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

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

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

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

                              

      

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

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

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

Image title

再次重申:涉及到不同页面的补间动画,请保持命名一致!

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

            ·【返回初始状态】

            ·【录制】

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

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

Image title 


本文来自:http://m.ui.cn/details/237474