高解析度下介面布局的解決方案

來源:互聯網
上載者:User
解析度|解決

高解析度下文字字型、映像、介面布局的解決方案

為什麼要保證我們的軟體產品或應用程式中的文本、映像和字型、布局等問題呢,因為我們使用者的終端顯示裝置通常型號和設定各異,如最近出現的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) < 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的創始人,美國ACM SIGCHI以及UPA(易用性專家協會)成員,具有豐富的行業背景和嵌入式系統易用性設計經驗,曾經服務於國內最大的城市資訊化公司CAPINFO並擔任多個重要項目的專案經理職務,在Windows-based、KIOSK UI、Web-based等方面有豐富的設計分析經驗和見解,成功案例如“數字北京資訊亭”KIOSK的使用者戰略分析和易用性工程的實施工作、點擊科技公司GK R10系列協同產品使用者體驗的總體設計、UI Standard制訂和監督執行等。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。