正文

交互原型设计（交互体验设计）

发布时间：2023-04-28 13:13:17 稿源：创意岭阅读： 828

大家好！今天让创意岭的小编来大家介绍下关于交互原型设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

1、网站交互设计：线框图，原型和视觉稿的区别
2、如何用Axure快速制作APP交互原型
3、关于交互设计的反思
4、什么是交互设计？

一、网站交互设计：线框图，原型和视觉稿的区别

首先，他们都是网站的界面和交互方面的模型，但完成度各不相同。

线框图 —— 更多侧重呈现网页界面的主体结构，极易只要的页面跳转和逻辑关系。一目了然的了解网页设计的大致情况。

原型图 —— 原型添加更多的界面细节以及交互，已然是相当真实的网页设计模型，能够进行初略的产品演示和测试。

视觉图 —— 更进一步丰富视觉、细节以及交互，与最终产品十分接近，方便演示和迭代。

当然，设计师设计过程中，使用的工具也会有所不同。例如，线框图和原型图，一般原型设计工具，例如摹客Mockplus, 几分钟就能快速完成。它新出的在线全新升级版本，提供更多模板、组件、交互以及状态设计选择，高还原度原型设计，轻松打造。

二、如何用Axure快速制作APP交互原型

创建属于自己的元件库

原型制作工具的核心功能无非就是通过元件的堆砌组合，来展示产品的目标形态和效果。Axure自带的只是一些最基本的元件，而网上的元件库庞杂混

乱，很难找到满足需求并且称心的元件，并且大部分都是位图格式，根本无法修改颜色宽度等数值，制作出来的交互又怎么能达到精美的水准要求呢？

还好Axure提供了「创建部件库」的功能，能够支持我们制作一份属于自己的元件库。我们可以通过软件自带的基本元件搭配组合出我们常用的图标、控件，制作完成后，每次应用的时候还能根据实际情况调整颜色、大小、线宽的数值，从而才能实现交互稿统一完美的风格。

比如，APP中经常会用到一些主页、分享、搜索、消息....各种图标，或者我们每次遇到喜欢的图标，都可以用Axure画出来，以备不时之需。下边以图标为例讲一下制作元件库的具体步骤。

一、创建元件库“绿色文件”

打开Axure，在元件库面板「三条横线」按钮下拉选项中找到「创建部件库」功能，点击会弹出一个另存为对话框，这里需要选择元件库文件的存储位置，并需要输入元件库的名称。

此时，我们可以看到，文件的后缀名为 .rplib，这个就是元件库的格式，而不同于创作交互原型时正常Axure文件的.rp格式。

输入文件名称和存储位置之后，点击保存，Axure将重新打开一个新页面进行元件的编辑。并且我们可以看到，新页面跟我们平时创造.rp正常文件的

页面一模一样，但不要混淆，此时页面编辑的是我们在正常.rp文件中需要用的基本元件。并且我们回到元件库存储的位置可以看到，元件库.rplib文件图

标为”绿色“，不同于.rp文件的蓝色。

创建好元件库得”绿色文件“后，基本准备工作已经做完，下边就进入到制作过程。

二、元件库分组

通过观察Axure默认的元件库，我们可以看到其元件库是可以按照类别进行分组的。比如默认的分成了：common、forms、flow等等，这样能更方便我们找到目标元件的位置。

同样，我们在制作元件库的时候，也可以进行分组，规则为：在页面导航面板上，所有的文件夹都是一个分组，所有没有在文件夹下的页面包括其所有子页面，都隶属与以元件库为名的分组下。

分组的规则弄明白之后，我们可以先按照自己对元件库的规划进行一个合理的分组，比如要做APP的元件库，那么我们可以分成：图标、控件、框架 3个常用分组，接下来就进入到具体元件的制作过程。

三、编辑并制作元件

我们以制作一个”我的“头像图标为例，首先在图标分组下，添加一个页面并命名为”我的“，双击进入到元件编辑页面，编辑操作就跟我们平时制作正常

的.rp文件一模一样。我们我们可以参考一些app中常常采用的”我的“图标样式，然后用Axure默认的基本形状元件，比如矩形、横线、圆形等，组合拼

凑成最终比较理想的样子。

首先我们要明确，Axure中没有类似PS中的布尔运算（能够自由的对多个形状进行编辑，比如合并、相交、减去顶层等），所以会给我们制作元件，尤

其是图标带来一定局限性，但好在交互原型并不要求苛刻的细节实现，只要我们能够很清楚的表示出产品形态，有比较整体的风格就可以了。并且我们用Axure

基本形状自己勾画出来的图标，能很方便的调整颜色大小等，可以适用不同的交互文件，这就是从网上找现成的位图图标很难达到的便利性。

回到“我的”图标制作，如图所示，我一共用到了三个基本形状来进行拼凑，最终组合成了我们经常能看到的一个图标样式，并且一眼就能明白它的含义。虽然没有更多的细节实现，但对于交互原型稿来说已经完全够用，关键是颜色大小等可以很灵活的进行修改。

