交互设计(完整版)

交互设计教InteractionDesign1-What/

什么是交互设计？2-How/

交互设计的程序是什么？3-Do/

展开优秀的交互设计？What那一个网站的内部结构是什么呢？交互设计侧重于设计层面中的第二层：行为设计交互设计与产品设计有着一样的设计流程与方法普通青年文艺青年本能水平的设计(Visceral)

>

外形行为水平的设计(Behavioral)

>

使用的乐趣和效率反思水平的设计(Reflective)

>

自我形象、个人满意、记忆这里翻译成“层面”而不是“层次”，就是因为这三者是一样的重要同样的理论

映像到界面设计(1)UCD设计心理学(2)产品：人机工学，造型美学，产品体验，(3)市场：V=F/C1.用之前：看——想用：界面美观，图标有很好的语义引导；2.用之中：用——容易：原型架构逻辑性强；3.用完后：想——黏度：习惯；时间轴的行为设计所以一样的开始：问题导向型解决方案；一样的过程：交互设计与产品设计的流程是类似的；一样的终点：实用性-易用性-愉悦性；基于理性，成于感性；几个概念About

ConceptWhat’sUI软件设计分为：编程与UIUI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI=User'sInterface

=用户界面/人机界面

好的UI设计？软件的操作变得舒适、简单、自由、个性、充分体现软件的定位和特点。UI设计从工作内容上分3个方向研究人；研究人与界面的关系；研究界面。原型设计交互设计

视觉设计=狭义的UIUI

广义用户研究操作逻辑界面美观研究人用户测试/用户研究

Userexperienceengineer

我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这不能是句空话，所以我们UI设计，必须研究人，研究我们的用户，要了解我们的用户想要什么，要利用我们的产品解决什么问题，喜欢什么，不喜欢什么等等。用户研究工程师一般是心理学人文学背景。用户研究：得出定位与原型研究人与界面的关系交互设计师，interactiondesigner

即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常说的“易用性”。从事该行业的人，我们称之为“交互设计师”，主要做的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规范。交互设计：研究操作逻辑与体验理性感性研究界面语义与美感图形设计师：GraphicUIdesigner

国内目前大部分UI工作者都是从事这个行业。也有人称之为“美工”，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。从事该行业的人，我们可以称之为:软件图形设计师，其中大部分是有美术设计教育背景，例如视觉传达设计，工业设计，信息多媒体设计等。界面设计：研究用户审美与习惯UI的应用范围PC终端的软件界面。比如操作系统、软件界面、网页、多媒体光盘。手机的界面。数字电视的界面。空调等家电摇控器上的界面。银行、移动等柜员机上的界面。……UI设计基本原则

易用性包括三个方面，按重要程度排列如下：1.产品执行用户所需的功能（快速使用）2.快速安全地执行这些功能（相对无错）3.容易掌握使用这些功能。（易于学习）可用性易用性愉悦

体验UI设计师需要做到什么？1.简易性：界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。2.可控性：这是界面设计的先决条件，用户想要做什么，就一定让他做到，并且必须得到应有的提示。3.记忆负担最小化：人脑比不了电脑，人类的短期记忆极不稳定、有限。不要轻易打破用户的行为习惯，不要让用户思考。4.一致性：是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与实际内容相一致。同一软件的不同界面，同一界面的不同板块，同一板块的不同位置，都必须保持相当的一致性。5.提高用户的熟悉程度：用户可通过已掌握的知识来使用界面，但不应超出一般常识。如拟物法。从用户的观点考虑：想他们所想，做他们所做。大多数用户并没有相当的专业知识，他们往往只是从自身的经验和习惯出发思考和操作。把自己代入用户，设定为最糟糕的用户：无知，易怒，缺乏耐性。有序排列：一个有序排列的界面可以让用户轻松，让界面简洁美观。安全性：用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。灵活人性化：高效率和用户满意度是人性化的直接体现。要尽可能考虑到特殊用户的操作体验，如色盲，残疾人等。5W2H设计原则

