快捷搜索:  test  as

高分辨率下界面布局的解决方案

高分辨率下翰墨字体、图像、界面结构的办理规划

为什么要包管我们的软件产品或利用法度榜样中的文本、图像和字体、结构等问题呢,由于我们用户的终端显示设备平日型号和设置各别,如近来呈现的16×9,低于8”的等最新格式移着手提电脑,我们的利用法度榜样和软件产品平日会在这样的终端变得面貌全非,而这显然给用户的应用带来了严重的问题,直接导致的问题如:操作易用性Usability、功能靠得住近性Accessibility、文本可读性Readability 等,而这样的问题并非弗成超越,要办理若何让我们的利用法度榜样在高分辨率的显示下仍旧维持正常可视,重点必要办理四个方面的问题文本和字体、图像(图形、图标和鼠标指针)、版面设置和重绘等。

媒介

所有的利用法度榜样都可以事情在高分辨率下显示吗?谜底当然是否定的。现在对照标准的谋略机显示器都已经可以支持显示大年夜概96像素点/英寸的分辨率了,而且越来越多的利用法度榜样都可以运行在这种分辨率下,然则却仍旧面临分辨率日益增长的带来的危险。现在,我们可以轻松的买到一台133-DPI显示分辨率的条记本电脑,以致还有170DPI的,大概几年今后200-DPI的显示分辨率已经随处可见了,闻名的工业杂志DisplaySearch曾经预言在2002岁尾有40%的膝上电脑已经跨越100-DPI的屏幕分辨率了,而且这个数字还在增长。

例图 1.各类常见分辨率下字体外不雅

现在大年夜多半的利用法度榜样要想显指正常都依附于分辨率,我们有些利用法度榜样假如没有高分辨率的支持将会变得异常丑陋并且导致用户易用性低落,与此同时越来越多的用户应用了大年夜字体。然则遗憾的是当分辨率在130-DPI和200-DPI的时刻是不成比例的,在96-DPI下的同一个利用法度榜样在这种分辨率下会变得无法应用,有的时刻这些利用法度榜样的字体或控件会一律变得很小,然则更多的环境是一部分界面元素的尺寸精确的(例如,利用法度榜样应用了缺省的字体,那么将会在这个根基上比原本大年夜一些)而别的一部分不精确,如下图所示:

例图2. 改变分辨率带来的影响

由此可见,增强和改良我们利用法度榜样在高分辨率下的显示支持是异常有需要的,那么紧张的标准应该是:图片看起来更好,文本也应该看起来更清晰。比如文本在200-DPI分辨率显示器上清晰的像激光打印机输出的一样(由于谋略机显示有更多的颜色像素和灰度缩放支持,200-DPI的显示器的质量相称于600-DPI的打印机)以是PDA和Smartphone的厂商相对付纸介更珍视高分辨率下的显示。

开拓一个适应多分辨率的利用法度榜样不是很简单,尤其对付一个已经成形的利用法度榜样和系统来说,动静可能不小,然则它的好处是可以使我们不必再假设分辨率的各类环境,避免不能缩放带来的质量下降(比如说位图和位图字体),而且开拓支持高分辨率的利用法度榜样无意偶尔候会感觉有些单调和乏味,然则假如我们的产品或利用法度榜样是为了办事于特定人群的(比如说视力不好、和必要长光阴事情的人以及视弱人群),那么我们的事情就会变得异常有需要(在高比较度下和应用扩展大年夜字体的环境都和高分辨率有关)。

系统韵律

Windows平台本身供给了赞助办理用户系统高分辨率问题的办理道路,我们可以经由过程一个小函数GetDeviceCaps()先获适合前的显示分辨率,然后经由过程GetSystemMetrics()这个系统韵律函数和读取系统信息和参数的SystemParametersInfo()函数供给的措施来改变windows中的图形以及控件元素、和字体的尺寸,从一个3d的边框效果甚至到一个小图标的尺寸,都可认为所欲为的改变。

大年夜概道理是首先使用GetDeviceDaps()这个函数获适合前分辨下的X、和Y轴的数值作为基准;然后再确定要缩放到若干。

关键问题

在设计高分辨率的利用法度榜样历程中,我们要分外留意四个紧张的方面:文本和字体、图像(图形、图标和鼠标指针),版面设置以及重绘。

文本和字体

