UI设计一PPT课件

1、.,1,UI设计,.,2,本课程将向大家介绍软件界面设计的相关知识。大家还会欣赏到大量优秀的界面设计。,课程概述,包括：UI、UE、用户体验、交互、布局、色彩、风格、创意等。,.,3,UI设计是什么？发展会是怎样的?左交互，右视觉，产品在心中,.,4,设计师 ？美工？,.,5,.,6,.,7,按照UI运行媒介的方式，可以分为两种类型：硬件界面和软件界面。,课程概述,本次课程主要以软件为研究的对象。,.,8,课程定位与目标,“UI”热是近几年来兴起的潮流，近几年国内很多从事手机，软件，网站，增值服务等企业和公司都设立了这个部门。还有很多专门从事UI设计的公司也应运而生。 正是鉴于目前UI行业的发

2、展状况，影视广告专业本学期新开的设计课程。 课程定位 UI设计是新兴的一门重要设计领域，该课程既可以巩固前期所学的设计基础理论知识和设计软件应用知识，还重在给学生开拓新的专业知识面，认知一个新的设计领域，从而拓展职业能力和就业选择面。 课程目标 知识目标：使学生能熟悉UI设计的概念、领域、流程和设计方法，并能使用制作 有创意的，充满视觉冲击力的UI设计作品。 技能目标：使学生学会系统规划和全局思维，能够完成一整套UI系 统的设计。 素养目标：使学生具备能从事UI系统的开发与设计能力，培养学生 团队合作、及独立思考能力。,.,9,UI设计在中国的现状,目前在国内UI还是一个相对陌生的词，即便是一

3、些设计人员也对这个词不太了解。 我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，只是做一些图标，配下颜色等工作，缺乏对用户交互的重要性的理解，事实上UI设计的工作包括更广泛的内容。 另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，忽视了良好的UI设计是提升用户体验的主要途径，是提升产品竞争力的重要法宝。 如今国内的UI日益发展，有了专门的职业分工，也开始出现一些较高水准的一线设计师和UI设计公司。但总的来说我国与西方发达国家的差距还是显而易见

4、的。软件不像物质产品，存在工艺材料的限制，其核心在于人。因此，提高UI软件师的能力，真正提升软件产品的人性化，是中国UI设计提升的重中之重。这也就意味着拥有美术设计、程序编码、市场调研、心理分析等诸多方面综合能力的设计师有着更广阔的前景。,.,10,2.职业分析,职业前景 目前UI即用户界面设计行业刚刚在全球软件业兴起，属于高新技术设计产业，与国外在同步发展水平。其次国内外众多大型IT企业(例如：百度、腾讯、Yahoo、中国移动、联想、网易、微软、盛大、淘宝等众多企业)均已成立专业的UI设计部门，但专业人才稀缺，人才资源争夺激烈。但目前全国UI设计专业的系统教学极其稀少。UI设计师的待遇和地位

5、也逐渐上升。 ,职业分析,.,11,寻找一个设计优秀或一个设计存在问题的UI设计（应用软件、游戏、网页、APP软件、手机界面等），做成ppt在课堂上用5-10分钟左右进行展示。并简单讲解其优秀之处或有问题的地方。 文件名称为学号和姓名，如：“04105000 张三”。,作业1,展示和讲解,.,12,第一讲 关于UI设计,.,13,一 什么是UI?,.,14,通过什么操作汽车？,.,15,.,16,通过什么操作ATM机？,.,17,.,18,通过什么控制电视机？,.,19,.,20,通过什么控制数控车床？,.,21,.,22,通过什么操作Photoshop程序？,.,23,.,24,通过什么操作

6、手机？,.,25,.,26,UI即User Interface(用户界面)的简称。界面设计是人与机器之间传递和交换信息的媒介，包括硬件界面和软件界面的人机交互、操作逻辑、界面美观的整体设计。 广义上来讲，UI界面是人与机器进行交互的操作方式，即用户与机器相互传递信息的媒介，其中包括信息的输入和输出。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。,什么是 UI设计,.,27,机器,用户,界面,.,28,图形用户界面（Graphic User Interface，简称 GUI）是指采用图形方式显示的计算机操作用户界面。即传统意义上的“美工

