交互设计的心得体会

把技能分成两类，一类是职业技能，这部分技能高度专业化，每一个职业所需要的能力都会有所不同，当然也会有交集；另一类是通用技能，这部分技能会贯穿你的整个职业生涯，也适合任何一个职业，属于所有人必备的技能。 

案例来源于

https://www.paulineosmont.com/

作为一名交互设计师，我一直在研究如何为用户提供更好的用户体验。我认为，交互设计是网站、应用和其他数字产品中最重要的方面之一。这篇文章旨在分享我的交互设计经验和心得。

首先，我们需要明确，什么是交互设计？交互设计涵盖了整个产品的用户体验，包括从界面设计到用户操作流程。交互设计师的角色是让用户能够轻松、自然地与数字产品进行交互，同时还要考虑用户习惯和需求。

交互设计需要从用户的角度出发。要深入理解用户，掌握他们的喜好和习惯。了解用户的期望和心态，可以避免在设计过程中的疏漏和错误。交互设计师可以与用户访谈或者进行问卷调查，以了解他们对产品的使用场景和期望。这些数据可以帮助交互设计师制定更好的设计方案，提升产品的用户体验。

其次，在交互设计中，设计语言和界面元素的排布都非常重要。设计语言包括如何利用颜色、形状和动画来吸引用户视线和提高交互的可视性。界面元素的排布、尺寸、间距和形状等都是需要仔细考虑的要素。例如，一个界面中过于繁琐的按键和区域可能会使用户感到迷惑和挫败。此时，设计师需要依据实际情况，删减一些不必要的元素，让界面更加优化和简明。

另外，在交互设计中，动画设计也是非常重要的一个方面。动画的存在不仅可以让用户感到界面更加灵活，而且还可以加强用户体验。比如，为了强调某一操作，动画可以让用户更加明确地理解自己的行为和操作结果。 适当的交互动效可以帮助增强用户的互动体验和流畅度，用户体验的重要体现还得强调操作的可参考性和预判性。

最后，交互设计还需要考虑到不同设备的格式、屏幕大小和根据地理位置不同情况的用户体验。例如，在小屏幕上，界面元素需要被压缩或缩小到合适的尺寸，并需要适当的调整窗口位置和顺序，从而使用户的操作得到最合适的优化。根据地理位置，交互设计师可以设置相应的语言、区域和货币形式，让用户体验更加亲切和贴近生活。

总结一下，交互设计是数字产品的重要组成部分，也是产品成功与否的关键因素之一。在交互设计中，设计师需要考虑多个方面，从用户出发、设计语言、动画设计到不同设备上的表现等等。了解到用户期望和行为，可以帮助设计师更好地理解他们需要什么，做出更好的设计。在实践过程中，交互设计师需要不断优化用户体验，反复试验和修改，确保设计的可用性和前瞻性。只有通过不断的优化和迭代，我们才能做出有好的交互设计，从而提升产品的质量、生产力和用户继续使用率。

我们经常使用的交互软件是axure。

Axure RP 是一个专业的交互设计工具，旨在帮助设计师创建高质量、高效的交互设计。以下是一个简单的 Axure RP 教程，帮助你开始使用它：

**第一步：安装 Axure RP**