这里有两种字体:位图(光栅)字体和TrueType字体,而我们要想实现高分辨率的利用法度榜样就只能应用Truetype字体,由于位图(光栅)字体只能在96-DPI的屏幕分辨率下正常,而且不能够缩放,Windows已经支持TrueType字体很长光阴了,以是找到一个很好的TrueType字体并且定义到我们的利用系统中并不是什么大年夜的问题,别的一个缘故原由只能应用Truetype字体,由于一些最新的技巧,比如说GDI+,然则它只支持Truetype字体的操作。

缺省的字体可以经由过程windows句柄(HWNDs)和获得,而图形设备(HDCs)得到的是位图(光栅)字体,以是无意偶尔候在改变字体的时刻,不管缺省字体不是HWNDs和HDC字体,只要它是TrueType字体,我们就可以改变它:

HFONT font = (HFONT) GetStockObject (DEFAULT_GUI_FONT);

SendMessage (hwnd, WM_SETFONT, (WPARAM) font, 0);

SelectObject (hdc, font);

当我们在窗口上创建字体的时刻,可以应用像素指定字体尺寸,然后调剂分辨率。

LOGFONT lf;

Memset (&lf, 0, sizeof (lf));

lf.lfHeight = SCALEY (13);

HFONT font = CreateFontIndirect (&lf);

或者可以应用Windows API供给的选择翰墨通用对话框,容许应用更准确的像素点来指定字体尺寸,然后颠末一些算法后转化字体尺寸为像素,可以指定只应用TrueType字体来显示。

CHOOSEFONT data;

Memset (&data, 0, sizeof (data));

data.lStructSize = sizeof (data);

data.hwndOwner = form;

data.Flags = CF_TTONLY | CF_SCREENFONTS;

ChooseFont (&data);

最好的措施经常是在各类高分辨率下指定一个尺寸和一个区域的尺寸并且应用字体尺寸作为度量比例尺来指定这个页面中的其它元素,比如说,可以设定按钮之间的间距为缺省字体的高度的若干,应用GetTextMetrics()这个函数可以从新设定一个字体的高度。

TEXTMETRIC metrics;

GetTextMetrics (hdc, &metrics);

Int height = metrics.tmHeight;

最好不要应用TEXTMETRIC供给的tmAveCharWidth 措施,由于它只可以处置惩罚英翰墨母,除此以外我们还可以应用GetTextExtent()的这个措施来确认所关心的字符串的尺寸,我们可以用GetTextExtentPoint32()绘制一个萦绕字符串的矩形,示例如下:

SIZE size;

GetTextExtentPoint32 (hdc, string, strlen (string), &size);

Int paddingX = SCALEX (8);

Int paddingY = SCALEX (8);

Rectangle (hdc, x - paddingX, y - paddingY, x + size.cx

+ paddingX, y + size.cy + paddingY);

TextOut (hdc, x, y, string, strlen (string));

着末,我们意识到只管TrueType字体缩放精细,然则他们不是线性缩放,也便是说在DPI增添10%今后字符串的长度不能精确的增添10%,(应用GDI+就没有这个问题),由于一些特定的字母只能在几个尺寸上看起来不错,而TrueType却可以自动选择一个近似的尺寸精确显示,这是应用GetTextExtent这个函数的缘故原由。

图像

图像因此光栅为根基的文件,(比如说BMP、JPEG和GIF),如图标和鼠标指针等。图像相对付字体来说要更难处置惩罚一些,由于图像是由离散的像素组成,假如当前显示分辨率和图像设计时的分辨率不同等,那么图像就必要根据精确的物理尺寸缩放,我们可以经由过程StrectchBlt() 函数缩放一个位图而不是BitBlt(),当图像被Load时它可以随意马虎的赞助利用系统缩放图像,而且更准确些。

BITMAP info;

GetObject (bitmap, sizeof (info), (PTSTR) &info);

HDC hdcBitmap = CreateCompatibleDC (target);

SelectObject (hdcBitmap, bitmap);

StretchBlt (target, x, y,

SCALEX (info.bmWidth), SCALEY (info.bmHeight),

hdcBitmap, 0, 0, info.bmWidth, info.bmHeight, SRCCOPY);

DeleteDC (hdcBitmap);

当然,缩放肯定会衰减图像的质量,尤其是当从一个小的分辨率放大年夜到一个大年夜分辨率的时刻;而且缩小也有一些问题,缺省是拉伸模式COLORONCOLOR,它运算虽然快速,然则会损掉一些细节,HALFTONE要领拉伸运算速率很慢,然则质量会更高,(GDI+供给了一个扩展的选项)。

