产品视觉形象中的界面构成培训讲义课件

4产品视觉形象中的界面构成本节主要内容:

1)界面的概念

2)实体用户界面

3)图形用户界面

4)声音用户界面

5)界面的评价主讲:胡光忠（机电工程系）回顾：产品形象的总体构成4产品视觉形象中的界面构成本节主要内容:回顾：产品形象的总11）界面的概念

用户界面（UI，UserInterface）就字面来理解，是人和产品之间信息交流的“面”。这个“面”不仅仅是物理意义上的存在，而且包含了心理意义上的存在，通过界面这个媒介，人与产品之间的信息得以互相传递和沟通，即人机互动。

简而言之，用户界面就是人与产品之间互动方式的物化表象。

产品用户界面是近年来伴随IT产业突飞猛进而发展起来的一个新兴复合专业领域，涉及学科：视觉艺术、人机工程、认知心理、逻辑分析、计算机图形学等。1）界面的概念2关于广义界面，美国学者赫伯特.A.西蒙提出:设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。这种接合是围绕人来进行的。“人”是设计界面的一个方面，是认识的主体和设计服务的对象，而作为对象的“物”则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用功能、材料的质地，也包含着对传统思考、文化理喻、科学观念等的认知。应该说，广义的界面设计是以功能性界面为基础，以环境性界面为前提，以情感性界面为重心而构成的，它们之间形成有机和系统的联系。我们平时提及的界面设计通常是指狭义的界面设计，较少地涉及到情感、文化等。但是，在实际的设计过程中，这些又都是必须考虑的因素，在某些时候，甚至是直接的设计对象，因为用户是主体，那么人的因素也就自然而然地融入到设计过程中。关于广义界面，美国学者赫伯特.A.西蒙提出:设计是人工物的内3界面对视觉形象的作用：从用户的角度，人们感知方式是多种多样的，但就工业产品来讲，人们主要是通过视觉、触觉和听觉来感知和使用产品的。视觉感知主要起到了信息拾取的作用，比如产品上的各种标志与符号，以及按键的形状和排布等；

触觉主要是对拾取信息的操作，比如旋钮的调节、按键的拨弄、屏幕的感压等；听觉感知更多地表现了对信息操作的一种反馈，比如按键的声音等。因此，用户界面作为一种传达产品理念、操作等信息的综合方式，同样成为产品形象的一个重要部分。它直接影响到产品使用的便利性，而人们总能对使用方便的产品留下深刻的印象，并影响对产品形象的整体评价。界面对视觉形象的作用：触觉主要是对拾取信息的操4

根据不同的人机互动方式，用户界面主要可以分为以下三种形式：实体用户界面（SUI）图形用户界面（GUI）声音用户界面（AUI）硬界面软界面根据不同的人机互动方式，用户界面主要可以分为以下三种形52）实体用户界面（SUI，SolidUserInterface）

实体用户界面是通过硬件设计来实现的一种既可视又可触摸感知的人机交互界面，是对产品理念和使用方式的一种固化表现。实体用户界面的表现内容主要包括：（1）按键的形状、大小、排布、位置、弹性等；（2）标志上的数字、文字、符号等（字体、大小、位置）；（3）发音孔和散热孔的形状、大小、位置；（4）各种端口的位置、间距等；（5）显示液晶的形状、大小、位置、角度、亮度（6）指示灯的形状、大小、位置、颜色、亮度（7）铭牌及一些辅助图形或造型等。2）实体用户界面（SUI，SolidUserInterf6产品视觉形象中的界面构成培训讲义课件7产品视觉形象中的界面构成培训讲义课件8产品视觉形象中的界面构成培训讲义课件9产品视觉形象中的界面构成培训讲义课件10产品视觉形象中的界面构成培训讲义课件11从上面的各种表现内容看，实体用户界面作为产品形象视觉层面的一个部分，还会在细节方面极大地影响产品的外观（如图）。

但为什么不纳入产品的外观中去？这主要是因为实体用户界面与产品外观在对产品形象塑造方面所起的作用是不同的：产品外观中的形态、色彩和质感等都是对产品理念的一种单向表达，并没有包含产品使用方式的信息；而实体用户界面对产品理念的一种双向互动表达，包含产品使用方式的信息。从作用深度来看，产品外观主要在视觉层面起作用，而实体用户界面则主要在心理和行为层面上起作用。从上面的各种表现内容看，实体用户界面作为产品形象视觉层面的一12实体用户界面应用研究状况：欧洲的产品一直很有优势。一方面欧洲企业和行业协会对其应用的重视程度，例如瑞典推行将TCO标准就将产品人机互动纳入评价体系的重要部分；另一方面得益于浓厚的人文文化。其中的典型代表是NOKIA手机。就日本产品来讲，在这方面很好的继承了欧洲的设计传统。SONY公司也是互动界面设计方面的典范。“将无法言喻的优点传递给无数的大众”是他们的一贯目标。

