软件界面与交互设计

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