UI交互设计是什么意思？详解UI交互设计的内容、提升方法及常用工具

2023-08-27 09:27:54

UI交互设计是什么意思

一、UI交互设计是什么意思

UI交互设计（英文：Conversion Rate，英文缩写：CR）是指把交互设计的理念体现在UI界面上，即兼顾UI与交互两个方面进行设计，将交互的理念体现在UI界面上。UI是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。

二、UI交互设计的内容

从设计重心方面来看，UI设计的重心是色彩和视觉，以界面美观设计为主，主要考虑产品看起来怎么样。而交互设计则是以用户为中心进行人机互动部分的设计，主要考虑产品用起来怎么样。UI交互设计包含了用户研究、交互设计、界面设计三个方面。

1、用户研究

用户研究包含两个方面：

(1)、可用性工程学（usability Engineering），研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆；

(2)、通过可用性工程学研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法。

用户研究是一个跨学科的专业，涉及可用性工程学、人类功效学、心理学、市场研究学、教育学、设计学等等学科。用户研究技术是站在人文学科的角度来研究产品，站在用户的角度介入到产品的开发和设计中。

用户研究通过对于用户的工作环境、产品的使用习惯等研究，使得在产品开发的前期能够把用户对于产品功能的期望、对设计和外观方面的要求融入到产品的开发过程中去，从而帮助企业完善产品设计或者探索一个新产品概念。

他是得到用户需求和反馈的途径，也是检验界面与交互设计是否合理的重要标准。

2、交互设计

这部分指人与机之间的交互工程，在过去交互设计也由程序员来做，其实程序员擅长编码，而不善于与最终用户交互。所以，很多的软件虽然功能比较齐全，但是交互方面设计很粗糙，繁琐难用，学习困难。使用这样的软件后，不是使人聪明与进步而是让人感到愚弄与羞辱。许多人因为不能操作电脑软件而下岗失业，这样的交互使电脑成为让人恐惧的科技怪兽。于是把交互设计从程序员的工作中分离出来单独成为一个学科，也就是人机交互设计。他的目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

3、界面设计

在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为"美工"。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

三、提升UI交互设计的方法

1、角色扮演和互动：找两个人来，一个扮演界面，另外一个记录笔记。为扮演界面的人手持一个浏览器窗口纸板，并且同时通过投影仪投射出界面。一个人扮演用户，同"界面"进行对话，一个人阐述并解释用户的目标，而"界面"则仅限于标签、菜单和其他的UI元素来为你的操作进行"反馈"。

2、勾勒出叙事线索：记录者记录每一个步骤的细节，包括任务和情绪。完成这个步骤，可以借助User ScenarIOS文档来完成。

3、简化步骤：有时候用户要达成目标需要经历许多步骤（比如买票），然而在制作原型的时候，就应该将一个复杂的目标肢解成为一系列简单的步骤（比如询问目的地，然后设定行程）。

4、控制用户选择：这可能是最艰难的一步，但是必须尽量减少用户的操作。时刻审问自己，这个步骤当中的每一个选项是不是非要不可的，如果不是，将它分离到其他的非关键位置。

5、注意微时刻：Micromoment，这是一个新的合成词，指的是用户在与界面进行交互的关键时刻，这时候用户可能会犹豫、激进或者突然停止，暂时将其翻译为微时刻。回想角色扮演的环节，会有那些犹豫、忐忑的时刻。为了让交互更清晰，应该充分运用每一个细节上的文案选取，结合可靠的UI模式，引导用户在这些微时刻作出对的选择。

四、UI交互设计常用工具

在UI交互设计中，首先需要使用PS等工具完成保证视觉效果的设计稿，再使用交互工具为设计稿添加交互效果，转为高保真原型。

1、Adobe Photoshop

Adobe Photoshop是一种优质的网页设计工具。它有很多选项来创建和编辑您的Web模板。它适用于图像，您可以为您的网页设计创建图形。通过无限的颜色和渐变选项，可以制作出最佳的模板设计。它为您提供了一个空白的画布，让您的想象力生动。您可以按照自己的方式附加图像，移动元素，绘制框，裁剪边缘以及编辑模板。它适用于图层，这使您的工作非常简单。您可以显示/隐藏图层以有效管理Web设计元素。

