UI交互设计流程是怎样的?ui交互设计教程

　　导语：现在，我们人的生活品质在不断的提高，就会出现有很多人工的系统出现在我们的面前，而且这些系统一般都会有我们人类参与到其中，所以就有了一种人与环境的一种相互交互，这样的交互我们称为：ui交互设计。接下来小编就来说说ui交互设计是什么?ui交互设计教程.一个完整的(UI设计)交互设计流程是怎样的?

　　ui交互设计是什么?

　　交互，即交流互动，是现在的很多互联网平台追求打造的一个功能状态。UI交互设计又称UI互动设计，广义上可以认为界面设计包含交互设计，同时还包含另外的部分，如外观设计或平面设计。简单的说，把交互设计的理念体现在UI界面上，就是UI交互设计。从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。

　　UI，即用户界面，包括图形设计、交互设计以及用户测试/研究三个方面。UI交互设计指人与机之间的交互工程，目的在于加强软件的易用、易学、易理解，使计算机真正成为方便地为人类服务的工具。

　　ui交互设计教程

　　一、

　　展示用户位置、进度的视觉反馈

　　1、让用户知道自己在哪

　　没有人会喜欢迷失方向，但是无论在现实生活还是在数字领域当中，这种情况都会发生。

　　让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项，帮助用户了解他们所在的位置。

　　2、要经过多少步骤来完成任务

　　这也是一个非常基本的操作，通过展现步骤数量，帮助用户来预估完成这个过程所需要的时间。

　　二、

　　辅助用户交互的视觉反馈

　　数字界面毕竟不是现实世界中的真实硬件机构，用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作，即时的视觉反馈因此显得非常重要。

　　即时的视觉反馈让用户的操作得到了视觉上的「认可」，从而强化了「确信感」，这样一来一回的确认可以避免错误的发生，比如可以避免用户因为「感觉没有点下去」而反复点击。

　　这种视觉反馈的设计，最常见的范例就是点击按钮按下的微交互动画，它告知用户「系统已经捕捉到点击交互了」。

　　但是在某些状况下，按钮的视觉反馈还有很多不同的呈现形式，有更多可见的、可理解的新形态，可以在原有的基础上探索更多可能性，比如下面的

　　1、单击点赞按钮

　　2、开关按钮

　　这个开关按钮不仅有点击动效，而且色彩和按钮标识也随之改变，更为清晰地表明状态，甚至兼顾到了视觉障碍用户。

　　3、书签按钮微交互

　　这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态，颇为巧妙。

　　三、

　　呈现系统状态的视觉反馈

　　1、系统正忙于什么事情

　　当系统正在加载，正在执行，正在运行的过程中，通过动效来告知用户系统并没有停止，而是正忙于执行某件事情，是避免用户误解的手段。

　　在用户等待的过程中，通常会使用无限加载的动效(一般使用在低于10s的操作中)：

　　对于超过10s的更长的执行过程，无限加载的动效会显得令人沮丧，这个时候使用进度条会更好：

　　这些视觉反馈很大程度上降低了系统给人的不确定感。

　　对于移动端应用，在初始加载阶段所使用的启动动画界面，是否精心设计，决定了用户对于整个产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。

　　2、内容加载

　　当用户需要时间来加载内容的时候，建议使用一种特殊的的容器「界面骨架」来展现。

　　这种临时的内容容器不仅能够帮助用户快速地了解界面的整体框架，构建用户预期，并且能够在后台快速地加载数据，渐进式地帮用户获得信息。

　　4、

　　触发事件

　　1、通知和提醒

　　有效的通知和提醒，能帮用户意识到有新的事情正在发生。在多数时候，我们建议设计师使用微妙的动画来进行通知，因为动画效果会自然地吸引用户的注意力，人类的双眼的动态视觉其实是非常强的。

　　2、提示用户采取行动

　　在很多情况下，用户界面中会有很多地方会需要用户提交信息。

　　比如，需要用户提交表单，或者用户创建了一个密码，但是在复杂度上不足需要修正，或者填写邮箱来订阅信息的时候，邮箱格式出错，等等。使用适当的视觉反馈总能够更加有效地将问题告知用户。

　　5、

　　结语

　　让用户有掌控感，就是为用户创造更好的体验。在很多设计方案中，视觉反馈会因为种种原因被削弱了，甚至被忽略了。

　　但是当用户在和 UI 进行交互的时候，期望度和可动性其实是高度依赖于这些动效和微交互，而这正是设计师需要设计出优秀视觉反馈效果的原因所在。