7、”。当然，实际上他们承担的不是单纯意义上美术工人的工作，而是软件产品的产品“外形”设计。例如 ：windows界面、 苹果手机界面等专业课程：图标系统学、 界面设计、 视觉交互设计理论、 产品流程设计、信息设计、模型设计、 颜色系统学 等。 研究人与界面的关系 交互设计：主要在于设计软件的操作流程、树状结构、操作规范等。一个软件产品在编码之前需要做的就是交互设计，并且确立交互模型，交互规范。 专业课程：交互设计理论、产品流程设计、交互模型、交互规范、行为学、Visio框架设计等。 研究人 用户体验 （User Experience 简称UE）它是指用户使用一个产品时的全部体验。他们的印象和感觉

8、，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑BUG的程度，然后对结果进行分析。专业课程：产品流程设计、统计学、基础视觉设计研究、用户需求挖掘学、用户研究方法学、 用户测试学、用户体验规范等。,研究界面,.,29,UI设计（User Interface Design） 用户界面设计，在很大程度上就是在探讨如何让产品的界面更加具有可用性，如何让用户有更良好的体验。这是一种优化后的界面，通过这种界面，用户能更方面地完成任务，获得良好的感觉。 例如：一个按钮的设计，美工设计考虑如何好看，而用户界面设计师则考虑按钮如何摆放，上面显示什么文字，甚至到底要不要这个按钮的问题。,.,30

9、,腾讯QQ1999至QQ2012的十二年的界面,OICQ 99a:发布中文网络寻呼机、公共聊天室、传输文件,.,31,OICQ 99b:发布语音聊天的功能,腾讯QQ1999至QQ2012的十二年的界面,.,32,腾讯QQ1999至QQ2012的十二年的界面,OICQ 2000:发布Tencent Explorer、移动OICQ、隐身功能,.,33,腾讯QQ1999至QQ2012的十二年的界面,QQ 2000:正式改名为QQ、发布视频聊天功能、QQshow、QQ群,.,34,QQ 2003:聊天场景、QQ炫铃、捕捉屏幕、给好友播放录影,腾讯QQ1999至QQ2012的十二年的界面,.,35,腾讯

10、QQ1999至QQ2012的十二年的界面,QQ 2004:新增个人网络硬盘、QQ小秘书、远程协助,.,36,腾讯QQ1999至QQ2012的十二年的界面,QQ 2005:新增QQ宠物、QQ音乐、Qzone、QQ通讯录,.,37,腾讯QQ1999至QQ2010的十年的界面,QQ 2006:新增3D秀聊天模式、QQ主题包、QQ视频秀,.,38,腾讯QQ1999至QQ2012的十二年的界面,QQ 2007:新增会员发送离线文件功能、窗口抖动,.,39,腾讯QQ1999至QQ2012的十二年的界面,QQ 2008:新增了超级群，最高支持500人,.,40,腾讯QQ1999至QQ2012的十二年的界面,

11、QQ 2009:全新体验：群友动态、消息盒子、好友印象,.,41,腾讯QQ1999至QQ2010的十年的界面,QQ 2010:全新皮肤引擎，QQ大视频，多问题验证,.,42,腾讯QQ1999至QQ2012 的十二年的界面,.,43,侧边栏通通取消了，通通放在下面的QQ应用盒子里。应用盒子里最右下角的叫QQ硬盘，据说是新产品，应该是换了个马甲而已。他奶奶是QQ网络硬盘，他妈妈是QQ中转站。,很熟悉的登录界面，QQ2011最醒目，贴心的电脑管家依然死缠烂打。,应用盒子的推出取缔了之前一直占据QQ面板的诸多应用按钮，使得整个QQ面板变得大方得体。,.,44,炫彩字体，炫出聊天个性与风采； 这个是QQ

12、会员特权，下图为会话时新增加的炫彩字体，确实可以让个性飞一会儿。,QQ短信首度面世，畅享无处不在的沟通体验,.,45,微博加入音乐功能，视听结合更精彩。 从微博功能的不断更新和完善不难看出，腾讯也看准了“围观的中国”这个市场。QQ2011在微博的功能上也是力求完善，不仅支持转发、显示微博动态，还在微博中加入音乐元素，不得不说一句：实在给力！,.,46,腾讯QQ1999至QQ2012 的十二年的界面,安装界面，增加了历史表情,新版本的登录框，可以设置多账户登录,.,47,QQ登录等待界面，界面UI很舒服，而且有动态的白云,.,48,QQ2012支持多窗口合并聊天，并可以选择取消合并。简化处理了聊

