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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Principle系列教程2:第一个作品
0.0°
2015-12-17 原创文章 教程 举报 5271 15 15 4

学习一门编程语言避免不了写 hello world ,两个页面间跳转就是学习 Principle 的"hello world"。

创建 prd 工程

打开 Principle 默认就已经创建了一个工程,名称为“Untitled.prd”。

创建画板

创建工程时,默认创建了一个空白画板(Artboard),这就相当于我们的手机屏幕。我们可以在这个可见的屏幕内摆放任何部件。

这次我们想要实现的是两个页面间的切换,为了区分两个页面,可以设置两个不同的背景颜色。单击画板,在左侧属性区找到纯色填充,点击后任意选择一个颜色。

Image title


接着我们需要新建第二个页面,点击左上方新建一个画板,或直接用键盘快捷键A,或右键单击第一个画板选择"Duplicate"创建与画板1一模一样的新画板。然后任意更换画板2的背景颜色。

Image title


页面跳转

现在两个页面都有了,我们需要想办法做跳转动作。点击画板1,发现右侧中间多出一个「闪电」标志,点击后会弹出菜单。我们本次先制作最基本的点击跳转,所以点击并按住第一个选项“Tap”前面的空心圆,这时会从圆圈伸出一个箭头,继续拖动箭头到画板2上。

Image title


这时会发现,两个画板的顶部有一个箭头,从画板1指向画板2,名称是“Artboard 1 Tap”,即「点击画板1」。点击箭头变绿,下方会弹出动画面板 ,可以看到动画持续时间和开始结束时间。

Image title


这时如果点击右侧的预览窗,可以看到已经可以实现页面的跳转,并且有颜色的渐变效果。下面我们点击画板2右侧的闪电按钮,按照上述步骤创建一个从画板2到画板1的动画点击事件,这样一来,通过点击就可以在两个页面之间循环跳转了。


到此为止,我们完成了第一个作品。


本文由作者本人首发于principle中文网

更新:2015-12-17

收藏

15人已收藏

  • 5

    作品

  • 63

    粉丝

  • 0

    关注

  • Principle系列教程1:认识界面
  • Principle文档中文版
  • Principle官方案例动效复刻
  • Smartisan OS 桌面启动器动效
相关标签

    猜你喜欢

      2015-12-17 原创文章 教程 举报 5271 15 15 4

      Principle系列教程2:第一个作品

      0.0°

      你确定要举报Principle系列教程2:第一个作品

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2015年12月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      15
      4

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

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

      登录

      手机号

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

      登录
      第三方账号登录