　　一个完整的(UI设计)交互设计流程是怎样的?

　　看到这个图，其实很清楚了，研发先行不是最好的路线。产品、UI设计师以及后续研发调整的工作量很大。那么，一个完整的交互设计流程是怎样的呢?

　　首先，我们先来认识一下产品的五个用户体验的要素

　　用体验的五个层面分为：战略层、范围层、结构层、框架层、表现层。五个层面自上而下地建设，具备基本的双重性、用户体验的要素和应用这些要素。

　　所谓战略层，即为产品目标、用户需求，通俗来讲，经营者想从网站上得到什么，用户想从网站上得到什么?

　　所谓范围层，即功能规格和内容需求，其意义在于这是一个有价值的过程，同时能够产生有价值的产品。比如，提供用户可以保存之前的邮寄地址功能。

　　结构层，即交互设计、信息架构层，其目的是为了确定各个将要呈现给用户的元素的“模式”和“顺序”。交互设计关注于将影响用户执行和完成任务的元素。信息架构则关注如何将信息表达给用户的元素。重点：理解用户的工作方式、行为和思考模式。

　　框架层，即界面设计、导航设计、信息设计层。

　　界面设计是用来确定界面空间元素以及位置，提供用户完成任务的能力，通过它，用户能真正的接触到那些“在结构层的交互设计中”确定的具体功能。

　　导航设计：呈现信息的一种界面形式，提供给用户区某个地方的能力。

　　信息设计：呈现有效地信息沟通，表达想法，它是这个层面中范围最广的一个要素。

　　实现方法建议以线框图将设计信息、界面设计和导航设计放置到一起，形成一个统一的、有内在凝聚力的架构的地方。

　　通过安排和选择界面元素来整合界面设计;

　　通过识别和定义核心导航系统来整合导航设计;

　　通过放置和排列信息组成部分的优先级来整合信息设计。

　　线框图的好处是可以确定一个建立在基本概念结构上的架构，同时指出了视觉设计应该前进的方向。

　　表现层，即为视觉设计。界面设计考虑可交互元素的不足，导航设计考虑在产品中引导用户移动的元素安排，信息设计考虑传达给用户的信息要素的排布，解决并弥补“产品框架层的逻辑排布”的感知呈现问题。

　　评估一个页面的视觉设计的简单方法：终于眼睛。一个成功的设计有2个重要的特点：

　　遵循的是一条流畅的路径;

　　在不需要太多细节来吓到用户的前提下，它为用户提供有效选择的、某种可能的“引导”。

　　所以，我们的设计师应该怎么做呢?

　　读懂原型图

　　读懂PRD。确保在需求理解上，与PM保持一致;

　　查找漏洞。人无完人，在成熟的PM，也难免有疏漏。找出遗漏，与PM反馈、沟通;

　　提出产品新想法。读PRD时，总会有一些产品的好想法冒出来，及时与PM和团队沟通;

　　开始构思交互。

　　草图快速沟通

　　通过草图，快速将“产品关键流程”、“关键交互界面布局”呈现纸面，以此与PM、技术沟通至达成共识;目的是为了：

　　再次扫遗漏;

　　收拢想法。这个阶段，产品设计基本定型;

　　达成共识。确保让产品、设计、技术队要做的事情有一致的理解，PM需更新PRD、技术开始做开发准备。

　　Axure线框图表现产品流程、界面

　　包含：产品流程图、全部的页面原型。

　　Axure让团队对产品的理解无异议，对最终的产品有直观的了解。这个阶段，产品需求冻结。开发人员可以依据原型对UI关联较小的部分进行技术开发。

　　视觉设计

　　有前面两个“扫清障碍”的过程，这个阶段，视觉设计时非常舒服的事情。在相对完整的设计规范、控件规范的前提下，视觉包括：

　　风格探索;

　　关键页面的视觉设计;

　　关键交互动画表现(如果无法口头项技术表达动画效果时，给出一个“活的”效果，是非常直观的。

　　视觉素材输出、设计文件标注

　　每个项目最终给到开发人员的都要有效果图、标注图、切图三个文件夹。Pxcook、Markman是不错的标注工具，Cutteran、Assistor PS是很方便的切图工具。

　　开发后期，细节跟进

　　与开发跟进细节，是设计过程的一部分。在我们团队，完全依靠规范作业、设计文件标注(不和开发人员说一句话),能够确保80%的交互、视觉细节能够被还原。剩下的20%，就要设计师与开发人员肩并肩坐在一起打磨了。开发过程中，一定要预留这个时间。主要包括：边距、字体、界面动画的数值微调。