1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" xml:lang="ru">
<info>
<credit type="author">
<name>Алан Дэй (Allan Day)</name>
<email>aday@gnome.org</email>
</credit>
<credit>
<name>Калум Бенсон (Calum Benson)</name>
</credit>
<credit>
<name>Адам Элман (Adam Elman)</name>
</credit>
<credit>
<name>Сэт Никел (Seth Nickell)</name>
</credit>
<credit>
<name>Колин Робертсон (Colin Robertson)</name>
</credit>
<include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
<desc>Расположение элементов в интерфейсе пользователя.</desc>
</info>
<title>Визуальное расположение</title>
<p>The visual layout of controls, information and content affects how easy it is to understand your application. As part of this, it is important to recognise that visual design has a strong impact on how much work is involved in using an application — poor layout results in users having to put in additional effort, while good layout requires less effort.</p>
<p>Good visual layout also obviously makes applications more attractive and visually pleasing.</p>
<p>Следование следующим рекомендациям поможет вам создавать привлекательные, эффективные и простые в использовании приложения.</p>
<section id="general-guidelines">
<title>Общие рекомендации</title>
<list>
<item><p>An alignment point is an imaginary vertical or horizontal line through your window that touches the edge of one or more labels or controls in the window. Minimize the number of these — the fewer there are, the cleaner and simpler your layout will appear, and the easier it will be for people to understand.</p></item>
<item><p>Тщательно выравнивайте содержимое и управляющие элементы. Невыровненные объекты бросаются в глаза: их не только сложнее воспринимать визуально, но они ещё и раздражают пользователей.</p></item>
<item><p>Будьте последовательны в отступах, выдерживайте одинаковые промежутки.</p></item>
<item><p>Объединяйте связанные элементы и информацию, используйте отступы между такими группами. Это упростит понимание интерфейса.</p>
<list>
<item><p>используйте отступ кратный 6 пикселам, чем меньше связь между элементами, тем больше между ними должен быть отступ;</p></item>
<item><p>между текстовыми метками и связанными компонентами используйте отступ в 12 пикселов;</p></item>
<item><p>между группами компонентов используйте вертикальный отступ в 18 пикселов;</p></item>
<item><p>между содержимым диалогового окна и границами окна рекомендуется использовать общий отступ в 18 пикселов.</p></item>
</list></item>
<item><p>Чтобы подчеркнуть связь между сгруппированными элементами, используйте отступ в 12 символов.</p></item>
<item><p>Avoid using frames with visible borders to separate groups of controls — use spacing and headers instead.</p></item>
</list>
<p>Пример неправильного использования отступов и выравнивания:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>
<p>Пример правильного использования отступов и выравнивания:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>
<p>Пример правильного использования отступов и выравнивания (в пикселах):</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>
</section>
<section id="label-alignment">
<title>Выравнивание текстовых меток</title>
<p>Если возможно, используйте выравнивание текста в метках по правой стороне (см. рисунок). Это уберёт зазоры между метками и связанными с ними элементами. Этот тип выравнивания, однако, нельзя применять, если управляющие элементы имеют собственные отступы, в этом случае используйте выравнивание по левой стороне.</p>
<media type="image" mime="image/svg" src="figures/label-alignment.svg"/>
</section>
<section id="hierarchy">
<title>Визуальная иерархия</title>
<p>Выстраивайте элементы сверху вниз и слева направо. Это естественное направление, в котором люди считывают информацию (это относится к культурам, в которых чтение и запись информации осуществляется справа налево). Чем раньше должен быть считан элемент, тем выше и левее он должен располагаться. Используя данный подход при построении интерфейса, элементы окажутся включены в визуальную иерархию: более важные управляющие элементы управления будут расположены выше и левее подчинённых им элементов. Ключевым шаблоном в решении данной задачи являются панели заголовков.</p>
</section>
</page>
|
