当前位置:首页 > 教学研究 > 学术前沿 > 正文
屏幕界面的设计方法
发布时间: 2017-04-12 16:36:43   作者:本站编辑   来源: 本站原创   浏览次数:

一、屏幕界面的整体设计

(一)界面窗口的大小设计

界面中所开的窗口数量要适中,因为窗口的主要目的是帮助学习者能区分画面上的资料,窗口过多过于复杂就失去了区分的意义。有些课件在本来就不大的教学信息区窗口上又开了一个窗口以显示内容,结果显示的小而少,学习者阅读起来非常吃力。由于计算机屏幕有限,为了使教学信息的呈现清楚,教学信息窗口开的越大越好。对于内容较多的,可在窗口边缘采用滚动捧。

(二)布局

教学信息区中有时包含很多内容,教学信息、讲解、练习、帮助信息、交互功能键,那么如何合理的布局这些信息呢?通过人限定位的研究表明:人们看到信息显示时,第一眼往往看显示屏左上部中间的位置,并迅速向顺时针方向移动。在这个过程之后,人眼视觉受对称均衡、标题重心、图像及文字的影响,因此可以说屏幕左上角是人视线的明显起动点。人的感觉机制总是寻求有序、有意的信息,在遭遇混乱时总是试图强行建立有序结构,因此无论一个屏幕是富有含义、具有明显格式,还是混乱、模糊,人总是迅速地辨认和理解。因此屏幕的编排应是均衡、规整、对称、有可预料性、经济、简明、连续、整体性强、比例谐调并编排合理的。在屏幕上要为诸如命令、错误信息、标题、数据区等特定信息保留特定的区域,并使这些区域在所有屏幕上保持一致。通常的屏幕构成元素一般都有其放置的规律,以下是推荐性的建议。

屏幕的标题一般位于屏幕上中部,有利于产生对称感。

屏幕标志符号、顺数等置于右上角,这是一个在大多数屏幕中使用频率较低的位置,如果还有其他如时间、日期等的参考信息,则可以在左右分别放置,以利于屏幕均衡。

屏幕主体常占用屏幕上的大部分区域,通常从中上部到底部稍上部分,这里的描述应简短,图像质量要高。

有关信息项,如状况、情况、注释行等应该放在屏幕底部,刚好在命令区域功能键之上的位置,因为这个位置能空出相当的一份空间,并从视觉上在命令区和功能区上造成分割,当然信息也可以在信息窗中显示。

功能键区、按钮区等可放在屏幕底部。研究证明命令区位于屏幕底部和顶部的效果不同,在位于底部时,效果更好一些,并且能减少使用者头部移动的次数和范围。

莱单条等则应放在屏幕顶部。

一个屏幕只要设计得具有美感,令人赏心悦目,就对眼睛具有吸引力,能引起人潜意识的注意,快速准确地传递信息,相反则会带来误导,并造成思维等的混乱。那怎样才能具有艺术性引人注意呢?研究发现了大量关于能引发视觉愉悦处理的规则,它们是均衡、规整、对称、可预见性、简明、连贯、整体性、简单、编排合理。

1.均衡

设计元素从左到右,从上到下具有相同比重。均衡的反面是不稳定,给人以不舒服的感觉。暗色、不常见形状的物体给人的感觉是“沉重”,而亮色、常见规则形状的物体给人“轻快”的感觉,屏幕的均衡感是通过主要信息显示于中央且其他各部分在水平轴和垂直轴两边均保持相同比重而实现的。

2.规整

规整是一种基于某些规则或计划的形式上的统一性,屏幕设计的规整性是通过建立标准并且一致性地安排行与列的起始位置以及各种屏幕组成因素的合适、统一的布局而实现的,反之在不存在明显的规则与计划时,就会造成不规整性。

3.对称

对称是一种轴向“复制”,中轴线一侧的某个单元在轴的另一侧有其类似单元。这种布局也产生均衡感,不同的是均衡感也可不通过对称性获得。