13、天框的图标，部分界面进行了像素重设计。,.,49,QQ2012部分UI图标都用简色处理，同时头像的像素变大了。如果用了非高清头像，会被放大而变得模糊。,1.2012全新界面，极地企鹅带您感受极地的纯净、轻盈、自由与灵动； 2.会话窗口支持合并，多好友沟通更便捷； 3.新增历史与推荐表情，分类更明确体验更贴心； 4.QQ皮肤设置全新改版，丰富炫丽的内容带给您好心情； 5.多人视频全面提升，可同时支持20人视频聊天； 6.查找联系人信息更加清晰与全面，随时“打招呼”沟通来得更轻松； 7.会话窗口支持“保持窗口最前”，亲密好友随时聊。,.,50,用户体验是一个测试产品满意度与使用度的词语，可能是基于

14、西方产品设计理论中发展出来的，英语是User Experience。用户体验并不是指产品本身是如何工作的，而是指产品如何和外界联系并发挥作用，也就是人们如何“接触“或者“使用”它。 除了用户能完成必须的任务之外，应该还提供积极的体验，而应用设计和交互流程也应令用户感到愉悦。,“以用户为中心设计-设计必须是满足用户需求的、可行的，其次才是可产生商业价值的。”,什么是用户体验：,为什么电子商务网站用户体验设计师有时也把用户体验称作顾客体验？ 这里特指用户访问一个网站或者使用一个产品时的全部体验。他们的印象和感觉，是否成功，是否享受，是否还想再来/使用。他们能够忍受的问题，疑惑和BUG的程度。 U,

15、二、概念区分,2.职业分析,UI设计基本概念,用户体验：UE,.,51,体验经济(The Experience Economy) 体验是一个人达到情绪、体力、精神的某一特定水平时他意识中产生的一种美好感觉，它本身不是一种经济产出，不能完全以清点的方式来量化，因而也不能象其它工作那样创造出可以触摸的物品 农业经济、工业经济和服务经济到体验经济之间的演进过程，就象母亲为小孩过生日、准备生日蛋糕的进化过程。在农业经济时代，母亲是拿自家农场的面粉、鸡蛋等材料，亲手做蛋糕，从头忙到尾，成本不到1美元。到了工业经济时代，母亲到商店里，花几美元买混合好的盒装粉回家，自己烘烤。进入服务经济时代，母亲是向西点店

16、或超市订购做好的蛋糕，花费十几美元。到了今天，母亲不但不烘烤蛋糕，甚至不用费事自己办生日晚会，而是花一百美元，将生日活动外包给一些公司，请他们为小孩筹办一个难忘的生日晚会。这就是体验经济的诞生。,UE相关概念,UI设计基本概念,.,52,交互设计，又称互动设计，(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如，软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the interaction,即人工制品在特定场景下的反应方式)相关的界面。Wikipedia.

17、org,“启发式交互-让创新的界面具有教学功能。”,什么是交互设计：,什么样的人更适合做交互设计师？ 交互设计师需要具备凭空想象复杂行为的能力，交互设计应当在任何代码编写之前做。交互设计师必须能够在代码被写出来之前，想象它是做什么的。Alan Cooper,UI设计基本概念,交互设计,.,53,第三章 交互设计,人机交互与人机界面是两个有着紧密联系而又不尽相同的概念。 操作系统的人机交互功能是决定计算机系统“友善性”的一个重要因素。人机交互功能主要靠可输入输出的外部设备和相应的软件来完成。可供人机交互使用的设备主要有键盘显示、鼠标、各种模式识别设备等。与这些设备相应的软件就是操作系统提供人机交

18、互功能的部分。人机交互部分的主要作用是控制有关设备的运行和理解并执行通过人机交互设备传来的有关的各种命令和要求。,UI设计基本概念,交互设计,.,54,什么是交互设计(Interaction Design),在使用网站，软件，消费产品，各种服务的时候（实际上是在同它们交互），使用过程中的感觉就是一种交互体验。随着网络和新技术的发展，各种新产品和交互方式越来越多，人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候，可能为当初的使用者本身就是该行业的专家，没有人去关注使用者的感觉；相反，一切都围绕机器的需要来组织，程序员通过打孔卡片来输入机器语言，输出结果也是机器语言，那个时候同计算机交

19、互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候，对交互体验的关注也越来越迫切了。,因此交互设计（Interaction Design）作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”交互设计。,第三章 交互设计,UI设计基本概念,交互设计,.,55,UI设计基本概念,图形界面设计GUI,如果说设计=解决问题