我国产品在这方面的研究很少，设计方面重视不够。实体用户界面应用研究状况：13产品视觉形象中的界面构成培训讲义课件14SONYTR-2SONYTR-215产品视觉形象中的界面构成培训讲义课件16产品视觉形象中的界面构成培训讲义课件173）图形用户界面（GUI,GraphicUserInterface

）

图形用户界面是通过计算机编程来实现的一种可视化的人机交互界面。实际上是软件的图形界面，用来帮助人们认识和理解产品的设计理念和操作方式。就表现形式来讲，主要有图标、菜单、工具栏、事件动画等元素。其作用有：对操作的可视化；显示产品的运行状态；增加产品使用乐趣等；3）图形用户界面（GUI,GraphicUserInt18产品视觉形象中的界面构成培训讲义课件19产品视觉形象中的界面构成培训讲义课件20产品视觉形象中的界面构成培训讲义课件21应用现状：在产品图形用户界面设计方面，Apple公司的水平可以说是傲视全球。作为全球软件霸主Microsoft公司也具有相当实力。我国在这方面可以说是刚刚起步，发展迅速当参差不齐。比较好的代表QQ和盛大传奇网络游戏。

有研究表明，界面的美观程度将影响用户对其可用性评价。而且，若界面的“外观和质感”令人心情舒畅，如使用漂亮的图形、巧妙地组合各种元素、设计精美的字体、使用优雅的图像和色彩，用户就更容易容忍系统可用性方面的问题。应用现状：22图形设计师AaronMarcus设计了这两个颇具吸引力的界面。界面设计(a)是为美国女性设计的，右面的界面(b)是为欧洲男性知识分子设计的。设计师Marcus的思想是，欧洲男性知识分子喜欢“温和的散文，较为拘谨的信息分布，古典的字体”相反地，美国女性“爱好更复杂的表现方式和弯曲的形状，但是不喜欢过于豪放”。图形设计师AaronMarcus设计了这两个颇具吸234）声音用户界面（AUI,AudioUserInterface）声音用户界面就是通过在产品中使用过程中引入声音而实现的人机交互界面。声音用户界面是对图形用户界面和实体用户界面的有益补充，并与后两者共同构成三位一体的人机互动方式。其主要表现形式有：语音提示：主要是让人明白下一步该如何操作；事件铃声：是为了提醒使用者一项功能的开始或完成；背景音乐：既可以缓解对某项操作的过长等待，又可以增加产品使用的乐趣；操作反馈声音：主要是让使用者明白操作的正确与否，当然有时也是为了表现一种使用的满足感。4）声音用户界面（AUI,AudioUserInter24需要注意的是：声音用户界面所传递的信息和情绪，必须与产品的形象相符合。对于企业来讲：富有特色的声音用户界面的引入，既可以保持产品形象的识别性，又可以让消费者使用产品更加方便、更有乐趣。声音用户界面应用：WindowsXP系统是一个典范；SONY公司在声音界面设计方面同样比较成功；国内产品在这方面有一定的突破，但企业还没有上升到进行系统研究与规划层面上来。需要注意的是：声音用户界面所传递的信息和情绪，必须与产品的形255）人机界面的评价

在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。风格一致的人机界面会给人一种简洁、和谐的美感。1、界面的色彩及风格统一产品软件界面的总体色彩应该接近和类似实体界面的总体色调。1)一致性：一致性的界面设计让使用者更易学习和记忆。2)亲和性：界面应该亲切地邀请使用者进一步探索系统。5）人机界面的评价263)简单明了：使用者需要能迅速了解界面的架构，开始使用它。不要使选单太杂，动画及图标不要使用太难理解的隐喻，或需要太多想象的隐喻。4)谨慎的使用颜色：颜色当然是高度有效的非语言方法(例如同样是蓝色的指令应该代表着它们互相关联)。但是如果随机使用，颜色能够让使用者转移注意力而感到混淆。考虑使用相同色系但是深浅不一的颜色，而非彻底对比的颜色。2界面视觉元素的规范3声音界面与实体界面和图形界面的一致性3)简单明了：使用者需要能迅速了解界面的架构，开始使用它。不27EMP-ZII夏新u807EMP-ZII夏新u80728

