多媒体界面设计(第二章).ppt

《多媒体界面设计(第二章).ppt》由会员分享，可在线阅读，更多相关《多媒体界面设计(第二章).ppt（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课课程程简简介介 如何开始界面设计？在设计界面的过程中，我们最终要传递来源于多个渠道的信息，这些信息可能扰乱我们的设计思路，让我们感觉无所适从。在多媒体界面设计过程中如何找准表达方向、直达设计目标是至关重要的。面对不同的界面设计任务，需要设计师找出共同的、本质的属性，需要形成一些基本的概念和处理设计问题的方式，在设计之前，让我们先启动思维！主讲：黄全高邮箱：网址：http:/ 启动思维信息的收集与整理信息结构与脚本的创建从需求出发提出的设计要求界面设计的趋势1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14

2、15 16 17 18 19 20 21 22 23 24 2516 17 18 19 20 21 22 23 24 251信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking一、信息的收集与整理一、信息的收集与整理l“好的设计，从好的设计，从整理整理开始！唯有整理自己与对方的想法，开始！唯有整理自己与对方的想法，才能够掌握本质。面对课题、找出方法，最终门生感动人心才能够掌握本质。面对课题、找出方法，最终门生感动人心的设计！的设计！”l现代设计的特点即调理性和逻辑性，使界面设计合

3、情合理现代设计的特点即调理性和逻辑性，使界面设计合情合理l一般来说，开始设计的时候我们会了解项目的基本信息，如一般来说，开始设计的时候我们会了解项目的基本信息，如项目的主要内容、主要目标、项目周期之类的信息，在了解项目的主要内容、主要目标、项目周期之类的信息，在了解基础信息后，建议大家针对项目先提出下面这几个问题并试基础信息后，建议大家针对项目先提出下面这几个问题并试图找到答案：图找到答案：1、为谁设计？、为谁设计？2、客户对设计的期待是什么？、客户对设计的期待是什么？3、有无解决类似问题的其他样板？、有无解决类似问题的其他样板？4、设计的限制是什么？、设计的限制是什么？1信息的收集与整理2信

4、息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking一、信息的收集与整理一、信息的收集与整理-为谁设计？为谁设计？l界面设计不是单纯的美术绘画，需要定位使用者、使用环境、界面设计不是单纯的美术绘画，需要定位使用者、使用环境、使用方式并且为最终用户而设计。使用方式并且为最终用户而设计。检验界面的标准是最终用户的感受检验界面的标准是最终用户的感受用户研究是界面设计流程中的第一步，是一种理解用户，将他们用户研究是界面设计流程中的第一步，是一种理解用户，将他们的目标、需求与设计目标相匹配的理想方法。的目标、

5、需求与设计目标相匹配的理想方法。用户研究是一个系统工程，包括运用访谈、问卷测试和现场观察用户研究是一个系统工程，包括运用访谈、问卷测试和现场观察等方法，进行用户群确认与分类，再运用尝试访谈、用户测试、等方法，进行用户群确认与分类，再运用尝试访谈、用户测试、焦点小组、启发式评估，建立用户模型，成为多媒体界面设计的焦点小组、启发式评估，建立用户模型，成为多媒体界面设计的依据。依据。l用户研究的目标是建立受众模型，一个重要方法就是建立虚拟用户研究的目标是建立受众模型，一个重要方法就是建立虚拟的人物角色。人物角色（的人物角色。人物角色（Persons）是）是1999年年Alan Cooper的的The

6、 Inmates are Running the Asylum开始普及的。开始普及的。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking一、信息的收集与整理一、信息的收集与整理-客户对设计的期待是什么？客户对设计的期待是什么？l客户是指设计委托方或委托人。客户是指设计委托方或委托人。l什么是客户关心的角度？理解这点需要按客户的方式思考问题，什么是客户关心的角度？理解这点需要按客户的方式思考问题，跳出设计表现的小天地。跳出设计表现的小天地。l不管针对什么样的客户，如果设计师能够

7、站在客户的角度思考不管针对什么样的客户，如果设计师能够站在客户的角度思考问题，用客户的语言表达问题，那么，设计师就能够从客户问题，用客户的语言表达问题，那么，设计师就能够从客户的角度思考问题，用客户的语言表达问题，那么，设计师就的角度思考问题，用客户的语言表达问题，那么，设计师就能够真正理解客户的期待并设计出符合期待的作品，事实上，能够真正理解客户的期待并设计出符合期待的作品，事实上，如果能做到这点，往往能够实现客户对设计师设计意图的深如果能做到这点，往往能够实现客户对设计师设计意图的深入理解并得到必要的支持。入理解并得到必要的支持。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计