4.可预见性

可预见性表明一种高度传统的排列或组合。观察一幅图像,人们就可预测出相邻一幅图像将是什么样,看一幅图示图像的一部分,人们可以预测剩余部分是怎样。在屏幕设计中,可预加是通过设计的一致性来实现的。

5.简明

简明即简洁而明了地使用显示元素,以便尽可能简单地得到信息。错综复杂是一种偏离简洁明了的虚饰,经济的屏幕设计意味着调用尽可能少的显示元素来达到使用者所需求的目的。在屏幕元素的使用中往往违背这-规则,使整个屏幕看起来很复杂。

6.连贯

连贯是一种引导眼睛有逻辑有节奏地扫过屏幕的布局方法,通常将最重要的信息放在显著位置。眼睛往往趋向从高度饱和的颜色移向不饱和颜色,从暗色移向亮色,从大物体移向小物体,从不规则形状移向规则形状。连贯性的反面是随机性,它不能产生上述效果。

7.整体性

整体性是一种内在粘合性,即视觉上各元素形成一个整体。具有整体性的各元素,放在一起吻合得更完美,看起来是一个整体,其反面是支离破碎,每部分都有不同的特点。在屏幕设计中,相似的尺寸、形状和颜色以及“空白”——显示边缘处的边界都能产生整体性效果。屏幕显示中,宽度上的内容比高度上的内容大一些更能带来好的审美效果。古老的黄金分割规律,黄金矩形长和宽两边的长度之比是1.618:1,通常设计中可以用1:l到1:2的比例。

8.简单

简单指形式上的直接和单-,以便使用者容易地理解各种含义。根据应用信息论,有一种检测屏幕复杂程度的方法,步骤如下。

第一步:沿屏幕各个区域画一个矩形,这些区域包含标题数据,大标题等。

第二步:计算区域的数目和水平方向对齐点的数目(即矩形内接的区域的起始行数目。)

第三步:计算区域的数目和垂直方向上的对齐点的数目(即矩形内接的区域的起始列数目)。

通过各步计算之后的屏幕要比原始屏幕简单28%,此外降低屏幕复杂程度可通过减少显示区域数目来达到,区域越少则屏幕的复杂程度越低,然而这样做是不现实的,因为不可能让必要的内容从屏幕上消失,我们只能通过减少对齐点数目,尤其是水平方向或移动行方向上的对齐点数目来使屏幕布局合理。

9.编排

屏幕合理编排有助于建立结构清晰和富有含义的屏幕布局,除了富于感染力之外还有助于回忆,让屏幕搜索得更快一些。研究发现,编排是影响屏幕视觉搜索时间最重要的决定因素。如果屏幕中组的大小增加或组的数目增加,则搜索时间亦要更长。但数目与尺寸成反比,因此最有效的方法是设计中等数目的组数及组的大小中等。相关信息大组应放在一起,分割屏幕逻辑区应位于两个信息功能组之间;含大量信息的大组还应分成更小的组,组间相关元素之间加入空白区可以提高组的“融合”感,空白区应作为屏幕设计的一个常考虑的成分;此外还可使用线条等来区分和联接常用信息,进行屏幕信息的显示和编排。

教学信息一般安排在突出的位置,屏幕的左中部,所占的空间尽量大;按钮区放在右下角,方便鼠标操作;若一屏还有讲解、练习和帮助信息,则帮助信息放在最底行,讲解放在右边,练习在下方,但最好一屏不要安排这么多内容。

(三)主题

每一个框面内容最好都有一个主题,出现在窗口较醒目的位置。

(四)教学信息设计

在屏幕上信息的显示取决于屏幕上可显示的信息量及信息的特征,屏幕上显示的信息量应当恰如其分。如果信息量过大,屏幕各元素对使用者注意力的竞争就大,以致注意力分散过大;如果屏幕信息太多以致把使用者淹没,则视觉搜索需要更长的时间,有意义的信息就更难看到。因此屏幕设计时应该将所有相关数据显示在单个屏幕上,减少使用者的记忆负担。

