10 个移动应用和网站线框示例

在我们的 上一篇文章 中，我们探讨了什么是线框以及为什么需要它们。为了帮助您获得灵感并创建自己的线框，我们搜索了网络——以及我们自己的团队文件——寻找最佳的移动应用和网站线框示例。

如果您需要快速复习，线框是蓝图或示意图，可帮助您将应用或网站的结构传达给相关利益相关者。在本文中，我们将介绍不同类型的移动应用和网站线框示例。我们包含了各种不同的选项，让您了解它们在产品设计中可以多么灵活和强大。

移动应用线框示例

区分线框的最佳方法是通过它们的保真度级别。您可以将从快速的手绘草图到插画的模型都视为线框。所以，让我们来了解不同类型线框的示例。

低保真线框

由 Sketch 提供的旅行应用

我们的第一个示例是我们自己的。快速使用铅笔和纸张完成，这个旅行应用线框只是展示了我们想象中的最终产品的外观的主要布局。

低保真移动应用线框对细节要求不高，不需要文本或图像，也不需要显示应用功能。但是，根据四个主要应用页面，我们可以假设应用的主要功能是查找和预订酒店和旅行。

由 Nicolas Solerieu 提供的沉浸式过渡线框

没有规则限制您可以和不能使用线框做什么。关键是要将移动应用设计的某个方面传达给相关利益相关者——这可能意味着不同的东西。Nicolas Solerieu 的这个示例突出了他们想要在应用的最终版本中实施的沉浸式过渡。

他们用尽可能少的细节传达了想要逐步扩展房地产产品，以展示不同的屏幕房地产属性并进行扩展。

由 Alexandra Davis 提供的 Bandsintown 移动应用重新设计

到目前为止，这两个示例都只显示了几个屏幕，功能有限。Alexandra Davis 对 Bandsintown 应用 的重新设计展示了整个应用以及主要功能作为低保真线框。

如果您想在您的线框中涵盖所有内容，同时保持低保真度，这是一个很好的示例。

中保真线框

由 Ravindra Momula 提供的移动应用线框

Ravindra Momula 的设计是中保真线框的完美示例。该设计展示了应用的不同页面，包括侧边栏，非常清楚地展示了最终产品可能是什么样子。他通过没有图像或颜色，只使用一些简单的文本就实现了这一点。如果您正在寻找线框应该是什么样子的基本模板，那么就不要再找了。

由 Sketch 提供的旅行应用

将我们的旅行应用提升到下一个保真度级别，我们可以看到低保真线框和中保真线框之间的明显区别。主要的区别是，您需要一个设计工具——比如 Sketch——来创建中保真线框。此外，我们在设计中添加了更多细节，以及所有必要的组件或标签。

中保真线框仍然避免了在流程后期可能更改的设计细节，例如颜色、文本和图像。

高保真线框

由 Sketch 提供的旅行应用

让我们再进一步，看看一个高保真线框的示例。虽然它们需要更多工作——从设计角度来说——高保真线框是最终产品最准确的表示。

区别在于额外的细节——比如颜色、虚拟文本和图像。您肯定需要一个像 Sketch 这样的设计工具来制作它们，但是您付出的努力是值得的。

由 Annie Tang 提供的移动应用优惠页面

Annie Tang 为我们展示了另一个高保真移动应用线框的示例，展示了一个房地产移动应用。与其他线框不同，您通常将高保真线框保存到产品设计周期的后期阶段。这种线框的目标是直接为应用的最终设计提供信息——除了细微的细节，最终的应用看起来将与它非常相似。

网站线框示例

网站线框与移动应用线框具有相同的基本原则，但它们在本质上看起来有所不同。

设计网站线框的关键区别在于，它们可能具有更长的页面。通过这种设计，您可以看到您如何在桌面或移动浏览器上自然地滚动网站。

网站线框套件

网站线框设计共享许多核心元素，这使您更容易设计和查找它们的模板。通过使用像这样线框套件，您可以快速开始设计流程。

大多数网站倾向于作为产品或服务的资讯中心，这使得它们的功能相似。没有什么可以取代从头开始设计您自己的网站线框的质量，但有时节省时间是关键。

额外 Mac 应用线框

由 Sketch 提供的设置双重身份验证

最后但并非最不重要的一点，我们认为分享一个来自 Web 应用的简单线框示例会很有趣，展示了新的 双重身份验证 设计。遵循您所知的相同原则，线框设计显示了关键功能，同时尽可能地减少设计细节。这个示例还表明，您不应该限制自己只在从头开始设计时才使用线框。

更新、新功能和重新设计都可以从使用线框中获益，以使利益相关者对最终设计看起来如何达成一致。

这些只是线框的一些示例，正如我们所展示的，没有严格的规则。线框可以用于许多不同的目的，并且可以对您的设计流程产生巨大的积极影响。如果您对任何其他与线框相关的内容感到好奇，或者想要分享您自己的线框，请在 Twitter 上与我们联系。