WHOWHEREWHENWHATWHYHOWHOWMUCH用户身边充斥着专业术语万能软件修改前UI的分类2.2.1传统界面介绍传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按钮界面、门上的把手界面、仪器的拆装提醒界面、交通指示牌、手机键盘界面等。诸如此类的“硬件”界面就是我们所熟知的传统界面，他们的共同特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作，通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装提醒界面、交通指示牌，这些是不能对它们进行直接操作的界面，它们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。键盘界面——可操作界面相机界面电视机、遥控界面What’sHCI[1]人机交互（Human-ComputerInteraction,简写HCI）：是研究关于设计、评价和实现供人们使用的交互计算系统以及有关这些现象进

[2]人机界面（Human-ComputerInterface,简写HCI）：是人与计算机之间传递、交换信息的媒介和对话接口，是计算机系统的重要组成部分HCI&UI异同点人机交互与人机界面是两个有着紧密联系而又不同的。操作系统的人机交互功能是决定计算机系统“友善性”的一个重要因素。人机交互功能主要靠可输入输出的外部设备和相应的软件来完成。可供人机交互使用的设备主要有键盘显示、鼠标、各种模式识别设备等。与这些设备相应的软件就是操作系统提供人机交互功能的部分。人机交互部分的主要作用是控制有关设备的运行和理解并执行通过人机交互设备传来的有关的各种命令和要求。HCI硬交互（实体产品）

=人机工学+体验设计软交互（虚体界面）=UI交互设计&狭义UI异同点交互设计和界面设计的异同点界面是一个静态的词，当进行界面设计的时候，我们关心的是界面本身，界面的组件，布局，风格，看它们是否能支撑有效的交互.但是，交互行为是界面约束的源头，当产品的交互行为清清楚楚地定义出来时，对界面的要求也就更加清楚了，界面上（如果存在可视界面的话）的组件是为交互行为服务的，它可以更美，更抽象，更艺术化，但不可以为了任何理由破坏产品的交互行为。时间轴的行为设计:逻辑&体验视觉设计Recommendedbooks

/推荐书籍RecommendedWebs

/推荐网站////（GUI）///baiya/What’sUEUserExperience=用户体验它是指用户访问网站或者使用软件产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再次使用。他们能够忍受的问题，疑惑和BUG的程度。UCD=以用户为中心的设计（UserCenteredDesign）是在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。

衡量一个UCD优劣的标准？产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）用户主观满意度（satisfaction）延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后的整体心理感受等。UCD设计流程1.需求分析：（业务流程）目的：根据产品需求和设计要求提供用户使用分析。方式：访谈、焦点小组、提炼目标用户建立角色模型、场景分析、竞争对手分析、提炼定性和定量的相关数据。结论报告：根据分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。合作人员：市场人员、产品需求客户、项目负责人2.原型设计（信息架构+交互设计）目的：概念方案设计。制定产品的业务功能和界面规范。方式：与开发队伍合作设计各种交互原型。同商业方面的专家、市场部沟通，确认设计并得到认可。作角色模型设计和情景设计，通过情景的再现演示来总结和逐步细化用户使用中的各种交互需求，提出设计解决方案，并完成设计方案的演示，讨论，完善，和最终定稿。结论报告：制作交互设计原型。为用户界面和交互设计实施提供设计标准规格。合作人员：项目负责人、开发团队、市场人员3.视觉管理：目的：使界面设计更符合产品定位，用户使用习惯及规范布局，对实现功能进行正确有效地引导。方式：主持用户研究进行界面视觉引导。设计窗口规范，图形化的布局。结论报告：界面测试报告。==》输出视觉设计规范合作人员：视觉设计师4.可用性测试：目的:通过观察，来发现过程中出现了什么问题、用户喜欢或不喜欢哪些功能和操作方式，原因是什么。方式：一对一用户测试结论报告：用户背景资料文档、用户协议、测试脚本、测试前问卷、测试后问卷、任务卡片、过程记录文档、测试报告合作人员：测试自愿者、市场相关人员5.跟踪调查：目的：产品使用结果的反馈。方式：用户访谈，用户反馈结论报告：根据反馈意见及实际调查并根据预期目的撰写产品反馈结果报告。包括值得肯定的设计及对修改的建议。合作人员：产品用户、市场相关人员What’sWeb

