所有分类
  • 所有分类
  • VIP素材
  • APP模板
  • 图标
  • 插画
  • 样机

Principle精讲——Scroll、Drag、Page区分

很多读者反馈分不清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页面。

 

Principle_02

这样我们就弄清楚啦。

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

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

Principle_06

 

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

作者:紫豆子

201801041515049292111

 


 

本页地址:https://www.uime.cn/27962.html; 所有素材与文章均来自于互联网,经网友投稿后发布,如有侵权,请联系 99898566@qq.com。如果下载失败可提交工单哦。
0
分享海报

早鸟限时特价,年会员半价,限量1000份哦

点击购买

没有账号?注册  忘记密码?