Adobe Photoshop

2、Sketch

Sketch是适用于Mac设备的网页设计软件。它是专注于创建Web模板和设计的专业工具。它适用于矢量图像，因此您将获得最佳，最高分辨率的结果。工具栏和选项非常简单。Sketch提供了创建和管理Web设计项目的完全灵活性。它具有镜像功能，允许在多种设备（如手机或平板电脑）上测试您的网页设计模板，可以100％确定您的网页设计将如何在不同的屏幕尺寸上显示。

2、Figma

Figma是一个多用户网页设计软件。它允许您与设计团队联系以使用相同的Web模板。它是与客户共享项目并在模板设计上进行实时更改的智能工具。Figma将网页设计提升到一个全新的水平，它的编辑面板中包含字体，颜色和其他设置。用于创建图标或完整的Web模板时，工具和选项非常棒。

3、Adobe Illustrator

Adobe Illustrator 提供了一个完美的像素级设计环境，您可以在其中创建灵活且流畅的 Web 元素。它为您提供了创建清爽利落的 Web 布局所需的一切，包括矢量图形、响应式媒体图标、可伸缩组件、CSS 生成、SVG 导出、线框以及可重复使用的符号。

Adobe Illustrator

4、Adobe XD

adobe家打造的一款集页面设计和交互原型为一体的设计工具，支持多人在线实时协作功能。另外在兼容性上优势最大，能跟全家桶产品进行联动；但是在资源和功能这两方面相对于前面两款就比较弱势了。

5、axure 原型工具

Axure是交互设计师最核心的工具，Web端产品使用较多。通过它输出的"原型"（交互稿）是交互设计师与产品经理、前端开发、后端开发、测试等人员沟通的最好媒介。"原型"是产品开发前期的重要设计内容，它直观的体现了产品的框架结构、界面内容以及功能模块之间的逻辑关系，且不断确认产品中的模糊部分，为后续的视觉设计，产品开发提供了准确的产品信息。主要功能除了绘制"原型设计图"，还包括"操作流程图"、"信息架构图"等其它内容。

6、Xmind or Mindmanager思维导图工具

XMind/mindmanager是非常实用的思维导图软件，简单易用，功能强大。在进行产品规划，头脑风暴，任务分析等工作时，都需要借助XMind来完成。XMind的文件可以导出成Word，PPT，PDF，图片等格式，方便将内容与其他人共享。

7、Viso

viso这款工具主要是用于绘制流程图，操作简单易懂，小伙伴们上手练练就能懂。另外就是ProcessOn，这是一个在线作图工具的聚合平台，它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等，无需担心下载和更新的问题，不管Mac还是Windows，一个浏览器就可以随时随地的发挥创意，规划工作。

8、MockingBot 墨刀

墨刀是一款在线原型设计与协同工具，以前只有网页版，现在也有客户端，但都需要联网使用。有点类似于Figma，国产中文版的一款很好的交互设计软件。

优点：墨刀上手难度不高，墨可以实现元素切换、界面跳转，动效平滑，可以调试参数；支持win和mac，有桌面版，支持移动端预览（iOS&AndROId），有Sketch插件等。

不足：也是无法实现条件判断等复杂交互逻辑（不过这对于很多项目来说也不一定要做出来，有时间成本和学习难度）。

9、Mockplus

Mockplus（摹客）是一款简洁快速的原型图设计工具。适合制作低保真原型，界面简单，能够快速上手。

优点：界面简洁，快速上手，有交互组件可用，可生成单独的压缩包，打开即可演示。摩客还有一个原型托管平台，也挺方便，不过要收费~

缺点：无法实现复杂逻辑如条件判断等情况的交互，市面上可用的组件较少；适合做手机的简单原型，不适合做网页的原型。2年前用过，不知道现在这么样，平台收费，开发运维不易，支持国产。