关于UI设计流程探讨交互设计（整理7篇）

2025-01-27 16:43:11

小编给大家分享关于UI设计流程探讨交互设计（整理7篇）的范文，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。。 - 素材来源网络编辑:李欢欢。

这次小编给大家整理了UI设计流程探讨交互设计，本文共7篇，供大家阅读参考，也相信能帮助到您。

UI设计流程探讨交互设计

篇1：UI设计流程探讨交互设计

确认目标用户

在软件设计过程中，需求设计角色会确定软件的目标用户，获取最终用户和直接用户的需求，

用户交互要考虑到目标用户的不同引起的交互设计重点的不同。

例如：对于科学用户和对于电脑入门用户的设计重点就不同。

采集目标用户的习惯交互方式

不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。

当然还要在此基础上通过调研分析找到用户希望达到的交互效果，并且以流程确认下来。

提示和引导用户

软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。

对于用户交互的结果和反馈，提示用户结果和反馈信息，引导用户进行用户需要的下一步操作。

一致性原则

设计目标一致

软件中往往存在多个组成部分（组件、元素）。不同组成部分之间的交互设计目标需要一致。

例如：如果以电脑操作初级用户作为目标用户，以简化界面逻辑为设计目标，那么该目标需要贯彻软件（软件包）整体，而不是局部。

元素外观一致

交互元素的外观往往影响用户的交互效果。同一个（类）软件采用一致风格的外观，对于保持用户焦点，改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。

交互行为一致

在交互模型中，不同类型的元素用户触发其对应的行为事件后，其交互行为需要一致。

例如：所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮，

对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确，但是的确有相反的例子证明不按照这个理念设计，会更加简化用户操作流程。

可用性原则

可理解

软件要为用户使用，用户必须可以理解软件各元素对应的功能。

如果不能为用户理解，那么需要提供一种非破坏性的途径，使得用户可以通过对该元素的操作，理解其对应的功能。

例如：删除操作元素。用户可以点击删除操作按钮，提示用户如何删除操作或者是否确认删除操作，用户可以更加详细的理解该元素对应的功能，同时可以取消该操作。

可达到

用户是交互的中心，交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。

用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。

要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏（一般来说超过4层）那么用户达到该元素的几率就大大降低了。

可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。（参考简单导向原则）

可控制

软件的交互流程，用户可以控制。

功能的执行流程，用户可以控制。

如果确实无法提供控制，则用能为目标用户理解的方式提示用户。

上面的文章提到了UI设计的原则，并且对此做出了一些所谓的定义。大家要明白，本人对UI设计的研究时间不长，这些原则只是个人体会。

篇2：UCD 流程解析交互设计

细心的读客应该会发现，在昨天 Making Life Easy - 使生活更容易里提到一个英国的Flow Interactive 交互设计咨询公司，今天了他们的网站，发现了他一些对UCD（User-centred Design 以用户为中心设计）的实施流程，觉得很有代表性，也很清晰，所以简单整理了一下，给自己和大家学习备份：

他们大概把UCD的流程分为了下面几个阶段：

Research stage 调查研究阶段

Concept stage 概念定义阶段

Iterative design stage 迭代的设计阶段

Implementation stage 执行阶段

Launch stage 发布阶段

图片来自Flow Interactive

下面是图片内容的解析，连接都有相应的安例解析，很有帮助，

Research (调查研究)

Context studies(背景研究)

Focus groups 关注群体

Competitor comparisons (竞争对手对比)

Depth interviews 深度面试

Questionnaires 问答

User personas and scenarios 用户角色与场景了解

User goals 用户目标

Usability goals 可用性目标

Concept (概念定义)

Concept models 概念模型

Usage scenarios 使用场景

Paper prototyping 简易原型

Usability testing 可用性测试

Expert evaluation 专家评估

Design (界面设计)

Product structure diagram 产品结构示意图

Process flows 程序流程

Wireframes 框架

Interactive prototypes 交互原型

Card sorting 卡片分类排序－就是把关键流程用卡片形式定义下来，然后不断组织，了解和挖掘最佳的排序模式

Usability testing 可用性测试

Accessibility evaluation 易用性评估

Expert evaluation 专家评估

Functional specifications 功能型详述

Implementation (执行测试)

Usability testing 可用性测试

Expert evaluation 专家评估

Accessibility evaluation 易用性评估

Launch (发布)

Usability testing 可用性测试

Expert evaluation 专家评估

Accessibility evaluation 易用性评估

Focus groups 关注群体

Competitor comparisons (竞争对手对比)

Metrics 测量

