UX 设计过程中的线框

最好的设计过程不是线性的。它采用迭代方法，设计师在早期阶段参与产品开发，并可以快速共享、测试和验证想法。

当您进行了用户研究并掌握了有关用户目标和动机的足够数据时，您可以从定义主要交互、构建内容和概述导航的低保真线框图开始。一旦您完成了一些初步测试，下一步就是为您的线框添加保真度、美感和交互功能。

下一轮测试可能包括可点击的高保真原型。它们可以帮助您的用户和利益相关者更生动地了解最终产品。测试的最后阶段可能会使用 HTML、CSS 和 JavaScript 对原型进行，通常只意味着最微小的最终改进。

每个产品都是独一无二的，您选择的线框图顺序应该取决于项目。

交互设计的线框图

交互设计（IxD）是指设计交互式数字产品和服务的实践，重点是改善用户与产品之间的交互体验。

通常，IxD 依赖于 5 个维度：文字、视觉（包括图标、排版、图像等）、物理对象（如计算机、鼠标、触摸板等）、时间（与动画、视频和声音有关）和行为。

不过，在线框图阶段，交互设计师并不专注于描绘图形元素。相反，他们试图了解用户需求并定义交互以满足这些需求。

可用性建议在处理交互时考虑以下问题，例如：

• 用户可以发出哪些命令来与界面交互？

• 您提供哪些信息来让用户在执行操作之前知道会发生什么？

• 是否有限制措施来帮助防止错误？

• 信息是否一次被分成几项？

用于信息设计的线框图

信息设计是一种努力以最有效的方式表示内容的实践。该学科与通信设计、数据可视化和信息架构密切相关并重叠。

如果你环顾四周，你会发现我们被信息所包围。但是，如果呈现不佳，则很难消化，用户会为您的产品而苦恼。

线框图帮助信息设计师为用户理解数据。使用线框，您可以：

• 计划内容策略

• 每页的校对和审查副本

• 组织和分类信息

• 规划每个独特页面的布局

• 与客户和用户一起测试组织和布局

导航设计的线框图

导航设计是负责在页面上组织信息的学科，因此用户可以轻松地浏览网站或应用程序并找到他们需要的信息。简而言之，导航帮助用户以最不令人沮丧的方式从 A 点到达 B 点。

使用线框，设计师可以决定以下事项：

• 主要导航链接的逻辑和一致的位置

• 辅助导航元素的放置，例如子菜单、面包屑和搜索

• 导航元素的预期行为

使用线框，设计人员可以在页面之间建立一致性。相同的导航元素应位于相同的位置。例如，大多数用户希望徽标位于页眉中或搜索位于页面的右上角。这意味着徽标和搜索按钮应位于每个页面上的这些位置。

选项卡、菜单、手风琴、面包屑、按钮和其他导航元素应该按照用户期望的方式运行。如果用户点击一个菜单，他们会假设看到选项列表并且不希望被重定向到另一个页面。否则，他们会遇到摩擦并可能会放弃该网站。

UI设计的线框图

用户界面设计 (UI) 是一门多方面的学科，专注于为计算机、家用电器、移动设备和其他电子设备等机器和软件构建用户界面，提供出色的可用性，并在美学上取悦用户。

我们可以将 UI 设计分为 4 层：

• 控件（链接、按钮、标题、正文、图标等）

• 模式 — 控件组（标题、图像网格、搜索功能等）

• 设计原则（对比、层次、接近、对齐等）

• 模板（搜索结果、类别页面、结帐页面等）

线框显示未来用户界面的主要特性、功能和内容，而无需深入视觉设计。设计师应该只在完善页面结构后才能处理视觉效果。

使用线框制作原型

线框通常先于原型设计阶段，呈现未来产品的总体思路，作为构建更多相关内容的骨架。线框使用简单的块并包含最少的交互性——足以测试想法，而不会将用户的注意力转移到颜色和排版上。

相反，原型的保真度更高，让人联想到几乎完成的产品。因此，它们允许您通过交互和功能进行更有效的用户测试。

最好的方法是迭代过程，其中每次迭代都包含一个新的保真度级别。从低成本线框图开始，测试假设，改进和改进。由于对原型进行更改的成本更高，因此只有在您已经对您的想法进行了几次测试后才能接近它们。

使用线框进行用户测试

线框的最大好处之一是它们的实用性。你所需要的只是最低限度的——一支笔和一张纸——使用黑白框和虚拟文本来记下一个布局，以便在用户身上测试你的想法。收到第一个反馈后，完善、改进您的线框，然后再次测试！或者，您可以使用 Balsamiq 等简单的线框图工具将草图转换为数码相框。

对于不想在没有事先测试的情况下将时间浪费在经过深思熟虑的设计上的团队来说，线框是一种首选工具。

您可以使用线框进行什么类型的用户测试？

• 游击测试（用户测试）

• 实验室可用性测试

• 采访

• 观察

• 调查

用于开发的线框

在数字产品的开发过程中，设计师和开发人员尽早开始协作至关重要。程序员应该在定义想法的早期阶段参与讨论，而不是完善高保真设计并等待客户的签字。

基本线框通常足以让开发人员评估技术风险并防止包含可能需要很长时间才能实现的功能。密切协作加快了原型设计、测试和细化线框的速度。此外，当成品与他们的预期设计模糊相似时，它消除了设计师的挫败感。

以上内容为转载