8、流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking一、信息的收集与整理一、信息的收集与整理-有无解决类似问题的其他样板？有无解决类似问题的其他样板？l毕加索说：毕加索说：Good artists copy，Great artists steal！l设计存在一个迭代理论，设计的进步就是一个不断总结、超越设计存在一个迭代理论，设计的进步就是一个不断总结、超越的过程。的过程。l如果需要超越，往往就要站在前人的肩膀上。在接受设计任务如果需要超越，往往就要站在前人的肩膀上。在接受设计任务后，我们可以收集一些类似的解决方案，这是实现目标的最后，我

9、们可以收集一些类似的解决方案，这是实现目标的最快方法，也是项目信息收集与整理的重要内容。快方法，也是项目信息收集与整理的重要内容。l收集类似解决方案的目的在于对比现有项目，分析同类方案中收集类似解决方案的目的在于对比现有项目，分析同类方案中好的地方、不好地方，重要的是不要只看表面，而是需要考好的地方、不好地方，重要的是不要只看表面，而是需要考虑类似方案中为什么要这样来设计，找到规律和原则并运用。虑类似方案中为什么要这样来设计，找到规律和原则并运用。有了这个过程，收集类似解决方案就不会是简单抄袭了。有了这个过程，收集类似解决方案就不会是简单抄袭了。1信息的收集与整理2信息结构与脚本的创建3从交互

10、到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking一、信息的收集与整理一、信息的收集与整理-设计的限制是什么？设计的限制是什么？lT.S艾略特曾经说过：完全的自由让工作止步不前。抱怨时间、艾略特曾经说过：完全的自由让工作止步不前。抱怨时间、资金、工具等限制是毫无意义的。你的问题就是：如何在限资金、工具等限制是毫无意义的。你的问题就是：如何在限制内实现设计需求？制内实现设计需求？l设计是带枷锁的舞蹈。当我们面临实际课题的时候，项目的设设计是带枷锁的舞蹈。当我们面临实际课题的时候，项目的设计和执行会受到多方面的制约和限制，也应

11、该看出：制约和计和执行会受到多方面的制约和限制，也应该看出：制约和限制是导向设计项目可行和创新的最佳组合，否则很多富有限制是导向设计项目可行和创新的最佳组合，否则很多富有创造性的解决方案根本无缘见天日。创造性的解决方案根本无缘见天日。l除时间、资金、工具等这些因素，对于多媒体界面设计来说，除时间、资金、工具等这些因素，对于多媒体界面设计来说，技术和使用环境的制约也是需要设计师重点考虑的。技术和使用环境的制约也是需要设计师重点考虑的。l设计师理念：与其被动受到制约，不如主动去利用和解决限制，设计师理念：与其被动受到制约，不如主动去利用和解决限制，在目前可实现条件下，尽可能地应用、利用资源去实现信

12、息在目前可实现条件下，尽可能地应用、利用资源去实现信息传达。传达。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking二、信息结构与脚本的创建二、信息结构与脚本的创建l如果设计师不了解内容信息，那么在界面设计过程中设计师很难抓住如果设计师不了解内容信息，那么在界面设计过程中设计师很难抓住表现重点，从而难以推动界面设计的针对性和独创性。内容结构的表现重点，从而难以推动界面设计的针对性和独创性。内容结构的创建可以由文案主要负责，但设计师必须参与。创建可以由文案主要负责，但设计师必须

13、参与。l内容结构的创建也叫信息架构，是一个整理信息，斡旋信息系统与使内容结构的创建也叫信息架构，是一个整理信息，斡旋信息系统与使用者需求的过程，是要将信息变成一个经过组织、归类并具有浏览用者需求的过程，是要将信息变成一个经过组织、归类并具有浏览体系的组合结构。体系的组合结构。l脚本内容结构图就是信息架构的最终成果，是用图表来表示作品内容脚本内容结构图就是信息架构的最终成果，是用图表来表示作品内容的主体版块构架，要求反映作品的中心内容和内容的结构体系、结的主体版块构架，要求反映作品的中心内容和内容的结构体系、结构层次和结构关系。构层次和结构关系。l多媒体脚本系统由内容结构脚本、媒体结构脚本、界面