因为UCD或一些新兴的用户研究课题，对于大部分设计师或研究员来说总是觉得概念模糊，难于掌握或不知如何着手，所以，我想不断尝试用简单清晰的方式来定义这些概念，使我们未来的工作有律可依，并更有效的完成手上的项目，

如果有问题的请提出来一起讨论学习。

本文来自：www.moond.com/lab/?p=29

篇3：缩短流程的小设计交互设计

最近搬家了，住的地方在小区深处，从马路边的小区大门进去，要走过一片区域，穿过中间的另一个大门，来到另一个区域，才能走到那栋楼。这真是一段挺长的路程。

走了几天，有一个奇怪的感觉：进去时花的时间比出来时的时间要多。

同样的路程，为什么两个方向给我的感觉所花时间不一样呢？

我仔细回想，我在行进过程中，不自觉地把中间的一个大门当作了一个里程碑，当我到达那道门的时候，就觉得走了一半了。而实际上，那道门并不在整个路程的中间，而是更靠近所在的楼，离马路边的大门要更远一些。

那也许可以武断地得出一个结论：如果某一过程的前一阶段耗时比后一阶段耗时要少，那么就会让经历此过程的人感觉过程比较短，反之，前一阶段耗时多于后一阶段，则整个过程就会被感觉长，

在网站设计中，会有很多的过程，需要设计得尽量短，至少要让用户感觉短。比如一些优秀网站的注册过程，从开始注册到能够登录使用要经过两个阶段：

填写Email、密码等

到邮箱中点击确认链接

用户感觉到注册流程的短，就是因为完成第一阶段很快。而第二阶段耗费的时间虽然多一些，却一般会被用户忽视。

所以为了把流程设计的尽可能短，就应该把前一阶段设计得比后面的阶段更快更容易完成。

本文出自：chentao1006.cn/tech/little-design-for-shortened-process/

篇4：电子商务，作什么样的流程交互设计

电子商务可以有很多模式

是在平时喜欢四处转转，到各个商铺去看一看，线下商铺的类型还真多，商业中心，大卖场，连锁店，小超市，精品屋，专卖店，批发市场，集贸中心，服务中心，二手市场，体验中心……，各类型的商铺满足不同人群的购物需求，也给人不同的体验，

在我的理解中，这些商店展示什么样的商品，展示多少，采用的购物流程都是经过设计的，并且各自有各自的优势，大卖场上东西比较齐全，价格上也有一定优势，但是比较难找，并且要拎着购物篮或推着购物车“四处乱转”，还有可能排长队结账。但是在小的便利店买东西，虽然东西并不是很多，但是却方便快捷。在大型的商业中心，你可以找到N多品牌的商品，并且可以再极大的程度上满足货比三家的比较感觉。但是在专卖店里面的快速选择，不担心产品的质量问题也是种不错的感受。

有很多人以为，线下的商业模式可以搬到线上来，我也认为至少有一些理论是共通的，但是到现在为止，线上还是只有B2C和C2C，B2B这样孤零零的几种模式，更可悲的是，三个模式的流程还是基本相同的。

但是现在国内的网站还在是B2C的模仿亚马逊，当当，卓越；C2C的模仿淘宝，易趣；一个只有几个商品的公司网站，还是要走首页-》列表页面-》单品页的流程，

一个大件商品服务的的网站，在还要走，购物车-》登录注册-》……的流程。

但是现在我们看到的是大部分电子商务的老板，以开口就是要作国内最大的***购物平台，甚至一个销售***类型商品的网站，要做到国内电子商务的销售量第一。

用户的需求和自身的资源决定购物流程

UCD所提到的方法中，user 的需求是最大的核心，在不同网站中，面对着不同的人群的不同需求，而这些需求就决定了一个互联网公司只能去完成某些需求，解决这些需求对应的流程也不一样。

而企业的资源也是决定流程的另一个重要因素，商品的数量，企业的定位……对购物的流程都是有影响的。例如：一个有着种商品的电子商务网站，必然是要产品列表的，而在一个只有不到20种商品的电子商务网站，是否要产品列表就成问题了。

和白鸦一样的观点，如果你去问用户的这样的流程和结构设计，用户一定告诉你是和淘宝、亚马逊等等网站一样的流程。这一点的上的设计20%看用户访谈的结果，80%看个人的分析。创新的东西是要靠个人的能力，用户不会替设计师创新。

本文来自：hi.baidu.com/koob/blog/item/edbd0cf33d5b2658342accc6.html

篇5：UI交互设计求职信

尊敬的领导：

您好!首先向您致以最诚挚的问候!

我是即将毕业的吉林大学艺术学院20xx届本科毕业生。在校期间已参加工作。很荣幸有机会向您呈上我的个人资料。在四年的大学生活中我认真努力，各门基础课程和专业课程均取得了较好成绩，在我努力下掌握了扎实的专业知识，并有意识的通过各种实践活动提高自己的动手能力，为今后工作奠定了良好的基础。我注重培养自己多方面的能力，熟练的掌握了平面广告设计、VI设计、标志设计、包装设计、书籍装帧设计、展示设计，商业摄影等。

在将近四年的大学学习生活中，我不仅很好的掌握了本专业的相关知识，也学习了ILLUSTRATOR、photoshop、coreldraw等设计软件方面的知识。由于从小对美术的热爱及正规的专业训练，使我掌握了扎实的美术功底，并对自己的专业充满热情。

诚望贵单位全面考察我的情况，给予优秀青年一个展示自我，成就梦想的舞台，若能蒙您垂青，我将深感荣幸，并在日后工作中，不懈拼搏之劲，不失进取之心，克尽己能，为贵单位事业奉献一切!

最后祝贵单位事业蒸蒸日上，全体员工健康进步!

无论录用与否都很感激贵单位给我这个机会，希望能得到您的关注成为团体的一员，敬盼回音!

此致

敬礼

自荐人：xx

20xx年x月x日

【什么是UI设计中的用户研究、交互设计、界面设计】

UI的本意是用户界面，是英文User interface的缩写。从字面上看用户界面包括用户、界面这两个组成部分，但实际上还包括用户与界面之间的交互关系，所以用户界面设计包括用户研究、交互设计、界面设计三个方面。

1、用户研究

用户研究包含两个方面：一是可用性工程学(usability Engineering)，研究如何提高产品的可用性，使得系统的设计更容易被人使用、学习和记忆;二是通过可用性工程学的研究，发掘用户的潜在需求，为技术创新提供另外一条思路和方法(consumer insight)。所以有：Usability is all about making things easier to use so people can focus more on the work and less on the tools that help them do the work.

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

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

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

2、交互设计

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

3、界面设计

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

[UI交互设计求职信]

篇6：常见UI设计模式交互设计

交互设计师在设计线框图原型时，熟知常见的web设计模式很有帮助，做到“心中有数”才能创造出符合需求，用户易学易用的界面来，所谓“没有必要重复发明轮子”，模式往往容易解决常见问题，正确的模式能帮用户熟悉界面、提高效率。

常见的UI设计模式如下图：

下面分别进行具体分析，遇到不同需求的时候就可以选择合适UI设计模式。

01.主体/细节（Master/Detail）模式

主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下，引导他们在类目下高效地切换，这无疑是一种理想的方式。如果主体信息对于用户来说更重要，最好选择横向布局。或是主体部分不仅条目多而且包含信息也多，那也该选择这种横向布局。

举例来说：

Windows窗口属于纵向排布

Mac mail的横向排布

0.2分栏浏览(Column Browse)

分栏浏览也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并逐步引导用户找到需要的信息。

举例：

Outlook采用逐级分栏的界面，用户可以选择进入“收件箱”——>“某封收件”——>“具体邮件内容”

0.3搜索/结果(Search/Result)

搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。

Gmail采用简单搜索

而对于google学术的用户，高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。

0.4过滤数据组(Filter Dataset)

分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结果进行再过滤。

51job用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如“发布时间、薪金”等条件，进一步优化信息

以京东为例，多数电子商务网站在用户初步模糊搜索后，提供进一步优化的过滤条件。上图中，京东采用的是横向排列方式

0.5表单(Forms)

表单类型众多，也是最能体现用户体验是否良好的地方。其中包含很多内容，推荐专门介绍表单的书：《Web Form. Design: Filling in the Blanks》。

注册信息一般使用表单

0.6调色盘/画布(Palette/Canvas)

调色盘/画布虽然不算最常见模式，但它对于创造图形类文档有着不可替代的优势：比如设计线性或非线性图；流程图；页面布局；制定物理大小的设计/图表或控制布局。

对于设计师来说调色盘/画布这种模式并不陌生，常用软件，例如：Axure、ps都是采用这种方式。

0.7仪表盘(Dashboard)

一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操作，清晰的入口和浏览。理论上讲，在一个屏幕下展示复杂的数据本身就很难。

之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘

0.8电子表格(Spreadsheet)

方便用户快速浏览，编辑大板块信息的理想模式，

电脑资料

电子表格需要提供下列功能：标准的表格（诸如分类，隐藏/显示栏目，重列栏目，分组（如果可以）），全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。

