Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
UXGuide.pdf
Скачиваний:
20
Добавлен:
12.02.2015
Размер:
48.62 Mб
Скачать

Layout Metrics

Layout

Device independent layout

A layout is device independent when it appears as intended, regardless of the font typeface or size, dpi (dots per inch), display, or graphic adaptor. To understand the problem, let's first consider what would happen if a dialog box layout is based on physical pixels. The following dialog box layout looks as the designer intended when using 9 pt. Segoe UI at 96 dpi.

A dialog box with a physical pixel-based layout using 9 pt. Segoe UI at 96 dpi.

However, without scaling this dialog box would become small and the text difficult to read when displayed at 120 dpi:

The same dialog box with a physical pixel-based layout using 9 pt. Segoe UI at 120 dpi.

And it becomes completely unreadable without scaling when printed on a 600 dpi printer.

The same dialog box with a physical pixel-based layout using 9 pt. Segoe UI at 600 dpi.

And finally, the text no longer fits within the controls when displayed in Meiryo:

© 2010, Microsoft Corporation. All rights reserved.

Page 615 of 882

The same dialog box with a pixel-based layout using 9 pt. Meiryo.

From these examples, we can see that device independent layout requires legible text regardless of the other display parameters, so the dialog box layout and sizing needs to stay proportional to its text. Microsoft® Windows® traditionally achieves these goals by using dialog units.

Dialog units

A dialog unit (DLU) is a device-independent metric where one horizontal dialog unit equals one-fourth of the average character width for the current font and one vertical dialog unit equals one-eighth of the character height for the current font. Because characters are roughly twice as high as they are wide, a horizontal DLU is roughly the same size as a vertical DLU, but it's important to realize that DLUs are not a square unit.

A dialog unit is one-fourth of the average character width and one-eighth of the character height for the current font.

DLUs are used for sizing and placement in Win32 resource files. Each dialog box template in a resource file defines its font, so that font is used to determine DLUs. Consequently, using multiple fonts in a single program isn't a problem.

Relative pixels

As previously demonstrated, physical pixels aren't a device-independent metric, but they benefit from being easy to understand and use. For device independence, newer UI technologies use relative pixels.

A relative pixel is a device-independent metric that is the same as a physical pixel at 96 dpi, but proportionately scaled in other dpis. So, for example, a relative pixel in 120 dpi is equal to 1.25 physical pixels. Of course, relative pixels are a square unit.

Relative pixels are used for sizing and layout of dialog boxes in Windows Presentation Foundation (WPF) and WinForms.

Effective resolution

While historically most Windows-based computers have used 96 dpi by default, today many laptops are using 120 dpi or higher by default. Using a higher dpi causes Windows to use higher fidelity UI elements, such as larger

© 2010, Microsoft Corporation. All rights reserved.

Page 616 of 882

fonts, icons, and graphics, which take more physical pixels to draw. The result is to lower the effective resolution of a display because more pixels are required to render the UI.

To account for different dpis, screen resolutions are expressed in terms of effective resolution, which is the resolution at 96 dpi and is scaled for other dpis. The table below shows the physical resolutions for common dpi settings for the minimum Windows effective resolution of 800x600 pixels and the recommended Windows effective resolution of 1024x768 pixels.

dpi

Minimum physical resolution (in

Recommended minimum physical resolution (in

 

pixels)

pixels)

96 dpi (100%)

800x600

1024x768

120 dpi (125%)

1024x768

1280x960

144 dpi (150%)

1200x900

1600x1200

192 dpi (200%)

1600x1200

2500x1600

Consequently, stating that the minimum Windows effective resolution is 800x600 pixels means that minimum physical resolution required to support Windows at 120 dpi is 1024x768 pixels. Generally, the effective resolution can be calculated using the following equation:

Effective resolution = Physical resolution x (96 / current dpi setting)

Use effective resolution to refer to screen sizes, but relative pixels to refer to layout sizing and spacing. For example, you could say that the largest window size that will fit in the screen at the minimum Windows effective resolution is 800x600 relative pixels—which is true regardless of the dpi.

Use effective resolution to refer to screen sizes, relative pixels to refer to windows and controls.

Developers: For more information, check Writing High-DPI Win32 Applications.

Converting from DLUs to relative pixels and back

You may need to convert layouts and sizes from DLUs to relative pixels and vice versa. However, because DLUs aren't a square unit, the conversion depends upon the axis. Furthermore, because DLUs are based on the font used, the conversion is also font dependent.

© 2010, Microsoft Corporation. All rights reserved.

Page 617 of 882

Conversion for 9 pt. Segoe UI

 

 

 

Conversion for 8 pt. Tahoma

 

 

 

1 horizontal DLU = 1.75 relative pixels

 

 

 

1 horizontal DLU = 1.50 relative pixels

 

 

 

1 vertical DLU = 1.875 relative pixels

 

 

 

1 vertical DLU = 1.625 relative pixels

 

 

 

Dialog units

Pixels horizontal

Pixels vertical

Dialog units

Pixels horizontal

Pixels vertical

1

2

(1.75)

2

(1.875)

1

1 (1.5)

2

(1.625)

2

4

(3.5)

4

(3.75)

2

3

3

(3.25)

3

5

(5.25)

6

(5.625)

3

4 (4.5)

5

(4.875)

4

7

 

 

7

(7.5)

4

6

6

(6.5)

5

9

(8.75)

9

(9.375)

5

7 (7.5)

8

(8.125)

6

10

(10.5)

11

(11.25)

6

9

10

(9.75)

7

12

(12.25)

13

(13.125)

7

10 (10.5)

11

(11.375)

8

14

 

15

 

8

12

13

 

9

16

(15.75)

17

(16.875)

9

13 (13.5)

15

(14.625)

10

17

(17.5)

19

(18.75)

10

15

16

(16.25)

11

19

(19.25)

21

(20.625)

11

16 (16.5)

18

(17.875)

12

21

 

22

(22.5)

12

18

19

(19.5)

13

23

(22.75)

24

(24.375)

13

19 (19.5)

21

(21.125)

14

24

(24.5)

26

(26.25)

14

21

23

(22.75)

15

26

(26.25)

28

(28.125)

15

22 (22.5)

24

(24.375)

16

28

 

30

 

16

24

26

 

17

30

(29.75)

32

(31.875)

17

25 (25.5)

28

(27.625)

18

31

(31.5)

34

(33.75)

18

27

29

(29.25)

19

33

(33.25)

36

(35.625)

19

28 (28.5)

30

(30.875)

20

35

 

37

(37.5)

20

30

32

(32.5)

The numbers in parentheses are the exact conversions. Note that unlike other contexts, .5 is rounded down to 0 instead of up to 1.

Measuring controls and text

If you are measuring control sizing and spacing using a graphics program, you might become confused because the numbers might not be what you expect. For example, the standard command button size is 75 x 23 pixels, but when measured it is only 73 x 21 pixels. The discrepancy is that some controls have a one pixel invisible border, which allows the controls to be placed right next to each when laid out using DLUs. Be sure to remember invisible borders when measuring control sizing and spacing.

© 2010, Microsoft Corporation. All rights reserved.

Page 618 of 882

Some controls have an invisible border.

There is a similar problem when measuring text sizing and spacing with a graphics program. The height of a text control includes the height of the text including its ascenders, descenders, and diacritical marks, plus its spacing (called leading). Thus, the visible sizing and spacing of text may differ from its actual sizing and spacing.

Font ascenders, descenders, diacritical marks, and leading.

Warning: Text sizes are larger than they appear.

© 2010, Microsoft Corporation. All rights reserved.

Page 619 of 882

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]