Solution of interface layout at high resolution

Resolution |

Solution of text font, image and interface layout in high resolution

Why ensure that our software products or applications in the text, images and fonts, layout, and so on, because our user's terminal display devices are usually different models and settings, such as the recent appearance of 16x9, less than 8 "of the latest models of mobile laptops, Our applications and software products often become unrecognizable at such terminals, which clearly poses serious problems for users, directly causing problems such as operational ease of use usability, functional proximity accessibility, text readability readability, And such a problem is not insurmountable, to solve how to let our application in the high-resolution display is still normal visibility, focus on the need to solve four aspects of the problem text and fonts, images (graphics, icons and mouse pointers), layout settings and redrawing.

Objective

Can all applications work at a high resolution display? The answer is, of course, negative. Now the more standard computer monitors are already able to support the display of approximately 96 pixel/inch resolution, and more and more applications can run at this resolution, but still face the increased resolution of the risk. Now, we can easily buy a 133-dpi display resolution of the laptop, and even 170DPI, perhaps a few years later, 200-DPI's display resolution has been everywhere, the famous industrial magazine DisplaySearch predicted at the end of 2002 there are 40% Laptops have exceeded 100-dpi's screen resolution, and this number is still growing.

Example Figure 1. Font appearance under various common resolutions

Now that most applications rely on resolution to show that they are normal, some of our applications will become ugly without high resolution support and lead to reduced user usability, while more and more users are using large fonts. Unfortunately, when the resolution is disproportionate to the 130-dpi and 200-dpi, the same application under 96-dpi becomes unusable at this resolution, and sometimes the fonts or controls of those applications become smaller. But more often, some of the interface elements are the right size (for example, the application uses the default font, then it will be larger on that basis) and the other part is incorrect, as shown in the following illustration:

Example Figure 2. Change the impact of resolution

This shows that it is necessary to enhance and improve the display support of our applications at high resolution, so the important criterion should be: The picture looks better and the text should look clearer. Text, for example, is clearly as clear as a laser printer on a 200-dpi resolution display (because the computer displays more color pixels and grayscale scaling support, 200- The DPI display is the same quality as a 600-dpi printer, so the PDA and smartphone vendors value the display of high resolution in relation to the paper medium.

Developing an application that adapts to multiple resolutions is not easy, especially for an already formed application and system, but the advantage is that it eliminates the need to assume a variety of resolution scenarios and avoid the quality degradation that cannot be scaled (such as bitmaps and bitmap fonts). and developing applications that support high resolution can sometimes feel tedious and tedious, but if our products or applications are designed to serve a specific group of people (such as poor eyesight, and those who need to work long hours and see a weak population), Then our work becomes very necessary (with high contrast and high resolution associated with extended fonts).

System Rhythm

The Windows platform itself provides a solution to solve the high resolution problem of the user system by using a small function getdevicecaps () to get the current display resolution and then through GetSystemMetrics () This system prosody function and the SystemParametersInfo () function that reads system information and parameters can change the graphics in Windows and the dimensions of control elements, and fonts, from a 3d border effect to the size of a small icon.

The principle is to first use the Getdevicedaps () function to obtain the current-resolved x, and y-axis values as the benchmark, and then determine how much to scale.

Key issues

In designing high-resolution applications, we pay special attention to four important aspects: text and fonts, images (graphics, icons, and mouse pointers), layout settings, and redrawing.

Text and Fonts

There are two fonts: Bitmap (Raster) fonts and TrueType fonts, and we can only use TrueType fonts for high resolution applications because bitmap (raster) fonts are only normal at the 96-DPI screen resolution and cannot be scaled. Windows has been supporting TrueType fonts for a long time, so finding a good TrueType font and defining it in our application is not a big problem, another reason to use only TrueType fonts, because some of the latest technology, such as GDI +, However, it only supports the operation of TrueType fonts.

The default font is available through the Windows handle (HWNDs) and the Graphics device (Hdcs) obtains a bitmap (raster) font, so sometimes when changing the font, whether the default font is not HWNDs or HDC, as long as it is a TrueType font, We can change it:

Hfont font = (hfont) getstockobject (Default_gui_font);
SendMessage (hwnd, Wm_setfont, (WPARAM) font, 0);
SelectObject (hdc, font);
When we create a font on a window, you can specify the font size in pixels, and then adjust the resolution.

LogFont LF;
memset (&LF, 0, sizeof (LF));
Lf.lfheight = SCALEY (13);
Hfont font = CreateFontIndirect (&LF);

Alternatively, you can use the text-only dialog box provided by the Windows API to allow more accurate pixel points to specify the font size, and then, after some algorithms, convert the font size to pixels, and you can specify that only TrueType fonts are used for display.

Choosefont data;
memset (&data, 0, sizeof (data));
data.lstructsize = sizeof (data);
Data.hwndowner = form;
Data. Flags = Cf_ttonly | cf_screenfonts;
Choosefont (&data);

The best approach is to specify a size and an area size at various high resolutions and use the font size as a metric to specify the other elements of the page, for example, to set the spacing between buttons to the height of the default font, using GetTextMetrics () This function can reset the height of a font.

Textmetric metrics;
GetTextMetrics (hdc, &metrics);
Int height = metrics.tmheight;

It is best not to use the Tmavecharwidth method provided by Textmetric because it can only handle English letters, but we can also use this method of GetTextExtent () to confirm the size of the strings we care about. We can use GetTextExtentPoint32 () to draw a rectangle around the string, as shown in the following example:

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));

