以用户为中心的设计

这是UCDChina提前预览网页留下的存档,不包括作者可能更新过的内容。
推荐您进入文章源地址阅读和发布评论:http://www.alisoftued.com/?p=161

全屏flash的尺寸分析

作者:阿里软件UED团队  |   发布: (网友)稻草   |   时间:2009-01-23 17:26:42 文字大小:- +

随着现在宽屏显示器的流行,Flash的全屏模式下,越来越需要考虑到普屏显示器与宽屏显示器的差别。

 

Flash全屏模式有以下特点:

1、 窗口最大化,且置顶显示;

2、 在默认(flash内容自动缩放)状态下, swf文件保持长宽比进行缩放,直到宽、高有其一先达到屏幕尺寸。

3、 当屏幕长宽比与swf文件长宽比不同时,将显示flash舞台区域外内容。

 

根据这些特性,我们制作的flash在全屏播放时有以下效果:由于生成的swf文件的长宽比固定,但客户端显示器分辨率多种多样,势必导致flash舞台区域外内容会显示在某些客户端显示器屏幕中。当swf文件是窄比例时,在宽屏显示器下,左右两边会出现舞台区域外内容;当swf文件是宽比例时,在窄屏显示器下,上下两端会出现舞台区域外内容。

 

这里就牵涉出两个概念区域:“安全区域”和“最大显示区域”。我们这里所谓的“安全区域”,与视频制作时的监视器安全区域类似,即:swf文件不管在什么显示器分辨率下,都会完全置于显示器屏幕内的区域。我们所有的内容都必须处于这“安全区域”内,使得所有客户端都能看到这部分信息,以免造成信息遗漏。而“安全区域”外的内容,则需填充与内容无关的修饰背景,确保各分辨率下的整体美观效果。“安全区域”外内容在某分辨率下能显示出的最大区域即为“最大显示区域”。为什么要定这两个区域?“安全区域”保证了我们在制作flash时所有内容不会显示在屏幕外,“最大显示区域”指导我们制作填充背景的大小。

 

有了以上分析后,我们在动手设计一个全屏flash动画前,就应该先定出这两个区域:“安全区域”和“最大显示区域”。“安全区域”就是flash的舞台区域,用宽舞台或窄舞台,视项目的需求而定;“最大显示区域”则根据你的舞台长宽比:如果是宽舞台,“最大显示区域”与舞台同宽而上下延伸;如果是窄舞台,“最大显示区域”与舞台同高而左右扩展。

 

以下我们以窄舞台为例做分析:

我们常见的显示器分辨率按其长宽比可分为为:431024×768)、541280×1024)、1691610。长宽比越大、显示区域越宽,四种常见长宽比中,54最窄,169最宽,所以我们以54做为窄舞台“安全区域”的长宽比时,其“最大显示区域”必须满足最宽的显示器分辨率,即以169为窄舞台对应的“最大显示区域”长宽比时,431610分辨率显示器下都能满足我们的显示要求。

 

在窄舞台情况下,“安全区域”和“最大显示区域”有相同的高度,所以在54169两种长宽比下的高度最小公倍数是36,他们对应的宽度为4564,两个长宽比可换算成45366436。当舞台大小按窄舞台标准设定时:

“最大显示区域”宽度=舞台宽度×(64/45

同理可得:

当舞台大小按宽舞台标准设定时:“最大显示区域”高度=舞台高度×(64/45)。

 

更多
打印  |  类别:设计思想  |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买