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

為什么要保證我們的軟件產品或應用程序中的文本、圖像和字體、布局等問題呢，因為我們用戶的終端顯示設備通常型號和設置各異，如最近出現的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這個函數的原因。

?

#p#副標題#e#

?

圖像

圖像是以光柵為基礎的文件，（比如說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) < 130) Bitmap = LoadBitmap (hInstance, (char*) IDB_BITMAP1);

Else Bitmap = LoadBitmap (hInstance, (char*) IDB_BITMAP2);

對于特殊的ICON和鼠標指針，目前我們采用的是標準的16×16 pixel 和 32×32 pixel大小，高分辨率的應用程序最大可以支持到64×64 pixel，當然這是在不改動注冊表的前提下。理想的情況是在每個主要的分辨率下都有相應的大圖標和小圖標。

如果使用Comctl2.0提供的圖片序列(HIMAGELIST)，需要在放置到序列里面之前把它們縮放到合適大小，一個更好的選擇是使用最新的comctl6.0，但是這只在Windows XP下支持，最新的控件支持會自動縮放它們在不同的分辨率下（halfton StrechBlt）。

界面布局

版面是另一個會導致在高分辨率下出現問題的環節，很多對話框都使用對話單位(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的創始人，美國ACMSIGCHI以及UPA（易用性專家協會）成員，具有豐富的行業背景和嵌入式系統易用性設計經驗，曾經服務于國內最大的城市信息化公司CAPINFO并擔任多個重要項目的項目經理職務，在Windows-based、KIOSK UI、Web-based等方面有豐富的設計分析經驗和見解，成功案例如“數字北京信息亭”KIOSK的用戶戰略分析和易用性工程的實施工作、點擊科技公司GK R10系列協同產品用戶體驗的總體設計、UI Standard制訂和監督執行等。