2.0Web1.0的主要特点在于用户通过浏览器获取信息。Web2.0则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。网站内容的制造者是说互联网上的每一个用户不再仅仅是互联网的读者，同时也成为互联网的作者；不再仅仅是在互联网上冲浪，同时也成为波浪制造者；在模式上由单纯的“读”向“写”以及“共同建设”发展；由被动地接收互联网信息向主动创造互联网信息发展，从而更加人性化！

Web2.0特点1.用户分享。在Web2.0模式下，可以不受时间和地域的限制分享各种观点。用户可以得到自己需要的信息也可以发布自己的观点。2.信息聚合。信息在网络上不断积累，不会丢失。3.以兴趣为聚合点的社群。在Web2.0模式下，聚集的是对某个或者某些问题感兴趣的群体，可以说，在无形中已经产生了细分市场。4开放的平台，活跃的用户。平台对于用户来说是开放的，而且用户因为兴趣而保持比较高的忠诚度，他们会积极的参与其中。What’sGUI图形用户界面

=GraphicalUserInterface

指采用图形方式显示的计算机操作用户界面。与早期计算机使用的命令行界面相比，图形界面对于用户来说在视觉上更易于接受。图形用户界面

图形用户界面(GUI-GraphicsUserInterface)是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品化系统有Apple的Macintosh、IBM的PM(PresentationManager)、Microsoft的Windows运行于Unix环境的X-Window、OpenLook和OSF/Motif。当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。制作界面的软件介绍界面设计软件Photoshop\Illustrator\Flash\Coreldraw\3Dmax\Maya。交互设计软件

Auxre\VisolICON图标Icon：Icon即为图标，分为桌面图标和界面图标。桌面图标是软件标识，所以也可以称为Logo。界面图标是功能标识，表示功能与含义。图标能够将产品或功能的信息快速传达给用户，并获得更好的视觉体验，在软件界面中具有重要价值。

图标能够强调产品的重要特点，醒目地传达用户须知的操作重点图标可以减轻认知负担，尤其是对于复杂的产品功能图标可以使人机界面更加具有吸引力，不显得空洞乏味统一的图标风格能够加深用户记忆，给予他们信赖感移动设备ICON规范：由于受到移动设备屏幕尺寸和分辨的大小限制，icon的尺寸也不尽相同：Icon基本尺寸:96*9664*6448*4832*3216*1612*12Icon平台：

symbian、mobile、java、android、iphone、mtk不同平台对ICON的设计要求：

Symbian

Size:64*6432*3216*16

Filelayout:svgbmppng

Svg是一种矢量文件，可由AI转化生成，可以对图标文件无虚化无损拉伸和压缩，但是需要分层，容易产生乱码。

Bmp是最初使用的文件格式，不支持透明背景，现在已经被淘汰。

Png24支持透明背景不支持无损自适应缩放Mobile

Size:32*3216*16

Filelayout:ICOPs:winmobile不支持PNG格式,透明图标效果只能用ICO格式实现。Android

Size:64*6432*32

Filelayout:PNG24透明背景Iphone

Size:自适应Filelayout:PNG24透明背景无需其他效果，系统自动生成ICON表现技法：光感表现：材质表现：Interface：图形图标设计含义：图标是具有明确指代含义的计算机图形。其中桌面图标是软件标识，界面中的图标是功能标识。图标广义——具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广，软硬件网页社交场所公共场合无所不在，例如：男女厕所标志和各种交通标志等。

狭义——计算机软件方面的应用，包括：程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。图标的大小：图标有一套标准的大小和属性格式，且通常是小尺寸的。每个图标都含有多张相同显示内容的图片，每一张图片具有不同的尺寸和发色数。一个图标就是一套相似的图片，每一张图片有不同的格式。从这一点上说图标是三维的。图标还有另一个特性：它含有透明区域，在透明区域内可以透出图标下的桌面背景。在结构上图标其实和麦当劳的巨无霸汉堡差不多。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。因为计算机操作系统和显示设备的多样性，导致了图标的大小需要有多种格式。