信息在屏幕上选择和显示要考虑以下几个方面因素:

1.密度

密度是关于信息内容“多少”的客观衡量,在屏幕设计上是指信息显示的位置在屏幕上的比例,或屏幕某区域包含的内容量。显然,密度与屏幕复杂程度是相关的,两者都能衡量“该处有多少内容”,只是复杂程度看的是区域的多少,而密度看的是信息的多少。

研究表明,屏幕密度的增加也将使寻找信息的时间和出错机会增加。屏幕上有两种密度——总体密度和局部密度。总体密度是指在含有数据的整个屏幕中用于显示主要信息的位置所占的百分比。据研究这一密度不应超过25%,“良好”值是15%左右,密度越大出错机率也越大。局部密度用于衡量屏幕“堆积紧密程度”,通常局部密度应保持在40%~60%之间。

总之,保持总体密度在25%以下,局部密度恰当是产生屏幕“悦目”感的重要特征。

2.显示

信息的显示通常考虑到版面、文字信息、特殊记号、功能键等。版面编排是屏幕设计中安排信息显示的重要步骤,好的编排往往能达到更好的视觉效果,设计者通过合理安排各种组成元素,产生观觉上的良好效果,通常设计中会采用对比、大小、镜射、距离、重复、字体粗细、统一等多种效果。对于信息的显示应以直接使用形式出现,不应外加参考解释文件、插入语等,可以用一些手段进行显示的修饰,帮助屏幕元素的识别。应用对比性的显示特征(不同密度、字符大小、下划线、转换图等)可以吸引使用者注意力迅速地集中。通过空格、边框、线条等,可以引导人眼水平或垂直地扫视屏幕,更复杂的引导则需要对比显示的帮助。当有大量信息显示在单个屏幕上时,通过画出水平线或垂直线引导眼睛活动的方向是一个很有效的设计方法,总之,显示的方式应与视觉外观与操作步骤保持一致。

对于文字信息的呈现有以下规则:采用不同字体和不同风格来修饰文字,可取得较好的阅读效果。研究证明,混合字体文章的阅读速度快于文字风格统一的文章,这是由于混合字体的文字更易识别外形,从而易于辩认。在文字作为标题时应该风格统一,因为标题-般不会很长,无须读者长时间注意。对提示信息、菜单、按钮等文字可采用混合字体,这是为了邻近同类元素形成对比。作为小标题的文字也应采用混合字体,用于与正文区分。

除了形式上有以上的规则外,对于用作提示辅助信息的文字有文字语义方面的要求。第一,不要使用过于专业的行业词语或术语。第二,避免使用负面词语,应使用简单动词,避免使用名词串。第三,使用完整的词语,避免使用缩写、简写等方式。通过这些方法保证屏幕上的辅助信息易于理解,避免歧义和令人费解。

对于屏幕中按钮等的呈现,应按逻辑分类编排,按照使用顺序、使用频率、功能和重要性进行编排。在确定键的含义和位置时,应保证眼和手的移动最小,并将最常用的按钮放在最易控制的位置。

二、多媒体素材设计

下面我们具体介绍多媒体课件中文字、图形图象、动画、视频、声音的设计。

(一)文字

多媒体文本的设计,应用尽量少的文字来表明事实的含义。这种风格,是因为人们通常不喜欢阅读 满屏幕的文字。有些课件,例如像多媒体百科全书或电子书本,基本上是由文字构成的,但绝大多数通常不需要大量的文字。

当必须要使用大量文字时,也应尽量不要使文字集中在一起或在一屏上出现太多的字。

除在屏幕上尽量减少文字的使用之外,还需注意尽量不要将文字排列成锥体形状。锥体形固然简洁,但它却破坏了文字的方块结构。当然,为了整版设计,适当使用一点锥体形状的排列也是可以的。