首先，你需要下载并安装 Axure RP。你可以从 [Axure RP 官网](https://www.axure.com/) 下载免费试用版，或者从官网购买一个授权版本。

**第二步：创建一个新项目**

打开 Axure RP，点击“新建项目”，输入项目名称和描述，选择一个模版，然后点击“创建”按钮。

**第三步：创建页面和组件**

在创建好的项目中，你可以创建页面和组件。在 Axure RP 中，页面和组件是基本的元素，你可以通过页面和组件来构建你的交互设计。

要创建一个新页面，点击左侧面板的“页面”按钮，输入页面名称，然后点击“创建”。在页面上，你可以添加各种元素，如按钮、文本框、下拉菜单等。

要创建一个新组件，点击左侧面板的“组件”按钮，选择你需要创建的组件类型，然后在组件面板上创建。组件可以重复使用，让你的设计变得更加高效。

**第四步：创建交互动作**

在 Axure RP 中，你可以创建各种交互动作，如单击、双击、拖拽等。要创建一个新的交互动作，选择你想要创建交互的元素，然后点击“交互”按钮。在交互面板上，你可以选择动作类型，然后配置你需要的参数。

**第五步：测试你的交互设计**

在 Axure RP 中，你可以使用“预览”功能来测试你的交互设计。点击“预览”按钮，你可以查看你的交互设计，并测试你的交互动作是否正常工作。

以上是一个简单的 Axure RP 教程，使用它可以帮助你创建高质量、高效的交互设计。 Axure RP 是一个非常强大的工具，可以让你创建复杂的交互设计。如果你想深入了解它的功能和用法，建议阅读它的官方文档。

下面是针对 Axure RP 软件的交互设计简单教程：

**第一步：创建一个新文件**

打开 Axure RP，创建一个新文件。你需要选择一个适合你的模板，来满足你的设计需求。

**第二步：绘制页面**

开始进行页面设计。画布面板是你绘制界面的区域。你可以在画布上用鼠标或者快捷键来绘制不同样式的页面。

**第三步：添加控件和交互元素**

在 Axure RP 中，有很多组件和生成工具可以帮助你创建不同的控件和交互元素。组件是一些模板，用来创建页面上的各个组成部分，如按钮、文本框、菜单等。生成工具可以自动创建元素、图标、面板和交互动作，使你的设计变得更容易。

**第四步：创建交互链**

交互链是指，在一个 Axure RP 文件中，点击一个特定的按钮会触发一系列的交互事件。在 Axure RP 中，你可以使用“链接”和“交互”工具来创建交互链。例如，当点击一个按钮时，可以链接到另一个页面或者创建一个弹出窗口。

**第五步：模拟、改进和校验**

当你完成一个简单的 Axure RP 文件后，可以通过“模拟”这个交互链，检查文件中的的每个交互和元素是否正常工作。通过模拟，你可以发现并改进一些潜在问题。同时，你也可以充分利用 Axure RP 一些内置的校验工具，完成标准化的 UI 设计。

上述是简单的 Axure RP 交互设计教程，根据你的需要，你可以选择不同的 Axure RP 功能，来创建交互链和元素库。Axure RP 是一个十分强大的工具，使用它按照这个教程，你可以完成许多的高质量交互设计。

交互设计的难点有很多，以下是其中一个例子：

用户体验的平衡
在设计过程中，需要平衡用户体验和需求，找到一种既符合用户需求又易于使用的设计。例如，一个复杂但功能齐全的应用程序可能能够满足所有用户的需求，但一些用户可能会因为使用起来太复杂而选择其他应用程序。因此，设计师要在提供足够的功能的同时，确保设计的简单易用，令用户在使用过程中感到舒适和高效。但在实践中，达到这种平衡可能需要很多次的试验和错误，需要不断地对交互设计进行修改和优化。

作为一个交互设计师，我曾

经使用Axure软件进行交互设计。以下是我的一些心得体会：

首先，Axure是一个非常强大的交互设计工具。它可以让你快速地设计和构建交互原型，并与团队成员和利益相关者共享你的设计。Axure还提供了很多功能，例如创建各种交互组件、制作动画、设置响应式布局等。

其次，Axure的在线教程非常实用，能够帮助你快速入门。在学习Axure时，我发现最好的方法是完成一些练习项目，例如创建一个简单的网站或移动应用程序。通过这些练习，我学会了如何制作交互组件、使用动画效果、设置页面转换等。

但是，Axure也存在一些不足之处。首先，Axure的学习曲线相对较长。初学者需要花费一些时间来掌握Axure的各种功能和工具。其次，有些功能在使用上有些麻烦或者缺乏灵活性。例如，有时需要制作自定义的组件，但Axure无法完全满足你的要求。

在总体上，我认为Axure是一个非常有用和实用的交互设计工具。使用Axure进行交互设计，需要认真思考用户需求和设计目标，并且仔细分析你的设计，并进行反复测试和修改。虽然有些功能不太完美，但只要我们充分利用它的优点和特点，就可以得到良好的交互设计成果。

交互设计的难点有很多，以下是其中一个例子：

用户体验的平衡
在设计过程中，需要平衡用户体验和需求，找到一种既符合用户需求又易于使用的设计。例如，一个复杂但功能齐全的应用程序可能能够满足所有用户的需求，但一些用户可能会因为使用起来太复杂而选择其他应用程序。因此，设计师要在提供足够的功能的同时，确保设计的简单易用，令用户在使用过程中感到舒适和高效。但在实践中，达到这种平衡可能需要很多次的试验和错误，需要不断地对交互设计进行修改和优化。

在使用Axure进行交互设计时，以下是一个常见的难点：

复杂交互页面的制作
在制作复杂的交互页面时，设计师需要处理多种交互行为和状态，并且需要使用多个组件和事件来实现相应的功能。这就需要设计师在Axure中使用各种交互组件并设置各种参数来完成所需要的交互行为。此外，由于Axure本身的复杂性，出现错误或者一些意料之外的问题也是常见的。

为了克服这个难点，首先需要仔细分析用户需求，设计合理的交互行为和状态转换。其次，需要在Axure中熟练掌握各种组件和事件的使用方法，并且注意设置不同组件之间的关联和约束条件。最后，在测试和迭代设计时，需要仔细检查每一个交互细节，并进行修改和优化，以保证交互页面的稳定性和流畅性。

总之，在使用Axure进行交互设计时，需要通过深入了解用户需求和Axure的各种组件和功能来克服交互设计的难点，以确保设计出具备高用户体验和稳定性的交互页面。

以下是几种常用于交互设计的工具、软件和网站：

1. Adobe XD：Adobe XD是一款专业的交互设计工具，能够帮助设计师快速创建交互原型并设计App、网站和用户界面。

2. Figma：Figma是一款基于云端的交互设计工具，支持多人协作和Chrome浏览器插件。其具有多种交互设计功能和工具，例如向量绘图、动画制作和实时协作等。

figma的官网

Figma的官网是https://www.figma.com。在这个网站上，你可以找到Figma的产品介绍、功能介绍、定价计划和帮助中心，以及登录自己的Figma账户开始使用Figma。此外，Figma还提供免费的学生和教育机构账户，并且支持中文界面，方便使用者在国内使用。

3. Axure：Axure是一款专业的线框和交互设计工具，可以帮助设计师创建高保真度的交互原型，并在需求评审、用户测试和优化设计等阶段得到广泛的应用。

Axure的官网是https://www.axure.com/。在这个网站上，你可以了解Axure的最新动态、产品功能、解决方案和客户案例等信息。如果你还没有使用过Axure，你可以在这里下载并尝试Axure的免费版或付费版。此外，Axure还提供在线帮助文档、社区论坛和专业的技术支持服务，以帮助用户更好地使用Axure进行交互设计。

4. Sketch：Sketch是一款流行的Mac应用程序，可用于绘制和设计向量图形和用户界面。它还包含许多有用的插件和工具，例如zeplin、Anima等，以帮助进行更便捷的交互设计。

Sketch的官网是https://www.sketch.com。在这个网站上，你可以找到Sketch的产品介绍、功能介绍、官方插件库和帮助中心，以及Sketch的定价和许可证选项。如果你还没有使用过Sketch，你可以在这里下载并尝试Sketch的7天免费试用版或付费版。此外，Sketch还提供丰富的社区资源、视频教程和设计资源库，以帮助用户更加容易地使用和学习Sketch。

5. InVision：InVision是一款基于云端的交互设计和团队协作工具，支持Prototyping、动画、设计共享、用户测试和User-Story Mapping 等功能。

InVision的官网是https://www.invisionapp.com。在这个网站上，你可以了解到InVision Studio的最新动态、产品功能、解决方案和客户案例等内容。登录或注册InVision账户之后，你还可以访问InVision Cloud，创建和管理设计项目、共享资源和协作反馈。除了InVision Studio，这个网站还提供其他产品和服务，如InVision Design System Manager、InVision Freehand以及InVision DSM。此外，InVision还提供丰富的在线教育资源和用户社区，以帮助设计师更好地使用InVision进行项目管理和协作设计。

6. UXPin：UXPin是一款基于云端的交互设计和可用性测试工具，功能强大，它可以帮助设计团队在数字产品设计和开发过程中保持一致性，并快速生成原型和自动化文档。

UXPin的官网是https://www.uxpin.com/。在这个网站上，你可以找到UXPin的产品介绍、功能介绍和定价计划，还可以登录或注册账户开始使用UXPin。UXPin是一款功能强大的设计工具，支持构建交互式原型和设计系统，使设计师和团队可以更好地协作和共享设计资源。此外，UXPin还提供在线设计资源库和社区，以及丰富的在线教育资源，供用户学习和提高设计技能。

7. Wireframe.cc：Wireframe.cc是一款轻量级的线框工具，它可以帮助设计师快速绘制和共享线框图，并支持多设备、多分辨率预览。

Wireframe.cc的官网是https://wireframe.cc/。这是一个在线快速绘制线框图的工具，因为它界面简单易用，被广泛地使用。在这个网站上，你可以创建和保存你的线框图草图，分享并协作设计，还可以将你的线框图导出为PNG文件。除了免费版之外，Wireframe.cc还提供付费版，可以解锁更多的高级功能和项目管理工具，帮助个人用户和团队更好地组织和管理设计工作。

8. Balsamiq：Balsamiq是一款易于上手的交互设计工具，主要用于快速绘制草图和草稿，帮助设计师快速验证自己想法的正确性，并不断优化设计。

Balsamiq的官网是https://balsamiq.com/。在这个网站上，你可以找到Balsamiq Mockups的产品介绍、功能介绍、定价和试用版等信息。Balsamiq Mockups是一款非常流行的低保真度的界面线框设计工具，它可以帮助设计师和团队快速构建原型和交互式应用设计，并提供易于使用的用户界面和广泛的线框图符号库等功能。此外，Balsamiq的官网还提供在线教育资源、设计工具和插件库、用户社区等服务，以帮助用户更加高效地使用Balsamiq进行设计工作。

总之，以上几款工具、软件和网站都是应用于交互设计领域的常用工具，以不同的方式和功能支持设计师完成用户界面设计和交互原型制作。

误区 1-交互设计门槛很高

交互设计介于产品经理与 UI 设计师之间。是为了顺应时代发展划分出来的岗位需求，虽然已经出现了很多年，但目前来看，交互设计在一些中小型公司仍然是比较模糊的领域。甚至很多从业者把交互设计交给产品经理或 UI 设计师来实现。这种想法非常浅显，而且容易带来系列的体验问题。

很多人在步入新领域的时候，都会寻找对应领域所需要的知识结构、能力模型…我和身边的朋友经常会聊到这些，试图从中总结出一个好的交互设计需要满足哪些特质。沟通能力、人机科学、心理学、认知科学…但很多初学者看到这些就放弃了，它给人一种学习曲线很陡峭的感觉。

在我看来，交互设计师的专业程度很大一部分取决于对用户的了解深度，而非是专业知识。所以，对于初学者来说，只需要具备一个必要的入门特质——同理心（empathy），这是一种理解或者感受他人（用户）的能力。在生活中，如果你觉得自己是一个比较能站在对方角度思考的人，那么恭喜你，你已经具备交互设计师的特质了。但是同理心并不是一件很容易的事情，你需要它贯彻交互工作的始终，“以用户为中心进行设计”并不是一句slogan，始终站在用户角度思考问题，这非常重要！！！

误区 2-交互设计工作是画原型图

原型图和流程图是交互设计师的主要产出文档之一，但是交互设计需要做的不仅仅是产出这些文档，甚至很多时候，交互仅仅需要提供建议。UX 设计指的是设计用户体验的过程。核心的焦点在于设计用户行为，用户行为不仅仅体现在原型图上点击或滑动某个地方，而是尝试引导用户诱发或者推动响应。

很多从业者错误的认为交互设计就是画原型图和流程图，这种想法往往会把注意力集中在用户要完成的任务上，而忽略了体验过程中是否有足够的关注。完整的用户行为，应该包括预知、反馈、返回三个阶段，交互之前有预知，交互之中有反馈，交互之后有返回，这三点支撑起交互基本的可用性。

1. 交互之前有预知

用户在使用产品进行交互前，是否能够清晰感知到需要的信息以及下一步的行为？《About Face 4 : 交互设计精髓》一书中提出，用户对于一件事情的心智是一个圆，我们设计出来的东西越趋于这个圆形，用户对设计就会越满意。所以在进行设计之前，多问自己一些问题。用户来这里的动机是什么？他们点击这个东西的时候会有什么预期？他们是否对未学习过的东西有一定了解?…

2. 交互之中有反馈

系统应该让用户时刻清楚当前发生了什么事情，也就是快速的让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解。比如加载页面的设计中，我们会通过进度条或者场景插画的方式预知用户页面的进度，从而打消用户等待过程中的焦虑。

3. 交互之后有返回

可逆性是交互设计中重要的一环，用户不可能百分百的按照我们设计的路径去使用产品，事实上，用户常常会误触到某些功能，即使在线性的流程中，我们也应该让用户可以方便的退出，始终让用户保持可控的状态。比如微信聊天中的撤回功能，在发送错误信息后，可以通过长按这条消息或者表情，在选择框中操作撤回。

举个例子，「饿了么」在选购商品的时候，交互前通过按钮置灰预知用户不可点击，交互中通过动效、Toast 给予用户操作反馈，交互后可通过外卖箱对已选商品进行删减或清空，保证产品可逆性。

误区 3-用户的想法都是对的

为了贯彻“以用户为中心”的设计原则，很多设计师会选择直接听取用户的设计建议，最终导致产品越做越复杂，最后造成体验上的损失。实际上，UX 是一项技能，而不是一种天赋。这意味着大部分用户是无法帮你进行设计的。而且当你面临未知的挑战时，不能一味听从用户的想法。你可以听取用户的意见，但不要他们说什么你就干什么。听听用户是怎么想的，看看他们是如何尝试完成某项操作的，了解他们是怎样在你的设计中迷失的，以及为什么会这样。然后，去寻找这些问题的解决方案。

福特汽车创始人亨利福特说过一句名言：在汽车出现之前，去问顾客想要什么，他们可能会说：一匹更快的马。”如果我们一味的听取用户的想法，那我们只能在解决方案上做加法。如果要找到完美的解决办法，我们必须学会找到问题的本质。

误区 4-交互不用考虑视觉

这是交互设计师经常忽略的，把线框图当作速成且粗略的草图，或者把它当成设计的第一步，只展示流程如何运作，却忽略了是否能够更好的运作。交互设计师在组织框架时，除了保证逻辑清晰外，视觉也是构成体验的一部分。交互设计师虽然不直接负责视觉效果，但需要通过元素之间的结构关联和强弱对比，将有效的信息传递给下游。在必要的情况下，也可以通过 1-2 种颜色来表达你的想法～具体可以分为视觉重量、视觉关联两个方面：

1. 视觉重量

用户不可能像机器人一样把页面所呈现的内容都扫描一遍，如果你想要用户着重关注某些内容，你需要调整不同信息的视觉重量，以达到主、次、先、后的顺序。当你不断的使用排版来突出重要文字、用特定的颜色强调按钮，并且给重要内容以更多的视觉重量时，就创造出了视觉层级。用户的眼睛就可以从一个重要的地方跳到另一个重要的地方。交互设计师在传递技术文档时要体现出这一点。

2. 视觉关联

交互设计师除了注重逻辑关联外，视觉关联也是组织信息框架时重要的一点，在用户没有了解你的页面之前，会下意识的通过眼睛划分哪些信息都有什么关联，在设计中，我们通常将有关系的元素给予更强的亲密度、统一的样式，甚至通过卡片、色块的方式来划分关联。而且位置接近的元素关系越强。我们不需要像视觉设计师一样将原型图绘制的如此精细，但需要通过一定的处理方式体现出视觉的关联性。

误区 5-我觉得这样做会更好

设计师不用对 KPI 负责，但要直接对体验负责。交互设计师的工作中，自身代表的就是用户，任何时候都要避免一些主观的看法。不要你觉得，而是用户觉得。任何需求都离不开用户这一要素，不同的用户群体决定了设计上的不同策略。如果你想设计出用户满意的 UX，在工作中需要做的第一件事就是了解用户，并且持续这一过程。

《用户体验设计-100 堂入门课》这本书中有个很有意思的观点，在了解用户之前，你需要先了解关于自己的两件事认清自己：

1. 你想要的东西对用户来说不重要

2. 你要知道什么东西对于用户而言不重要

很多设计师刚开始能做到这一点，后来慢慢陷入设计自嗨，最终导致体验受损。交互设计师要始终意识到，出色的产品设计始于用户研究，上文说到，交互设计师的专业程度很大一部分取决于对用户的了解深度，如果你不知道如何着手了解，您可以尝试了解一些用户研究方法与工具，并把他用在工作的实践中，比如：桌面调研、用户访谈、焦点小组、用户画像、故事板等。

误区 6-弹窗不能跳弹窗

弹窗对很多人来说并不陌生，我们经常在各种网站和各种 APP 中看到。弹出式设计被评为“历史上最糟糕的设计体验”。所以”弹窗不能跳弹窗“这句话，如铁训般的规则深入人心。

在体验设计的层面上，普遍的说法认为，一定程度上，多个弹窗会加重用户的心理负担。而且会造成用户迷失。那为什么会说弹窗不能跳弹窗是个误区呢？因为随着互联网业务深耕的发展要求，经常会遇到弹窗覆盖弹窗，浮层覆盖浮层的需求，如果我们只是以“弹窗不能跳弹窗”来否定需求，这并不是交互该做的。我们应该了解弹窗的底层体验逻辑，再探讨弹窗体验使用的合理性。

1. 弹窗层级

弹窗在层级上比操作界面更高一层，会聚焦视觉，所以弹窗覆盖弹窗的时候应该避免带给用户层级过深的感受，以此来降低带来的心理负担。比如弹窗覆盖时出现尺寸差异及较大的视觉差异。

2. 弹窗承载

弹窗的空间承载比页面要低，我见过不少的产品提出弹窗跳弹窗的需求，目的是为了希望用户在复杂操作后仍然可以留在原页面。实际上这是不对的。对于一些复杂的操作或者过载的信息，页面是比弹窗更加合适的载体，如果我们只是想用户做完这些回到原来的页面。只需要设计一个体验循环的闭环。

3. 弹窗操作

弹窗会聚焦行为，弹窗跳弹窗的情况只适用于线性的操作流程，线性的操作会使用户心理上有较强的预期，可以避免多个弹窗所带来的迷失感。

所以，一切出发点都要围绕体验及感受的合理性，如果我们设计的交互流程呈线性，且满足弹窗的承载能力。那么完全通过一定的设计技巧实现弹窗跳弹窗的交互方式。