移动端线框图

线框图是确定您的应用程序是否能够真正解决用户问题的最便宜的方法。幸运的是，网站和桌面应用程序的主要线框图原则可以轻松应用于移动设备。

然而，移动设备施加了一些限制。较小的屏幕尺寸和手势交互使移动线框图更加复杂。此外，用户经常用一只手或在旅途中操作他们的移动设备，并且不太专注于屏幕。此外，设计人员应考虑由于互联网连接不良或应用程序版本过时而导致用户无法访问应用程序的情况

线框图的目的

尽管有些团队认为线框阶段不是必需的并跳过它，但线框就像是最初构思过程和最终产品之间的桥梁。线框图可帮助设计人员将众多概念和想法汇集在一起，注意不一致或技术限制，并防止代价高昂的重新设计或代码重写。

线框比完整的高级原型便宜得多。线框复杂程度取决于您。它们可以用笔和纸绘制草图，在拖放软件中绘制，甚至可以通过点击来模拟一些主要的交互。

主要目标是专注于功能，而不是外观，并有效地传达设计理念。

最简单的应用程序线框应该反映：

• 内容层次结构，

• UI元素的位置和尺寸，

• 空间分布，

• 可能的用户操作，

• 应用功能，

• 应用页面之间的导航和转换。

保持开发过程以用户为中心

创建线框可以激发设计师、开发人员和利益相关者之间的诚实沟通，并使开发过程以用户为中心。

事实上，线框图是用户体验设计师可以用来说服利益相关者将用户研究整合到开发过程中的最佳方式之一。即使是应用程序的基本视觉表示，也可以帮助每个人发现缺陷和技术差距并评估交互效率。

及早发现这些问题在很多方面对团队非常有益。它激励设计师和开发人员强调用户并从他们的角度看待产品。通过揭示应用程序的功能是否真正解决了用户的问题，它还可以节省金钱和时间。

拿起不同角色的线框优势学习为什么线框图是所有团队成员都应该参与的事情。

从用户流开始

线框不会凭空出现。他们依赖于 线框图阶段之前的用户流程图，并帮助可视化用户在执行任务时需要的所有所需特性和功能。

用户流程比线框需要更少的工作，通常由基本形状（矩形、椭圆形等）和箭头组成。您可以先关注理想场景，然后再说明不太成功的路径。这些图表不需要很漂亮——它们应该专注于很好地传达你的想法，以便你可以继续下一步创建线框。

值得注意的是，用户流并不总是线性的，因为用户可能会采用不同的路径来实现相同的目标。考虑不同的场景并用用户流程记录它们将确保您不会错过任何屏幕

绘制核心元素和屏幕

与关键利益相关者一起绘制线框 可能非常有效。草图是用笔和纸（或白板）验证和可视化用户流程并在定义最终屏幕之前进行快速调整的最便宜的方法。

首先，说明入口点，然后是用户完成任务所采取的步骤以及最终的交互。例如，在勾画密码重置过程时，您可能会画出：

• 登录页面，

• 用户在应用程序中重置密码的步骤，

• 确认重置代码已发送到用户电子邮件的页面，

• 或要求输入发送到用户电话号码的代码的页面。

在绘制草图时，让您的团队参与头脑风暴，并努力从用户的角度完成流程。从用户的角度评估每个页面，并思考什么可以帮助他们实现目标以及什么可能会造成障碍。

不同设备方向的线框图

线框图用于说明您的想法并测试其可行性。因此，如果您的应用程序打算同时使用纵向和横向，则必须 为两个方向创建线框。不同方向的功能可能会有显着差异，线框允许您考虑这些差异。

尽管移动屏幕流行纵向，但横向屏幕更方便输入长文本或观看视频。更不用说游戏通常需要横向。

纵向通常比横向视图提供更多功能。如果您的应用属于这种情况，请确保您的界面包含视觉提示，以向用户表明在此方向上还有其他应用功能最受喜爱。例如，您可以使用导游中的工具提示来通知用户他们可以倾斜设备并访问新功能。

线框图允许定义方向设计的类型。有可能：

流体

两个方向的设计保持不变，而只有屏幕宽度发生变化。

扩展

界面调整、添加或删除一些布局组件以适应屏幕大小。

补充

出现提供补充信息的辅助屏幕。

连续的

用户访问类似于 YouTube 的辅助界面

使用设计模式模版

设计模式——设计问题的可重用解决方案——创造一种熟悉感和一致性。当用户看到并识别出熟悉的模式时，他们在浏览应用程序时会感到更加轻松。

所有操作系统都有本机设计模式。它们像可重复使用的块一样工作，用于解决常见问题并节省时间。

例如，顶部选项卡、浮动操作按钮、侧边栏或汉堡菜单是常见的 Android 设计模式。对于 iOS 应用程序，您可能会使用底部导航栏、右上角的主按钮和底部导航“更多”按钮或页面 UI 元素来显示辅助导航选项。

设计模式通过帮助用户直观地使用功能来实现快速线框图并减少认知负担。

尽可能包括真实副本

在线框图的早期阶段使用 lorem ipsum 或其他虚拟文本并没有什么坏处。事实上，它可以帮助每个人专注于功能。它指示在设计过程中稍后将放置真实文本的位置。一旦您对视觉层次结构感到满意，请尽可能用实际副本替换虚拟文本。

添加真实文本后，某些内容可能会感觉不妥，或者 UI 元素可能会放错位置。如果是这样，这是重新排序内容、截断和截断文本以及改进构图的正确时机。

带有实际内容的线框在用户测试期间会感觉更像是一个真实的产品，并且可能会提供更多的见解。

如果您还没有实际副本，请编造一些内容或使用竞争对手产品的类似摘录。

注意点击目标大小

缺乏可访问的触摸目标区域是移动应用程序中最典型的问题之一。移动屏幕空间不足迫使设计师确保所有交互元素（按钮、链接、卡片等）都易于点击。

用户经常在旅途中操作移动设备，因此他们必须能够有效地执行操作并且不会费力地点击可点击的位置。如果您不确定哪个触摸目标尺寸符合标准，请查阅操作系统指南。Material Design 指南建议触摸目标大小至少为 48x48px，而 iOS 指南指定的最小尺寸为 44x44px。

有限的空间还意味着您的应用程序的导航应该尽可能直观和直接 - 线框提供了试验和测试您的想法并确保在您的设计中实现这一点的机会。

如果您的目标受众包括老年人、儿童或有视觉或运动障碍的人，则触摸目标应明显大于标准尺寸。

以上内容为转载