怎样评价一个人机界面设计质量的优劣，目前还没有一个统一的标准。一般地，评价可以从以下几个主要方面进行考虑：(1)用户对人机界面的满意程度；(2)人机界面的标准化程度；(3)人机界面的适应性和协调性；(4)人机界面的应用条件；(5)人机界面的性能价格比。

怎样评价一个人机界面设计质量的优劣，29目前人们习惯于用“界面友好性”这一抽象概念来评价一个人机界面的好坏，但“但面友好”与“界面不友好”恐怕无人能定一个确切的界线，一般认为一个友好的人机界应该至少具备以下特征：(1)操作简单，易学，易掌握；(2)界面美观，操作舒适；(3)快速反应，响应合理；(4)用语通俗，语义一致。下面我们从设计理论的角度分析界面友好的判定：界面友好即系统模型与心理模型具有良好的一致性。目前人们习惯于用“界面友好性”这一抽象概30我们先介绍三个概念：心理模型：心理是存在于人们头脑中的关于一个产品应该具有的概念和行为的知识。实现模型：是产品的内部结构和工作原理。它存在于设计人员的头脑中。系统模型：是指产品的最终外观以及产品呈现给用户后，用户经过观察或使用而形成的关于产品如何使用和工作的知识。我们先介绍三个概念：31心理模型：将要扔掉的物品的名称，或最多包括一些朴素的关于物品的分类方法：食品类、包装类等；实现模型：“可回收”与“不可回收”；系统模型：标有“回收、不可回收物品”字样的外观的垃圾桶？作业：设计垃圾桶界面。例子：心理模型：将要扔掉的物品的名称，或最多包括一些朴素的关于物品32前面案例说到的“好用”，在交互界面设计领域，选择的措辞是“界面友好”。但界面友好是一个比较模糊的概念，今两年来，设计人员倾向于采用“可用性”(Usability)这个词，并得到越来越多的相关专业人士的认同，其理论也在不断的发展中，形成了一门学科:可用性工程(UsabilityEngineering)。可用性工程是交互式IT产品/系统的一种先进开发方法，包括一整套工程过程、方法、工具和国际标准，它应用于产品生命周期的各个阶段，核心是以用户为中心的设计方法论(user-centereddesign一UCD)，强调以用户为中心来进行开发，能有效评估和提高产品可用性质量，弥补了常规开发方法无法保证可用性质量的不足。前面案例说到的“好用”，在交互界面设计领域，选择的措辞是“界33钱抒，张福昌，MP3的界面设计研究，江南大学，2005.6周睿，张锡，基于可用性的手机交互界面设计研究，南京理工大学，2006.6霍发青，陈汗青，人机界面研究，武汉理工大学，2003.11钱抒，张福昌，MP3的界面设计研究，江南大学，2005.634作品欣赏作品欣赏35产品视觉形象中的界面构成培训讲义课件36产品视觉形象中的界面构成培训讲义课件37美感：

往往有比例和尺度、均衡与稳定、统一与变化、节奏与韵律等多种形式，产品的界面美是从人类长期实践经验总结出的结论，对设计具有一定的指导作用。当然，这里的“美”，不单单是指产品的外观能够引起人们的喜爱，同时也包括使用产品的爽快感、拥有高科技产品的满足感、以及在使用过程中因为产品造型风格的独树一帜而造就的炫耀感等等。美感：38例如:实体色调以蓝色为主，我们的图形界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪，假想你买了一款从外观到界面都很满意的MP3，操作的时候突然发现内置的应用软件和系统界面不统一，你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。例如:39演讲完毕，谢谢观看！演讲完毕，谢谢观看！404产品视觉形象中的界面构成本节主要内容:

1)界面的概念

2)实体用户界面

3)图形用户界面

4)声音用户界面

5)界面的评价主讲:胡光忠（机电工程系）回顾：产品形象的总体构成4产品视觉形象中的界面构成本节主要内容:回顾：产品形象的总411）界面的概念

用户界面（UI，UserInterface）就字面来理解，是人和产品之间信息交流的“面”。这个“面”不仅仅是物理意义上的存在，而且包含了心理意义上的存在，通过界面这个媒介，人与产品之间的信息得以互相传递和沟通，即人机互动。

简而言之，用户界面就是人与产品之间互动方式的物化表象。

