Principle使用教程

本次分享主要有以下几点内容:

1.初识界面2.两个关键操作3.案例一:滑动4.案例二:点击跳转

5.案例三:跟随动画(抽屉效果)

1初识界面Principle的界面与Sketch基本一致,如下图:

a.属性区:

  • 在这个区域,你可以对选中的图层进行各个属性的调节。如位置、大小、透明度等等
  • 开启软件后,首先要选择你要演示Demo的环境,点击“Size Presets”即可在弹出的菜单中选择


b.图层区:

  • 一个“Artoard”即一个画布,或者理解为一个页面。画布中的图层按其列表中的上下顺序相互交叠
  • “Artoard”可直接复制粘贴,以此来快速实现页面间的跳转效果

c.主舞台:

绘制或直接导入图片至面板中即可

d.演示区:

直接在这个区域演示页面效果,并可进行交互预览,其中还有“一键初始”与“录制”的功能

e.功能区:

  • Drivers:做交互动画的神器,使用方式类似“设置关键帧”

  • Animate:主要用它来调整转场动画的效果

  • Group:打组工具
  • Fonward/Backward:调整图层交叠的上下关系

2两个关键操作1.交互怎么实现?
a.点选可交互控件b.在弹出的菜单中,选择你需要的交互方式

c.按住选项并拖动至要目标页面中(系统会用紫色给予用户反馈)

2.转场动效怎么设置?
a.选中你要设置的转场动画b.在弹出的列表中,调整其变化的属性(包括大小、位置、透明度等)。若直接点击前面的“绿块”,即可停止这个属性的效果

c.点击后面的“Default”可转场动画效果(Linear不推荐,有个小哭脸)

3案例一:滑动

Principle画图并不方便,所以我还是配合Axure画线框图,之后贴入Principle。

1.把“固定图层”导入到Principle中,如图中的title模块

2.页面可纵向滑动,那么把“只纵向滑动”的图层单独导入

3.某些模块也可进行横向滑动,则单独将其导入(如下图,导入了四个部分:固定的title、纵向一张图、横向两张图)

4.把“可滑动”图层打组

5.整组设置“垂直可拖动”

6.选中横滑图层,设置“水平可拖动”

效果如下:

4案例二:点击跳转(浮卡效果)1.首先导入一个“菜单”图层,贴在页面上方

2.复制整个“Artoard”,并把菜单移动到跳转后的位置 (一定要保证移动的图层,在两个Artoard中命名一致)

3.设置动画(做一个透明的矩形作为触控点)

 

效果如下:

5案例三:跟随动画(渐变的抽屉)1.导入需要的图层,打组后设置其可横滑2.导入“抽屉图层”(不跟随滑动)

3.打开“Drivers”,选择“可横滑组”,在0点创建“X”的起始关键帧(点Group后面的+号)

4.拖动手柄以移动“可横滑组”,至抽屉可完整呈现时,创建结束关键帧(再次点击+号)

5.选中“抽屉图层”,点选起始关键帧,创建透明度关键帧。并设置起始帧的透明度为0

6.同理,移动手柄至“可横滑组”结束帧的位置,设置结束关键帧的透明度为100%

7.复制整个“Artoard”,在新的画布中,调整图层至抽屉打开的效果

8.在前一个画布中,设置“滑动结束”即跳转的交互

 

效果如下:

以上就是Principle中比较常用的一些操作,很好理解也非常容易上手,可以极大提高设计师的工作效率。

另外要注意的是,Principle比较适合做“大流程”演示,当你要梳理整体的产品架构或操作流程时,可帮助你快速创建交互原型,发现其中问题或不足。若你想做一些精准的动画效果,它则无法满足你的需求,建议使用Origami等其他原型制作工具。

时间: 2025-01-02 18:47:12

Principle使用教程的相关文章

Principle教程:用Principle做卡片翻转动效

Principle for Mac是一款新开发的交互设计软件.相比 Pixate 更容易上手,界面类似 Sketch 等做图软件,思路有点像用 Keynote 做动画,更「可视化」一些.如果您还没有合适的或者喜欢的交互原型设计软件,可以考虑一下这一款Principle for Mac! https://www.macdown.com 此次小编就带大家来了解下用Principle做卡片翻转动效! 一.原理 首先讲一下这个动效的原理,简单来说就是:面变成线,线再变成面.先是正面,由面收缩成竖着的一条