按照这个思路，我们可以制作更多的图标出来，当然还可以制作一些常用控件比如按钮、appbar、搜索栏、图标占位符等等。如下图，是我在画「读读日报」原型图时制作的一个元件库：

元件库制作完成之后，然后就进入到最后一个步骤。

四、载入自制元件库并使用

元件库制作完成保存在自己常用的资源文件夹中。打开一个正常的.rp文件，同样是在元件库面板「三条横线」按钮下拉选项中找到「载入部件库」功能，然后找到制作完成的元件库文件“绿色图标”载入。

载入之后，我们就可以在「选择元件库」下拉选项中，找到刚刚载入的元件库并选中，然后我们就可以像使用软件自带的元件一样使用我们自制的元件库了。

怎么样，看到这里你应该学会了如何自制一个元件库了吧，希望你会花时间动手做一个。当然除了创建部件库，Axure有很多技巧都需要掌握，比如母版的功能。

学会善用母版

在产品的设计过程中，主导航往往出现在多个页面，比如APP的底部tab栏。当然不仅仅是导航，当我们频繁使用任何一组控件的时候，希望你不是一直都在复制和粘贴，永远记住，创建一个母版可能是更好的选择。

使用母版的便利性不单单体现在能够快速的使用一组控件，尤其是在设计后期，当我们需要修改某些基本控件的时候，母版带来的修改效率一定会让你深深的爱上这个功能，欲罢不能。

除了学会使用母版，更要学会善用母版。同样有一点希望能记住，不要把太大的组合对象变成母版。因为越是大的组合对象，越是有可能需要在母版的很多地

方做出修改。此时把一些母版和另外一个母版合并起来一般会是更好的办法，这样对母版的修改会更加的灵活，比如下图，将产品基本信息和可能购买状态分开成两

个母版，组合在一起成为产品的完整页面

制定一套自己的交互风格

学会了创建自己的元件库，也懂得了善用母版，当然还有其他很多Axure软件的使用技巧。应该就可以很快速的完成一份交互原型稿了吧，可是又该如何保证交付稿有统一的风格，达到较高的目标水准呢？

首先，我们要熟悉APP的设计规范，符合Android或者iOS的设计理念，对于一些常规的控件设计规则有一定的了解。这样设计出来的产品才能符

合这个平台的特性，并且基于大家对相关平台的一些固有认知，很容易能够达成共识。这也是交互原型作为一个沟通交付物应该达成的目标。

基于对APP设计规范的熟悉，同时在制作过程中，要根据使用场景以及自己的习惯来制定一套自己的交互风格。比如可以定义好APP原型中，正文字体采

用微软雅黑颜色#333333 13字号、提示文字为微软雅黑颜色#999999

10字号、固定的appbar行高为40px，内容据左侧屏幕边缘10px距离......

当然某些规范，比如字体也可以当成一个字体元件，放到我们自制的元件库中，总之要根据自己的情况灵活的运用。有了一套风格之后，加上创建的元件库随意修改颜色大小等，我相信制作出来的交互原型肯定是协调统一的整体。

读读日报原型制作

理论方法掌握了，需要实践的锻炼才能更好的吸收领悟。我参照「读读日报」iOS版，对主要的一些页面画了一些交互原型。基本过程和思路就是按照本文所提到的这些内容。

为了更有形象感，从网上找来一个iPhone手机的边框，并且创建自己的部件库，绘制了一些常用的图标和控件。然后设定了整体的风格，制作过程中也用到了几个母版提高效率，同时可以使用辅助线帮助自己保证部件的对齐、平均分布等，进而提高布局的美感。

总结

末尾再次抛出我开篇提到的，如何用Axure快速制作APP交互原型的方法论：制作属于自己的元件库并要学会善用母版，熟悉APP设计规范并要有自己一套交互风格样式。

三、关于交互设计的反思

自从进网宿科技的大半年中，对于当前从事的交互设计一岗有很深的体会和反思；这颠覆了我之前在外包公司为客户定制产品工作经验的思维和习惯；然而对于如何成为一名合格交互设计师呢？在这条路上，我一直在反思着...

（以下反思的几点，是这段时间自己学习和总结）

1、项目接入的时候，不要着急去画原型

很多项目，在需求方提出需要UED的设计师支持原型设计的时候，可能都还没有想的很清楚具体的细节。作为UE的我们需要的是帮上游梳理需求时候：要明确的知道产品的需求背景？需要实现怎样的功能？这样的功能是服务于哪些用户的？用户的行为习惯是怎样的？在需求评审会的时候，经常看到如下的的情况

这个时候，作为交互设计师的我们就要仔细挖掘深入的需求，设计出实际符合产品的设计；

这个阶段最好也有一个产出物：信息架构（通过xmind or justmind or visio等工具，把需求理清楚，把自己想做的事情理清楚）

2、挖透需求，接下来是要搭建设计架构

