Xcode故事版搞定高保真原型设计心得

初次接触Xcode时，我的内心几乎是崩溃的，没有代码基础，出高保真原型会不会太难了。

 

但是在学习的过程中发现，使用故事版storyboard制作ios版的高保真原型设计还是有很多方便的地方。它提供了很多有关于ios的自有控件和各种不同的画布面板等等（如下图）。利用storyboard可以轻松的实现页面的跳转，返回，底标签，页面的上下，左右滚动等效果,点击运行时，还可以像真正的app一样模拟运行，如果你有账号，提交后，可以像真的app一样直接在手机上查看。

下面是我本次研究学习的成果，基于雅昌拍卖图录这个app，左边是架构图，右边是在模拟器上运行的状态，利用故事版实现了从一级到三级页面的跳转，Tab标签，上下左右滚动等大部分的功能。

在我制作高保真原型的过程中，我发现有一些小小的知识点，很容易出错或者是忘记，现总结如下：

1.新建的页面都是自由画布，对于设计师同学，只需要app的实际尺寸，所以要把use auto layout的选项勾掉，这时会出来弹出一个页面，选择iphone确定，如下图。

2.在xcode中，是以一倍来实现页面的，所有尺寸都是实际设计稿中的一半,所以在填写和计算尺寸时，都要除以二。

3.在往工程文件的images文件夹中拖图标的时候，xcode是可以自动识别@2x和@3x文件的，会根据文件名自动匹配，如下图。

4.一个文件要运行起来，需要有一个指引，说明是从哪儿开始，这时候要注意要在起点的画布前加上运行箭头，勾选is initial view controller, 如下图。

5.有时候点击运行按钮，出来的模拟器尺寸很奇怪如下图，不是正常的iphone尺寸，这时候只要按下command + 1/2/3 ，可以出现各种不同的尺寸，多按几次就好啦！

6.在用Tab bar做导航标签的时候，下面按钮运行起来点击效果总是蓝色，很难看，没关系，只需要在AppDelegate.m这个页面中加入一行代码就好啦～

在      - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {   

这行代码的下面加入如下代码：

//设定Tabbar的点击后的颜色

[[UITabBar appearance] setTintColor:[UIColor colorWithRed:227.0/255.0 green:28.0/255.0 blue:31.0/255.0 alpha:1]];

//设定Tabbar的颜色

[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:0 green:0 blue:0 alpha:1]];

需要注意的是，代码用使用的是rgb颜色值，alpha值0～1代表透明度。

7.我发现网上针对页面滚动这方面的教程很少，所以请教了开发同学和朋友们，下面是我总结的小小过程。

下面是运行的结果

除了上面的内容，我有一个疑问，是否可以用简单固定的代码把返回的箭头颜色修改或者去掉，改成设计稿中的样式，在此求教啦，希望有知道的童鞋可以私信告诉我哦～！

以上就是我本次学习研究的心得总结，感谢领导，感谢开发童鞋的耐心指导，感谢我的朋友懒猫不厌其烦的帮我纠正错误，感谢 @静电 大大的Xcode教程《搞定一像素不求人！为设计师量身打造的XCODE教程1～4》。

本次学习只是用于制作高保真原型，这些还仅仅只是皮毛，是很少的一部分，还有更多的知识值得学习，请开发大大们轻喷，同时，希望能和同学们多多探讨，互相学习，共同进步哦～！

最后po上公司产品的二维码，欢迎下载～