操作系统在显示一个图标时，会按照一定的标准选择图标中最适合当前显示环境和状态的图像。如果你用的是Windows98操作系统，显示环境是800x600分辨率，32位色深，你在桌面上看到的每个图标的图像格式就是256色32x32象素大小。如果在相同的显示环境下，WindowsXP操作系统中，这些图标的图像格式就是：真彩色（32位色深）、32x32象素大小。下面就是Windows各个操作系统中的标准图标格式：（单位：大小象素—颜色）Windows98SE/ME/200048x48–25632x32-25616x16–25648x48-1632x32-1616x16–16

WindowsXP48x48-32bit32x32-32bit24x24-32bit16x16-32bit48x48–25632x32–25624x24–25616x16–25648x48–1632x32–1624x24–1616x16-16

图标的文件格式：在Windows操作系统中，单个图标的文件名后缀是.ICO。这种格式的图标可以在Windows操作系统中直接浏览；后缀名是.ICL的代表图标库，它是多个图标的集合，一般操作系统不直接支持这种格式的文件需要借助第三方软件才能浏览。

在图形用户界面中，系统中的所有资源分别由三种类型的图标所表示：应用程序图标（指向具体完成某一功能的可执行程序）、文件夹图标（指向用于存放其他应用程序、文当或子文件夹的“容器”）和文档图标（指向由某个应用程序所创建的信息）。

在Windows系统中，左下角带有弧形箭头的图标代表快捷方式。快捷方式是一种特殊的文件类型，它提供了对系统中一些资源对象的快速简便访问，快捷方式图标是原对象的“替身”图标。图标是具有指代意义的具有标识性质的图形，它不仅是一种图形，更是一种标识，它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远，从上古时代的图腾，到现在具有更多含义和功能的各种图标，而且应用范围极为广泛，可以说它无所不在。一个国家的图标就是国旗；一件商品的图标是注册商标；军队的图标是军旗；学校的图标是校徽；同时它也在各种公共设施中被广泛使用，如公厕标识、交通指示牌等；一个形象和一个图标之间有什么区别：计算机图像是一个点阵图（组成像素）或矢量（组成的绘图路径）的图片，可以使用各种不同的格式（BMP，PSD，GIF，JPEG，WMF...).所有这些格式有几种不同的属性（点阵图，向量，压缩，分层，动画...），可以用来存储图片，和决定任何大小。

图标是不同的标准图像。他们是有标准尺寸（通常是小）：16x16，32x32，48x48...图标组成的几个图片。他们各自具有不同的大小和数量，颜色（a通道，16色，256色，16.8M...).一个图标最重要的属性是其包含透明区域的能力，这种能力能让图标的方形图案后面的屏幕背景变得可见.什么是一个图标的结构：一个图标是一组图像，各种不同的格式（大小和颜色的）。此外，每幅图像可以包括透明的地区。这就是为什么你会发现一个透明的颜色在绘画调色盘为16或256色图片和一个变量的不透明参数使用Alpha通道，为新的RGB/A图像格式（不透明=0意味着透明）。图标设计：通过对图标的含义、图标的功能、图标的尺寸大小的分析，我们就可以根据图标的这些特点进行设计制作。首先要设计图标的外型，因为一个图标的含义几乎完全体现在它的外型之上，好的外型让使用者很快就明白该图标有什么样的功能，反之让使用者一头雾水，从而使用户产生厌烦情绪。然后是图标大小和分辨率的设计，一般来说图标的大小都是有规定的（前文已经提到过了），根据图标的分辨率和大小尺寸进行设计，就能控制图标的设计效果，不会最后设计出来的一套图标有大也有小的。然后就是整体效果的制作了，这个环节就需要你有充实的美术功底和软件技术了，图标的好与坏就取决于你这个环节的成果。这个环节需要注意的是图标风格的整体把握，不能做一套五花八门图标出来。最后是添加效果阶段，先整体调整图标色调，给制作好的图标添加高光和投影，有必要的话还可以加点特效，如闪电、发光、水晶等。这样就完成图标的设计了。扁平化设计抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果，从而打造出一种看上去更“平”的界面。扁平风格的优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。比产品设计更具有参照性，简而快比产品设计更有可能性，成本低比产品设计更有规则性，用户习惯一旦养成，大同小异比产品设计更有情感性，懒而美由此可知图形代替代码输入用户认知共鸣语义&美感&直观What’sIxDInteractionDesignWhat’s？