SetStretchBltMode (hdc, HALFTONE);

必要分外指出的是ICO和.CUR文件是可以在一个零丁的文件中存储多个图片的文件,那么我们就必要在多种分辨率下设计不合的图片,建议应用GetSystemMetrics()来办理,那么假如必须缩放的话,系统将会替我们选择相宜的图片。然则BMP或其它很多种文件相宜是不支持在一个零丁的文件中存储多个文件的,然则我们可以经由过程判断来确定在Load的时刻选择建立哪个文件。

If (GetDeviceCaps (hdc, LOGPIXELSX) 界面结构

版面是另一个会导致在高分辨率下呈现问题的环节,很多对话框都应用对话单位(DLU)作为规格设置单位,由于它可以跟着系统分辨率而自动运算缩放变更;然则一些自定义的界面上经常必要被我们从新手动转换并且设定,由于有很多界面或对话框理论上事情在像素下,我们可以从新筹划界面和对话框的设定,比如说完全应用对话单位,只管我们也可以调用SetWindowPos()供给的措施,或者可以扬弃关于DPI的假设继承事情,应用system metrics来自动处置惩罚这些字体和控件之间的关联。

重绘

重绘也是一样,有些时刻我们必要绘制屏幕或控件,必要谋略不合的分辨率。假如我们开拓了一个自定义控件,那么它或许可以事情在像素情况下,然则我们必要应用system metrics来避免分辨率的问题,假如我们在绘制一个繁杂的图形可以应用SetMapMode来应用图形缩放引擎。

GDI+

GDI+是微软下一代的2D图形办理规划,是对GDI的增强和延续,GDI+供给了在高分辨率的办理规划,比如说线性的文本缩放,和平滑图片、缩放功能都被很好的改良,GDI+供给了许多针对速率和质量等方面图片缩放的运算规则,然则相对照GDIStretchBlt的而言,对付小图像InterpolationModeBilinear更快速质量也不错,对付会有一些质量问题,以是应用GDI+供给的 InterpolationModeHighQuanlityBicubic是个不错的选择。

图片和图形的真实感增强 Office XP采纳改进的图形系统 (GDI+),应用该图形系统,图形和艺术字将具有更平滑的轮廓以及可调剂的用真实颜色调和的透明度级别。在调剂图片大年夜小时,图片的显示将加倍清晰。

别的GDI+ 环抱分辨率的问题还供给了(Image::GetPhysicalDimension和Bitmap::SetResolution)这样的函数,可以应用这些信息来恰当的缩放图片,或者可以让GDI+去作这些,假如在调用 Graphics::DrawImage的时刻没有指定一个高度和宽度,GDI+也会根据屏幕分辨率来谋略图像分辨率。

若何测试高分辨率下的利用法度榜样是否有问题?

改变下面系统对付分辨率的设置:

在windows上点击右键

点击“属性”

打开“设置”Tab标签然后点击“高档”

在“老例”标签, 在字体尺寸框中改变的系统 DPI

重启系统

在检测利用法度榜样外不雅的时刻要分外留意以下检测要点:

文本和给予的空间(控件或容器)不匹配

文本和控件重叠或不恰当的距离

文本和图片太小(弗成用或弗成视)

图像尺寸是恰当的,然则由于缩放导致质量异常低

线条太细不轻易看到(由于在200dpi下,一个一个像素的线条险些弗成见)

最好在一些不合的DPI下测试的利用法度榜样,由于一些显示器厂商在正确度方面会有些许的不合,在96、120、135、170、200下都进行一些测试。

Steven.Liu老师是ChinaHCI.Org以及Steven.Liu Usability Research and GUI Design Team的开创人,美国ACM SIGCHI以及UPA(易用性专家协会)成员,具有富厚的行业背景和嵌入式系统易用性设计履历,曾经办事于海内最大年夜的城市信息化公司CAPINFO并担负多个紧张项目的项目经理职务,在Windows-based、KIOSK UI、Web-based等方面有富厚的设计阐发履历和看法,成功案例如“数字北京信息亭”KIOSK的用户计谋阐发和易用性工程的实施事情、点击科技公司GK R10系列协同产品用户体验的总体设计、UI Standard制订和监督履行等。

您可能还会对下面的文章感兴趣: