编者按：眨个眼@JingDesign 同学的投稿已经到第三期咯，前两期认识了Xcode，也用它设计了自己的APP界面，今天放大招，直接帮设计师同学零代码搞定交互动画，方便实用易上手，继续来学习咯。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
@JingDesign ：这期的教程隔的时间有点长，对不住大家，年末工作多，操心的事儿也多，如果你现在还在继续关注静电的教程，那我在这里要再次说一声：感谢。Xcode对于设计师来说，大部分人可能并不是很感冒，但我想在这里冒着文章点击量不高，反响不那么好的风险，继续我们的Xcode教程。毕竟有很多朋友继续支持着静电，让静电有动力继续为大家普及Xcode的知识。其实，只要你稍微花一点点耐心，那么“看起来”稍显复杂的Xcode界面只会是一只纸老虎，剥茧抽丝，让我们一同继续来发掘iOS开发工具的绝妙之处，特别是对于我们设计师的。
再次摘录出第一节的，设计师为什么要接触Xcode的5个理由：
- 让天马行空的设计被工程师打回而感到失望和沮丧
- 更快更高质量的完成你的设计稿，然后再来个锦上添花。
- 每天跟开发工程师开开心心的配合，成为好基友。
- 如果注定跟工程师成不了好基友，自己搞定那该死的一像素错位，让他们刮目相看。
- 如果这些还不够，那还有最后一条。你可能会因此成为大神，升职加薪，出任CAO，赢取白富美，走上人生巅峰。让同事刮目相看。
最后再加上一条，学习了Xcode之后，你会不用花费一行代码，就可以生成一个在真机上演示的APP，对于设计师来说，没有比自己的设计稿被实现更有成就感了对吧？
在第一章和第二章中，我们大概对这个新朋友做了初步了解，让我们可以简单的体验到app是如何在模拟器中运行起来的。对，有的小伙伴会想到那个稍显简陋的启动界面，但肯定大伙不会就那么容易满足于这个启动界面，可以做更多的事情吗？没错，那么在本章中，静电继续为大家介绍Xcode的storyboard，翻译过来就是故事板。先来看下最后输出的效果：
前两章教程：
一、什么是故事板？
Storyboard是一件很奇妙的东西，电影，电视剧等影视剧拍摄的时候，导演会在本子上画类似于连环画一样的图，也就是分镜头，导演通过这些“连环画”来告诉摄影师，演员，接下来的故事，你将出现在哪里，角度是怎样的，如何与周围的环境互动，摄影师需要知道这个场景要如何拍摄，通过什么角度来进行拍摄，拍摄时间，对白等等。也有人将故事板称为“可视剧本”（visual script），让导演、摄影师、布景师和演员在镜头开拍之前，对镜头建立起统一的视觉概念。在电影拍摄期间，为了让一个庞大的剧组协调工作，那么，解释剧本、解释导演意图和工作要求的最办法就是“看”，当一场戏的场景动作、拍摄、布景等因素比较复杂而难以解释时，故事板可以很轻松地让整个剧组建立起清晰的拍摄概念。下图是《冰雪奇缘》的故事版。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
说到这里，相信大家一定对故事版的概念有了大概的了解，那么Xcode的中的故事版是什么呢？我们知道，APP也是由一个一个页面构成，每个页面承载不同的内容和功能，同时这些页面又是相互关联和依存的，没有一个界面能脱离其他界面单独存在，整个app界面我们把他理解为上图的一幅幅的“分镜头”，再通过某种方式组合起来，就形成了一个完整的app结构。下图就是静电在故事版上讲的故事。每一个页面就是一个“场景”，场景之间使用箭头和连线将一个个的故事串联起来，形成一个完整功能的“故事”。Xcode这款针对开发者的工具中为我们提供了非常友好的可视化界面，让我们通过故事版，就可以完成一个简易或者复杂的功能，一切只需要使用各种组件和连线而已。
二、为使用故事版准备设计稿
首先我们要准备设计稿，准备一组相互关联的效果图，以下是静电准备的一组设计，当然，推荐使用同样有故事板的Sketch来设计。从最左边的分类入口“情感”点击进入“情感”分类列表，然后点击某一本作品，进入作品主页，在作品主页点击作者头像，进入作者主页。整个流程可以点击左上角返回按钮后退。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
静电的Sketch教程合集：
- 《SKETCH设计教室！从零开始学APP设计利器SKETCH（一）》
- 《SKETCH设计教室！从零开始学APP设计利器SKETCH（二）》
- 《SKETCH设计教室！带你了解超好用的SKETCH插件》
- 《想要一稿过不加班？SKETCH绝配神器MIRROR抢先体验》
三、设定Xcode故事板尺寸
准备好这些效果图后，我们接着打开Xcode。和第一章的做法一样，我们要新建一个工程文件。在Xcode启动后的欢迎界面选择箭头所示的选项。或者选择屏幕左上角的File>New>Project，同样可以新建一个项目。
选择Single View Application
接下来我们给项目起一个名字，product name你可以随便写，第二项也可以随便，第三项默认，language选择swift或者object-c均可，设备选择iphone，最后的对勾不用勾选。接着Next
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
提交后就来到我们熟悉的界面了，左边的一列是Xcode自动为我们生成的文件，中间最大的区域为工作区，右侧为元素的属性栏目。是不是跟某些软件很像呢？
那么Storyboard在哪里呢？眼睛尖的同学想必已经发现，左侧的文件列表区域有一个名为Main.storyboard的文件，对啦，这就是我们今天的主战场，快点击打开吧。
打开这个Main.storyboard文件后，中间的工作区域与右侧的面板会发生变化，如下图所示。我们发现，中间出现了一块类似于sketchartboard一样的东西，对，这就是Xcode中的故事板啦，我们可以在故事板上作画，但是，这个画板的尺寸好像不太合适，我们需要将尺寸改成我们需要的手机尺寸大小（这里为了简单起见，静电先不介绍autolayout，也就是自动布局功能，这个是为iphone6 及plus等更大屏幕准备的新功能），依次按箭头点击，找到use Auto Layout，将前面的对勾去掉，这个时候你会发现“画布”尺寸发生了变化，好像开始正常起来了对吧？
亲爱的读者们，你们手头是用哪一款iPhone手机来调试呢？如果是iphone5，那么就调成640-1136大小（然后尺寸除以），如果是iPhone6，或者plus就各自选择对应的尺寸即可，静电在这里的设计稿使用iPhone5s来设计的，所以这里选择ip5的尺寸，注意将物理分辨率宽高分别除以二（Xcode中，我们务必将设计稿的尺寸除以2，这一点请务必记住了）。那么在哪里具体设置画布的尺寸呢？请看下图，上边的箭头所指示区域是一把尺子，这代表着关于元素尺寸方面的东东，都可以在这里设置，那么我们点击然后按自己的设计稿尺寸或者手机物理分辨率尺寸除以2，填写在下边的框中。我们的第一个画布就这么完成设定了。
左侧的箭头表示什么呢？那表示我们现在被箭头指的这个是初始界面。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设
