什么是UI界面交互设计,交互设计具体指什么?
交互设计如今已是一个十分常见的问题，但许多设计者和开发者仍不知道它的具体意义。今天，北大青鸟ui培训老师将从不同于以往的方面：深入讲解能使你的网站拥有良好交互性的用户界面和设计原则。
首先，何为交互设计IxD
交互设计(即IxD)是一块发展迅速的新领域，源于一些体现设计问题的研究，后来被专业设计者鉴别和接受。
交互设计促进人与环境的交流，这里我们指的是人和网站的交流，交互设计师只要考虑用户和电脑的交互，毋须像UX设计者那样思考软件或系统所有涉及用户的方面。你也许在不同大学里听说过人机交互度——这些度基本是在IxD领域中培养的。
这样的设计师要做什么?
一个交互设计师会思考谁是产品的目标用户以及谁会使用它。用户研究者或是信息架构师会提供这些信息。在这些研究的基础上，一个交互设计师为了用户与软件交流，要耗费很长时间但要尽快地创作出这种令人称奇的交互方式。
设计师必须识别出关键交互并且画出线框图,
所以要不停地画草图。有的设计师会直接画出来，有的设计师会用软件来辅助，还有其他一些设计师会或单独或合作地创作界面。
交互设计(IxD)不断地展现出新的交互方式，因为用户总是期望网站出现新的事物。但交互设计师需要意识到这些特性会如何影响用户，然后在许多想法中选择真正要实现的和可以放一段时间的。
下面我们将会看到一些驱动交互设计的概念。
目标驱动设计
尽管IxD不需要做，但为了获得最好的设计反馈，用户研究查至关重要。用户使用软件时，一般在心里有一些目标，你的应用程序应当很好地满足这些目标。为了成功地结合设计和功能，用户研究恰恰是最重要的元素。
这是如此的重要，以至于许多用户研究员也能找到做交互设计师的工作，就是因为他们在分析用于软件的人类行为模式方面的技能。
简单化
人们不知道用户界面是什么。事实上他们也不关心。他们不知道有人在网站的背后策划着他们所见到的一切。他们只知道他们需要一个简单的网站。他们要一个易用的系统，加载/响应速度快，不要让用户思考并且不给用户伤痛的理由。
情景和模式
我们使用的一些产品通常功能设计的很明确，因此每一个人都知道怎么使用它们。拿剪刀做例子吧。一个三岁的小孩都知道怎么使用它，两个手指伸到两个环中，只有一个活动方式能使用它。没有比这更简单的了。你的网站应该向一把剪刀一样简单易用。
为什此处使用“情景”这个单词呢?因为这个词表达了一个网站或者系统背后一些列的功能。
关于模式，用户界面应当由一系列用户熟知的组件组成，如果用户想提交一个表单，他们首先会找到提交按钮。这个按钮就是个常见元素，设计者没必要在接受一个新项目时每次都重复早轮子。
有些人会说了仿照现有的模式，不重新造轮子会让人感觉没有创新性。在易用性没得到保障时讨论创新简直就是白痴。记住，易用性和创新性是两码事。
如果你想创新，你仍然需要了解已知的模式。但是，如果你追求高易用性，没有人鼓励你去重复造轮子，因为用户需要时间去适应你的轮子。
创建一个高易用的系统需要交互设计师对约定，情景和web易用性有较深的理解。
现在你了解了一些交互设计的原则，接下来让我们看看一个伟大的交互设计是如何影响用户的。
访客定位
交互设计师需要了解他们的设计面向哪些用户，因此他们能通过用户给产品做好定位。
页面上显示出用户停留的地方，这样的体验不会让用户在浏览时感到困惑。用户也能知道如何从一个页面跳转到另一个想去的页面。让用户知道当前所在的位置这是非常重要的，不要让他们陷入死胡同中。当搜索没有查询出结果，没有告诉用户下一步操作的选择，这样的交互体验是很糟糕的。
持续对话
交互设计把大量精力专注于给予用户持续的反馈。告诉用户他们做的是对还是错，即使在无意识的层面上，这也是一个受用户欢迎的元素。
你只须在用户完成动作的时候，告诉他们已经成功了。
当你在亚马逊上买一件东西时，你会在浏览器上和你的邮箱里获得一份确认书。当你通过联系表单提交邮件时，你会在页面中获得一份确认书。
这使得交互不仅仅停留于网站的浏览和特性使用，更是把交互带到了一个新的层面：它帮助用户更好地理解他们当前的状态，并把疑惑和问题减到最少，同时也去除了用户的挫败感。
思考工作流
IxD还要考虑工作流。如果你有一张注册表单，用户用它提交信息是会有什么事发生?页面会刷新吗，会跳转到首页吗，会显示确认信息吗，会跳转到登陆页面，或者同时跳转到上两个页面吗?
It’sabouthavingmanychoicesandchoosingtheonethatwillfityourusers
expectanciesbest.提及的所有元素都是网站工作流的一部分。每次交互后应该紧跟下一个符合逻辑的步骤，并且与你网站之前所创造的体验相符。
视觉层次
为了让用户照你的意思操作，你可以使用视觉层次来帮助他们。你可以使用布局、元素大小和颜色组合达到视觉突出的效果，以此来引导用户的双眼。
你也可以使用视觉层次使用户找到他们想要的东西。你想租车吗?保证你能使用视觉层次来引导用户来到“租赁”页面。
良好的线框化工具
绘制草稿和线框图是如此重要，因此我愿意向你展示一些好用的工具，这样你就能马上开始交互设计工作了。
Mockingbird
Mockingbird是一个基于web的应用，在这个网站上用户可以创建、连接、预览和分享站点或应用的框图。它的界面简洁友好，用户可以拖放元素，调整大小，甚至可以通过一个链接与同事方便共享。
因为Mockingbird是一个基于Web的应用程序，这意味着你从任何一台计算机无处不在地创建和修改你的构思。
LovelyCharts
LovelyCharts是一个在线的图表应用，它允许用户创建流程图、组织架构图、站点地图和流程框图。
该应用程序的主要特色功能是依据你所绘制的内容进行推测建议_这有助于绘图过程的简化，返回老版本和撤消更改也很容易。
Mockflow
MockFlow也是一个很好的Web应用程序，它有干净简单的组织界面和一系列广泛的功能特性。
使用起来也使用拖放，有从图表到菜单，广告和下拉菜单等内置组件。你可以上传自己的图片或选择网站提供的通用素材，所以构建框图的过程是很快的。
SimpleDiagrams
最后，北大青鸟ui培训老师提醒大家别忘了用户测试的重要性，记住创新和可用性通常会走向不通的方向。当创造神奇的交互界面的时候不断创新，专注于如何让使用它的人更加方便。
将这些牢记在心里，你会成为一个伟大的网站或应用程序交互设计师。
原型设计工具+动效制作工具+协作工具 A.原型设计工具
1.Sketch：一款强大的界面设计工具，如果你是UX或者UI设计师，那么你对Sketch一定不陌生，但只支持Mac，其他系统请绕道。
2.Mockplus：一款可以提供丰富的交互组件和页面切换功能的国产设计软件， 设计师简单点击或拖拽即可实现交互动画的添加，操作简单。
3.InVision：InVision是一款基于网页的在线原型设计和协作工具。 设计师上传已设计好的页面，为其添加热区，完成多样的原型交互动画。
B.动效制作工具AE：强大的动效视觉处理软件，可以帮助UI设计师对图像视频进行任何特效处理，是一个灵活的基于层的2D和3D后期合成软件。AE包含了上百种特效及预置动画效果，可与Premiere，Photoshop，Illustrator等软件无缝结合，创建无与伦比的视觉效果。
C.协同软件1.Zeplin：强大的协作工具
2.iDoc：iDoc操作很简单，设计师直接从Sketch/XD/PS/Axure上传制作的设计稿，前端工程师可以直接在面板右侧会直观的看到每个元素的大小，颜色，边距，甚至可以直接导出样式代码。另外，UI设计师还可以直接在UI界面上给开发人员添加注释，标记，备注等。填补了产品、开发与设计之间的沟通障碍，为设计师和开发人员节省了大量宝贵的时间。
送个福利：戳链接摹客iDoc，更快更简单的产品设计协同软件，输入升级码venus免费领取团队版。
交互设计是一种目标导向设计，所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业务目标，获得愉快的用户体验。
Ⅱ、交互设计在项目流程中的位置和任务：
项目前期的流程和节点：
职能的细化就是为了让产品在每个专业环节都做到极致，提高竞争力。如果是为了走流程，每个环节都是任务式的交付，臃肿的分工除了增加成本和拖慢项目进度，没有实际意义。所以交互设计需要做的足够好，才能将这份工作做的有意义。
Ⅲ、交互设计的具体职能：
从上图中可以看出，交互设计主要干三件事：
①定义部分需求 ②定义信息架构和操作流程 ③ 组织页面元素，制作原型demo
①定义部分需求
以前的惯性思维是需求应该由产品人员负责，设计人员只是实现和改善界面体验。而产品的真正需求不仅仅来源于业务，还包括使用者的情感需求。在情感分析方面，交互专业是具有优势的，举个例子：
一个增值服务的宣传模块，业务模型可能是这样子：
考虑到情感因素后，需求模型会不断完善：
上图仅仅是举个例子，真正的产品人员不会将业务模型想的如此简单。举这个例子就是想说明一下产品的需求设计不仅仅是业务模型，还需要考虑用户情感、用户行为和运营数据。当产品人员考虑不周全的时候，交互设计师有责任对需求进行修订和完善，这样的目标导向设计才是完整的。
②定义框架
这部分的内容属于交互设计师的核心工作内容，也就是我上一章节所讲的框架设计阶段。这个阶段的产出质量直接影响到业务目标和转化率。如果框架混乱，接下来的界面怎么优化都是无效的。这好比大型超市的走道设计，如果路线规划的不好，再多再大的指引图标都是低效的。交互设计做什么？让用户快速完成目标，提升操作效率，这才是框架设计的意义所在。
破洛洛文章简介：本章主要详述一下交互设计的职能——交互设计师具体做哪些内容？
什么是框架设计呢？这要分成两部分内容：
1.关于结构导航的设计
把我们的产品想象成一个巨大的图书馆，我们需要帮助用户（有目的性的、目的不明确的，无目的性的）寻找他们感兴趣的图书，怎么帮助用户准确的寻找完成目标任务，这就是导航设计。导航的设计任务一般在新项目或重构项目。
导航大概可以分为三种类型：结构导航、关联导航、可用性导航
在框架设计的阶段，交互设计师主要关注于结构导航的设计。
结构导航分两种：全局导航与局部导航。全局导航一般是指无联系的信息结构做的一级大分类，方便用户以最快速的方式了解整个网站有什么大概内容。而局部导航则关注于用户最方便的快捷操作和业务引导操作。
交互设计师的首要任务就是将业务内容信息组织分类，划分出主次关系，根据业务目的和用户习惯定义规划全局导航和局部导航的设计。那应该怎么规划呢？
回到第一个增值服务页面的例子（虚拟案例，非真实案例）：
将需求梳理后（怎么梳理，请google抽屉整理法），我们可以确认全局导航：
再详细规划局部导航：
局部导航的层级可以不断往下延伸，通过树形目录或面包屑的方法帮助用户浏览时不至于迷路。
2. 关于流程的设计
之前的案例我们已经基本上确认了模块需求有哪些页面，页面大概会放什么内容。但真实的用户任务并不是在一个页面上完成的，这时候我们就需要通过流程的方式把任务变得清晰和包容用户的各种误操作。
虚拟案例：
在流程的规划设计中要遵循：1.以业务目的为主要导向；2.兼容到用户的习惯；3.尽量让流程做减法，多一个流程就会丢一部分用户；4.任务是连贯和清晰的；5.考虑实现方式的复杂程度；欢迎补充…
③组织页面元素，制作原型demo
经过了需求的完善和框架的设计，之前的这些工作还是停留在抽象的想法阶段，怎么把想法转达给项目组的其他人员呢？交互还需要把想法和规划表达出来，那么最好的方式就是制作原型Demo。把Demo做出来，让产品，开发，测试直观的看到产品的雏形， 再广泛的接受意见，对原型进行不断的修正，改进，做简单的用户测试继续挖掘情感需求。
那么怎么去组织页面元素，制作原型Demo？哪些表现层面是交互设计师该重点表达的内容呢？原型的制作又有哪些章法可循呢？这个。.还是等下一个章节再讲吧！
一般来说，UI和UX都会用到这些工具
1. Mason
现如今，视觉稿（Mockup）和原型（Prototype）是网页和 APP 设计过程中最常用的方法。两种方式都很有效，不过也都可能会在时间和花销上对整个项目产生压力，影响团队和项目的整体推进，尤其是在时间和精力都非常有限而项目又非常复杂的情况下。
Mason 提供了一个更好的解决方案，它让你无需设计线框图、原型和视觉稿，而直接拿现成的组件来编辑和设计，并且确保最终输出的产品既具备功能，也是像素完美的，最后通过 Mason 的平台进行部署，甚至你都不需要有代码编写的经验。
Mason 的设计方法看起来很激进，但是实际上非常的易用。无论是调整还是维护，Mason 都能确保控件和元素都很容易处理。在 Mason 中修改、发布，然后就能正常使用。无需亲手编写代码，诸如注册、登录等各种常见的功能都能够正常输出使用。
这款工具并不会限制你将网站投放到特定的平台或者托管环境下，你可以在你最熟悉的服务器或者服务商那边部署。这可以大幅度节省管理费和时间，并且你会发现团队协作更加高效了。
2.摹客
这款国产的工具快速易用，Sketch / PS / XD / Figma / Axure / Mockplus设计稿一键上传 ， 设计评审讨论 ， 自动标注一键生成，手动标注自由发挥 。
1. 自动标注：
鼠标hover图层即可自动生成标注，一键转换为百分比标注，还可以放大镜查看细微标注。
2. 手动标注：
文字、坐标、颜色、尺寸、区域5种工具自由选择，信息传达更准确。
-用文字工具添加备注说明；
-用坐标工具添加位置信息；
-用颜色工具吸取图层，色值智能生成；
-用线段工具标注尺寸，数值自动生成；
-用区域工具标注局部图层，宽、高自动生成。
3. 单位自由转换：
支持iOS的pt，Android的dp，Web的rem，还可以保留0-3位小数，标注更自由。
4. 完整的标注属性：尺寸、边距、不透明度、字体大小、字重、行高、字间距等。相关属性一键复制即可使用。
除了智能的标注方式，摹客的切图、交互、全貌画板、文档管理等功能也很实用。最值得一提的是，摹客基础功能完全免费。
3. Overflow
设计师讲述故事最有效的办法之一，是将故事中的节点连在一起，将用户历程线性地呈现出来。这样的方式会让访客更好的理解他们所看到的内容，同时能够更加专注于细节的呈现，并且构建有效的反馈机制。
作为世界上第一个为设计师量身定制的用户流程图工具，Overflow 可以帮助设计师更好地讲述故事。它为设计师提供了一种全新的方式来更好的呈现作品，讲述故事，以交互式的流程同用户进行沟通，吸引用户的注意力。
Overflow 是一款跨平台的工具，可以与目前最流行的设计工具无缝地集成起来，允许设计师在同一个平台上完成设计、展示、共享和打印他们的用户流程。
4. UXPin
UXPin 可能是目前对于设计团队来说最理想的快速原型工具，尤其是当产品的 UX 设计和研发高度依赖快速反馈循环机制的时候。UXPin 可以让设计团队在向开发交付原型之前，充分地进行设计、共享和测试。
开发人员所需要的数据，实际上在每个项目设计完成之时，就会自动生成。所以，在将设计交付给开发人员之前，甚至可以使用检测工具，验证一下产品的部署是否和设计元素相互匹配。
UXPin 还提供一个完整的设计系统解决方案，帮助你保持整个产品的 UI 元素的一致性。而每个产品的 UI 组件都可以使用一段代码记录下来，因此可以更加轻松快速的扩展产品的功能。
5. Creately
UI/UX 设计当然不仅仅是线框图和视觉稿，它是动态的，系统化的，而这也是 Creately 这款工具的价值所在。这款图标工具适合生成工作流程，支持不同的图表类型，包括流程图、思维导图、UML 图标、线框图等。它所提供的图表功能和协同工作的功能，可以帮助设计师完成一半以上的工作。
使用 Creately 来创建图表，可以轻松创建出足够漂亮的图表，其中配备的1000多个专业的设计图表模板，可以快速地完成各式各样的 UX 设计项目。
6. PowerMockup
有许多 UX 设计师会使用 PowerPoint 来构建交互式原型，有了 PowerMockup 之后，你再也不需要寻找其他的工具来辅助你的工作了，它就可以帮你创建高效可共享的交互式原型。
在构建原型的时候，只需要从 PowerMockup 不断增长的资源库找到对应的形状或者设计元素，拖拽到 PowerPoint 当中，然后进行设计即可。为了实现互动，你所需要调用的也无非是 PowerPoint 当中的幻灯片和动画功能，很简单。
7. Visual Inspector
Visual Inspector 让设计师、开发者和负责维护的人员能够实时地在网站中检查和解决各种 UI 问题，并且同其他的工作人员随时共享信息。
这款工具不需要你懂得代码，只需要几秒钟就可以启用 UI 工具，并且几乎可以任何类型的网站（使用 HTML 代码，或者 WordPress 系统的）进行协同工作。这款工具不是免费的，终身授权的版本只需要付费49美元即可。
8. Fluid UI
Fluid UI 是一款可以用来设计线框图、原型图和视觉稿的综合性工具，它还为项目经理和分布式设计团队提供了非常完善的协作功能。它拥有非常全面的组件库，横跨桌面端、iOS 和 Android 等主流的、必须的平台。
UI交互设计到底到底是什么？我们常常听说UI设计，交互设计，那UI交互设计又是什么呢？难道是两者的结合？作为一名初入设计行业的或者对设计有一定热忱的人来说，搞清不同设计术语的定义真的非常头疼。我们今天将对三者进行多方面对比，为各位萌新小白扫扫盲！
三者关系图：
从上图来看，似乎UI交互设计还真是UI设计和交互设计的结合。不过具体区别如何，还是让我们来看看三者的对比吧！
1. UI交互设计vs UI设计vs交互设计对比 之 概念
UI设计
UI设计或称界面设计（英文UserInterface Design, 缩写为UID），它是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计主要分为实体UI和虚拟UI两种，互联网行业常见的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。
交互设计
交互设计（英文Interaction Design, 缩写IXD），它主要指的是两个或多个个体之间交流和互动方式的设计，以达成某种设计产品的目的。交互设计的目标一般从“可用性”和”用户体验“两个层面出发，以帮助解决用户需求。
UI交互设计
从多方查找资料发现，UI交互设计这个术语是非常模糊的。从广义上来说，UI设计是可以包含交互设计的，在这样的情况下。简单来说，把交互设计的理念体现在UI界面上，就是UI交互设计。
从设计重心方面来看，UI设计的重心是色彩和视觉，以界面美观设计为主，主要考虑产品看起来怎么样。而交互设计则是以用户为中心进行人机互动部分的设计，主要考虑产品用起来怎么样。而UI交互设计则需要兼顾UI与交互两个方面进行设计，将交互的理念体现在UI界面上。
2. UI交互设计vs UI设计vs交互设计对比 之 工作人群
UI设计相关人群：
UI设计师，界面设计师，网页设计师。
交互设计相关人群：
UX设计师，交互设计师，UE设计师，产品经理，网页设计师，产品经理。
UI交互设计相关人群:
UI设计师，界面设计师，交互设计师，网页设计师，UX设计师，产品经理。
从相关的工作人群来看，不同的设计工作类型，涉及的人群也尽不相同。UI设计的相关人群主要是工作中包涵该部分的人，除了专业的UI设计师，界面设计师，网页设计师等也是它的工作人群。而交互设计涉及的人群更广，交互设计师、UX设计师自然不在话下。另外，需要表达设计想法的产品经理运营人员也是其中一员。最后，UI交互设计所涉及的范围比两者稍广，包含了UI设计人群和大部分交互设计人群。
3. UI交互设计vs UI设计vs交互设计对比 之 例子
UI设计案例：
如上图所示，UI设计主要在于通过对用户界面的色彩，布局，文字排版等方面进行设计，以保证整体界面的美观。
UI交互设计案例：
我们这边选取一个简单的UI交互作为案例，这个交互的效果是通过点击UI界面中按钮出现不同的图片。这种将交互体现在UI界面上的设计，就是UI交互设计。UI交互设计包含了各式各样的交互效果，如下列刷新、进度条、图片轮播等
交互设计案例：
而这种以人机互动为目的，注重用户体验的设计则称为交互设计。
从以上的案例不难看出，UI设计主要以界面美观为主，以静态的方式呈现居多（也有以动图动画形进行呈现）。交互方式是静态的。UI交互设计是在UI的基础上进行交互设计，以偏动态的形式存在。交互设计则以用户体验为主，以动态的形式存在。
4. UI交互设计vs UI设计vs交互设计对比 之 工具
UI设计工具：
PS（Photoshop）：适用于界面设计，图标设计，手绘等。
AI （Illustration）：适合创建徽标、图标、草图、排版和其他矢量图。
Sketch：适合图标、界面设计，支持多文件分层，切片等插件。
交互设计工具
Axure：老牌原型设计工具，适用于制作中高保真交互原型。
Mockplus：适合创建快速交互原型，简单高效，同时支持团队协作。
摹客：适合一键切图，生成智能标注，生成图层代码，交互演示，设计协作。
UI交互设计工具：
从使用的工具来看，UI设计主要以图形、图标、界面设计工具为主。交互设计主要以原型设计，交互设计工具为主。而UI交互设计则需要囊括前两者使用的所有工具。
在UI交互设计中，首先需要使用PS等工具完成保证视觉效果的设计稿，再使用摹客等交互工具为设计稿添加交互效果，转为高保真原型。
如果想要节省切换工具的时间，也可以直接使用摹客平台完成UI交互设计。在融入了在线原型设计后，摹客也为用户带来了超强的设计生产力，完成了“设计+协作”的一站式云平台搭建。可以帮助设计师高效完成全流程的UI交互设计。