交互设计，又称互动设计，（英文InteractionDesign,缩写IxD或者IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the“interaction”,即人工制品在特定场景下的反应方式）相关的界面。交互设计作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔·摩格理吉（BillMoggridge）在1984年一次设计会议上提出。交互设计定义（一）简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。艾兰.库珀(alancooper)VB之父交互设计之父微软视窗先锋奖软件梦幻奖得主库伯交互设计公司创始人交互设计定义（二）设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”HelenSharp从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。DeDream交互设计行业的发展初创期（1929-1970）1959年，美国学者B.Shackel提出了人机界面的第一篇文献《关于计算机控制台设计的人机工程学》1960年，LikliderJCK首次提出“人机紧密共栖的概念，被视为人机界面学的启蒙观点1969年，召开了第一次人机系统国际大会，同年第一份专业杂志"国际人机研究（IJMMS）"创刊。奠基期（1970-1979）从1970年到1973年出版了四本与计算机相关的人机工程学专著1970年成立了两个HCI研究中心：一个是英国的Loughbocough大学的HUSAT研究中心，另一个是美国Xerox公司的PaloAlto研究中心发展期（1980-1995）理论方面，从人机工程学独立出来，更加强调认知心理学以及行为学和社会学等学科的理论指导实践范畴方面，从人机界面拓延开来，强调计算机对于人的反馈交互作用。"人机界面"一词被"人机交互"所取代。HCI中的"I"，也由"Interface(界面/接口)"变成了"Interaction(交互)"。提高期（1996-

）人机交互的研究重点放在了智能化交互，多模态（多通道）-多媒体交互，虚拟交互以及人机协同交互等方面，也就是放在"以人为在中心"的人机交互技术方面。交互的三个要素人界面机器/系统学科人类工程学心理学认知科学信息学工程学计算机科学软件工程社会学人类学语言学美学……设计图形设计产品设计商业美术电影产业服务业……交互设计人机交互（HCI）交互设计的范畴UCD设计理想流程简单说明：1.创造一些用户2.找出重要的活动3.找出用户模型--用户期望如何完成这些活动4.草拟出初版的设计5.一直反复把设计修改得更容易,直到虚构用户能轻易使用为止6.找真人来看着他们试用你的软件接收需求调研分析交互设计视觉设计可用性测试上线交互设计所做的事情可识别的形状布局尺寸色彩可感知记忆的语言的含义色彩的隐喻相对位置层级、关系……可物理衡量的流程点击次数移动距离姿势转换方式……交互设计的核心要素精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形式表达出来目标用户产品角色筛选分类脚本任务场景交互设计时需关注的可用性指标易学习容易使用容错性有效性用户满意度安全性

ISO9241/11中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。常用的交互设计工具VisioAxureillustratorFireworksWordPhotoshop从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。不像传统的设计学科主要关注形式，交互设计则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。

色彩+形状

考虑极端用户改版后的页面视觉层次得到了很大的提升。白色内容区域、浅蓝色右边栏和深蓝色的注册区域渐渐递进，深蓝色背景上的强烈反差的黄色按钮“SignUp”，引导着这个页面的主要目的，亦是重点。另外，大家可以发现，内容文字部分比先前的老版本少了一半一半再一半再一半。。。相应的，使用列点和大图的方式传递了相同的信息。“SignUp”显而易见，而且视觉上有突起的渐变效果也马上让人知道，那是个按钮。，原来占据垂直空间的Newitems/allitems的切换、markallasread等功能，全部藏匿在右上角的下拉按钮中。Refresh被替换成了一个可以容易理解的Refresh图标，顶端其他产品的链接也祛除了下划线。/DoitINTERACTION