文本中必须要选用容易阅读的字体。除了大型标题可选择一些带有美术色彩的字体外,文本通常应选择易读的字体,如果字体太难读,制作出的课件就好像患了一种消化不良症。

文字的颜色也要认真设计,不同内容的文字颜色应设计为不同。例如:标题设为蓝色,内容用黑色、热字用红色加下划线等。但也要避免一屏颜色过多,造成花花绿绿一大片。

(二)底图

随着各种绘图软件的出现,图形扫描仪越来越先进,很多课件的框面都加入了底图,把教学内容呈现在底图上。如果底图的颜色较深或底图画面较为突出,那么一方面会使阅读教学内容较为困难,另一方面也喧宾夺主。因此建议不用底图,将底色设置为白色,或只是在框面的左上角、右下角加入小块修饰用图(如小花、小草、小鸟之类的),起平衡画面之用。

(三)声音

声音包含语音、音乐和音效等,多媒体课件中的声音设计一定要根据声音的功能来设计,其声音功能是:引起注意、舒缓等候、提示反应、表示事件进程、提供情景音效、提供反馈等。声音设计要遵循以下几条原则。

1.勿用太多:过多的声音不但不能帮助学习者熟悉界面反而混淆其记忆。

2.音量可调:一是以菜单方式,提供音量控制选择;二是以图标按钮方式,直观形象。

3.多用间歇性的短音乐,更容易达到持续记忆与反馈的效果。

4.用声音作转移效果:用声音来作转移,类似“提示反应”的功能。例如,每次按某按钮都是同样声音,跳至或出现某画面。

5.声音的选择应配合文字与图像、视频的内容。

(四)动画、视频图象

现在很多课件中都或多或少地有视频图象,当然适量必要的视频图象有助于学习者对知识的理解,但为增加趣味性或展示编程技术而过多地加入视频图象会使课件运行速度减慢,而且某些格式的视频图象需要特殊的驱动程序,容易造成死机,使课件的兼容性降低。

若确要加入视频图象,也要对其作必要的处理。例如,用3DS 制作的动画,当初为了使其能与电视视频图象叠加,其底色通常被默认设为黑色,这样的动画以视频图象文件形式加入课件中后造成画面的不协调,更有甚者由于动画的底色为黑色,周围很暗,造成不易看清动画效果,所以建议将动画的底色设为白色或浅色。

视频图象在屏幕上出现的位置要保持基本一致,一般放在屏幕的中央或右半部,大小一般不超过屏幕的1/4,可以依内容的多少和学习者的爱好而加以调整,但若有叠加文字或标题时,视频窗口大小宜保持一定,不适合让学习者控制调整。为方便使用者操作,在视频窗口下方设计播放、停止、快进、倒退、录制等控制按钮,类似家庭录像机的控制按钮。

(五)颜色的运用

多媒体课件的设计要用到各种各样的颜色,以形成色彩缤纷的屏幕,这也是多媒体课件吸引学习者的原因之一。色彩可以吸引用户的视觉感官,从而引起注意,只要色彩使用恰当,就能促进对屏幕上各部分的识别,突出差异,使显示更富有趣味性。但如果颜色使用不当,则会分散人的注意力,使人的视觉更容易疲劳。对于屏幕中色彩的正确使用,从以下几方面来讨论。

1.彩色的作用

色彩在屏幕设计中的作用可以归纳为以下三个方面。

(1)作为一种组织屏幕信息、形成良好屏幕格式的手段在建构屏幕时,色彩可以被当作一种很好的格式规化工具来使用。特别是当同一屏幕里不得不包容大量信息,而且想利用惯常的空间区域分隔的方法来对它们进行组织和规划已经非常困难的时候。比如,我们可以用不同的两种颜色来显示两组空间上紧靠在一起而逻辑上毫无关联的文本,相反,对那些本属于同一主题的信息,而在空间上被分隔得很远,我们则用同一颜色显示它们,用颜色的纽带将它们联系起来。如果我们要提醒用户对屏幕上某一部分的注意,可以采用高亮显示或动画显示等技巧,但这些办法可能都不如利用颜色来得灵活方便。因为可供我们选择的颜色种类实在是太多了,以16BIT色彩模式而言,我们就有6万多种颜色可用。当然,选择色彩的时候必须要认真考虑人的诸多生理和心理因素,这点我们后面还要讨论。