14、文字与解说脚多媒体脚本系统由内容结构脚本、媒体结构脚本、界面文字与解说脚本、功能结构脚本四部分构成。脚本是工作的蓝图。其中内容结构本、功能结构脚本四部分构成。脚本是工作的蓝图。其中内容结构脚本是多媒体脚本系统的核心。脚本是多媒体脚本系统的核心。l将界面设计建立在对内容理解的基础上是需要遵循的基本原则。将界面设计建立在对内容理解的基础上是需要遵循的基本原则。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking三、从交互到视觉的设计流程三、从交互到视觉的设计流程l互动多媒体设计师不

15、仅关注界面的视觉传达，也涉及多个领域互动多媒体设计师不仅关注界面的视觉传达，也涉及多个领域的知识：心理学、交互设计、信息架构、多媒体编程甚至计的知识：心理学、交互设计、信息架构、多媒体编程甚至计算机硬件方面的知识。算机硬件方面的知识。l一个多媒体界面的诞生是一个从交互到视觉的设计过程。一个多媒体界面的诞生是一个从交互到视觉的设计过程。l流程：一般会先进行交互原型设计的工作，设计团队往往需要流程：一般会先进行交互原型设计的工作，设计团队往往需要根据创意概念构建出一系列的蓝图，以不断验证想法，评估根据创意概念构建出一系列的蓝图，以不断验证想法，评估其价值，并为进一步设计深入提供基础与灵感。其价值，

16、并为进一步设计深入提供基础与灵感。l原型：一般把这样的帮助与未来产品进行交互，从而获得第一原型：一般把这样的帮助与未来产品进行交互，从而获得第一手体验，并发掘新思路的装置。这个构建与完善的过程叫做手体验，并发掘新思路的装置。这个构建与完善的过程叫做“原型设计原型设计”。l根据项目大小、时间周期等，确定纸质原型、概念原型、深入根据项目大小、时间周期等，确定纸质原型、概念原型、深入设计原型。设计原型。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking四、从需要出发提出的设计要求四

17、、从需要出发提出的设计要求l需要：高效地传达信息，让信息获得主动性是有效传达信息的需要：高效地传达信息，让信息获得主动性是有效传达信息的关键所在。关键所在。l一个优秀的多媒体界面会给人带来良好的主动信息体验，接近一个优秀的多媒体界面会给人带来良好的主动信息体验，接近人与计算机的距离，进行有效的信息沟通。人与计算机的距离，进行有效的信息沟通。l高质量的多媒体界面设计要求：高质量的多媒体界面设计要求：创造视觉吸引力创造视觉吸引力营造沉浸式的体验环境营造沉浸式的体验环境自然、新颖的交互方式自然、新颖的交互方式界面即信息界面即信息1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要

18、出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking四、从需要出发提出的设计要求四、从需要出发提出的设计要求-创造视觉吸引力创造视觉吸引力l一个良好的界面应该有视觉吸引力，人类接受的信息一个良好的界面应该有视觉吸引力，人类接受的信息90%来来源于视觉。源于视觉。l目前，界面设计的核心仍然在于视觉设计。目前，界面设计的核心仍然在于视觉设计。l一个好的多媒体界面首先在视觉上应该是创新的、饱满的，能一个好的多媒体界面首先在视觉上应该是创新的、饱满的，能够直接作用于我们的感官，刺激我们的好奇心及记忆。够直接作用于我们的感官，刺激我们的好奇心及记忆。l除了创

19、新，视觉设计的基本形式原则也不容忽视。除了创新，视觉设计的基本形式原则也不容忽视。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking四、从需要出发提出的设计要求四、从需要出发提出的设计要求-营造沉浸式的体验环境营造沉浸式的体验环境l“沉浸沉浸”在字典的意思是在字典的意思是“陷入在一些事件的包围和覆盖中陷入在一些事件的包围和覆盖中”。在多媒体设计领域中，沉浸意味着受众全神贯注地投入。在多媒体设计领域中，沉浸意味着受众全神贯注地投入到设计师所创造的虚拟环境中，达到完全忘我的境界。

