四、了解故事板的构成元素——组件
开发人员可以用代码实现无比复杂的功能，那么作为设计师，我们完全可以通过Xcode找到替代品，如下图右侧就是各种的组件，我们可以用组件实现不同的功能，最基本的组件就是最左侧箭头所示的View controller。这个组件是做什么的呢？我们可以尝试拖动一个View controller组件到工作区的空白位置，发现了什么？是的，又生成了一张“画布”！这个奇妙的功能，我只告诉读这篇文的同学啊，很好玩吧？那么View controller左侧的箭头是做什么的呢?好，我们同样拖动一个箭头到一个VC（view controller简写，下同）上，发现了什么？箭头附加到了这个VC的左侧，这个代表我们的故事是从这个VC开始的，也就是这个是启动界面完成后第一次进来的界面啦。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
静电在这里准备了四个界面，所以，拖动四个VC到主界面上，依次排列好.然后在这里我们还需要了解另一个控件-image view。由名字可以猜出来，image view是来展示图片的容器。但image view必须依附VC存在而不能单独存在。
可以这么理解，VC是画布，没有画布，我们不能在上边做任何操作。下图位置的图标就是image view，在每个VC里都拖动一个image view吧！（请注意，拖动到VC的操作必须在视图百分比显示而不是缩放的情况下，且选中VC的情况下才能拖动，如果你无法实现拖动，记得在主界面右键或者双击左键放大视图，同时选中一个VC，然后再拖动）
很简单对吗？完成后，就如上图所示的样子，可能有朋友发现自己的imageview大小不太对，很小。没关系，我们在后边可以调整他的大小。接着点击下图所示的位置展开“图层”，我们会发现类似ps里图层的东西，还有一点，image Vew是在VC的下级里的，也就是被包含的关系，以后如果我们在VC里放入其他元素，也会出现在Vew的下级。
五、导入图片资源到Xcode
接下来我们还却一样东西，就是设计稿图片了，ok，准备好本文开头静电提到的图片素材（你可以使用sketch或者任何你喜欢的作图软件设计）。接着从最左侧的文件库中找到带有蓝色图标的images.xcassets．打开它，我们发现右侧的主界面发生了变化。接着点击appicon，这个时候主界面出现了我们很熟悉的东西，2x，3x。
秒懂！是的，Xcode在新版本中为我们提供了这个images.xcassets功能，我们可以将所有图片都扔在这个里边（当然，还有一种传统的导入图片方式，就是之间把图片文件拖动到左侧的文件目录中，这里静电不推荐．）appicon是程序的图标，现在我们可以将制作好的图标文件拖动到里边，如果现在没有准备这个图标，也无所谓，没有他我们可以照样继续工作。待会儿再做不迟。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
把你刚刚做好的设计稿拖动到第二栏即可。这里为了方便，我们要把文件名加上@2x或者@3x的后缀。这样Xcode可以自动识别该放哪一栏。这样图片文件已经导入到Xcode工程中了，我们可以在image view里调用。
六、让storyboard显示图片
返回Main.storyboard文件，选中刚刚拖动到VC里的UIimageView，接着我们可以对这个容器的属性进行设置了。
如果imageView尺寸不对，ok，我们在下图的位置更改Width与Height的值，让其充满VC（再次强调，这里的数值是我们实际设计稿的一半，以后都要形成这个概念，这也是我们为什么一定要将图片素材做成偶数像素的原因）。
接着切换到下图箭头位置，调用图片文件到imageview，如果发现图片被拉伸或者压缩了，可以尝试调节第三个箭头所示的缩放模式（如果设计稿较长，选择top比较合适），同样我们可以调节透明度（alpha），其他选项大家可以自行点点看，我们现在暂时用不到，不再讲解。
依照这个操作步骤，把刚刚导入的图片赋予每一个imageview。
七、按钮——为storyboard加入点击事件
用过flash等软件的朋友一定知道，要让某些元素相应我们的点击或者其他事件，我们必须把他设置为按钮。在Xcode中，这同样适用。在组件库里找到按钮（button）组件吧，相信你一定可以找到。接着拖动到你想要相应点击事件的位置（当然必须在vc中），另外，必须保持VC为选中状态再进行拖动哦。
拖动按钮到合适的位置，选中按钮，同样在右侧属性窗口改变他的属性，按钮可以是纯文字的，我们也可以用图片来当按钮。这里静电做一个隐形的按钮，在属性窗口，把button字样删除即可。然后拉大button区域到你认为合适的位置。同样为其他的VC中你觉得需要键入按钮的地方设置按钮。（如果你找不到隐形的按钮，可以展开组件抽屉，“图层”形式的操作你一定可以找到并操作好的，但这里与ps的图层有区别，一个元素位于另一个元素的上方，图层中显示顺序是在其下方的）
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
八.让StoryBoard动起来吧！
按钮加好后，我们来进行最后一步，也是最关键的一步，让各个“故事版”形成关联。也就是指定一个按钮的去向是哪里？首先选中第一个vc中的按钮，我们要实现的效果是，点击后跳转到第二个界面。
这里操作稍微复杂，静电一步一步讲解
1. 选中一个按钮
2. 在这个按钮上点击右键并拖动到目标界面
3. 在弹出的层中选择“modal”（push现在不可用，下节讲解push的用法）
4. 这个时候两个VC中出现了连接线，选中链接线，在右侧属性栏设置transition，也就是跳转动画（自己试试哦）
5. 这样一个链接就完成了
6. 依次为所有的按钮都加上连线（注意方向，从左到右跳转，就鼠标右键从左到右划线，反之从右到左。）
7. 选中连线可以更改跳转的属性，动画。以下是静电使用的属性。
大功告成，我们可以运行下模拟器看看效果了。静电这里的设计稿是为ip5设计的，所以选择ip5或者5s的模拟器。怎么样？这样设计稿就连接起来了。看看静电实际的演示效果吧。没有一行代码，轻松完成页面之间的跳转，当然，他的功能还不只这么简单，下一节，我们会继续深挖Xcode的神奇组件。看看他还能给我们带来哪些更奇妙的好东西。嗯哼，设计师也会Xcode，让开发工程师和产品经理也羡慕一下吧！
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
素材为Xcode工程文件，大家下载后可以直接打开参考。微盘下载
下一次将会是Xcode的教程第四节，内容更精彩，不容错过，静电为大家带来更好玩的!零代码，只为设计师更好的做交互和设计!欢迎关注静电的微信帐号jingdesign91，不定期为大家带来静电独家原创教程。
别在哼哧哼哧的只顾闷头做图啦，让设计稿动起来吧！
