交互设计

交互设计教InteractionDesign1-What/什么是交互设计？2-How/交互设计的程序是什么？3-Do/展开优秀的交互设计？What那一个网站的内部结构是什么呢？交互设计侧重于设计层面中的第二层：行为设计交互设计与产品设计有着一样的设计流程与方法普通青年文艺青年本能水平的设计(Visceral)外形行为水平的设计(Behavioral)使用的乐趣和效率反思水平的设计(Reflective)自我形象、个人满意、记忆这里翻译成“层面”而不是“层次”，就是因为这三者是一样的重要同样的理论映像到界面设计(1)UCD设计心理学(2)产品：人机工学，造型美学，产品体验，(3)市场：V=F/C1.用之前：看——想用：界面美观，图标有很好的语义引导；2.用之中：用——容易：原型架构逻辑性强；3.用完后：想——黏度：习惯；时间轴的行为设计所以•一样的开始：问题导向型解决方案；•一样的过程：交互设计与产品设计的流程是类似的；•一样的终点：实用性-易用性-愉悦性；基于理性，成于感性；•几个概念AboutConceptWhat’sUI软件设计分为：编程与UI•UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI=User'sInterface=用户界面/人机界面好的UI设计？软件的操作变得舒适、简单、自由、个性、充分体现软件的定位和特点。UI设计从工作内容上分3个方向研究人；研究人与界面的关系；研究界面。•原型设计•交互设计•视觉设计=狭义的UIUI广义用户研究操作逻辑界面美观研究人用户测试/用户研究Userexperienceengineer我们所开发的软件等产品，最终都是为人而做的，所谓以人为本，这不能是句空话，所以我们UI设计，必须研究人，研究我们的用户，要了解我们的用户想要什么，要利用我们的产品解决什么问题，喜欢什么，不喜欢什么等等。用户研究工程师一般是心理学人文学背景。用户研究：得出定位与原型研究人与界面的关系交互设计师，interactiondesigner即人机交互，研究如何让用户更好的更方便的使用软件，则是我们常说的“易用性”。从事该行业的人，我们称之为“交互设计师”，主要做的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范等。一个软件产品在编码之前需要作的就是交互设计，并确立交互模型，交互规范。交互设计：研究操作逻辑与体验理性感性研究界面语义与美感图形设计师：GraphicUIdesigner国内目前大部分UI工作者都是从事这个行业。也有人称之为“美工”，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。从事该行业的人，我们可以称之为:软件图形设计师，其中大部分是有美术设计教育背景，例如视觉传达设计，工业设计，信息多媒体设计等。界面设计：研究用户审美与习惯UI的应用范围•PC终端的软件界面。–比如操作系统、软件界面、网页、多媒体光盘。•手机的界面。•数字电视的界面。•空调等家电摇控器上的界面。•银行、移动等柜员机上的界面。•……UI设计基本原则易用性包括三个方面，按重要程度排列如下：1.产品执行用户所需的功能（快速使用）2.快速安全地执行这些功能（相对无错）3.容易掌握使用这些功能。（易于学习）可用性易用性愉悦体验UI设计师需要做到什么？1.简易性：界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。2.可控性：这是界面设计的先决条件，用户想要做什么，就一定让他做到，并且必须得到应有的提示。3.记忆负担最小化：人脑比不了电脑，人类的短期记忆极不稳定、有限。不要轻易打破用户的行为习惯，不要让用户思考。4.一致性：是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与实际内容相一致。同一软件的不同界面，同一界面的不同板块，同一板块的不同位置，都必须保持相当的一致性。5.提高用户的熟悉程度：用户可通过已掌握的知识来使用界面，但不应超出一般常识。如拟物法。6.从用户的观点考虑：想他们所想，做他们所做。大多数用户并没有相当的专业知识，他们往往只是从自身的经验和习惯出发思考和操作。把自己代入用户，设定为最糟糕的用户：无知，易怒，缺乏耐性。7.有序排列：一个有序排列的界面可以让用户轻松，让界面简洁美观。8.安全性：用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。9.灵活人性化：高效率和用户满意度是人性化的直接体现。要尽可能考虑到特殊用户的操作体验，如色盲，残疾人等。5W2H设计原则WHOWHEREWHENWHATWHYHOWHOWMUCH用户身边充斥着专业术语万能软件修改前UI的分类•2.2.1传统界面介绍•传统界面是指可视化的实物界面，比如电视机的按钮、电源排插的插孔、键盘、汽车飞机的操控台、食堂的打卡机刷卡界面、相机的按钮界面、门上的把手界面、仪器的拆装提醒界面、交通指示牌、手机键盘界面等。诸如此类的“硬件”界面就是我们所熟知的传统界面，他们的共同特点是看得见摸得着，不同的是有些界面你可以直接对它进行操作，通过正确的程序或者指令去完成操作过程，实现目的，比如插上插排就可以通电，打开电视机就可以看电视。有些界面则不行，例如拆装提醒界面、交通指示牌，这些是不能对它们进行直接操作的界面，它们的主要功能是提醒使用者去执行某件事情，它是不具有可操作性。•键盘界面——可操作界面•相机界面•电视机、遥控界面What’sHCI•[1]人机交互（Human-ComputerInteraction,简写HCI）：是研究关于设计、评价和实现供人们使用的交互计算系统以及有关这些现象进•[2]人机界面（Human-ComputerInterface,简写HCI）：是人与计算机之间传递、交换信息的媒介和对话接口，是计算机系统的重要组成部分HCI&UI异同点•人机交互与人机界面是两个有着紧密联系而又不同的。•操作系统的人机交互功能是决定计算机系统“友善性”的一个重要因素。人机交互功能主要靠可输入输出的外部设备和相应的软件来完成。•可供人机交互使用的设备主要有键盘显示、鼠标、各种模式识别设备等。与这些设备相应的软件就是操作系统提供人机交互功能的部分。人机交互部分的主要作用是控制有关设备的运行和理解并执行通过人机交互设备传来的有关的各种命令和要求。HCI•硬交互（实体产品）=人机工学+体验设计•软交互（虚体界面）=UI交互设计&狭义UI异同点交互设计和界面设计的异同点•界面是一个静态的词，当进行界面设计的时候，我们关心的是界面本身，界面的组件，布局，风格，看它们是否能支撑有效的交互.•但是，交互行为是界面约束的源头，当产品的交互行为清清楚楚地定义出来时，对界面的要求也就更加清楚了，界面上（如果存在可视界面的话）的组件是为交互行为服务的，它可以更美，更抽象，更艺术化，但不可以为了任何理由破坏产品的交互行为。时间轴的行为设计:逻辑&体验视觉设计Recommendedbooks/推荐书籍RecommendedWebs/推荐网站••••（GUI）•••’sUE•UserExperience=用户体验•它是指用户访问网站或者使用软件产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再次使用。他们能够忍受的问题，疑惑和BUG的程度。UCD=以用户为中心的设计•（UserCenteredDesign）•是在设计过程中以用户体验为设计决策的中心，强调用户优先的设计模式。衡量一个UCD优劣的标准？•产品在特定使用环境下为特定用户用于特定用途时所具有的•有效性（effectiveness）、•效率（efficiency）•用户主观满意度（satisfaction）•延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后的整体心理感受等。UCD设计流程1.需求分析：（业务流程）•目的：根据产品需求和设计要求提供用户使用分析。•方式：访谈、焦点小组、提炼目标用户建立角色模型、场景分析、竞争对手分析、提炼定性和定量的相关数据。•结论报告：根据分析目标用户的使用特征、情感、习惯、心理、需求等，提出用户研究报告和可用性设计建议。•合作人员：市场人员、产品需求客户、项目负责人2.原型设计（信息架构+交互设计）•目的：概念方案设计。制定产品的业务功能和界面规范。•方式：与开发队伍合作设计各种交互原型。同商业方面的专家、市场部沟通，确认设计并得到认可。•作角色模型设计和情景设计，通过情景的再现演示来总结和逐步细化用户使用中的各种交互需求，提出设计解决方案，并完成设计方案的演示，讨论，完善，和最终定稿。•结论报告：制作交互设计原型。为用户界面和交互设计实施提供设计标准规格。•合作人员：项目负责人、开发团队、市场人员3.视觉管理：•目的：使界面设计更符合产品定位，用户使用习惯及规范布局，对实现功能进行正确有效地引导。•方式：主持用户研究进行界面视觉引导。设计窗口规范，图形化的布局。•结论报告：界面测试报告。==》输出视觉设计规范•合作人员：视觉设计师4.可用性测试：•目的:通过观察，来发现过程中出现了什么问题、用户喜欢或不喜欢哪些功能和操作方式，原因是什么。•方式：一对一用户测试•结论报告：用户背景资料文档、用户协议、测试脚本、测试前问卷、测试后问卷、任务卡片、过程记录文档、测试报告•合作人员：测试自愿者、市场相关人员5.跟踪调查：•目的：产品使用结果的反馈。•方式：用户访谈，用户反馈•结论报告：根据反馈意见及实际调查并根据预期目的撰写产品反馈结果报告。包括值得肯定的设计及对修改的建议。•合作人员：产品用户、市场相关人员What’sWeb2.0•Web1.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)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。制作界面的软件介绍•界面设计