20、的话， 那么界面视觉设计，就是用视觉语言去解决逻辑问题。 色彩选择，决定了人们在第一眼看到网站时的感觉。 因此，色彩是Web设计者手中最普遍，也是最强大的工具。,“让色彩更具有可读性-用最少的颜色表达最准确的内容。”,什么是图形界面设计（GUI）：,为什么当人们开始喜欢某些界面的时候，它们事实上会变得更可用？ 积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少；积极的情感让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。Donald Norman,.,56,三、界面的发展历史,用户界面的发展历史可以分为三个阶段：,从20世纪40年

21、代ENIAC计算机出现到20世纪60年代末使用的批处理界面。,到20世纪80年代初所使用的文本或命令行界面。,从20世纪80年代初到现在一直在使用的GUI。,.,57,界面的发展历史,批处理用户界面,.,58,界面的发展历史,命令行用户界面,.,59,界面的发展历史,文本用户界面,文本用户界面，也叫TUI，在20世纪80年代被大量应用于IBM PC及其兼容机中。,界面的发展历史,.,60,电脑操作系统 GUI 38年进化史,1981年6月，Xerox推出了Star，Star于1977年开始研发，它延续了 Alto的概念，在硬件上做了一些升级，384KB内存（可扩展到1.5M），1024*768

22、的黑白分辨率，两个按键的鼠标（原来是3个按键），最重要 的是拥有桌面软件，支持多语言，能够连接文件服务器、邮件服务器和打印服务器。可惜的是，Xerox Star是一个完全封闭的系统，不允许人们应用系统之外的其它程序语言和开发环境，这也意味着它不支持第三方软件,界面的发展历史,.,61,界面的发展历史,图形用户界面 GUI,1981年，苹果推出Lisa，第一次在个人电脑中配备了鼠标。,电脑操作系统 GUI 38年进化史,界面的发展历史,.,62,界面的发展历史,1983年1月，苹果公司发布了Lisa办公系统，结合Lisa硬件、操作系统、办公 软件，苹果公司设计出了一款强大的文件处理工作站。它最大

23、的亮点是支持3.5英寸的软盘，能够最小化、关闭窗口，复制文件等。这其中有个有趣的故事，当年 史蒂夫乔布斯在参观PARC时看到了运行于Alto的Smalltalk，他是个有心人，回去之后就抓紧开发出了更健全的系统，不仅拥有 Smalltalk的GUI环境，还增加了下拉菜单、桌面拖曳、工具条、苹果系统菜单和非常先进的复制粘贴功能。,电脑操作系统 GUI 38年进化史,界面的发展历史,.,63,电脑操作系统 GUI 38年进化史,1985年注定是不平凡的一年，Amiga一经发布就引领时代，它包括了高色彩图形、 立体声、多任务运行等特点，这使得它是一款极好的适合多媒体应用和游戏的机器。,电脑操作系统

24、GUI 38年进化史,界面的发展历史,.,64,电脑操作系统 GUI 38年进化史,同年8月，微软的Windows Version 1.0终于杀将出来，为这激烈的竞争市场增添了几分火药味。它可以在一个窗口中同时运作几个Dos程序，在一个对话框中呈现选项按钮、复选框、文本框和命 令按钮，记事本上甚至可以显示文本缓存中还有多少空间剩余。,电脑操作系统 GUI 38年进化史,界面的发展历史,.,65,电脑操作系统 GUI 38年进化史,1987年4月，苹果公司发布了Apple Macintosh II，第一代彩色Macintosh，拥有24位可用颜色样本。,电脑操作系统 GUI 38年进化史,界面的

25、发展历史,.,66,电脑操作系统 GUI 38年进化史,10月，NeXT计算机发布。NeXT是由苹果公司的创办人史蒂夫乔布斯，于1985年被苹果公司辞退后同年成立的。NeXT计算机是工 业设计者的一个重大胜利，未来主义的black cube和高分辨率的显示器，一个图形界面和一个叫作NeXTStep的操作系统。1996年，苹果公司买下了NeXT并把Jobs请回苹果帮助运营公司。,电脑操作系统 GUI 38年进化史,界面的发展历史,.,67,电脑操作系统 GUI 38年进化史,1990年5月，微软发布了Windows 3.0，这一时候，他终于意识到了图形用户界面的的无限潜力，并着手进行了较大的改进

