恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【教程】初识Principle篇
0.0°
2017-05-08 原创文章 教程 举报 5766 21 19 0

本篇主要介绍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 






 

                 







更新:2017-05-08

收藏

21人已收藏

马赫7980

凡是过去,皆为序曲

  • 6

    作品

  • 17

    粉丝

  • 31

    关注

  • 【动态海报】报告!我的电视坏了~
  • 【实例】涨姿势.GIF
  • 导航按钮变化动效设计
  • 像素画初接触
相关标签
GUI#UE#动效

    猜你喜欢

      2017-05-08 原创文章 教程 举报 5766 21 19 0

      【教程】初识Principle篇

      0.0°

      你确定要举报【教程】初识Principle篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年05月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      21
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录