DESIGN交互设计案例案例任务：在这个播放器中找出正在播放的曲目

案例任务：在这个播放器中找出正在播放的曲目

这首？这首？这首？这首？实际是这首，但是你能快速地找到它在右栏播放列表的位置吗？对比这个播放器，你不是能一眼就看出它的播放曲目了呢眯眼测试（squinttest）就是一直眼睛闭上，眯着另一只眼睛看屏幕，用于测试平面的布局是否清晰，正确，在模糊中是否能区分出突出元素，次要元素。三大区域：播放区，列表区，功能视窗区右边的播放器布局更为区分明显一些面对被模仿致敬的Mediaplayer，这个播放器并没有抓住其中关于交互的细节精髓。当然这个播放器还是有优点的，比如造型独特，有歌曲去重的功能，播放速度快，乐库广泛等等。讲到这里你或许会问了，难到交互设计就是这些细节性的问题吗？----不，不是的，这里讨论的不是细节，而是在人们使用产品的过程中因为细小的问题考虑不周到而影响了使用的体验。

细小到就如播放器上某个小图标的设置是否合理搜狗浏览器中，专门将不常用的菜单放置在浏览器右边，为的是不和浏览器左边常用功能混淆，减低出错性，增加易用度火狐浏览器中，将添加到收藏夹的按钮放在url旁边，位置显眼，而且省下了至少一个步骤讲到这里你或许会问了，难到交互设计就是这些细节性的问题吗？----不，不是的，这里讨论的不是细节，而是在人们使用产品的过程中因为细小的问题考虑不周到而影响了使用的体验。

细小到就如播放器上某个小图标的设置是否合理搜狗浏览器中，专门将不常用的菜单放置在浏览器右边，为的是不和浏览器左边常用功能混淆，减低出错性，增加易用度。同时，因为宽屏电脑的使用，这样做也可以增大垂直的空间大到整个流程的设计会员，跳转页面进入深航页面，选择机票（头等舱和商务舱都无座），下一步填写旅客信息和人数，显示机票价格，上一步下一步生成订单，上一步

财付通支付Qq会员登录验证，弹出登录框非会员，弹出框中提示，更换qq号码成为会员（弹出框可以关闭）Qq会员登录验证进入活动首页，点击预定或者查询腾讯深航合作项目预订机票简单流程图加粗字体为按钮上一个太简单，摘录一个比较复杂的来自/blog/2007/07/11/wapshili/网盘下载流程分析直到最后的将内容和流程翻译成界面语言---框架图当你理解交互是一个过程设计的时候，你就应该明白任何产品都需要交互设计，无论是互联网数字产品还是工业产品，只不过它因为偏重方向的不同而可能换了名字，人机交互，可用性，感性工程等等。案例：博物馆的交互设计MIXMIX来源/bnm/?cat=6INTERACTION

DESIGN用户体验和可用性用户体验的定义之一：是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受他们之间的关系是：交互设计是为了支持更好的用户体验

用户体验当我们提到交互设计的时候，我们总会联系到用户体验形式工业设计师图形设计师内容信息架构师文字编写者动画制作师声音分析师行为交互设计师基于用户体验的数字产品设计会包括这三个方面的关注：形式，内容，行为可用性目标工作效率高易学良好的实用性使用有效果使用安全用法易记引人入胜令人愉快令人满足有用富有启发性富美感激发创造性成就感情感满足可用性目标是交互设计的核心，但不是交互设计的全部。交互设计在满足可用性的同时，还要满足用户期望从用户的角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术。一个只是很好用的产品并不能完全满足人们的需求，有的时候，人们会因为忍受一时的不变，如果这个产品能带给他们更多的乐趣。更有趣更实用所有的产品都是一种服务，帮助使用者更好的达到目的的服务。帮助交流帮助清洁用一个服务行业的例子来类比产品，比如：移动大厅接待的服务员，做为顾客，你对她的期望1.着装整洁，漂亮2.办事高效3.态度温柔诚恳（不要冷冰冰）4.耐心5.说话简单易懂（不要一堆专业术语）6.不出错…期望还有很多很多，但是你希望你从营业厅走出来的时候，把要处理的事情正确地处理好，并且心情愉快。这也是你在使用一个产品之后所要的感觉，只有这样，才能留住用户。INTERACTION

