为移动设备创建线框

您可以将线框用于任何项目，移动应用程序设计也不例外。线框是一种多功能工具，设计师以不同的方式处理它们。一些公司直接从纸质草图开始编写代码。其他人则逐渐从低保真线框转向高保真模型，并在每次迭代后进行测试。

线框为设计过程的未来步骤奠定了坚实的基础，因此我们不建议跳过此阶段。这是一个如何将线框图集成到移动应用程序设计中的示例。

第 1 步：确定目标受众和问题

创建好的线框需要结合研究分析和直觉。您必须首先了解您的设计对象以及您要解决的问题。

要开始，请尝试回答以下问题：

• 谁将使用此功能？

• 用户的目标是什么？这个功能为他们解决了什么问题？

• 用户可能会执行哪些操作？

如果你不能回答这些，你需要做更多的研究。可以帮助您收集这些数据的常用方法是用户和利益相关者访谈和调查、焦点小组、背景调查和实地研究。当您对这些问题的回答感到满意时，您就可以进行下一步了。

步骤 2：创建用户流

在开始线框图之前，您需要知道需要设计多少个屏幕以及用户将如何与它们进行交互。创建用户流是确定这一点的最佳方法之一。

用户流程显示了用户为实现特定目标所采取的步骤。将其映射出来将帮助您了解需要创建哪些线框以及它们应该如何连接。

用户流并不总是线性的，因为用户可能会采用不同的路径来实现相同的目标。考虑不同的方法将帮助您确保不会错过任何屏幕。

第 3 步：绘制核心屏幕

在您定义了用户流程之后，就该开始绘制草图了。这是您想要产生尽可能多的想法而不担心质量的阶段。您可以使用笔和纸或数字工具 - 取决于哪种更适合您。但是，请避免立即进行原型设计。它需要更多的努力，并且不允许您快速探索许多方法。

创建草图时，请始终牢记用户的目标。对于每个设计屏幕，问问自己：

• 这个页面的目的是什么？

• 这个页面如何帮助用户实现他们的目标？

尝试从不同的角度解决问题。为每个屏幕创建多个版本，获取反馈，并对其进行迭代，直到您有几个可行的想法。

第 4 步：设置移动框架

在您创建并测试了低保真草图之后，是时候转向中等保真线框了。上一步的草图将为这一步奠定基础。

首先设置一个移动框架。这会产生实际设计的错觉，但也会防止您在屏幕上放置太多元素。

如果您需要针对一系列设备进行设计，您应该使用哪些尺寸？最佳做法是从具有中等尺寸屏幕的设备开始。例如，如果您在 2019 年为 iOS 开发了一个应用程序，您可以使用 iPhone 7 框架。

第 5 步：使用框确定布局

在线框图过程的早期阶段，您的目标是创建清晰的视觉层次结构。现在，不要专注于内容。相反，专注于你想要呈现它的方式——即布局和结构。

在规划布局时，请考虑您希望用户如何处理信息以及以什么顺序。在画布上绘制内容框并根据它们的优先级排列它们。将更重要的信息放在用户更有可能查看的位置。F 形图案仍然适用于桌面和移动屏幕，但还有其他常见的扫描图案。不过，一般来说，屏幕的顶部和左侧会受到更多关注。

第 6 步：使用设计模式

熟悉度是良好 UX 设计最重要的属性之一。当遇到新产品时，用户的期望基于他们以前的体验。Android 和 iOS 都有这些平台的用户习惯的原生设计模式。这确实简化了设计师的工作。我们可以将这些设计模式用作可重用的内容块。

例如，底部标签栏、侧边抽屉和浮动操作按钮 (FAB) 是顶级移动导航最常用的模式。如果您想设计清晰简单的导航路径，请在您的应用程序中使用其中一种模式。

第 7 步：引入实际副本

建立视觉层次结构后，开始用真实内容替换占位符文本和图像。在这个阶段，重要的是要传达页面如何支持用户实现他们的目标。

内容应该影响你的设计。使用实际的副本和图像将帮助您理解：

• 如果布局有效

• 如果所有 UI 元素都是必要的并且在正确的位置

• 如果页面为用户流动

• 如果某些事情不起作用，这是重新组织内容和改进构图的最佳时机。

第 8 步：确保您的内容可以很好地扩展

添加真实图像和副本后，您需要检查设计的缩放比例。它在 iPhone XS 这样的中型手机屏幕上看起来很棒，但在更大或更小的屏幕上会变形。即使您从中型屏幕开始，也要检查内容在不同屏幕尺寸上的显示效果，并在必要时进行调整。

第 9 步：连接屏幕以创建流程

可以将您的设计作为单个屏幕的集合发布。但更好的选择是创建一个线流。

创建线流有几个好处：

• 当流程显示交互时，团队更容易理解流程。箭头作为视觉工具比冗长的描述更有效。

• 创建流程让您将应用程序的功能视为一个整体。例如，您可能意识到获取搜索结果需要几秒钟，并且您需要设计一个额外的状态或加载屏幕。

为每个屏幕提供参考编号可以更轻松地与团队成员或利益相关者讨论它们。

第 10 步：测试您的设计决策

测试线框有助于验证想法、发现功能问题和探索用户流程。它还节省了大量的时间和金钱。研究表明，在开发后期修复某些东西的成本可能要高出 10 倍。

根据预算，测试方法从观察会议到全面眼动追踪不等。NNG 建议定期以最多 5 人的小组进行测试——任何更复杂的测试都是浪费时间和资源。所以你所需要的只是你的线框、一个小会议室和 2-3 位同事。

在计划测试会话时，决定要测试流程的哪些部分并编写一个简短的脚本。想想你可以给参与者的任务和要完成的目标。最好坚持一项任务以保持专注。

常见的用户测试方法包括：

•  A/B 测试

• 专门小组

• 热图

• 调查

• 观察

• 可用性测试

测试会话结束后，分析结果并迭代这些发现。然后冲洗并重复，直到找到最佳解决方案。

以上内容为转载