Principle原型交互设计软件使用 一:创建一个滚动视图

• 作为一个程序开发人员又要兼职做一些原型设计，因此一款简单易用的原型设计软件能让我们在平时的工作中节省大量的时间，同时能很好向协作的同事表达我们的交互需求。

• principle是一款简单易用的交互设计软件，能简单方便的实现我们我们常见的交互需求。

• 作为初次接触principle的新人,我将一点一点记录我的日常使用和学习心得。这里只记录交互的设计，对于静态界面的设计，就不做过多的说明。

• 在经过两天的使用之后,了解到当我们弄懂"Drivers"和"Animate"之后,简单的交互设计我们就能很快的上手了

Drivers和Animate

##传送站:principle破解版下载 提取码wkik

下面开始上干货

任务一:制作一个scrollview滚动界面

demo1.gif

这个demo是在屏幕的中间创建了一个可以上下滚动的视图scrollView,要创建这样一个视图,只要有两个条件即可

1. 父视图 scrollView
2. 子视图

下面就来看看如何实现这个功能

在principle中不能直接创建一个scrollView,而是要画一个视图之后,打开视图的滑动属性,然后就可以了
1.首先在arcboard中画出一个矩形layer,这个矩形layer所在区域就是可以滚动的区域

第一步

2.选中矩形layer，设置vertical为scroll(如果要左右滚动,则还要设置Horizontal为scroll)

第二步

3.这个时候会生成一个ScrollView的文件夹,这个看似文件夹的东西,就是ScrollView的视图,选中这个"文件夹"可以对ScrollView的背景颜色,左边位置,大小进行设置,而以前创建的矩形layer(图中灰色部分,则变为scrollView的子视图)

第三步

4.现在将要滚动的视图放入这个"文件夹"然后拍好位置就可以了

屏幕快照 2016-09-22 下午3.58.25.png

到此,一个scrollView就完成了