就像建立一个网站，移动应用程序的设计是一个非常详细的过程。虽然这可能不是社会学的火箭手术(有些人可能会说不是)，但即使是最好的应用程序设计师也会花费数年的时间研究这一技术，而且还有很多需要学习的地方。这两个网站的早期阶段之一&移动应用程序设计被称为线框。

这是一个基本模板的布局，其中包括最重要的页面元素。内容应保持在最低限度的使用，在必要的基础上。线框将注意力直接集中在体验上。-基本上用户将如何与应用程序交互。许多设计师更喜欢用手画这些，但总有一个选择来设计线框使用图形软件。

在这篇文章中，我想提供一个iOS应用程序线框入门指南，特别是如何完成这一任务。使用AdobePhotoshop。其他程序，如GIMP或Sketch也工作得很好。目标将是创建一个分层的线框，可以编辑和重新安排，以适应一个工作的移动应用原型。

线框概述

记住最好的经验法则是简单。对于任何一个应用程序，线框都是基于少数视图构建的。这些视图中的每一个都可以是来自列表视图、社交提要、用户配置文件…的任何类型的接口。有很多选择。

刚开始的时候，你可能会尝试从你最喜欢的iOS应用中逆向工程线框。这将帮助您专注于屏幕上最重要的方面，以便您可以将这些元素转换为自己的想法。简单的线框实际上是关于交流的。理想情况下，您希望将您的想法传达给开发人员、设计师，甚至潜在的用户。

江门网络公司从用户体验的角度来考虑线框设计。解决UX问题就是问正确的问题。应用程序的主要目标是什么？完成这个目标(或目标)需要多少个屏幕？在这些屏幕之间移动的最直观的方法是什么？

同样值得注意的是，在制作线框时，您不需要遵循精确的尺寸。目标不是成品--事实上，这通常是应用程序的第一个也是最粗略的草稿。如果你有小图标或按钮的想法，可以随意将它们添加到线框中。但要保持你的思想灵活，愿意随时改变。

快速迭代是良好的线框的基石。迅速计划，毫不犹豫地起草你的想法。这将帮助您确定哪些是有效的，哪些是不起作用的。

UI/UX故事板

故事板通常与动画和电影相关。艺术家将绘制每个主要镜头的草图，以展示故事情节的运行和观众在每个场景中看到什么。用户体验设计师也采用了同样的想法来解释网站和移动应用程序是如何工作的。

这一步没有必要，但它可以带来很多好处。它为程序员提供了一个工作图表，解释了某些按钮将如何在不同的屏幕之间转换。故事板也意味着充实的想法，并获得计划不良，不直观的元素，以便他们可以固定之前，创造最后的概念。抛光的故事板也可以称为原型.

Xcode有一个小的故事板界面，但它需要一个更精细的编程术语调色板来连接按钮和屏幕显示。如果你只专注于UI的设计，那么最好是用手绘的线框或Photoshop这样的工具来设计故事板。这只是一个用箭头连接屏幕来决定它们之间的流动的问题。

您还可以添加一些书面说明，说明视图之间的转换效果，以及它们将如何根据应用程序层次结构的向前或向后变化。故事板应该用低保真度的线框来讲述应用程序的故事。您将节省时间，不必担心颜色和纹理，同时也主要关注用户体验和内容演示。

Photoshop中的线框

虽然您的工作流程可能有所不同，但我想为希望尝试线框的初学者提供一些提示。用手开始工作从来不是个坏主意，因为你可以更直接地工作，更快地执行想法。但是当转换为Photoshop时，尽量不要担心标题栏和标签栏的具体尺寸。

相对尺寸通常对低保真线框来说是足够好的。使用不同的形状工具构建每个布局，以节省一点时间。您可以设置绝对宽度/高度值，以获得一个准确的圆形或方形形状的需要。因此，使用典型的iPhone应用程序线框，您可以创建一个320×480长方形，表示整个屏幕。然后，您可以将较小的矩形放入此框架中，表示状态栏、标题栏等。

虽然在这一点上你不应该关心确切的颜色，但是试着坚持一个相对的配色方案。例如，您可能会计划标题栏中的按钮应该比标题栏本身的颜色更深。或者这些按钮可能是相同的颜色，而是使用一个1 px外部边框。不要太沉迷于细节，但也要尽量避免使用相同(或冲突)的颜色将一堆形状放在一起。

一个快乐的媒介在没有细节和奢侈细节之间的某个地方。

分组与组织

一旦创建了第一个线框视图，将所有重要的层组合成一个层组。从这里开始，您可以复制组并重新排列所有内容，以生成另一个视图。这将节省您从零开始重新创建重复元素的时间。

但组织是也很重要当你需要回来编辑的时候。再没有比PSD更令人生畏的了，到处都是层次分明的东西。很难预测何时需要编辑或更新线框模型。保持您的所有层的组织，您将有一个更容易的时间，如果和何时这些编辑是需要的。

另一个想法是为不同的视图模式创建单独的PSD文件。如果你有一个单独的PSD的空间，为人像和景观的看法，那么就太棒了！但是如果你的线框需要很多不同的视图，那么很难将它们放入一个大文件中。这也适用于在纵向和景观模式下为iPad线框创建新的PSD。

样本PSD免费

我已经包括了我自己的PSD免费，其中概述了一个非常简单的iOS任务应用程序。为了简单起见，我已经创建了4条屏幕线框，但您可以看到这个过程将如何外推以包括每个可能的屏幕。

请随意下载PSD文件的副本，并在您自己的项目工作中使用类似的方法。就我个人而言，我觉得从手绘素描开始，然后进入数字领域比较容易。这完全取决于你作为一个设计师的喜好，以及什么是最容易头脑风暴。

iOS 7-应用程序-线框-模板(200 kb压缩文件)

其他资源

网上有数百篇文章，详细介绍了iOS应用程序的设计过程。一开始看起来很复杂--可能是因为像素匹配一开始令人困惑和恶心。一旦你适应了这个过程，每个新的移动应用程序就会成为一个非常有趣和有创意的项目。