DESIGN交互设计--理性（可用性）和感性（用户期望）并重的设计入门书籍推荐INTERACTION

DESIGNQuiz根据自己的经验和回忆，画出一个新用户注册流程图INTERACTION

DESIGNTHANKS,THEEND….What’sUIHowworkflowUI工作流程2025/3/12176竞争产品分析领域调研产出物新产品开发任务产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？概念模型分析功能结构图使用场景分析交互流程分析产出物第一次Check是/否通过？信息架构和界面原型要点说明产出物第一次Check是/否通过？详细设计设计和逻辑说明产出物第四次Check是/否通过？完成设计维护进入设计维护EndBASICRESEARCHPRODUCTANALYSEINTERACTIONDESIGNPROTOTYPEDESIGNDETAILEDDESIGNUSER六个阶段，每个阶段又有关键的工作内容和要求。2025/3/12177UE/UI设计流程第二阶段：产品分析产品定位

从软件提供者的角度分析产品推出的意义和重点关注的方面，实际考量、丰满决策层的idea，明确列出产品定位，通过讨论修缮取得决策层的认可；用户分析

结合竞争产品的分析资料，采用定性分析的方法，获得对产品目标用户在概念层面的认识；产品概述

以软件提供的身份，以最简短的文字，向用户介绍产品，突出产品对用户的价值。避免功能点的简单罗列，而应该在归纳总结的基础上突出重点；功能需求规格整理

在归纳关键功能的基础上，结合竞争产品规格整理的领域认识，从逻辑上梳理需求规格列表，重在逻辑关系清楚、组织和层级关系清晰。划定项目（设计和研发）范围；产出物：

用户分析文档和产品概述、功能规格列表

产品定位用户分析产品概述功能需求规格整理产出物第一次Check是/否通过？2025/3/12178UE/UI设计流程第三阶段：交互设计（功能结构和交互流程设计）产品概念模型分析

从产品功能逻辑入手，结合对常见软件的经验积累和竞争产品的认识，加上对用户的理解，为产品设计一个尽量接近用户对产品运行方式理解的概念模型，成为产品设计的基础框架；功能结构图

在产品概念模型的基础上丰富交互组件，并理顺交互组件之间的结构关系；使用场景分析

模拟典型用户执行关键功能达到其目标的使用场景；交互流程分析

模拟在上述概念模型和功能结构决定的产品框架之中，支持使用场景的关键操作过程（即鼠标点击步骤和屏幕引导路径）；产出物：

产品设计文档的交互设计部分概念模型分析功能结构图使用场景分析交互流程分析产出物第一次Check是/否通过？2025/3/12179UE/UI设计流程第四阶段：原型设计（信息架构和界面原型设计）信息架构和界面原型设计

设计产品界面中应该包含的控件数量和类型、控件之间的逻辑和组织关系，以支持用户对控件或控件组所代表的功能的理解，对用户操作的明确引导；所有界面设计成为一套完整的可模拟的产品原型；设计要点说明

对界面设计的重点添加说明，帮助涉众对设计的理解；

产出物：

产品设计文档的原型设计部分信息架构和界面原型要点说明产出物第一次Check是/否通过？2025/3/12180UE/UI设计流程第五阶段：详细设计（详细设计和伪代码编写）详细设计

完善设计细节、交互文本和信息设计（Messagebox）；设计和逻辑说明

对界面控件/控件组/窗口的属性和行为进行标准化定义，梳理完整的交互逻辑，用状态迁移图或伪代码形式表示；产出物：产品设计文档的详细设计部分

第六阶段：设计维护（研发跟踪和设计维护）语言文档整理

设计通过评审之后，把产品中所有的交互文本整理成excel