GUI design guidelines/ru: what changed
Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.
| Old | New | Line | |
|---|---|---|---|
| 1 | 1 | Эти принципы применяются **для IDE Lazarus**, но также могут быть использованы и для других проектов. | |
| 2 | 2 | ||
| 3 | 3 | ## Общее | |
| 4 | 4 | ||
| 5 | 5 | Все диалоги и окна не должны использовать фиксированные размеры. Имейте в виду, что размеры шрифтов и переведённых надписей могут меняться. Используйте сплиттеры и панели. Все формы и диалоги должны работать на экране с разрешением 800x600 или выше. | |
| 6 | 6 | ||
| 7 | 7 | ## Диалоги (модальные формы) | |
| 8 | 8 | ||
| 9 | 9 | Диалоги - это специальные формы, в которых пользователю нужно сделать/изменить некоторые установки, прежде чем Lazarus сможет продолжить работу. | |
| 10 | 10 | ||
| 11 | 11 | - Закрывайте по клавише Escape (если клавиша не используется другим образом) | |
| 12 | 12 | - Назначайте кнопку по умолчанию, которая будет активироваться по нажатию Enter (если клавиша не используется другим образом) | |
| 13 | 13 | - Если диалог имеет прокручиваемое содержимое (например, содержит TMemo, TListBox, TTreeView), то он должен быть изменяемого размера и размер должен сохраняться. | |
| 14 | 14 | ||
| 15 | 15 | ### Настройки диалога | |
| 16 | 16 | ||
| 17 | 17 | Установки, которые обычно применяются: | |
| 18 | 18 | ||
| 19 | 19 | - **BorderStyle** : | |
| 20 | 20 | - `bsSizeable` - если диалог является сложным и изменение размера действительно необходимо. | |
| 21 | 21 | - `bsDialog` - если диалог является простым и изменение размера не требуется (Примечание: все диалоги внутренне должны оставаться с изменяемыми размерами в связи с проблемами локализации). | |
| 22 | 22 | - **Position** : `poScreenCenter`. | |
| 23 | 23 | - **FormStyle** : Не используйте `fsStayOnTop`, т.к. это может быть очень раздражающим под некоторыми оконными менеджерами. | |
| 24 | 24 | - **BorderIcons**: | |
| 25 | 25 | - `[biSystemMenu]` - для модально отображаемых диалогов | |
| 26 | 26 | - `[biSystemMenu,biMinimize,biMaximize]` - для немодально отображаемых диалогов | |
| 27 | 27 | ||
| 28 | 28 | ### Общее расположение | |
| 29 | 29 | ||
| 30 | 30 | - Внизу формы должна быть помещена Панель кнопок. | |
| 31 | 31 | - Закрывайте по клавише Escape (если клавиша не используется другим образом). | |
| 32 | 32 | - Назначайте кнопку по умолчанию, которая будет активироваться по нажатию Enter (если клавиша не используется другим образом). | |
| 33 | 33 | - Избегайте использования длинных надписей на кнопках. Используйте свойство `Hint` для более детального объяснения действия кнопки. | |
| 34 | 34 | - Размеры диалогов с изменямыми размерами должны сохраняться и восстанавливаться при следующем открытии диалога. | |
| 35 | 35 | - Все всплывающие подсказки и надписи, используемые на форме, должны быть ресурсными строками (resourcestring), чтобы была возможна локализация. | |
| 36 | 36 | ||
| 37 | 37 | #### Интервалы и размеры | |
| 38 | 38 | ||
| 39 | 39 | - Диалоги должны быть разработаны так, чтобы работать независимо от разрешения и высоты шрифта. | |
| 40 | 40 | - Интервалы между элементами: 6 пикселей. | |
| 41 | 41 | - Не устанавливайте максимальных ограничений. | |
| 42 | 42 | - Не устанавливайте минимальную высоту обычных кнопок. | |
| 43 | 43 | - Для кнопок вы можете установить минимальную ширину 90. | |
| 44 | 44 | - Свойство `AutoSize` следует установить для кнопок, меток и т.д. для правильного отображения локализованного текста, если он окажется длиннее, чем ожидалось. | |
| 45 | 45 | - Все кнопки в группе (включая кнопки, содержащие пиктограммы) должны иметь одинаковую ширину и высоту. Используйте TPanel и устанавливайте свойства `Align` и `BorderSpacing`. | |
| 46 | 46 | ||
| 47 | 47 | #### Панель кнопок | |
| 48 | 48 | ||
| 49 | 49 | Панель кнопок должна содержать по крайней мере следующие элементы: | |
| 50 | 50 | ||
| 51 | 51 | - Кнопка OK. | |
| 52 | 52 | - Кнопка Cancel. | |
| 53 | 53 | - Кнопка Next (опционально). | |
| 54 | 54 | - Кнопка Previous (опционально). | |
| 55 | 55 | - Кнопка Help. | |
| 56 | 56 | ||
| 57 | 57 | ### Использование якорей | |
| 58 | 58 | ||
| 59 | 59 | Чтобы быть уверенным, что диалог после изменения размера будет правильно отображать компоненты, используются якоря. Все компоненты имеют свойство Anchors. С помощью этого свойства вы можете определить способ, с помощью которого компонент будет привязан к своему родителю. | |
| 60 | 60 | ||
| 61 | 61 | Подсказка: Используйте редактор якорей IDE. | |
| 62 | 62 | ||
| 63 | 63 | ### Использование выравнивания | |
| 64 | 64 | ||
| 65 | 65 | Другой способ организации компонентов - использование выравнивания. Каждый компонент имеет свойство Align. Несколько компонентов могут быть правильно расположены путём выбора правильного выравнивания. | |
| 66 | 66 | ||
| 67 | 67 | #### Граничные отступы | |
| 68 | 68 | ||
| 69 | 69 | В комбинации со свойством Align особенно полезно свойство BorderSpacing (также найдёте в окне диалога Anchors). Обычно используется отступ от края вокруг компонента в 6 пикселей.\ | |
| 70 | - | ||
| 71 | 70 | ||
| 72 | 71 | --- | |
| 73 | 72 | *From the Free Pascal wiki, page "GUI design guidelines/ru", as it stood on 2016-01-26 after a change by FTurtle, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).* |