产品用户界面是近年来伴随IT产业突飞猛进而发展起来的一个新兴复合专业领域，涉及学科：视觉艺术、人机工程、认知心理、逻辑分析、计算机图形学等。1）界面的概念42关于广义界面，美国学者赫伯特.A.西蒙提出:设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。这种接合是围绕人来进行的。“人”是设计界面的一个方面，是认识的主体和设计服务的对象，而作为对象的“物”则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体，就如我们看见一件产品、一栋建筑，它带给人的不仅有使用功能、材料的质地，也包含着对传统思考、文化理喻、科学观念等的认知。应该说，广义的界面设计是以功能性界面为基础，以环境性界面为前提，以情感性界面为重心而构成的，它们之间形成有机和系统的联系。我们平时提及的界面设计通常是指狭义的界面设计，较少地涉及到情感、文化等。但是，在实际的设计过程中，这些又都是必须考虑的因素，在某些时候，甚至是直接的设计对象，因为用户是主体，那么人的因素也就自然而然地融入到设计过程中。关于广义界面，美国学者赫伯特.A.西蒙提出:设计是人工物的内43界面对视觉形象的作用：从用户的角度，人们感知方式是多种多样的，但就工业产品来讲，人们主要是通过视觉、触觉和听觉来感知和使用产品的。视觉感知主要起到了信息拾取的作用，比如产品上的各种标志与符号，以及按键的形状和排布等；

触觉主要是对拾取信息的操作，比如旋钮的调节、按键的拨弄、屏幕的感压等；听觉感知更多地表现了对信息操作的一种反馈，比如按键的声音等。因此，用户界面作为一种传达产品理念、操作等信息的综合方式，同样成为产品形象的一个重要部分。它直接影响到产品使用的便利性，而人们总能对使用方便的产品留下深刻的印象，并影响对产品形象的整体评价。界面对视觉形象的作用：触觉主要是对拾取信息的操44

根据不同的人机互动方式，用户界面主要可以分为以下三种形式：实体用户界面（SUI）图形用户界面（GUI）声音用户界面（AUI）硬界面软界面根据不同的人机互动方式，用户界面主要可以分为以下三种形452）实体用户界面（SUI，SolidUserInterface）

实体用户界面是通过硬件设计来实现的一种既可视又可触摸感知的人机交互界面，是对产品理念和使用方式的一种固化表现。实体用户界面的表现内容主要包括：（1）按键的形状、大小、排布、位置、弹性等；（2）标志上的数字、文字、符号等（字体、大小、位置）；（3）发音孔和散热孔的形状、大小、位置；（4）各种端口的位置、间距等；（5）显示液晶的形状、大小、位置、角度、亮度（6）指示灯的形状、大小、位置、颜色、亮度（7）铭牌及一些辅助图形或造型等。2）实体用户界面（SUI，SolidUserInterf46产品视觉形象中的界面构成培训讲义课件47产品视觉形象中的界面构成培训讲义课件48产品视觉形象中的界面构成培训讲义课件49产品视觉形象中的界面构成培训讲义课件50产品视觉形象中的界面构成培训讲义课件51从上面的各种表现内容看，实体用户界面作为产品形象视觉层面的一个部分，还会在细节方面极大地影响产品的外观（如图）。

但为什么不纳入产品的外观中去？这主要是因为实体用户界面与产品外观在对产品形象塑造方面所起的作用是不同的：产品外观中的形态、色彩和质感等都是对产品理念的一种单向表达，并没有包含产品使用方式的信息；而实体用户界面对产品理念的一种双向互动表达，包含产品使用方式的信息。从作用深度来看，产品外观主要在视觉层面起作用，而实体用户界面则主要在心理和行为层面上起作用。从上面的各种表现内容看，实体用户界面作为产品形象视觉层面的一52实体用户界面应用研究状况：欧洲的产品一直很有优势。一方面欧洲企业和行业协会对其应用的重视程度，例如瑞典推行将TCO标准就将产品人机互动纳入评价体系的重要部分；另一方面得益于浓厚的人文文化。其中的典型代表是NOKIA手机。就日本产品来讲，在这方面很好的继承了欧洲的设计传统。SONY公司也是互动界面设计方面的典范。“将无法言喻的优点传递给无数的大众”是他们的一贯目标。

我国产品在这方面的研究很少，设计方面重视不够。实体用户界面应用研究状况：53产品视觉形象中的界面构成培训讲义课件54SONYTR-2SONYTR-255产品视觉形象中的界面构成培训讲义课件56产品视觉形象中的界面构成培训讲义课件573）图形用户界面（GUI,GraphicUserInterface

）