(2)色彩本身充当有特定意义的视觉符号颜色是有意义的,这种意义可能来自于人们的长期共识,约定俗成,也可以来自软件设计者的指定。利用颜色的这种性质,我们可以把它当成一个很重要的屏幕元素来使用。比如:用颜色来指示信息的性质——绿色的按钮表示“开始”;红色的按钮表示“停止”;白色的边框表示标题区;蓝色的边框表示正文区;红色区域显示警告信息;黄色区域提供帮助信息;在网络上学习,蓝底白字表示信息来自于教师,白底黑字表示信息来自于同学等等。这些都将大大降低学习者的认知负荷,提高人机界面的效能。

在将色彩作为某种意义符号或渲染感情的手段时,设计者必须要注意:你所指定的这种色彩意义或情感象征一定要为用户所了解并接受,不能与他的固有色彩经验发生冲撞。如:人人都接受红灯停、绿灯行,而你硬将表示开始功能的按钮作成红色的就显得别扭了。还有,在整个软件中,色彩的意义一定要具有稳定性、一致性,如:在第一个屏幕中用了蓝色作标题栏,那么,此后的所有屏幕中的标题栏都应该是蓝色。

(3)借助色彩逼真地反映客观世界。我们周围的世界是五彩缤纷的,在某些教学过程中特别需要以照片、动画、活动视频等来展示一些客观对象和过程,这时候逼真的彩色显得尤其重要。

(4)增添屏幕的吸引力,激起用户的兴趣。尽管许多实验表明,在完成人机交互功能上,彩色显示器并不比单色显示器具有太多的优势,反而,色彩的使用不当往往事得其反,毁掉整个设计。但是有一个因素是我们无论如何不能忽视的,那就是人们喜欢色彩,彩色的屏幕比只有黑、白、灰的屏幕对他们更有吸引力。特别是对课件的使用者,他们中的相当部分是未成年人,所以把屏幕作得漂亮一点就更有必要了。

2.色彩的运用方法

在选用色彩设计软件屏幕时,最重要的是明确色彩使用的目的和可能的作用,力求发挥色彩辅助交流、促进信息传播的作用。要做到合理运用色彩应注意以下几个方面。

(1)对色彩的基本认识

在选用色彩时,最基本的要求是了解人眼的视觉系统:明确色彩滥用可能导致的问题,并尽量去避免它;考虑色彩搭配带来的情景效应:考虑视野环境因素等等。最重要的是明确色彩使用的目标任务,即色彩的作用是辅助交流,我们最终要达到的目标是完成信息从机到人的有效传递。

怎样来考评一个人机界面中的色彩使用是否合理,专家们提出一个建议:即把屏幕上的色彩全去掉,只留灰度显示,这时的人机界面应该仍能有效工作。换言之,色彩的作用应是为屏幕增色,而屏幕设计不可依赖色彩。有一点必须记住:不当的色彩应用,其结果不如干脆不用。

(2)避免同时使用太多颜色

同一画面中不要使用太多的颜色,一般以四五种为限。过多的颜色会增加学习者的反应时间,增加出错的机会,易于引起视觉疲劳。我们可以用一些其他的技巧,如:空间划分、层次变化及几何形状等来配合颜色使用,以增加屏幕的视觉效果。

(3)色彩的可分辨性和协调性

自然界中能观察到的颜色有七百五十多万种,而人眼的分辨能力十分有限,在没有对比参照的情况下指认一种颜色尤其困难。所以,如果是同时使用几种颜色来代表不同的意义,如直方图中的色条,一是数量上不能超过6-7种,二是一定要选择在光谱上有足够间隔的色彩,如红、黄、绿、蓝等。如果需要同时放置较多种颜色的话,就有必要用文字标注各种色彩的含义了。

