软件交互设计

软件交互设计课程介绍软件交互设计什么是人机界面与交互谁来做软件界面与交互设计UI设计中的常见问题UI设计准则与规范对UI设计进行评估联创软件学院Page-2第一章什么是人机界面与交互联创软件学院Page-3什么是人机界面与交互[1]人机交互（Human-ComputerInteraction）：关于设计、评价和实现供人们使用的交互计算机系统以及有关这些现象进行研究的科学。[2]人机界面（Human-ComputerInterface）：人与计算机之间传递、交换信息的媒介和对话接口，计算机系统的重要组成部分。联创软件学院Page-4生活中的人机交互-减速板的困扰住宅区或学校道路上的减速板，是凸起的一道铁板，用于限制机动车的行驶速度，是增强行人安全性的好办法。但骑自行车的人只能溜边，从减速板和马路牙子间的狭小缝隙中穿过。联创软件学院Page-5生活中的人机交互-减速板的困扰解决方案：把长长的减速板分成若干块短板，短板间留出十几厘米的空隙便于自行车通过。这就是“人性化”思维方式在人机交互设计中的体现，考虑了“可用性”和“用户体验”，才能真正提升用户在使用产品时的感受。联创软件学院Page-6生活中的人机交互-失败的产品设计如果你不考虑用户，或者说没有考虑所有的用户，那么有可能就会出现类似下面这种情况：联创软件学院Page-7为什么没有设计UI的产品还能被用户接受只有在没有选择的条件下，用户才忽略用户界面在功能相似的条件下，用户会重点关注用户界面不幸的是，很多产品或服务在原始设计的时候，虽然从功能的角度来看或许可以工作，但往往忽略了真实用户如何方便地使用系统的要求。联创软件学院Page-8软件界面与交互设计的目标软件界面与交互设计的目标：优化人机界面，让软件界面更具可用性，让用户有更好的体验，使用户更方便地完成任务，从而提高我们的商业价值。软件界面与交互涉及人体工程学、软件工程学、心理学、美学、计算机科学、社会科学……联创软件学院Page-9软件界面上存在什么问题？联创软件学院Page-11不容乐观的现状尽管国内有很多技术出色、聪明过人的软件工程师，但开发的软件产品却既难用又难看，客户很不满意，导致经常要修改软件的用户界面，造成极大的生产力浪费。联创软件学院Page-12不容乐观的现状我们见到的用户界面设计缺陷不胜枚举：界面措辞含糊，甚至有错别字。连简单的消息框都设计不好，经常存在文不对题的语病。界面布局混乱，缺乏逻辑，凡是能放的东西都堆积在屏幕上，让用户不知从何下手。没有出错处理，不对用户输入的数据进行检验。不根据用户权限自动隐藏或禁用某些功能。不提供进度条、动画反映正在进行的耗时过程。对于重要的操作也不返回结果，让用户干着急。执行破坏性的操作之前，不提醒用户确认，总之，如果用户执行了错误的操作，那他活该。。。。联创软件学院Page-13第二章谁来做软件界面与交互设计联创软件学院Page-16谁来做软件界面与交互设计很多从事界面图形设计的人经常会彼此发牢骚：“那个程序员刚才又在叫我‘美工’了。”联创软件学院Page-17谁来做软件界面与交互设计很多管理者并不了解美术设计师和UI设计师的区别。认为用户界面只是一个应用程序的外壳，漂亮和酷就等于好用，所以安排美术设计师来设计用户界面，往往产品演示看起来很吸引人，而一旦真正工作起来就不好用或者不实用了。联创软件学院Page-18谁来做软件界面与交互设计软件设计师or美术设计师对于软件设计师来说即使是拔尖的程序员，即便是在时间和资源都很充足的情况下，也仍然可能开发出拙劣的用户界面。缺乏设计用户界面的经验编程经验丰富的程序员并不一定具有很多设计用户界面的经验。进行用户界面设计也不一定需要太多编程知识。拔尖的程序员往往意志坚强不愿意和他人协商，不轻易妥协。不同程序员开发的界面风格严重的不统一，每个人都按自己的理解去做界面开发。联创软件学院Page-19谁来做软件界面与交互设计软件设计师or美术设计师对于美术设计师来说擅长设计各种元素和控件的艺术外观，形象地表达功能，为软件创建一致的艺术风格，让数据排列起来更美观，让用户感觉软件确实漂亮或很酷。但美术设计师很少关心怎样使用户更方便地使用产品，漂亮和酷并不等于好用，很可能产品只是“看上去很美”，但其实只是个绣花枕头。联创软件学院Page-20谁来做软件界面与交互设计UI设计师（UserInterfaceDesigner，用户界面设计师）：对软件的人机交互、操作逻辑、界面美观的进行设计。使软件的操作变得更舒适、简单、自由，体现软件的定位和特点。联创软件学院Page-21UI设计师的具体工作擅长分析和理解用户的任务需求，使控件和信息的安排更合理，简化产品复杂度。能认识到用户在学习或使用产品的过程中，可能会在哪些地方遇到问题。协助为拟定开发的产品定义用户模型。参与产品的可用性测试和评估，并提出修改建议。将完成一个普通任务所需要的鼠标动作减少一半。将网站中弹出窗口的总数量从27个减少到15个以内。修改菜单中的命令，将原来不一致的、令人困惑的短语改成容易理解的词。……联创软件学院Page-22UI设计师与美术设计师的区别页面上需要放置一个按钮。美术设计师考虑的是让按钮更好看，显得时髦，或者符合界面中其它元素的美术风格。UI设计师考虑的是按钮的摆放位置、显示什么文字，或者要不要这个按钮。联创软件学院Page-23广义的UI设计岗位交互式产品的范围已经大大拓宽，人们对界面重要性的认识也随之提高，广义的UI设计岗位包括：UI设计师：参与交互设计，不仅是界面美术设计可用性工程师：使用可用性方法及原理进行产品优化Web设计师：设计网站的视觉效果，例如排版和按钮信息规划师：规划和组织信息的架构，尤其是网站用户体验工程师：组织用户测试、分析结果并且协助制定改进方案……联创软件学院Page-24UI设计工作的分工联创软件学院Page-25第三章UI设计中的常见问题联创软件学院Page-26人员意识上的误区用户界面是次要的工作很多软件开发人员和产品经理都认为，用户界面与其它工作相比是次要的，觉得雇一个只是写点代码（或者干脆不写）的人来做用户界面设计和可用性测试，这简直是一种浪费。联创软件学院Page-27人员意识上的误区可用性不太重要，又很浪费钱有些人认为用户界面的好坏对于产品销售影响不大，重视可用性在开发初期增加了开销（人员、时间、资金），但今后可以从增加的收入中收回投资，并节省后期开销（例如售后服务费用）。一个更为可用的产品，会很快被市场和客户接纳。如果产品未考虑可用性而匆匆上市，必定减缓销售量的增长，导致用户的抱怨。联创软件学院Page-28人员意识上的误区用户界面不过就是“字体和颜色”有些人对于“用户界面”的理解很狭隘，认为不过就是让界面更清晰、漂亮一些而已，可以等到发布之前再做，甚至干脆不做。用户界面包含深层次的问题：用户学习使用产品的时候是否感到费力产品功能是否能满足用户的目标用户完成任务的效率如何这些问题不能在开发后期才考虑，如果不进行用户界面设计及测试，那么最终版本一定不能满足要求。联创软件学院Page-29人员意识上的误区认为用户能够适应所有的情况有些人坚信，只要软件提供足够的功能，用户就能学会使用。但一个潜在用户会不顾用户界面的糟糕状况，只是为了产品功能而购买产品，这种逻辑是错误的。如果竞争者的产品更加容易使用，也提供相似的功能。不管什么原因，只要用户觉得你的产品“有点讨厌”，他们就不会去购买和使用你的产品。谁受到了损失？不是用户，而是你自己。联创软件学院Page-30人员意识上的误区资源不足时可以放弃用户界面设计有些产品经理在预算紧张、资源不足或时间进度很紧的情况下，认为只能“挑重要的事情来做”，而用户界面这种“不太重要”的事情可以放在一边。用户界面不是产品的一种特性，而是超越了产品的所有特性，可以决定每一个特性的好坏，进而决定了整个产品的好坏。一个无有效用户界面的产品就像一个没有窗户和门的仓库：货物就在里面，但没有人能拿到。联创软件学院Page-31常见的UI设计缺陷界面视觉表达不清没有明显的视觉顺序和用户焦点。例如页面的内容之间没有明确分类、用户不清楚什么地方可以点击、到处都是闪动的信息等，用户很难把注意力集中到关键信息上。用户想得到的信息才是屏幕中最应明确显示的部分！联创软件学院Page-32常见的UI设计缺陷操作步骤非常繁琐哪怕是最常见的基本任务也需要执行很多步骤。即使产品功能再强大，开发人员夜以继日地开发代码，如果用户做一个操作需要超过20分钟的时间，其间经过一系列繁琐、缓慢地步骤，而到头来却发现往往不能如愿，这个软件不会受到欢迎。联创软件学院Page-33常见的UI设计缺陷提示信息十分混乱例如：没有明确告诉用户所要执行的操作到底是什么意思，是否能达到自己的目标。典型界面分析请稍候再试什么样的操作？联创软件学院Page-34常见的UI设计缺陷使用难以理解的词汇例如：使用了很多用户不太能理解的词汇，或者容易引起误解的词汇。典型界面分析难以理解的词汇联创软件学院Page-35常见的UI设计缺陷强迫用户接受糟糕的界面系统提供的一些元素让用户难以接受。例如：难听的按钮点击声音，或强制播放的背景音乐。界面分析精美绝伦、眼花缭乱的Flash演示片头，从美术角度来看很完美，但用户要花上数分钟的下载时间，也许他们在下载完之前就不耐烦地把页面给关掉了，连一个画面都没显示出来。联创软件学院Page-36常见的UI设计缺陷……当然这也有点夸张联创软件学院Page-37第四章UI设计准则与规范联创软件学院Page-38软件界面与交互设计的关键设计的关键：如何优化用户与产品之间的交互，从而使产品满足用户的期望，设计依据涉及到：考虑人们擅长什么、不擅长什么。考虑什么可能对用户的当前做法有所帮助。考虑如何提供高质量的用户体验。听取人们想要些什么，并让他们参与设计。在设计过程中，让用户来尝试和验证。联创软件学院Page-39UI设计流程第一步：用户需求分析了解谁是目标用户、他们需要哪些支持，才可能设计出能支持这些用户的产品。首先找到真正的用户，然后从他们那里找到需求。用户需求是所有设计、开发工作的基础。简而言之，在这个阶段我们需要知道：用户想要什么？我们要做什么？联创软件学院Page-40练习：分析软件用户的类型和特征？要求：试分析软件用户分为哪几种类型，不同类型的用户对软件界面与交互有哪些不同的需求。联创软件学院Page-41用户分类•偶然型用户：既没有计算机应用领域的专业知识，也缺少计算机系统基本知识的用户。•生疏型用户：他们更常使用计算机系统，因而对计算机的性能及操作使用，已经有一定程度的理解和经验。但他们往往对新使用的计算机系统缺乏了解，不太熟悉，因此对新系统而言，他们仍旧是生疏用户。•熟练型用户：这类用户一般是专业技术人员，他们对需要计算机完成的工作任务有清楚地了解，对计算机系统也有相当多的知识和经验，并且能熟练地操作、使用。•专家型用户：对需要计算机完成的工作任务和计算机系统都很精通的，通常是计算机专业用户，称为专家型用户。UI设计流程第一步：用户需求分析用户界面需求举例：REQ_GIM_INPUT_NEED_U在客户资料录入界面中，应明确标示哪些信息是必填信息，哪些信息是选填信息。REQ_GIM_INPUT_MEANING_U在客户资料录入界面中，输入框如果是选择项方式录入，必须显示信息的中文意义，不能用0、1、2或a、b、c等数字或英文代码代替。REQ_GIM_INPUT_FONT_U在客户资料录入界面中，所有中文均为宋体，12号字，英文和数字均为Arial，12号字。联创软件学院Page-42UI设计流程第二步：概念设计与物理设计形成多个设计方案，进行评审，确定最优方案。概念设计：用一种用户能够理解的方式去描述产品应该做些什么、如何运作、外观如何；物理设计：考虑的是产品的细节，包括要使用的色彩、声音和图像，还有菜单设计和图标设计。联创软件学院Page-43UI设计流程第三步：制作软件界面原型软件界面原型并不是能够运行的