20、到设计师所创造的虚拟环境中，达到完全忘我的境界。l沉浸感并非只是强调界面表现的真实性，太过于真实的环境反沉浸感并非只是强调界面表现的真实性，太过于真实的环境反而让人感觉无所适从。多媒体的沉浸感应该是通过的交互操而让人感觉无所适从。多媒体的沉浸感应该是通过的交互操作、主题内容、视觉表现及硬件设备所营造的虚拟环境，全作、主题内容、视觉表现及硬件设备所营造的虚拟环境，全方位地调动受众的视觉、听觉、触觉等感官系统来获得信息。方位地调动受众的视觉、听觉、触觉等感官系统来获得信息。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章

21、 启 动 思 维Start Thinking四、从需要出发提出的设计要求四、从需要出发提出的设计要求-自然、新颖的交互方式自然、新颖的交互方式l界面交互的基本原则就是自然。自然的交互方式就是界面交互界面交互的基本原则就是自然。自然的交互方式就是界面交互方式必须符合人的使用习惯和心理模型。方式必须符合人的使用习惯和心理模型。l在设计交互界面时，首先明确用户群的特征，并且进行针对性在设计交互界面时，首先明确用户群的特征，并且进行针对性的设计，使用合适、合理的的设计，使用合适、合理的隐喻隐喻手段，引导受众进行信息操手段，引导受众进行信息操作。作。l新颖的交互方式如创新视觉呈现一样可以获得用户的更多关

22、注新颖的交互方式如创新视觉呈现一样可以获得用户的更多关注和参与，人们对熟知的信息总是缺乏热情，这也体现在了交和参与，人们对熟知的信息总是缺乏热情，这也体现在了交互方式上，陈旧的交互方式会导致受众参与的乏味。互方式上，陈旧的交互方式会导致受众参与的乏味。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking四、从需要出发提出的设计要求四、从需要出发提出的设计要求-让界面动起来让界面动起来l多媒体界面与纸上平面传达信息最大的区别在于动态性。多媒体界面与纸上平面传达信息最大的区别在于动

23、态性。l动态不仅仅指界面中的视频、动画媒体表现方式，还包括界面动态不仅仅指界面中的视频、动画媒体表现方式，还包括界面本身的动态效果，如界面间的转场、按钮的动态等。本身的动态效果，如界面间的转场、按钮的动态等。l节奏可以简单理解为变化快慢对比程度。在界面设计中，可以节奏可以简单理解为变化快慢对比程度。在界面设计中，可以利用动态的节奏营造不同的界面情境，界面动态也是一种引利用动态的节奏营造不同的界面情境，界面动态也是一种引导受众视线、区分信息层次的重要手段。导受众视线、区分信息层次的重要手段。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势

24、6课外作业第 二 章 启 动 思 维Start Thinking四、从需要出发提出的设计要求四、从需要出发提出的设计要求-界面即信息界面即信息l多媒体系统的信息强调完整性和精度。多媒体系统的信息强调完整性和精度。l精度，就是需要对信息进行高度的包装。精度，就是需要对信息进行高度的包装。l一个多媒体界面应该是完整信息生态系统，界面中的任一个元一个多媒体界面应该是完整信息生态系统，界面中的任一个元素应该都是为信息服务的，所有的元素具备针对性和唯一性，素应该都是为信息服务的，所有的元素具备针对性和唯一性，界面元素的总和也是信息的总和。界面元素的总和也是信息的总和。1信息的收集与整理2信息结构与脚本的

25、创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking五、界面设计的趋势五、界面设计的趋势l界面视觉的细节和表现力不断被强化，有一种趋势正在变得常界面视觉的细节和表现力不断被强化，有一种趋势正在变得常见见-图形界面中元素的三维化。图形界面中元素的三维化。l另一个趋势就是针对于多点触摸的界面设计。另一个趋势就是针对于多点触摸的界面设计。1信息的收集与整理2信息结构与脚本的创建3从交互到视觉的设计流程4从需要出发提出的设计要求5界面设计的趋势6课外作业第 二 章 启 动 思 维Start Thinking六、课外作业六、课外作业l如何进行针对项目的信息收集与整理？如何进行针对项目的信息收集与整理？l什么是信息架构？信息架构的最终成果是什么？什么是信息架构？信息架构的最终成果是什么？l多媒体脚本系统由哪四部分组成？多媒体脚本系统由哪四部分组成？l什么叫原型设计？什么叫原型设计？l高质量的多媒体界面设计要求是什么？高质量的多媒体界面设计要求是什么？l多媒体界面设计的趋势是什么？多媒体界面设计的趋势是什么？