同时出现的色彩,特别是空间位置上邻近的色彩一定要和谐,尽量避免将对比强烈的颜色放在一起,如黄与蓝,红与绿或红与蓝等,除非在作对比效果时例外。所有文字以同一颜色来表示,除非是特殊字词(如超文本中的链源关键词等)。

对于老年的用户,或是需要长时间注视屏幕的情况,设计者要考虑选用一些较明亮的颜色。

(4)用色彩来起强调作用

活动中的对象与非活动中的对象颜色应不相同。活动中的颜色鲜明,非活动中的颜色应暗淡。以暖色,饱和的、鲜艳的色彩作为活动中的前景,以冷色、暗色、浅色作为背景色。用对比色来表现分离,用相似色来表示关联。

(5)定义色彩的含义要与用户的色彩经验和期望相一致

毫无疑问,颜色是有意义的,但不同国家、民族、宗教、年龄层次、社会地位的人往往对色彩有着不同的理解。比如:同样是蓝色,对好来坞电影迷来说,意味着温柔和色情;对商业人士来说,意味着合作品质和可靠性;对于医学界人士,它可能意味着死亡;而对于核反应堆的监控人员,它又意味着冷却和水……

设计者必须根据用户对象的特点来决定对色彩的选择,要尽量符合人们已经普遍接受的色彩意义。出乎预料,违反常情的色彩运用会导致用户的迷惑和混乱。下面列出几种常用色彩,它们都有一些较为确定的意义内涵。

红色:停止、火、热、危险

黄色:警告、慢速、测试

绿色:前进、状况良好、清楚、植物、安全

蓝色:冷却、水、安静、天空、中立

暖色:活动中的。要求作出反应的、关系密切的

冷色:静止的、状态信息、背景的、关系疏远的

灰色、白色:中性

(6)色彩的空间位置分布处于对人眼色彩视觉特性的考虑,应在视野的中心多选用红、绿色,而边沿则比较适于采用蓝、黄、黑色。相对来说边缘部分的色彩不易引起注意,所以有必要采用诸如闪烁、动画等其他技巧来配合。

相邻的色块之间,只以色度来区分是不够的,它们还应该具有亮度上的区别,比较简单的方法是给色块边沿加上明显的边界线。

(7)色彩的顺序

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

三、界面的转换设计

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

常见的多媒体写作工具中,都提供了界面转换特殊效果的方法,简单易用。

四、屏幕设计中应注意的问题

在屏幕设计中,应注意如下问题。

(一)避免使用专门术语

由于使用者的文化水平、专业技能等会有根大的差别,因此在设计屏幕时应选用通俗的词语,避免使用专门术语,否则会让使用者觉得难以理解,好象使用该软件要重新学习许多新知识,从而加重了学习者的认知负荷。

(二)注意屏幕及各组成元素的直观性

屏幕中的元素,若不明显或不直观,无论这些元素的外形、图案、色彩怎样新颖独特都难以使学习者理解和使用,也难以达到预先设计的效果和作用。因此应注意屏幕及各组成元素直观明了,易于掌握应用,否则软件功能难以实现。

(三)保持屏幕元素的一致性

保持屏幕及组成元素的一致性,可以给使用者的使用带来方便,将用于操作方面的注意转化成无意注意,从而进行自动的加工,使注意力更多地投入到教学信息的学习中。屏幕与相关元素在风格、功能、组织等方面的一致性也体现出连贯的风格。

(四)考虑使用对象的特点

不同的使用者在各方面有很大差异。在设计-个课件时,我们不可能保证它适用于所有的对象,因此必须保证针对主要的使用者进行设计,符合主要对象的文化层次、社会背景和民族特点等。例如设计儿童软件的屏幕可以色彩鲜艳、形象生动,而成人软件的屏幕则应高雅恬淡、简洁实用。