UIPower交互设计 - 《UI的革命》文字版
演讲者：UIPower用户体验部部长 陆国新博士
《UI的革命》第二部：《交互设计》，共分五讲：
第一讲：《交互设计的成功要素》视频地址：http://www.tudou.com/programs/view/NpcsEwIYVJg/
第二讲：《项目设计原则确定》视频地址：http://www.tudou.com/programs/view/f9_rmJckKCo/
第三讲：《控件设计方法》视频地址：http://www.tudou.com/programs/view/V6sMymWsOQY/
第四讲：《窗体设计方法》视频地址：http://www.tudou.com/programs/view/It8m6rkzINY/
第五讲：《交互设计流程》视频地址：http://www.tudou.com/programs/view/Mb6RYYeHpPg/
小编的话：时间一晃已经到了2013年的元旦，距过去的2011年10月份UIPower启动的《UI的革命》全国巡回演讲已经过去了1年多的时间。在这1年多的时间里，每天都能接到很多有关与演讲相关的电话和邮件。为了方便广大网友在不打开视频的情况下也可以了解演讲的内容，本站小编认真聆听并整理了演讲的内容形成了完整的演讲稿。现在将这些稿件发到本站的新闻栏目里面来，以供查阅。
UIPower官网：www.uipower.com
1、问候：大家好！今天由我和大家一起来分享革命性的交互设计。
2、什么是交互：对于设计师来说交互设计并不是一个陌生的词汇，而对于在座的老板或程序员来说，交互设计是一个新鲜的词汇。那么，交互是用来干什么的呢。一款软件的用户体验是否满足用户的需求，关键看两方面，第一个就是这个软件在UI上是否易用，第二个就是这个软件是否美观。从UI设计的职能上划分，软件的美观度由视觉设计完成，而软件的易用性则由交互设计完成。就是说交互设计是用来解决软件易用性问题的。
3、交互设计的重要性：
1) 打比方：从广义上来说，交互存在于我们生活的方方面面。比如，我们房子里面的内部格局，餐厅、客厅的位置、卧室的位置、阳台的位置等等。这些都决定了我们生活的起居的方便性。
2）软件交互决定了哪些：对于软件来说，交互决定了我们软件窗体的划分，比如哪个是主界面，哪个是设置界面，哪个是提示界面等等，这些界面之间又是如何弹出和相互联系的？再有，在窗体内部，我们控件的摆放位置，是固定的还是动态缩放的。控件与控件之间又是什么样的关系。一项功能可以有好几种类型的控件来呈现，那么我们到底应该采用哪种类型的控件，还是我们全新地创造出一种控件来表达。诸如此类的问题，也最终决定了软件UI在多大程度上能被我们的用户接受。3）好用与美观，好用有对错之分：对用户来说，首先是软件UI要好用，其次才是UI的美观度。软件UI是否好用可以采用合适的设备和统计学数学模型进行量化衡量，所以在交互设计上就能够通过一定标准进行量化的定性判断，最终可以确定某套交互方案是对的，还是错误的。但是，在UI美观度方面，类似这样的标准就显得有点力不从心了，因为视觉的评判更多来自于用户的主观，很多时候不同用户则会有完全相反的视觉评判结果，而交互的评判则不是这样，基本上每个用户都会得出统一的结论。所以，交互设计是能决定我们软件UI的正确还是错误，我们要在UI上做到征服用户，首先就要做到交互方案是正确的。
4）交互设计是重要的：从我们对以往的工作总结分析后发现，UI最终是否成功，80%取决于交互是否正确。因为交互设计方案是后面视觉设计和界面程序实现部分的行动纲领，如果交互方案错了，后道工序的很大部分的工作都是浪费。所以说交互设计是非常的重要！
4、革命性的交互设计：
1）介绍：革命性的交互设计具体体现在对传统交互设计的思想、方法和工具进行多层面的变革。
2）传统交互设计的思想：我们先来看看传统交互设计的思想，传统交互设计的思想只是以用户为中心的设计。在很多情况下，如果我们只是以用户为中心的设计往往会有好几套方案都可以，但哪种设计更符合我们的实际情况呢？所以传统交互设计在遇到类似这样问题时就显的比较茫然而无所适从。
3）革命性交互设计的思想：而革命性的交互设计思想是以用户为中心，以实现为目标。这里的实现是指程序开发。这就很好地解决了设计出来的交互方案程序却无法实现的问题。比如，我们想要把多个窗口以动态停靠的样式来组织，但是程序开发部门告诉我们无法实现，这是传统交互设计经常遇到的问题。交互设计师不了解程序开发，自然也就无法解决这个问题。在后面的讨论中我们将给出具体的解决方法。
4）革命性交互设计的方法：传统交互设计更多的是从工业设计等专业过渡过来的，虽然在大方向的方面与软件UI的交互设计有相通之处，但是，在具体的设计方法却有着非常大的差别。我们无法直接从工业设计里面借鉴具体的东西。UI交互设计更多的是强调是UI规则。传统交互设计从来就是在没有系统UI规则下的设计方法。革命性交互设计的方法就是建立系统UI理论和UI规则的基础上的。在“革命性交互设计方法”部分，我们将系统地介绍UI的各种规则。
5）革命性交互设计的工具：传统的交互设计一般采用有以下几类工具，如Visio、Axure、腾讯的UI Designer等。然而革命性交互设计则需要所见即所得的可执行原型的快速开发工具。在“DirectUI Designer”部分，我们将详细介绍该工具的具体使用方法与该工具区别于其他原型制作工具的优势。
5、承上启下：如果我们把交互设计思想称之为交互设计的战略的话，那么交互设计的方法就是交互设计的战术。战略的最终结果是需要战术的执行来保证。而战术的成功最后还是要需要具体工具的支撑。接下来，我们先开始介绍革命性的交互设计方法。
1、革命性交互设计方法的特点：
1) 传统的交互设计方法过于抽象：传统的交互设计方法更多强调抽象的设计理念，但在实践中，一般的交互设计师面对这些抽象的理念还是感觉非常的力不从心。原因在于传统的交互设计的方法不够具体和明确。
2）革命性交互设计的特点：革命性的交互设计最大的特点是在设计前期有一套有别于传统交互设计的理论，同时在设计中期又有一整套的UI交互具体的模型。这些模型可供设计师选择或在它基础上进行创新的。
2、革命性交互设计理论：我们先来谈一下它的理论。大家知道没有规矩不成方圆，我们先要确定针对当前项目的交互设计原则。这里的原则是与具体项目相关连的，所以每种类型的项目，它设计原则都不会相同。只有我们在确定了项目具体的原则后，才能判断设计方案的对错和优劣。它是我们设计的评判标准。
3、客户案例介绍：好，现在让我们来看一个具体的案例：广东佳和通讯公司有一款软件的UI需要我们来帮他们做改造。那款软件是针对企业开发的，配合程控交互机一起使用的，可以进行打电话、发短信、聊天、传文件、语音视频、群聊、联系人管理、聊天记录管理等。
我们当初接手这个项目的开发时，他们的设计师已经做了一个版本的设计。大家请看屏幕。大家看看该设计在交互上有什么缺陷呢？开始评判之前，我们首先应该怎么样？应该要确定标准，就是交互设计原则。
4、佳和项目的交互设计原则：那个项目在具体设计之前呢，我们对该项目进行了系统的用户调查和用户研究。我们根据用户研究的结果，来分析一下它的交互设计原则到底是什么？
第一，这是一款即时聊天软件，在设计中要体现IM软件的用户习惯；
第二，这是一款与电话相关的软件，在设计中要体现方便打电话、发短信的操作；
第三，这是一款企业用的软件，同时要体现企业组织架构图；
第四，以联系人为中心，先找到联系人然后进入各种功能入口；
第五，在IM上，与QQ的用户群体不一样，在电话功能上，与Skype的用户群体也不一样。
以上是我们总结的该项目的五项原则。
5、案例错误分析：好，我们回头再看客户美工做的设计图。
1）IM原则不满足：即时聊天的UI在用户调查后发现，90%的用户都习惯于目前市面上常见的纵向长条形，比如QQ主界面的样子。而他们设计的却是横向的。这给用户造成一种误导，很少有人会把这个界面与即时聊天联系起来。
2）电话软件无法体现：这是一款打电话软件，应该让用户可以直接拨号，而不是像这个还要点击这个图标才行。
3）架构图的设计问题：这是企业用软件，要体现企业组织架构图，这就要求我们的联系人列表要以企业架构图的形式来组织，而这里的确体现了这点，但是没有很巧妙地将架构与联系人融合在一个控件中来表现。他们这样的设计会让人感觉比较古板而缺乏创意。另外，根据用户研究发现，用户使用架构查找联系人的概率在30%左右，就是说在很多情况下，用户是不需要看见左边架构图的。在用户不希望看到架构的时候，在这里常现是不是占了用户的视觉空间？巧妙的设计是当用户的需要的时候才出现，不需要的时候静静地等待触发。
4）以功能为中心，没有以联系人为中心：从这个图上看，很明显它是以功能为中心的设计。现在我们发现有很多的软件在UI改造之前基本上都是以功能为中心的设计，这样的设计一般都是程序员干的，在业务开发的初期将能够想到的功能一一实现出来，并罗列在一起就形成了一堆功能的列表。这是很多软件开发企业在UI上最容易犯的错误。我要强调的是以功能为中心的设计并不是站在用户的角度思考问题，更多的是站在我们的软件开发者的角度来安排UI结构。从上面的讨论中我提到该项目应该以联系人为中心来设计。这里的中心就是我们软件交互的操作核心，一切的功能入口都围绕着联系人来进行。用户在进行任何一项操作之前，都必须先找到联系人，然后才能进行具体的操作。这样的设计会给用户概念清晰，操作简单，步骤明确。任何功能的入口在联系人的基础上只需一步就能到达。这样就大大减少操作的冗余性。
5）与QQ、Skype的用户群体的区别：最后，我们要特别指出，客户的这款软件与QQ、Skype在用户群体上有很明显的不同，我们可以借鉴别人对我们有价值的部分，但不能在某些模块设计的时候完全照搬。
5、承上启下：以上，是我们在项目中确立的交互设计原则，是交互设计的框架性方法。有了这些具体的原则以后，我们就有了原始的UI交互雏形。在此基础上，我们通过具体的窗体交互设计方法和控件交互设计方法来进行进一步的设计。最终形成一个相对完整的交互设计稿。
1）窗体交互类型列表：我们目前所见到的软件窗体无非可以归纳为以下几种交互类型：导航型、菜单型、提示型、输入型、状态型、悬浮型、列表型、组合型等。
a)鸟瞰式:这种类型适用于给用户提供功能一致数据不同的多个点自由选择的全局视角的交互展现。这种类型的特点是：
1) 全局的视角，着重现实表现：给用户一个全局的视角，与现实世界的理解差距小。用户一看到这样的图一般都能很快理解这个图的意思。
2）多点，用户可以自由选择：第二个特点是，用户可以从多个点中自由选择感兴趣的一个点进入。
3) 功能一致，但数据不同：第三个特点是，无论用户选择进入哪个点，功能完全一致，只是具体点的数据不同。
上面是鸟瞰式导航的三个特点。现在我们举一个例子。比如，我们有一款展示全国多个地方的同一种设备不同数据状态的软件，这个时候可以在该软件的主界面最重要的位置放上鸟瞰式导航交互，就可以让软件的用户很方便地操作到他们所需要的设备数据。
b)业务流程式：这种类型适用于强调流程概念的功能不一致的多个点自由选择的全局视角的交互展现。这种类型的特点是：
1）全局视角，着重抽象表现：第一，它给用户一个全局视角，但与鸟瞰式导航不同的是，它更多的是强调抽象的流程整体表现。往往用来告诉用户整体的业务流程的走向；
2）多点，自由选择进入：第二，用户可以从多个点中自由选择一个点进入；
3）多点的功能不一致：第三，与鸟瞰式导致不同的是，这里的每个点代表的是一个特有的功能，每个点是整体流程中的一步，每一步又有具体的业务细节。所以每个点的功能是完全不同的。
上面是业务流程式导航的三个特点，现在我们举一个例子。比如：ERP系统里面有采购、仓储、销售、生产、财务等模块，如何让我们的用户一目了然地理解我们整个业务流程并避免他们犯错，我们可以将这些功能模块以业务流程式导航交互将它们组织起来。这样就可以让用户在很好理解整体业务流程的基础上选择一个当前需要进入的功能模块进行操作。
c)询问式：这个类型比较适合于询问用户下面进行哪一步操作。这种类型是非常常见的，比如我们弹出消息对话框，让用户选择是还是否。当然这是最简单的一种，复杂一点的就是有很多选项供用户选择，在每个选项中还提供直观的提示性的效果图，类似我们常见的换肤软件的皮肤选择窗口，它来询问用户选择哪套皮肤来进行换肤。概括起来，询问式导航交互的特点：
1）问询为主:第一，由于是询问，所以在这里要体现文字的友好性。要在这里做到为用户服务的语气。增加用户对软件的好感。
2）控制执行流程：第二，询问用户下一步的操作，用户可以取消选择也可以选择一个执行。所以用户的操作直接影响到软件执行的流程。在软件最关键的地方，比如用户要关闭软件，但是文档并没有保存，这个时候应该弹出询问式窗体告知用户如果不现在保存将会导致数据的丢失。软件最终是关闭还是没有关闭，还是不保存数据都在用户的选择中确定。
3）弹出式模态窗体：第三，询问式导航一般都是弹出式的模态窗体，选择之前，用户无法再进行其他的任何操作。
询问式窗体是最常见的，但也要注意合理的设计，如果设计不好则会让用户感觉特别厌烦，一直不断地弹出窗体询问，用户会将整个软件关闭掉。设计的好，会大大提升用户对软件的好感。亲切的问询语言，恰当提示性设计会令用户感觉超值的享受。
d)轨道式：这个类型适用于引导用户一步一步按提示操作，就像轨道一样，用户不容易跑偏。它的主要特点为：
1）方向性的操作：第一，它采用下一步下一步来给用户做向导，当然用户也可以通过上一步上一步回到之前的操作界面。这就好比站在轨道上走路一样。所以，它具有很强的方向性，给用户一种特别贴心的感受，好有安全感。不用担心因为操作失误到导致很严重的错误；
2）引导性的语言：第二、它就像一位导游，每到一处就向用户介绍当前所处位置的详细情况，包括很多的注意事项；
3）结果的确定性：第三、无论用户怎么操作，都能确保结果的正确性。
以上是轨道式导航交互的三个特点。现在举个例子，比如，安装程序的界面。这是我们大家都非常熟悉的。无论你怎么点击下一步，反正可以确保能够成功的安装，当然如果对前面的设置还不是很满意的话，可以回到上一步或上几步。
6）窗体交互设计方法总结：好了，通过以上我们对四种类型导航类交互讨论后发现，UI的交互设计如果在没有系统的UI规则和交互方法的基础，我们是不可能设计出满足用户需求的交互设计的。UI的窗体交互规则是一个非常庞大而复杂的系统，只有充分了解这些了这些规则，我们才可以创新和打破规则。
7）承上启下：我们有了窗体的交互设计方案以后，我们就得选择合适的控件来呈现当前窗口的交互方案。下面，我们将分享一下控件的交互设计方法。
2、控件的交互设计方法：
1）控件的交互类型：目前的控件的种类大致有上百个，但从交互的角度来划分的话，可以分为选择型、编辑型、展示型、列表型、控制型、组合型等几种类型。限于时间有限，我们在这里重点讲讲列表型。
2）列表型：列表型控件适合于多项数据以某种组织方式进行展现，可以被选中，并进行多项数据的批处理。大家请看大屏幕，我们看这里的列表（1、分组列表型；2、图标列表型；3、树状列表型；4、滚动列表型；5、扩展列表型）。我们只列出了以上五类，其实列表型还有好几种，限于今天的时间有限，我们就讲上面五种。好，我们先来看第一种。
a)分组列表型：分组列表型比较常见，如即时聊天的好友列表。这种类型的控件交互特点是可以对里面的数据项进行分组，分组内的数据项可以按一定的规则进行排序，分组本身也可以排序。简单类型的分组列表一般只支持一级分组，复杂类型的分组列表可以支持两级以上的分组。我们再来看第二种。
b)图标列表型：图标列表型在一些视频软件中比较常见，一般用来展现影片的缩略图、名称、热度等信息。这里图标未必指的只是Icon，而是图片、文字等按某种方式组织后一个逻辑单元。这种类型的列表适合于大量缩略图需要展现，并且尺寸在32*32像素到256*256像素尺寸之间。这样的列表可以允许用户的鼠标移上去以后动态出现提示信息，或者同时浮出多个快捷按钮等。我们再来看第三种。
c)树状列表型：树状列表型是树型交互与列表交互两种类型的结合体，这种类型适合于既要展现数据的层次结构又要展现数据的多类别信息展示。比如，企业的组织架构联系人列表。企业的组织架构就是一个树状的结构，而联系人又要按姓名和职称等多个类别来展现。请看屏幕上的效果图。
d)滚动列表型：我们再来看第四种滚动列表型。这种类型适合于少量缩略图类型数据的展现，它具体表现为屏幕上的效果图的样子。当我们鼠标不在控件上时，它呈现为一行同样大小的图像。而当我们想要操作该控件时间，它两侧的玻璃质感的罩子变慢慢显现出来，它是用来滚动里面的数据项的。当我们的鼠标移到某个数据项的缩略图上面时，停留在下面的面板便慢慢向上滑动。将该数据项的详细信息和快捷操作按钮都展现出来，这样就能大大满足用户的按需触发的交互需要。大家看到的这个控件效果是来自于盛大网络的PPNext视频软件，这款软件的UI是由我们设计并主导开发的。这个就是该软件主界面的影片推荐控件。
e)扩展列表型：最后，我们再来看看第五种类型的扩展列表型。该类型的初始列表数据非常简单，但是当我们进行选中后会展开很多额外的控件给我进行设置，这种列表在初始时提供用户关注的内容同时也可以为用户带来额外的操作。大家请看该类型的效果图。
3）控件交互设计方法总结：从上面的讨论中发现，单单一个列表型交互也有那么多种类的模型，可想而知，所有类型的交互模型就更加复杂和庞大。
4）承上启下：上面我们讲到了窗体和控件的交互设计方法，这是战术问题，如果我们只能保证战术的正确，整个战役也未必能获得胜利。所以要保证最终的成功必须要靠战略的正确。交互设计的流程就是战略。如果我们的流程不合适或不正确，势必会导致我们整个设计工作的返工甚至失败。接下来呢，我们就来探讨一下革命性的交互设计流程。
四、交互设计的流程与交互设计成功的要素
1、交互设计流程：大家请看革命性的交互设计流程图
1）用户研究和需求征询：
a) 用户研究：采用多角度多层面的用户调查，比如对软件的用户代表进行调查问卷，对客户公司的销售经理、销售代表、售前技术支持人员、售后技术支持人员、客服人员进行面对面的问询式调查。调查的内容涉及用户的习惯、年龄、性别、文化程度、地理条件、社会环境等。工作人员将这些调查得来的第一手数据进行统计学的系统分析后，进行用户研究。研究后将得出相对具体并接近于客观的结果。这里值得一提的是，用户研究涉及的面非常广，牵涉到的人也比较多。在这个环节是最原始数据的收集，工作量相对比较大。所以要做好这个部分的工作靠的不是技术，靠的是客户单位领导的重视与执行力。我们也时常遇到某些客户里面的工作人员，都顾及自己岗位上的任务的完成，而不屑与我们配合或非常认真地配合做相关的调研。所以这个时候就需要客户领导强有力的执行力来保证工作的顺利贯彻下去。这里的工作做到位了，后面工作的评判标准才可能正确。
b) 需求征询: 需求的征询也有多个层面的，首先是规划层面的需求，就是客户打算将下一版的UI做什么内容和做到什么样的程度。其次是现状层面的需求，就是客户当前存在的哪些UI问题。最后是全局层面的需求，就是如何保证与企业的CI、VI进行无缝兼容。参与的人员一般有用户代表、销售部人员、产品经理、技术总监、设计人员、程序开发人员，当然还有老板。需求做的越全面越好，尽量做到各种现有的、未来可能要做的都一并考虑进来，最后进行系统的分析与整理。这部分的工作的关键是要确保需求全面而深入。所以就需要做好两部分的工作，第一个就是UI改造负责人能够列全所有关注的点，第二个就是客户单位的相关涉及人员能够认真而深入的提出具体的需求。在UI项目负责人的引导下把涉及人员的内在需求一点点挖掘出来。以上是流程的第一步，用户研究和需求征询。
2）提出多套交互设计方案：交互设计师在用户调研和客户需求的基础上，提出多套交互设计方案。交互设计方案的质量完全取决于交互设计师的经验与能力。如果他们对正在设计的项目没有制定出设计原则就开始设计，结果可想而知。如果他们没有系统的窗体和控件的UI交互规则的训练，也一定会导致很多低级的设计错误。所以这个环节的关键是设计方案不在于多，而在于精- 设计的质量是第一位的。所以我们这里指的多套是指高质量的多套设计方案。交互设计师一般存在于专业的UI设计公司里，而客户一般都没有专门的交互设计岗位。但客户也可以将美工或产品部的人员经过培训训练成专业的UI交互设计师。交互设计基本是一套方法论和一套工具，所以对于这个岗位，对技术基础的要求并不高。关键是设计师的思维要活跃，思路要清晰，性格要外向。如果大家有兴趣，可以参加我公司的《五天打造UI交互设计高手》的系统培训。以上是交互流程的第二部，提出多套交互设计方案。
3）开展头脑风暴会议：在上面的多套方案中如何确定一套相对最合适的？一般公司都会召开一个会议。但参与的人员角色一般都不够全面。革命性交互设计流程主张以下六类角色的人员来参加头脑风暴会议。
I) 用户代表：部分典型用户的代表；负责设计方案可操作性的认证。
II) 市场部人员：销售经理、销售代表、售前技术支持、售后技术支持、客服；负责设计方案可操作性的认证，将平时从用户中收集的各类建议甚至是抱怨都整理出来进行逐一在方案中验证，看看在新方案中是否已经得到了解决。
III) 产品部人员：产品经理、其他涉及成员；会议主持者，同时也负责设计方案是否达到全部的需求。
IV) 技术部人员：技术部经理、项目经理、主要开发人员；负责方案的可行性。
V) 设计部人员：美工或设计师；负责交互创意的确认。
VI) UI设计公司人员：项目负责人、项目交互设计师、项目视觉设计师。负责方案的陈述与现场及时调整。
主要由以上六类人员参与。另外，该会议是一次头脑风暴的会议，与平时开的会议模式不同，所以要保证大家畅所欲言，各抒己见。关于用户代表人员，根据各个单位的情况，如果用户代表实在没有办法请到公司开这个会议，可以将方案提交给用户现场去确认。但这一环节必须得有，否则我们的结果无法保证。
4）形成正式的交互设计文档：头脑风暴会议之后得出一个最适合目前项目的交互设计方案。并对窗体中的控件等细节进行充实与完善，然后形成正式的交互文档。一般公司到这步就算交互设计完成了。那么我们不禁要问，我们头脑风暴出来方案真的符合大部分用户需求吗？是最合理的吗？难道没有一点错误了吗？作为革命性UI交互设计，做到这步还远远不够。凡事没有通过实践证明了的事物并不能真正说明它的合理性。甚至还存在很的错误。如果我们不尽早对设计出来的方案进行实验证明就会导致后面的工作大面积的返工。所以，接下来的步骤就还是交互测试。
5）交予测试：革命性UI的交互测试的核心就是交互实验。要进行实验必须具备如下的两个条件：
I）可执行原型快速制作工具:原型制作工具目前比较流行的有Visio、Axure、腾讯的UI Designer和UIPower的DirectUI Designer等。但是可以很好支持快速原型可执行的工具只有腾讯的UI Designer和UIPower的DirectUI Designer。关于DirectUI Designer工具的如何使用以及它的主要特点，我们在后面的工具一讲中详细介绍。
II) 眼动议：我们设计出来的方案经过原型制作工具后就生成了可以执行的程序，用户通过对可执行程序的操作就可以很直观地理解UI的交互是否合理。如果我们想要对交互方案有一个比较客观评价，那就得借助于眼动仪。眼动议是记录眼球在屏幕上停留和滑动的轨迹。通过坐标的分析就可以很清楚地发现用户查找每个功能的入口用了多长时间。如果某些功能，用户用了很长时间才找到入口，那么就表明该功能的入口按钮的位置是不合理的，急需调整。
好了，有了以上两个关键性条件，下面我们就可以招募与用户群体相对接近的20位左右的人员进行实验。实验中，被测人员头带眼动仪，根据我们的预先安排好的测试用例中的操作脚本进行一项一项功能的测试。在每项交互功能测试中，都会用到可执行原型程序进行UI的操作。同时在被测电脑上还安装有屏幕录像软件，实验室也有高清摄像头，对用户的操作行为进行全程的记录，对那些测试不认真的人员在事后的分析中可以做到剔除测试结果。所有的操作脚本全部执行完毕后，首轮的现场测试就告一段落，接下来工作人员就可以对测试得来的各项数据进行统计学分析，最后对我们之前的交互设计方案提出改进意见。一般首轮测试提出的问题比较多，从第二轮开始问题相对减少。一般迭代测试到第四轮基本上就没有什么明显的原则性问题了。没有原则性问题和明显改进问题以后就算测试结束，最终交互实验室负责人会出一份交互测试报告。大家请看屏幕。我们为UUSEE做的交互测试，这是我们出的交互测试报告。
6）行成最终的交互设计稿：经过测试后的交互方案是比较稳定并且合理的。所以这里就可以为后面的制作交付物了。如果采用一般的Axure工具制作的交互设计稿，在后面的设计与程序开发步骤中还需要重新制作交付物。而如果采用DirectUI Designer则不再需要重新制作交付物，只需要在原有的基础上替换视觉图片和程序调用就可以了。关于工具的详细介绍请看工具的演讲。
7）与客户进行最终结果的确认：由于交互设计是整个UI设计的行动纲领和指导原则。所以，告诉客户经过确认后，以后交互不能再做随意更改了。到这步交互设计也就正式的完成了。
8）开始后道工序的设计与开发：交互设计正式完成后，就可以同时展开视觉设计和界面程序实现层的开发。这样也大大缩短开发的周期。
以上七个是交互设计流程的关键步骤。
2、交互设计成功的要素：从上面我们对革命性的交互设计流程的分析中发现，有两个方面决定交互设计的成败：第一个是交互设计方案的质量，第二个是交互设计方案的测试。而交互设计方案的质量要靠熟练的交互设计师和交互设计工具来保证，而交互设计方案的测试要靠可执行原型制作工具来保证，没有可执行的原型，测试无从谈起。而一般来说交互设计工具和可执行原型制作工具是属于一套软件，比如DirectUI Designer就可以既支持交互设计也支持可执行文件的生成。所以总结下来后发现，决定交互设计成功的最核心的要素是以下两点：
1）经验丰富的交互设计师：如何成为一名经验丰富的交互设计师。可以通过参加UIPower的《五天打造UI交互设计高手》的培训来达到。
2）功能强大的交互工具：在交互设计阶段和交互测试阶段都需要用到DirectUI Designer。在设计阶段，它有丰富的交互原型可供设计师直接拿来用，在测试阶段，它可以直接另存为可执行EXE程序。关于工具的详细介绍，请看下一讲“交互设计工具– DirectUI Designer”。
五、交互设计工具，DirectUI Designer:
从上一讲中，我们分析到决定交互设计成功的两个要素是：经验丰富的交互设计和功能强大的交互工具。在这一讲中，我们来讲讲功能强大的交互工具DirectUI Designer。总体来说，工具可以在交互设计和交互测试两个最关键的环节中应用到。好，现在我们分别来讲解。
- DirectUI Designer在交互设计环节中的应用：要保证我们的交互设计的质量，首先就得保证我们的交互设计师了解很多的基础性的交互规则。从我们对窗体的交互设计方法和控件的交互设计方法的讨论中发现：要整理出，并且灌输给每个交互设计师，并确保每个交互设计师都能灵活运用里面的各种UI交互规则，绝不是一件简单的事情。UIPower在UI探索的道路上一直倡导将复杂的事情简单化，将具体的事情抽象化，并逐步形成标准化的UI元件。在这里，UIPower的理念是让交互设计师在种类繁多划分清晰的交互模板的基础上进行甄选，找到符合当前项目需求的交互原型，然后在此基础上再进行适当的创新和修改。这样就可以避免很多低级的原则性的错误。我们将这些大量交互原型以窗体或控件样式方式管理。就好比，交互设计师在选用PPT模板一样方便地进行交互设计。值得一提的是，这个交互原型库，可以很方便地添加新的交互原型样式。比如，我们有一个登陆界面的原型在设计，通过以往既有的几个交互原型拼装后发现还有可以优化的地方，这个时候我们就可以将修改后的新的交互原型保存为交互原型模板文件，加入到交互原型库中去。这样，交互原型将变的越来越丰富。从而大大节约了交互设计师重复的工作量。有了DirectUI Designer以后，交互设计师不再需要理解一大堆窗体和控件的交互规则了，只需要根据项目需求从交互原型库中选择合适的原型拼装就可以了。这样就大大提升交互设计的质量和效率。
2、DirectUI Designer在交互测试环节中的应用：交互设计做的怎么样，最终还是需要通过实验来验证它可行性。而交互实验的前提就是要有可执行的原型程序。对于传统的UI设计来说，这是不现实的。要让软件工程师配合开发可执行的原型也是不太可能的，原因在于，设计中的交互原型会频繁修改，有时候会大面积修改，而对软件工程师要适应这样大幅度修改的简直是要命的事情，无论软件工程师如何刻苦努力，实现的脚步永远无法跟上交互设计变化的需求。所以，在交互设计领域就出现了各种形式的做法来克服以上的问题。其中最为典型的是“阿里巴巴UED团队的纸上原型设计方案”，通过简单的物理性物件，比如卡片、背板、纸张等。来快速拼装各种原型。这个方案相对于在文档中通过画图来设计交互原型要灵活和方便许多，因为只要感觉不合适，可以直接拿掉或补充一个卡片。非常适合于头脑风暴环节的交互设计讨论。但它的缺陷也非常的明显。它只能作为交互设计讨论的媒介，而无法用来实验。因为只要实验就必须模拟电脑里面的真实的操作。这对于纸上原型来说，根本无法做到的。正是因为这个原因，阿里巴巴的UED团队在纸上原型的定义中，就首先明确了原型不是交付物。不过，大家想想，如果我们能做到原型在不断迭代修改后，最终能成为交付物，岂不是更好？而且纸上原型还有其他的弱点，就是不能拷贝复制，更无法重用了。
但我们很高兴地方发现，纸上原型的操作理念与我们的DirectUI Designer有着异曲同工之妙。只是媒介不同，操作思想有很大的相似。DirectUI Designer只需要通过另存方式就可以直接生成可执行的交互原型程序。把传统交互设计中遇到的各种障碍都全部解决了。
目前市面有很多款原型制作工具，如Visio、Axure、腾讯的UI Designer等。而这些工具与UIPower的DirectUI Designer相比，都缺少了最核心的交互设计原型模板。同时它们也不能作为最终UI的交付物的一部分来存在。它们只能作为一种中间状态，还需要人为地去理解和转换才可以。另外，这些工具在使用范围上局限性比较大。Visio只能作为文档级别的来用，Axure只能在web软件中使用，C/S架构的交互方式无法通过Axure来展现。腾讯的UI Designer只能面向C/S客户端软件进行设计，并且在控件原型上，还非常的有限。综合以上各项指标，DirectUI Designer工具是UI交互设计中最具革命性的工具之一。将在未来很长一段时间内，帮助我们的交互设计师快速地构建项目的交互原型。
好了，我对交互设计的演讲，到这里就告一段落了，再见！
具体可见：http://www.uipower.com/index.php?m=content&c=index&a=show&catid=15&id=204
UIPower交互设计 - 《UI的革命》文字版相关推荐
- 计算机ui答辩,交互设计ui设计毕业论文答辩
<交互设计ui设计毕业论文答辩>由会员分享,可在线阅读,更多相关<交互设计ui设计毕业论文答辩(16页珍藏版)>请在人人文库网上搜索. 1.交互设计,UI,设计,毕业论文答辩, ...
- UIPower视觉设计 - 《UI的革命》文字版
小编的话:时间一晃已经到了2013年的元旦,距过去的2011年10月份UIPower启动的<a href="http://www.uipower.com/peixun/"&g ...
- [交互设计工具/原型创作工具]Axure RP Pro 5.0新特性 破解版 注册码
先感谢木的{moond},要不是一次提供了那么多画原型图的工具,我现在还在Word和Visio里面打转呢. 这些软件能试用的我差不多都用了一下,其中觉得Axure的RP Pro 4挺好的,功能包括站点 ...
- UIPower界面开发 - 《UI的革命》文字版
小编的话:时间一晃已经到了2013年的元旦,距过去的2011年10月份UIPower启动的<UI的革命>全国巡回演讲已经过去了1年多的时间.在这1年多的时间里,每天都能接到很多有关与演讲相 ...
- 推荐好书：About Face4, 交互设计精髓，英文原版，文字版，彩色
About Face4, 交互设计精髓,英文原版,文字版,彩色:https://www.lanzous.com/i4t943e 直隶总督李鸿章因忙于议和,未及复奏.其时,李鸿章之侄李经羲新 任云南巡抚 ...
- 软件观念革命:交互设计精髓_万字干货，交互设计精髓105条设计原则(附中英PDF资料)...
<About Face: 交互设计精髓>称得上是交互设计的圣经,用"工作必备,常看常新"来形容也不为过.书中的每句话对平时的实践都有着指导意义.更难能可贵的是,这本圣经 ...
- 原型图、交互设计、UI图，到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. 做原型是表 ...
- 原型图、交互设计、UI图的关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. 做原型是表 ...
- 原型图、交互设计、UI图的小结
原文链接 其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结. ...
最新文章
- StingBuffer
- 【解题报告】【HDOJ1392】【Graham凸包】Surround the Trees
- 精通jQuery选择器使用 转一篇
- ZOJ3772_Calculate the Function
- MFC复选框CheckBox使用
- 从当前元素继续寻找_169. 多数元素
- 三、常用行内元素与块元素
- Java 10 正式发布！时隔 6 月带来 109 项新特性
- 主从复制1062错误解决方法
- 工业用计算机使用环境温度范围,IEC 61000-2-2
- 大学论文的研究框架是什么？
- BC26 电信IOT平台 MCU软件升级
- Windows下 Jenkins 下载、安装
- iredMail安装
- 2018年强势推荐区块链产品项目：流量魔盒详细操作攻略
- nagios监控系统环境部署安装（LAMP环境）
- 向NCBI上传16S rDNA数据的操作详解
- 线程和进程的区别 线程和进程有什么不同
- 模型机设计（学习笔记）
- SA-NET: SHUFFLE ATTENTION FOR DEEP CONVOLUTIONAL NEURAL NETWORKS