好的设计架构，是至关重要的；优秀的设计架构能帮助解决用户实际的问题，使用户尽快完成自己的目标，定位到自己想要的位置；就如同愤怒的小鸟游戏一样，一定要有轨迹才能砸中目标；越优秀的设计架构让减少用户的思考，画好轨迹，打中目标

3、进行原型详细交互设计

原型详情交互设计，对于同一个东西可能有不同展示形式不同的方案。也许当页面做出来的时候，很多人看着界面，可能心里在想这样的界面就是摆放位置，这样点击交互如此简单。而对于让大家拥有这样的感觉，ue设计师在设计的时候；时刻要先想着有米有不同方案，不同设计交互方案是不是最符合用户；是否可以在此设计上减少用户的操作点击次数，减少用户的思考；话说好的设计，应该是无思维负荷；如图同样的需求，却有不一样的展示交互方式；当然每种交互方式适用不同的场景

4、反复调试，修改细节，编写交互说明

也许很多人都会说，交互设计简单表达交互方式就好，但是真正高手的交互设计师的原型，会让你错觉是不是系统已经实现。原型在我们手上需要经过不断的调试、不断修改细节，保质保量。而编写交互说明，会让你慢慢的发现一些你没有看到想到的问题。人无完人，再缜密的思维可能也会考虑不周全的时候；在编写交互说明的时候，可能会有发现一些更好的思路，更加能符合用户的使用习惯；设计出符合用户的习惯

5、done

后面工作中，其实我发现很多时候，你不单单要考虑用户，而且要考虑公司战略。设计的产品也要平衡产品、设计、开发的一些实际问题；找到平衡点，去做产品，去寻找最佳路径

四、什么是交互设计？

什么是交互设计？交互设计其实是设计可交互产品，来帮助人们在日常工作生活中的沟通和互动方式。在本文中，我们将解释交互设计是什么，介绍一些有用的交互设计模型，并简要描述交互设计师通常做什么。

对交互设计的理解

交互设计可以用简单的术语来理解：它是用户和产品之间交互的设计。大多数情况下，当人们谈论交互设计时，他们讨论的产品往往是应用程序或网站等产品。交互设计的目的是提供给用户具有可用性的产品，以帮助用户实现其目标。

这个定义听起来很广泛，那是因为交互设计囊括了相当多的内容。交互设计通常涉及美学设计，动态设计，声音设计，空间设计等内容。当然，这些领域会交叠融合，因此我们可以说交互设计是一个跨学科领域的融合。

什么是用户体验设计（UX）？

大家可能经常听到用户体验设计这个名词，用户体验设计（UX，UXD，UED或XD）是通过提高与产品交互中提供的可用性，实用性和趣味性来提高用户对产品满意度的过程。

如果我们说交互设计依赖于设计师的设计思想和创造力，那么UX就更客观，而且它总是要求设计师将用户牢记在心。

交互设计师可以更像艺术家，他们可以创建新颖和开拓性的交互方法，而无需过多关注用户体验。虽然UX设计师应该更像科学家，但他们应该尽可能客观，尊重数据并从用户的角度考虑。

你可能已经意识到，交互设计和UX设计之间存在巨大的重叠。毕竟，UX设计是关于塑造使用产品的体验，并且该体验的大部分涉及用户和产品之间的一些交互。但是UX设计不仅仅是交互设计：它还涉及用户研究（找出产品潜在的目标用户），建立用户画像（例如了解用户因为什么原因，在什么条件下，他们会使用该产品产品），并在设计过程中执行用户测试和可用性测试等。

什么是人机交互（HCI）？

HCI是一门专注于人类使用的交互式计算系统的设计。它研究的主要内容是如何综合使用计算机及设计基础，来更好地满足用户对于计算机交互界面易用性和实用性的需求。它涉及到多个学科基础与理论，其中包括：机器方面（计算机图形，操作系统，程序设计语言）和人因方面（工业设计，社会科学，认知心理学等）。

对于人机交互领域来说，它的核心有三个：人，计算机和交互。

总而言之，交互设计是一个广泛的领域，涉及到多个学科，不同的实践方法和理论。

下面这张图片较详细地描述了交互设计及其交叉学科之间错综复杂的关系。

Image from Human Computer Interaction — briefintro

交互设计师在公司里的职责是什么？

其实，不同公司对于交互设计师的岗位和职责划分是不同的。例如，如果公司足够大并且拥有巨大的资源，那么它可能为UX设计人员和交互设计人员分别提供工作。例如，在大型设计团队中，可能会有UX研究员，信息架构师，交互设计师和视觉设计师。但对于规模较小的公司和团队，大多数UX设计工作可能由1-2人完成。

交互设计师的工作内容包括哪些？

以下是交互设计人员在日常工作中处理的一些任务：

设计策略

交互设计师需要关注产品的设计策略，包括了解用户使用这款产品的目标是什么，以及用户在使用产品过程中所需完成的交互行为。在制定产品的设计策略之前，交互设计人员必须进行用户研究，以便在正式的设计工作开始之前了解用户的目标和需求。