26、。命令按钮和窗口控制条有3D效果，操作系统本身支持标准模式，以及 使用了超过640KB内存和硬盘的386增强模式，从而能使分辨率更高，图形显示更好。,电脑操作系统 GUI 38年进化史,界面的发展历史,.,68,电脑操作系统 GUI 38年进化史,1997年7月，Mac OS 8破茧而出，这距史蒂夫乔布斯1996年重回苹果公司时只过去了1年的时间，苹果公司重燃战火，两周之内卖出了1.25亿份拷贝，成为当时最畅销的软 件。Mac OS 8也允许用户设置背景图片，而不仅仅是单一的黑白样式，用户甚至可以从他们的文件夹中选择图片来进行设置。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 3

27、8年进化史,界面的发展历史,.,69,电脑操作系统 GUI 38年进化史,1998年6月25日，微软发布了Windows 98 ，IE浏览器代替了Windows shell，桌面右边放置了广告，界面允许使用超过256色来渲染，Windows资源管理器几乎完全改变，同时“活动桌面”也首次出现。可是，经过了 13年的发展，Windows的记事本还是不能编辑超过60K字节的文本文件。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,70,电脑操作系统 GUI 38年进化史,7月12日，KDE 1.0发布，KDE是为UNI

28、X开发的一个网络公开的桌面环境。KDE希望通过提供一个与MacOS和Windows95/NT类似的桌面，填补Unix 对更易于使用的桌面操作系统需求。它是一个完全自由开放的计算机平台，任何人可以自由使用或修改其源代码,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,71,电脑操作系统 GUI 38年进化史,1999年3月3日，GNOME 1.0 发布，它主要是为红帽Linux和以后的其它Linux系统开发的。屏幕底部的面板上排列了常用的程序图标、一排窗口列表和时钟。,电脑操作系统 GUI 38年进化史,电脑操作系统

29、 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,72,电脑操作系统 GUI 38年进化史,2000年1月5日，苹果公司宣布他们设计出了全新的Aqua界面，并将用于公司新推 出的MacOS X操作系统中。在此界面中，默认的32 x 32和48 x 48的图标被更大的128 x 128平滑的半透明图标取代。Dock上放置了常用的程序图标，鼠标经过时会显示程序名称。当窗口最小化后，在Dock上显示的不是程序图标，而是程序窗 口的缩略图。Aqua界面最大的变化是涉及到了渐变、背景样式、动画和透明度的应用，有着更好的用户体验。,2000年的MAC界面现在看起来仍旧是那么完

30、美,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,73,电脑操作系统 GUI 38年进化史,2001年10月25日，微软也不甘示弱，发布了拥有全新用户界面的Windows XP，该界面支持更换皮肤，用户可以改变整个界面的外观和感觉，默认图标为48 x 48，支持数百万种颜色。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,74,电脑操作系统 GUI 38年进化史,2002年，KDE3.0发布，相比于KDE 1.0版本，KDE桌面环境

31、有了显著的提高，所有的图形和图标都更加的完善，拥有了更统一的用户体验。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,75,电脑操作系统 GUI 38年进化史,2007年1月30日，经过了漫长的等待，微软终于揭开了Windows Vista的神秘面纱。这款操作系统是微软为了应对其竞争对手而发布的，包含了很多3D效果和动画。自Windows 98以来，微软一直试图改善其桌面，在Windows Vista中，微软用了桌面小工具取代了活动桌面。,个人观点：其实Vista并不失败，只是它有点超前了,电脑操作系统 GUI

32、38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,76,电脑操作系统 GUI 38年进化史,同样是在这一年，苹果公司发布了第6代Mac OS X操作系统Mac OS X Leopard ，再一次改进了用户界面。基本的界面仍为Aqua和水晶滚动条，加入了一些铂灰色和蓝色，3D dock和更多的动画及交互使得新界面看上去有着更丰富的3D效果。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,77,电脑操作系统 GUI 38年进化史,2008年GNOME升级到了2.

33、24版本，它在主题和艺术性投入了大量的精力，其目 标是“使电脑看起来更完美”。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进化史,界面的发展历史,.,78,电脑操作系统 GUI 38年进化史,Windows 7是微软继Vista之后的最新版操作系统。于2009年10月23日全球同步上市。Windows 7拥有非常简单、快捷、吸引人的特性。具体表现为，高效快捷的方法查找和管理文件，例如Jump List和改进的任务栏预览，提高工作效率；快捷、可靠的性能，意味着电脑使您得心应手；更多功能（如Windows媒体中心和Windows触控功能 ) ，使很多流行数字化应用成为可能。,电脑操作系统 GUI 38年进化史,电脑操作系统 GUI 38年进