西湖鱼

很多读者反馈分不清Principle中Scroll、Drag、Page的概念,今天我们结合demo来讲解一下他们的运用。

Principle_01

 

  • Horizontal(水平方向)
  • Vertical(垂直方向)
  • Static(静止的,静态的)

这个是所有物件的默认状态,这个物件是不能被移动的。

 

Drag(拖动)

例如我们做一个可拖动的悬浮窗,或者iPhone X中的放大镜,

demo如下:

Principle_04

 

Scroll(滚动)

我们手机上大部分页面都是Scroll组件,例如瀑布流的页面,有了scroll才有了我们“刷”手机的的动作。

具体的含义我们解释为:在一个指定的区域内,内容可以按照指定的方向滑动。

这里有两个我们要确定的,一个是“指定区域”,一个是“内容”。

其中这个“区域”就是我们设定某个原件为“Scroll”时的大小,这个区域大小是支持调节的。

demo中为一个水平方向的Scroll。

Principle_03

 

Page(翻页)

这个组件跟“Scroll”类似,也是滚动的,但是增加了“页”的概念,大家可以理解成翻页,就是看到当前页就看不到其他页

含义:指定一个区域为“页”的大小,系统按照页的大小划分内容为若干页,通过滑动动作来完成“页”的切换。

其中这个“区域”就是我们设定某个原件为“Page”时的大小,这个区域大小是支持调节的。

Principle_05

 

这里我们做banner可以用到

这里Page与Scroll是有区别的,Scroll滑动是随意停止在某个位置的,Scroll可以在一个区域内同时看到A内容的尾部和B内容的头部,但是page情况下,只能看到A页面或者只能看到B页面。

 

总结demo

Principle_02

这样我们就弄清楚啦。

可能我在做具体的定义时有,解释的很拗口,希望大家可以自己动手练习一下,加深印象。

此外还有Anna Hofmanova的作品源文件,供大家学习研究“page”。

Principle_06

 

原文地址:紫豆子设计站(公众号)

作者:紫豆子

201801041515049292111

 

转载请注明:学UI网 » Principle精讲——Scroll、Drag、Page区分

登录收藏
 
你可能喜欢的:
教你用 Principle 做卡片翻转动效教你用 Principle 做卡片翻转动效
神奇移动 | 三分钟如何做一个交互动效神奇移动 | 三分钟如何做一个交互动效
如何通过缓动曲线形成自身动效风格?如何通过缓动曲线形成自身动效风格?
动效教程 | 5 分钟制作微信浮窗动效动效教程 | 5 分钟制作微信浮窗动效
如何用Principle制作:APP卡片翻页动效如何用Principle制作:APP卡片翻页动效
Principle如何实现抛物线运动?Principle如何实现抛物线运动?
Principle教程进阶精讲- Drivers 的使用Principle教程进阶精讲- Drivers 的使用
手把手教你安装Principle手把手教你安装Principle
4步制作酷炫loading效果[Principle]4步制作酷炫loading效果[Principle]
Principle软件介绍及教程合集!Principle软件介绍及教程合集!