淘宝购物车选择使用电子表格，可以让用户对已选商品进行快速编辑（增加/减少数量，删除等）

0.9向导(Wizard)

对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。

京东上使用wizard快速引导不熟悉流程的顾客完成付款

0.10.Q&A(Question&Answer)

Q&A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清他们缺乏经验的在哪里（比如健康保险，抵押，计划，购买）有哪些可供的选择或建议。

上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话费套餐

0.11.平行面板(Parallel Panels)

平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。

国外的火车票在不同情况，票价会随之浮动。The Train.com使用堆叠面板，让用户在同一页面下对不同项目进行编辑，又不会觉得混乱

0.12.交互模型(Interactive Model)

交互模型屏幕模式应用在关键项目（比如日历、地图、图标、画布等）需要进行交互的时候。是用户体验贴近用户心智模型的理想模式。在日历、地图、线状图、预设场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果非常好。

Google的calendar在日历上可以直接编辑提示内容

附加：13.空白状态(Bonus. Blank State)

空白状态指在任何数据输入或进入系统前，应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括：视频，快速教程，帮助提示，安装后的截图。

Wufoo是一个在线表单设计网站，初始后会引导用户建立表单

14.其他模式

还有两种广泛使用但在企业软件很少使用的模式。

- 门户：如果你是市场调研专家，商业需求分析师或是用户反馈调研员，设计门户可以参考“仪表盘”的设计规范和案例。

- Tabs：其实Tab是一种部件，不是一种模式。它为同情境下的数据提供多选一的操作。如果数据结构导致你的设计tab显得过多。有两个小建议：第一，重新考虑信息架构。通过使用卡片分类法（card sorting）或请教一名专业的信息架构师；第二，可以参考“平行面板”的规范和案例。

参考文献：《Designing interfaces》and 《Designing web interfaces》

designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

出处：www.zhangyq.com

篇7：拒绝庸俗UX≠UI交互设计

在一次声称会是一个关于UX呈现的产品演示中，我却没有得到邀请，在许多示例时，开发者演示新UI控件、技术、代码并自称谈论用户体验。我要说，停止庸俗，了解事实。

原谅我父亲，因为我犯了罪

我有开发者的背景。我明白一些代码，所以我理解开发者的术语和整体的逻辑。我不明白的是什么时候开发者开始谈论UX（用户体验），却只不过是展示新的UI控件与一些功能。不错、整洁、非常重要、Cool，但是我要说，这不是UX。

今天，在Twitter上，并在后来的邮件里，我收到了给一个类似“使用Silverlight4创建良好用户体验”LiveMeeting的命名邀请，在此之前，上周的微软Windays会议上 – 同样的故事 – 两个讲座，两位专注于各自领域社区的开发者展示了许多非常棒的技术并声称它们是用户体验。这是痛苦的、令人沮丧并且是明显的错误。（我会忽略技术方面的细节，让人们不至于认为Silverlight4只是驱动Windows Phone 7设备的东西即使这里都是MVP）无论如何，谈论新的UI控件诸如RichTextBox和展示如何连接数据库的代码是简单的，但却不是UX。它可以被称为UI、UI开发、或者UI设计（部分意义上），但这不是UX。

而这可能只是我个人的感受，根据我的印象，这种误解和庸俗化的UX更多的来自于开发者-来自诸如微软、Sun或者IBM的福音者。这些公司保持有关各方的投资和教育 – 客户与社区。好东西迄今早已完成 – 但显然需要做更多的工作要做。

我们爱流行语（虽然我们不知道他们的意思）

我知道UX是很Cool的口号（还有有很多，其中大多数是缩略语…），它有时是如此诱人被使用而无须真正理解其含义 – 但是，抛开事实，这会让你看起来很浅薄，因为这是绝对错误的，

如果我们倾向于称自己为一个专业人士，那么我们应该扮演其中的一员 – 这意味着随时准备接受和学习新的东西，即使他们不在我们的专门知识的主要领域。如果我用*Insert_Your_Technology_Here*谈论创建新控件和UI模式，那我们称它们是UI而不是UX。

UX的定义？

什么是UX的呢？我不需要重新发明轮子，这里有一些热门的资源，这将有助于你理解（学习）的区别：

1. Mashable: 10大最常见的关于用户体验设计的误区

2. UXMastters与它们的词汇表

3. UX的定义 By Nielsen Norman group

4. 用户体验的要素 By Jesse James Garrett (PDF)

5. Eric Reiss 与and FatDUX 对用户体验的定义

一个关于这个主题的最好的文章：UX设计 VS UI开发 by UX Matters and Mike Hughes。