UX_Designer-交互设计与原型制作-交互文档（IA, Wireframes, Mockups）_Mockups原型设计技巧.docxVIP

PAGE1

PAGE1

交互文档（IA,Wireframes,Mockups）–Mockups原型设计技巧

1使用卡片分类法进行IA设计

在设计信息架构（IA）时，卡片分类法是一种被广泛采用的技术，它帮助设计师理解用户如何组织和分类信息。这种方法涉及使用物理卡片或数字卡片来代表网站或应用中的内容或功能，进而通过用户的参与来确定信息的分类和结构。

1.1目的

卡片分类的主要目的是创造一个直观且用户友好的导航结构。这种方式确保了信息架构的构建是基于用户对信息的自然分类，而不是单纯基于设计者或组织的内部逻辑。

1.2过程

内容标识：首先，你需要确定出网站或应用中所有主要的内容和功能项目，并将每个项目写在一张卡片上。

分类定义：准备一组分类标签，这些标签可以是你自己的初步设想，或者是基于前期研究的结果。

用户参与：邀请目标用户群体进行卡片分类。让他们根据自己的理解将卡片分组，并为每一组命名。

数据分析：收集并分析用户分类的结果，寻找模式和重复性，以确定最终的分类结构。

构建IA：基于卡片分类的结果，设计一个反映用户分类模式的信息架构。

1.3操作步骤

下面是一个简单的示例，说明如何在设计过程中使用卡片分类法来优化IA。

1.4示例

假设你正在为一家在线书店设计网站，你已经确定了以下关键内容和功能：

在线浏览

购物车

用户注册

用户登录

图书有哪些信誉好的足球投注网站

图书分类（小说、教育、科幻、历史、艺术）

书评

订单跟踪

1.4.1步骤1：内容标识

创建卡片，每张卡片上写一个内容或功能项。

1.4.2步骤2：分类定义

提供分类标签，例如：

购物

浏览

用户账户

图书信息

1.4.3步骤3：用户参与

邀请5-10位目标用户进行分类。让他们将卡片分为他们认为合理的组，并为每组命名。

1.4.4步骤4：数据分析

收集用户分类的数据，并寻找共同模式。假设大多数用户将“在线浏览”、“图书分类”和“图书有哪些信誉好的足球投注网站”归为一组，并称其为“图书浏览”。将“购物车”和“订单跟踪”归为“购物”。用户账户和相关功能如注册和登录被归为“我的账户”。

1.4.5步骤5：构建IA

基于用户分类的数据，创建信息架构：

图书浏览：包含图书分类、在线浏览和图书有哪些信誉好的足球投注网站。

购物：包括购物车和订单跟踪。

我的账户：涵盖用户注册和登录。

通过这种方式，信息架构更符合用户的认知模式，从而增强用户体验。

1.5注意事项

确保卡片上的描述是清晰的，避免歧义。

在用户参与阶段，提供充足的指导但不过多引导，以获取真实反馈。

进行数据分析时，关注大多数人的共同模式，但也要考虑少数用户的特殊需求。

将卡片分类的结果与设计团队分享，以确保每个人都理解用户如何期望网站或应用的结构。

通过上述步骤，卡片分类法可以作为一种有效的工具，帮助你在设计交互文档时创建更直观、更用户中心的信息架构。#线框图Wireframes设计技巧

2线框图的作用与优势

在设计交互文档的过程中，线框图（Wireframes）充当了链接概念设计与高保真原型（Mockups）的桥梁，它是一种简约的视觉表现形式，专注于界面布局和功能区域。线框图的主要优势在于其能够快速迭代和低成本测试设计概念，帮助设计团队在进入详细视觉设计阶段前，优化用户体验的结构和逻辑。

2.1作用

界面布局定义：线框图用于确定屏幕上的元素如何布局，包括主要功能区域、导航、按钮、文本框等。

功能区域划分：通过线框图，设计师可以明确哪些区域将用于展示信息，哪些区域将用于用户交互，以及信息流如何在页面间流动。

早期反馈收集：由于线框图的简洁特性，它们可以快速生成并分享给团队成员或目标用户，收集反馈以进行迭代和优化。

设计沟通工具：线框图简化了设计沟通，使开发人员、项目经理和利益相关者能够快速理解设计意图，减少后期的设计变更。

2.2优势

快速迭代：线框图的简单性使得设计调整迅速且成本低，可以有效地测试和验证各种设计假设。

集中注意力于功能：线框图强调功能而非视觉风格，有助于团队在设计的早期阶段专注于功能布局和用户体验。

促进团队协作：它作为共同语言，帮助跨学科团队成员理解设计决策，促进更有效的协作和讨论。

用户反馈：线框图是向用户展示初步设计思想的理想方式，可从目标用户中获得宝贵的反馈，确保设计更贴近用户需求。

3使用工具进行线框图设计

在设计线框图时，选择合适的工具至关重要，以确保设计效率和协作的流畅性。以下是一些广泛使用的线框图设计工具及其特点：

3.1工具选择

Sketch：以简洁的界面和强大的矢量编辑功能而闻名，尤其适合UI/UX设计师。Sketch支持团队协作，拥有丰富的插件生态。

AdobeXD：提供一站式设计与原型制作解决方案，AdobeXD的实时协作功能在多人团队中非常实用。

Figma：作为一款在线设计工具，Figm