LoadRuner12.53教程(三)

教训1:建立一个Vuser Script jiào教   xùn训   1   :   jiàn建   lì立   yī一   gè个   V   u   s   e   r   S   c   r   i   p   t To generate a load on your system, you first build a Vuser script that you can run to emulate real user behavior. You use VuGen to create

基于Objectvie-C基础教程(第2版)做的笔记

基于Objectvie-C基础教程(第2版)做的笔记 第一个Objective-C 程序: main.m: #import <Foundation/Foundation.h> int main(int argc, const char *argv[]) { NSLog(@"Hello, Objective-C"); return(0); }//main #import语句:与c语言一样,Objective-C使用头文件来包含结构体/符号变量和函数原型等元素的声明. #imp

Kivy 中文教程 实例入门 简易画板 (Simple Paint App):0. 项目简介 &amp; 成果展示

本教程咪博士将带领大家学习创建自己的窗口部件 (widget).最终,我们完成的作品是一个简易的画板程序. 当用 kivy 创建应用时,我们需要仔细思考以下 3 个问题: 我们创建的应用需要处理什么数据? 如何可视化地展示这些数据? 用户如何与这些数据交互? 以本教程的简易画板为例,我们希望用户可以用手指在触摸屏上画画,这便是用户与数据交互的方式.为了实现这样的交互,我们需要记录下用户手指的位置,这便是应用需要处理的数据.而在不同位置点之间绘制线条就是数据展示的方式. Kivy 应用中,用户界面

Windows Git+TortoiseGit简易使用教程

转载自 http://blog.csdn.net/jarelzhou/article/details/8256139 官方教程:http://tortoisegit.org/docs/tortoisegit/(英文版) 为什么选择Git 效率 很多人有一种习惯吧,什么软件都要最新的,最好的.其实吧,软件就是工具,生产力工具,为的是提高我们的生产力.如果现有的工具已经可以满足生产力要求了,就没有必要换了.生产效率高低应当是选择工具的第一位. 历史 开源世界的版本控制系统,经历了这么几代: 第一代,

微信公众号中添加外部链接地址的图文教程

2017-9-18,长沙,有点闷,有点热. 本教程教大家如何在微信公众号中,添加外部的链接,网络有很多教程,但由于表述不太清楚,出个教程吧.最终实现在微信后台管理平台"原文链接"处插入外部链接,用户点击发布好的图文文章底部左下角的"阅读原文",就可以跳转到您添加的外部链接页面中去. 第1步. 使用微信公众管理帐号登陆微信管理后台 > 素材管理 > 图文消息 >  新建图文消息或者编辑文章都可以,如下图所示: 第2步. 之后,将页面向下拉,看到底部&

win2003从组策略关闭端口(445/135/137/138/139/3389等)教程

一些恶劣的病毒会从某些端口入侵计算机,因此关闭某些用不到的而又具有高风险的端口就显得很有必要,是服务器管理员要做的基本的安全防范.本文将介绍win2003系统在组策略关闭某一个端口的教程,文章以关闭445端口为例. 首先要说明的是,此方法不仅仅适用于win2003,也适用于win7,且操作方法完全相同,所以win7用户也可以按照本文教程操作. 1.打开组策略编辑器 按组合键WIN+R打开运行窗口,然后输入gpedit.msc,按回车键,即可进入组策略编辑器. 2.创建 IP 安全策略 展开选项"

微信小程序实例教程(一)

序言 开始开发应用号之前,先看看官方公布的「小程序」教程吧!(以下内容来自微信官方公布的「小程序」开发指南) 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程序的启动日志. 1. 获取微信小程序的 AppID 首先,我们需要拥有一个帐号,如果你能看到该文档,我们应当已经邀请并为你创建好一个帐号.注意不可直接使用服务号或订阅号的 AppID. 利用提供的帐号,登录https

SQL Server2005安装材料及教程编制

首发:https://www.douban.com/note/579628972/ 系统为 win10SQL Server 安装材料下载 链接:http://p删除an.baidu.com/s/1中文miQ1ZQg 密码:pszf挂不补,可到bdsola.com搜索下载 1.安装教程(幸运E版):http://jingyan.baidu.com/article/acf728fd1a30d0f8e510a380.html 注意:当你的电脑是多核的时候可能会出现安装错误   2.此时推荐教程:htt