1 / 32

第 4-1 章 课件界面设计(补充)

第 4-1 章 课件界面设计(补充). 漂亮的人机界面可以使学习者感到耳目一新。通过感受课件界面上的色彩、图案、物体、创意等,形成对课件的第一印象,然后学习者又通过界面上提供的各种信息和功能元素进行学习,可以说屏幕界面是学习者对课件最初、最深,也是最重要的印象。友好的屏幕界面能使课件容易被理解和接受,又能让学习者容易掌握和使用。. 上一页. 下一页. 结束. 5 . 1 屏幕版面的规划

Download Presentation

第 4-1 章 课件界面设计(补充)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 第4-1章 课件界面设计(补充) • 漂亮的人机界面可以使学习者感到耳目一新。通过感受课件界面上的色彩、图案、物体、创意等,形成对课件的第一印象,然后学习者又通过界面上提供的各种信息和功能元素进行学习,可以说屏幕界面是学习者对课件最初、最深,也是最重要的印象。友好的屏幕界面能使课件容易被理解和接受,又能让学习者容易掌握和使用。

  2. 上一页 下一页 结束 5.1 屏幕版面的规划 1、  教学信息呈现区域     主要用来呈现知识内容、演示说明、举例验证、显示问题等,它们是以多媒体信息来呈现的。在安排这些媒体信息区域时,重点是对各种可视信息,如文本、图形、图像、活动影像、动画等的定位和大小的设计。整个教学信息呈现区域在屏幕版面上应处于醒目的位置并占有较大的位置。

  3. 上一页 下一页 结束 5.1 屏幕版面的规划 2、帮助提示区域     多媒体课件中的导航策略很重要,它可以知道学习者沿着正确的路径学习,避免迷途或少走弯路。因此在制作脚本时,应有相应内容的描述并在屏幕版面上有所考虑。3、交互作用区:     根据学习者操作的习惯,一般位置是在右边、下边或右下角。

  4. 上一页 下一页 结束 5.1 屏幕版面的规划

  5. 上一页 下一页 结束 5.2 界面的视觉流程 1、主次引导  靠空间位置的主次关系来确保流程的合理性,使视觉区域的流动符合人的生理习惯。界面各元素应按视觉运动的规律给以一定的组合,形成界面的脉络,诱导读者的视线从主到次、从强到弱、从文字到图像……形成一个和谐整体。

  6. 上一页 下一页 结束 5.2 界面的视觉流程 2、视觉中心  界面的视觉中心可以理解为:以强烈的形象或文字占据界面的某个部位,形成界面视觉焦点。视线往往由视觉中心开始,沿着一定的方向运动。所以,把握视觉中心也就把握住编排的整体性。设计者将最有视觉魅力、最为重要的元素放在界面某区域,人为地创造界面的视觉中心,以显示界面阅读的起点。

  7. 上一页 下一页 结束 5.2 界面的视觉流程 3、顺序标记  靠明确的顺序标记,借助文字等有先后信息的符号引导流程,如1、2、3、4……,A、B、C、D……等,强制读者按编排的意图观看,这是一种最简单而又最有效的方法。

  8. 上一页 下一页 结束 5.3 色彩的设计 色彩的作用 1、作为一种组织屏幕信息、形成良好屏幕格式的手段在建构屏幕时,色彩可以被当作一种很好的格式规化工具来使用。2、 色彩本身充当有特定意义的视觉符号颜色是有意义的,这种意义可能来自于人们的长期共识,约定俗成,也可以来自软件设计者的指定。3、 借助色彩逼真地反映客观世界。4、 增添屏幕的吸引力,激起用户的兴趣。

  9. 上一页 下一页 结束 5.3 色彩的设计 色彩的运用 在选用色彩设计软件屏幕时,最重要的是明确色彩使用的目的和可能的作用,力求发挥色彩辅助交流、促进信息传播的作用。要做到合理运用色彩应注意以下几个方面: 1、 对色彩的基本认识 在选用色彩时,最基本的要求是了解人眼的视觉系统:明确色彩滥用可能导致的问题,并尽量去避免它;考虑色彩搭配带来的情景效应:考虑视野环境因素等等。最重要的是明确色彩使用的目标仟务,即色彩的作用是辅助交流,我们最终要达到的目标是完成信息从机到人的有效传递。

  10. 上一页 下一页 结束 5.3 色彩的设计 怎样来考评一个人机界面中的色彩使用是否合理,专家们提出一个建议:即把屏幕上的色彩全去掉,只留灰度显示,这时的人机界面应该仍能有效工作。换言之,色彩的作用应是为屏幕增色,而屏幕设计不可依赖色彩。有一点必须记住:不当的色彩应用,其结果不如干脆不用。 2、 避免同时使用太多颜色同一画面中不要使用太多的颜色,一般以四五种为限。过多的颜色会增加学习者的反应时间,增加出错的机会,易于引起视觉疲劳。我们可以用一些其他的技巧,如:空间划分、层次变化及几何形状等来配合颜色使用,以增加屏幕的视觉效果。

  11. 上一页 下一页 结束 5.3 色彩的设计 3、 色彩的可分辨性和协调性 自然界中能观察到的颜色有七百五十多万种,而人眼的分辨能力十分有限,在没有对比参照的情况下指认一种颜色尤其困难。所以,如果是同时使用几种颜色来代表不同的意义,如直方图中的色条,一是数量上不能超过6-7种,二是一定要选择在光谱上有足够间隔的色彩,如红、黄、绿、蓝等。如果需要同时放置较多种颜色的话,就有必要用文字标注各种色彩的含义了。 同时出现的色彩,特别是空间位置上邻近的色彩一定要和谐,尽量避免将对比强烈的颜色放在一起,如黄与蓝,红与绿或红与蓝等,除非在作对比效果时例外。所有文字以同一颜色来表示,除非是特殊字词(如超文本中的链源关键词等)。

  12. 上一页 下一页 结束 5.3 色彩的设计 对于老年的用户,或是需要长时间注视屏幕的情况,设计者要考虑选用一些较明亮的颜色。 4、 用色彩来起强调作用活动中的对象与非活动中的对象颜色应不相同。活动中的颜色鲜明,非活动中的颜色应暗淡。以暖色,饱和的、鲜艳的色彩作为活动中的前景,以冷色、暗色、浅色作为背景色。用对比色来表现分离,用相似色来表示关联。

  13. 上一页 下一页 结束 5.3 色彩的设计 4、 用色彩来起强调作用 活动中的对象与非活动中的对象颜色应不相同。活动中的颜色鲜明,非活动中的颜色应暗淡。以暖色,饱和的、鲜艳的色彩作为活动中的前景,以冷色、暗色、浅色作为背景色。用对比色来表现分离,用相似色来表示关联。

  14. 上一页 下一页 结束 5.3 色彩的设计 5、 定义色彩的含义要与用户的色彩经验和期望相一致 毫无疑问,颜色是有意义的,但不同国家、民族、宗教、年龄层次、社会地位的人往往对色彩有着不同的理解。比如:同样是蓝色,对好来坞电影迷来说,意味着温柔和色情;对商业人士来说,意味着合作品质和可靠性;对于医学界人士,它可能意味着死亡;而对于核反应堆的监控人员,它又意味着冷却和水……

  15. 上一页 下一页 结束 5.3 色彩的设计 设计者必须根据用户对象的特点来决定对色彩的选择,要尽量符合人们已经普遍接受的色彩意义。出乎预料,违反常情的色彩运用会导致用户的迷惑和混乱。下面列出几种常用色彩,它们都有一些较为确定的意义内涵:红色:停止、火、热、危险黄色:警告、慢速、测试绿色:前进、状况良好、清楚、植物、安全蓝色:冷却、水、安静、天空、中立暖色:活动中的。要求作出反应的、关系密切的冷色:静止的、状态信息、背景的、关系疏远的灰色、白色:中性

  16. 上一页 下一页 结束 5.3 色彩的设计 6、 色彩的空间位置分布处于对人眼色彩视觉特性的考虑 应在视野的中心多选用红、绿色,而边沿则比较适于采用蓝、黄、黑色。相对来说边缘部分的色彩不易引起注意,所以有必要采用诸如闪烁、动画等其他技巧来配合。相邻的色块之间,只以色度来区分是不够的,它们还应该具有亮度上的区别,比较简单的方法是给色块边沿加上明显的边界线。

  17. 上一页 下一页 结束 5.3 色彩的设计 7、 色彩的顺序 如果要用一个色彩的渐变序列来表达某种顺序信息,如数值从大到小、过程从开始到结束等,那么色彩的排列应与光谱顺序相吻合,即ROY G BIV (红、橙、黄、绿、蓝、靛、紫)的顺序。这样比较符合人们的视觉习惯。

  18. 上一页 下一页 结束 5.3 色彩的设计 彩给人视觉上造成的冲击力是最为直接与迅速的。作为第一视觉语言,色彩在界面设计中的作用是字体与图像等其他要素所无法替代的。由于对色彩的爱好是人类一种最本能、最普遍的美感,它对观看者的影响便是最为直接的。界面设计者要考虑读者最初一瞬间的色彩感觉,牢牢地捕捉住他们的眼光,以达到引起关注的目的,使设计的图例、照片、字体与空间等关系与色彩一起变成一种视觉化、形象化的语言,以达到更有效的传递目的。

  19. 上一页 下一页 结束 5.4 色彩的搭配 一、 整体色  色彩具有影响人们心理,唤起人们感情的作用。色彩作为界面的设计要素之一,其视觉传递的作用在创意中往往得到加强。  所谓色调是由参与配色的色相、明度、纯度和面积关系决定的。整体色是指界面主要倾向于某一色调。不同的色彩表现不同的情感,根据设计主题选用不同色彩,将有利于情景交融的沟通。在表现这些色调时,色彩所体现的感觉将有效地突出主题内涵,创造主题特有的情调。

  20. 上一页 下一页 结束 5.4 色彩的搭配

  21. 上一页 下一页 结束 5.4 色彩的搭配 二、 重点色  在同调的色中,局部加上不同调的色,形成视觉美点。色彩的点缀在界面中产生一种紧张感,成为整体的一个着力点。点缀的色应该采用小的面积,并与其他色形成强烈反差,以加强吸引力,形成视觉中心。

  22. 上一页 下一页 结束 5.4 色彩的搭配 三、 对比色  画面上冷暖色对比,同时占有相同面积及地位。界面上两色不分主次,对比强烈,色彩华丽,装饰性很浓。

  23. 上一页 下一页 结束 5.5 界面间的转换 界面间的转换如同电视画面间的转换一样,其设计也具有一定的艺术性,好的界面转换设计有助于学习者理解框面之间的知识结构、知识层次。例如两个相对独立知识框面间的转换可以采用切换(CUT)或滑变(REMOVE TO LEFT 等),表明从一个内容转换到另一个内容;又如内容的不断深入可以采用IRIS IN 效果,而从下层内容回到上层内容,可以采用 IRIS OUT ;调用注解的出现可以采用 MOSAIC 效果。而整个课件的出现则可以采用 VERTICAL BLIND 效果。但要注意一但这种转换在课件中确定,就应不再改变,以使学习者见到转换就想到结构。常见的多媒体写作工具中,都提供了界面转换特殊效果的方法,简单易用。

  24. 上一页 下一页 结束 5.5 界面间的转换 美术类课件

  25. 上一页 下一页 结束 5.5 界面间的转换 社会课件

  26. 上一页 下一页 结束 5.5 界面间的转换 社会类课件

  27. 上一页 下一页 结束 5.5 界面间的转换 社会类课件

  28. 上一页 下一页 结束 5.5 界面间的转换 社会类课件

  29. 上一页 下一页 结束 5.5 界面间的转换 语文类课件

  30. 上一页 下一页 结束 5.5 界面间的转换 语文类课件

  31. 上一页 下一页 结束 5.5 界面间的转换 数学类课件

  32. 上一页 下一页 结束 5.5 界面间的转换 数学类课件

More Related