图形用户界面是通过计算机编程来实现的一种可视化的人机交互界面。实际上是软件的图形界面，用来帮助人们认识和理解产品的设计理念和操作方式。就表现形式来讲，主要有图标、菜单、工具栏、事件动画等元素。其作用有：对操作的可视化；显示产品的运行状态；增加产品使用乐趣等；3）图形用户界面（GUI,GraphicUserInt58产品视觉形象中的界面构成培训讲义课件59产品视觉形象中的界面构成培训讲义课件60产品视觉形象中的界面构成培训讲义课件61应用现状：在产品图形用户界面设计方面，Apple公司的水平可以说是傲视全球。作为全球软件霸主Microsoft公司也具有相当实力。我国在这方面可以说是刚刚起步，发展迅速当参差不齐。比较好的代表QQ和盛大传奇网络游戏。

有研究表明，界面的美观程度将影响用户对其可用性评价。而且，若界面的“外观和质感”令人心情舒畅，如使用漂亮的图形、巧妙地组合各种元素、设计精美的字体、使用优雅的图像和色彩，用户就更容易容忍系统可用性方面的问题。应用现状：62图形设计师AaronMarcus设计了这两个颇具吸引力的界面。界面设计(a)是为美国女性设计的，右面的界面(b)是为欧洲男性知识分子设计的。设计师Marcus的思想是，欧洲男性知识分子喜欢“温和的散文，较为拘谨的信息分布，古典的字体”相反地，美国女性“爱好更复杂的表现方式和弯曲的形状，但是不喜欢过于豪放”。图形设计师AaronMarcus设计了这两个颇具吸634）声音用户界面（AUI,AudioUserInterface）声音用户界面就是通过在产品中使用过程中引入声音而实现的人机交互界面。声音用户界面是对图形用户界面和实体用户界面的有益补充，并与后两者共同构成三位一体的人机互动方式。其主要表现形式有：语音提示：主要是让人明白下一步该如何操作；事件铃声：是为了提醒使用者一项功能的开始或完成；背景音乐：既可以缓解对某项操作的过长等待，又可以增加产品使用的乐趣；操作反馈声音：主要是让使用者明白操作的正确与否，当然有时也是为了表现一种使用的满足感。4）声音用户界面（AUI,AudioUserInter64需要注意的是：声音用户界面所传递的信息和情绪，必须与产品的形象相符合。对于企业来讲：富有特色的声音用户界面的引入，既可以保持产品形象的识别性，又可以让消费者使用产品更加方便、更有乐趣。声音用户界面应用：WindowsXP系统是一个典范；SONY公司在声音界面设计方面同样比较成功；国内产品在这方面有一定的突破，但企业还没有上升到进行系统研究与规划层面上来。需要注意的是：声音用户界面所传递的信息和情绪，必须与产品的形655）人机界面的评价

在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。风格一致的人机界面会给人一种简洁、和谐的美感。1、界面的色彩及风格统一产品软件界面的总体色彩应该接近和类似实体界面的总体色调。1)一致性：一致性的界面设计让使用者更易学习和记忆。2)亲和性：界面应该亲切地邀请使用者进一步探索系统。5）人机界面的评价663)简单明了：使用者需要能迅速了解界面的架构，开始使用它。不要使选单太杂，动画及图标不要使用太难理解的隐喻，或需要太多想象的隐喻。4)谨慎的使用颜色：颜色当然是高度有效的非语言方法(例如同样是蓝色的指令应该代表着它们互相关联)。但是如果随机使用，颜色能够让使用者转移注意力而感到混淆。考虑使用相同色系但是深浅不一的颜色，而非彻底对比的颜色。2界面视觉元素的规范3声音界面与实体界面和图形界面的一致性3)简单明了：使用者需要能迅速了解界面的架构，开始使用它。不67EMP-ZII夏新u807EMP-ZII夏新u80768

怎样评价一个人机界面设计质量的优劣，目前还没有一个统一的标准。一般地，评价可以从以下几个主要方面进行考虑：(1)用户对人机界面的满意程度；(2)人机界面的标准化程度；(3)人机界面的适应性和协调性；(4)人机界面的应用条件；(5)人机界面的性能价格比。

怎样评价一个人机界面设计质量的优劣，69目前人们习惯于用“界面友好性”这一抽象概念来评价一个人机界面的好坏，但“但面友好”与“界面不友好”恐怕无人能定一个确切的界线，一般认为一个友好的人机界应该至少具备以下特征：(1)操作简单，易学，易掌握；(2)界面美观，操作舒适；(3)快速反应，响应合理；(4)用语通俗，语义一致。下面我们从设计理论的角度分析界面友好的判定：界面友好即系统模型与心理模型具有良好的一致性。目前人们习惯于用“界面友好性”这一抽象概70我们先介绍三个概念：心理模型：心理是存在于人们头脑中的关于一个产品应该具有的概念和行为的知识。实现模型：是产品的内部结构和工作原理。它存在于设计人员的头脑中。系统模型：是指产品的最终外观以及产