Finally, we realize that although TrueType fonts are scaled fine, they are not linear scaling, which means that the length of the string cannot be increased by 10% correctly after the dpi increase of 10%, since some specific letters can only look good on a few dimensions, While TrueType can automatically choose an approximate size to display correctly, this is the reason to use the GetTextExtent function.

Image

Images are raster based files (such as BMP, JPEG, and GIF), such as icons and mouse pointers. Images are more difficult to handle than fonts, because the image is made up of discrete pixels, and if the current display resolution is inconsistent with the resolution of the image design, then the image needs to be scaled according to the correct physical size, and we can scale a bitmap by Strectchblt () function instead of the BitBlt ( , when the image is load, it can easily help the application zoom image, and more accurate.

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);

Of course, scaling will certainly decay the quality of the image, especially when zoomed from a small resolution to a large resolution, and there are some problems with narrowing, which by default is the Coloroncolor of the stretch mode, which is fast, but loses some detail, halftone the speed of the stretching operation is slow, But the quality will be higher, (GDI + provides an extended option).

Setstretchbltmode (hdc, halftone);
It is important to note that ICO and. cur files are files that can store multiple pictures in a single file, so we need to design different pictures at multiple resolutions, and we recommend using GetSystemMetrics () to solve them, so if you have to zoom, The system will choose the right picture for us. But BMP or many other kinds of files are appropriate to not support storing multiple files in a separate file, but we can determine which file to choose when we load.

If (GetDeviceCaps (hdc, LOGPIXELSX) < 130) Bitmap = LoadBitmap (hinstance, (char*) idb_bitmap1);
Else Bitmap = LoadBitmap (hinstance, (char*) IDB_BITMAP2);

For the special icon and mouse pointer, we are currently using the standard 16x16 pixel and 32x32 pixel size, the highest resolution of the application can support the maximum 64x64 pixel, of course, this is without changing the registry premise. Ideally, there are large icons and small icons in each of the major resolutions.

If you use Comctl2.0 to provide a sequence of pictures (himagelist), you need to scale them to the appropriate size before placing them in the sequence, a better option is to use the latest comctl6.0, but this is only supported under Windows XP, The latest control support automatically scales them at different resolutions (Halfton STRECHBLT).

Interface layout

A layout is another link that causes problems at a high resolution, and many dialog boxes use the dialog unit (DLU) as the specification to set the unit, because it can automatically scale changes as the system is resolution, but some custom interfaces often need to be manually converted and set, Because there are a lot of interfaces or dialogs that work theoretically in pixels, we can rearrange the settings of the interface and dialog boxes, such as the full use of the dialog unit, although we can also invoke the method provided by SetWindowPos (), or we can discard the assumption about DPI and continue to work with system Metrics to automatically handle the associations between these fonts and controls.

Re-painting

Redrawing is also the same, sometimes we need to draw the screen or control, need to calculate a different resolution. If we develop a custom control, then it may work in a pixel environment, but we need to use system metrics to avoid resolution problems, if we are drawing a complex graph can use Setmapmode to use the graphics scaling engine.

Gdi+

GDI + is the next generation of Microsoft 2D Graphics solutions, is for GDI's enhancements and continuations, GDI + offers high resolution solutions, such as linear text scaling, and smooth graphics, scaling features are well improved, and GDI + provides many algorithms for scaling images in terms of speed and quality. But compared to GDISTRETCHBLT, for small image interpolationmodebilinear faster quality is also good, for there will be some quality problems, so the use of GDI + provided Interpolationmodehighquanlitybicubic is a good choice.

Picture and graphic realism enhanced Office XP with an improved graphics system (GDI +), using the graphics system, graphics and WordArt will have smoother outlines and adjustable levels of transparency that are reconciled with real colors. When you resize a picture, the picture is displayed more clearly.

GDI + also provides a function around resolution, such as Image::getphysicaldimension and bitmap::setresolution, that can be used to properly scale pictures, or you can let GDI + do these things, If you do not specify a height and width when calling Graphics::D rawimage, GDI + also calculates the image resolution based on the screen resolution.

How do I test high resolution applications for problems?
Change the following system for resolution settings:

Right-click on Windows
Click "Properties"
Open the Settings Tab tab and click Advanced
In the General tab, the system DPI that is changed in the Font Size box
Reboot system
Pay special attention to the following inspection points when you are testing the appearance of your application:

Text does not match the given space (control or container)
Text and controls overlap or improper spacing
Text and pictures are too small (unavailable or invisible)
Image size is appropriate, but the quality is very low because of scaling
The lines are too thin to see (because a line of one pixel is almost invisible at 200dpi)
It is best to test applications at different DPI because some display vendors are slightly different in accuracy, with some testing under 96, 120, 135, 170, and 200.

Mr. Steven.liu is the founder of chinahci.org and Steven.liu usability and GUI design team, a member of the United States ACM SIGCHI and UPA (Association of Usability experts), With a wealth of industry background and embedded system usability design experience, once served in the largest urban information company Capinfo and as a number of important project manager positions, in windows-based, KIOSK UI, Web-based has a wealth of design and analysis experience and insights, successful cases such as "digital Beijing kiosks" Kiosk user strategy analysis and ease of implementation of the project, click the technology company GK R10 series of collaborative product user experience of the overall design, UI standard formulation and supervision and implementation.