[奇思妙想] 利用Storyboard来做iOS原型

接到老板的一个紧急任务要把一个Web端的销售平台移植到iPad上，但暂时没有其他人手腾出手来参与这个项目。由于是功能照搬，就想到何不尝试利用Storyboard来做iOS原型，好给设计出设计图。

注：此方法创建的原型不支持交互效果，主要是利用Xcode自带的控件库，也不作为项目界面的实际创建

声明：此教程仅供个人参考阅读，不得以任何形式用于商业用途。

第1步：在Xcode中建空项目。以下演示采用了Xcode10.1。

也可以通过按 shift+command+N 创建新的项目 选择iOS-Single View App，然后点击 Next 为项目起名，然后点击 Next 选择保存位置，然后点击 Create

第2步：为Storyboard添加原型元素。

点击左边项目资源管理器中的Main.storyboard，然后在Storyboard下面的工具栏更改你期望的设备视图。

更改你期望的设备视图和屏幕方向(如iPad Pro 11寸，横向) 在右上方工具栏点击上图标示的标准控件库图标(旧版Xcode在右侧边栏底部) 在搜索栏键入 Navi 关键字筛选标准控件，拖动Navigation Bar到现有控制器上 选中刚添加的 NavigationBar，然后点击右侧边栏尺寸图标如上图标示1，在尺寸设置面板中View一栏设置坐标与宽高如上图标示2: X 0 Y 24 Width 238，其中导航栏高度固定不可更改

按上面的方法再拖动一个NavigationBar到现有控制器上，设置坐标与宽高使其与之前的导航栏水平对齐宽度撑满剩下的空间: 如，X 238 Y 24 Width 956。双击导航栏上的标签可以在右侧边栏的外观设置面板(上述尺寸设置面板左边一栏)设置导航栏标题(Title)。

绘制级联控制器视图之间的分割线

按照上面的方法打开标准控件库，然后搜索框键入UIView筛选标准控件，拖动View到现有控制器，并保持View标准控件选中，在外观设置面板中设置背景图为自定义色如下图所示。

切换到外观图标，更改Background为Custom，下一步会对自定义色进行定制 在弹出的颜色选择器中选择RGB方式如上图标示1，在Hex Color #中键入999999并按回车应用自定义色，关闭颜色选择器

保持View标准控件选中，切换到尺寸设置面板，设置坐标和宽高使其高度撑满如下图所示，这样级联控制器视图之间的分割线就完成了。

设置 View 的坐标与宽高

绘制左边列表控制器的功能列表

标准控件库中搜索框键入UITableView筛选标准控件，拖动TableView到现有控制器，并保持TableView标准控件选中，在尺寸设置面板设置坐标与宽高：如，X 0 Y 74.5 Width 238 height 760。

切换到外观设置面板，设置内容为静态单元格按如下图标示。

设置为静态单元格

制作功能列表模版

在左边StoryBoard的图层面板中选择TableViewSection，如下图标示。

选中TableViewSection以更改静态单元格数量 外观面板中Rows设置为1 从左栏图层面板中选中TableViewCell 外观面板中更改Style为Basic

完成功能列表

再根据上面更改静态单元格数量的方法把单元格数量更改为你期望的单元格数，如5。双击单元格中的标签可以在右侧边栏的外观设置面板中更改功能名称(Text)。

最终效果图

最终效果图

绘制右侧详情控制器

右侧详情控制器的绘制也是类似的，在标准控件库中搜索需要的标准控件，拖到现有控制器上，然后设置坐标与宽高，以达到原型布局的要求，具体步骤不再赘述。

要新建页面(控制器)，只要在标准控件库中搜索ViewController即可。

Just enjoy it!

如果你觉得此篇文章非常有用，请给我点喜欢或打赏哦！