GUI design guidelines/ru: what changed
Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.
Title: GUI design guidelines/ru
| Old | New | Line | |
|---|---|---|---|
| 1 | + | Эти принципы применяются **для IDE Lazarus**, но также могут быть использованы и для других проектов. | |
| 2 | + | ||
| 3 | + | ## Общее | |
| 4 | + | ||
| 5 | + | Все диалоги и окна не должны использовать фиксированные размеры. Имейте в виду, что размеры шрифтов и переведённых надписей могут меняться. Используйте сплиттеры и панели. Все формы и диалоги должны работать на экране с разрешением 800x600 или выше. | |
| 6 | + | ||
| 7 | + | ## Диалоги (модальные формы) | |
| 8 | + | ||
| 9 | + | Диалоги - это специальные формы, в которых пользователю нужно сделать/изменить некоторые установки, прежде чем Lazarus сможет продолжить работу. | |
| 10 | + | ||
| 11 | + | - Закрывайте по клавише Escape (если клавиша не используется другим образом) | |
| 12 | + | - Назначайте кнопку по умолчанию, которая будет активироваться по нажатию Enter (если клавиша не используется другим образом) | |
| 13 | + | - Если диалог имеет прокручиваемое содержимое (например, содержит TMemo, TListBox, TTreeView), то он должен быть изменяемого размера и размер должен сохраняться. | |
| 14 | + | ||
| 15 | + | ### Настройки диалога | |
| 16 | + | ||
| 17 | + | Установки, которые обычно применяются: | |
| 18 | + | ||
| 19 | + | - **BorderStyle** : | |
| 20 | + | - `bsSizeable` - если диалог является сложным и изменение размера действительно необходимо. | |
| 21 | + | - `bsDialog` - если диалог является простым и изменение размера не требуется (Примечание: все диалоги внутренне должны оставаться с изменяемыми размерами в связи с проблемами локализации). | |
| 22 | + | - **Position** : `poScreenCenter`. | |
| 23 | + | - **FormStyle** : Не используйте `fsStayOnTop`, т.к. это может быть очень раздражающим под некоторыми оконными менеджерами. | |
| 24 | + | - **BorderIcons**: | |
| 25 | + | - `[biSystemMenu]` - для модально отображаемых диалогов | |
| 26 | + | - `[biSystemMenu,biMinimize,biMaximize]` - для немодально отображаемых диалогов | |
| 27 | + | ||
| 28 | + | ### Общее расположение | |
| 29 | + | ||
| 30 | + | - Внизу формы должна быть помещена Панель кнопок. | |
| 31 | + | - Закрывайте по клавише Escape (если клавиша не используется другим образом). | |
| 32 | + | - Назначайте кнопку по умолчанию, которая будет активироваться по нажатию Enter (если клавиша не используется другим образом). | |
| 33 | + | - Избегайте использования длинных надписей на кнопках. Используйте свойство `Hint` для более детального объяснения действия кнопки. | |
| 34 | + | - Размеры диалогов с изменямыми размерами должны сохраняться и восстанавливаться при следующем открытии диалога. | |
| 35 | + | - Все всплывающие подсказки и надписи, используемые на форме, должны быть ресурсными строками (resourcestring), чтобы была возможна локализация. | |
| 36 | + | ||
| 37 | + | #### Интервалы и размеры | |
| 38 | + | ||
| 39 | + | - Диалоги должны быть разработаны так, чтобы работать независимо от разрешения и высоты шрифта. | |
| 40 | + | - Интервалы между элементами: 6 пикселей. | |
| 41 | + | - Не устанавливайте максимальных ограничений. | |
| 42 | + | - Не устанавливайте минимальную высоту обычных кнопок. | |
| 43 | + | - Для кнопок вы можете установить минимальную ширину 90. | |
| 44 | + | - Свойство `AutoSize` следует установить для кнопок, меток и т.д. для правильного отображения локализованного текста, если он окажется длиннее, чем ожидалось. | |
| 45 | + | - Все кнопки в группе (включая кнопки, содержащие пиктограммы) должны иметь одинаковую ширину и высоту. Используйте TPanel и устанавливайте свойства `Align` и `BorderSpacing`. | |
| 46 | + | ||
| 47 | + | #### Панель кнопок | |
| 48 | + | ||
| 49 | + | Панель кнопок должна содержать по крайней мере следующие элементы: | |
| 50 | + | ||
| 51 | + | - Кнопка OK. | |
| 52 | + | - Кнопка Cancel. | |
| 53 | + | - Кнопка Next (опционально). | |
| 54 | + | - Кнопка Previous (опционально). | |
| 55 | + | - Кнопка Help. | |
| 56 | + | ||
| 57 | + | ### Использование якорей | |
| 58 | + | ||
| 59 | + | Чтобы быть уверенным, что диалог после изменения размера будет правильно отображать компоненты, используются якоря. Все компоненты имеют свойство Anchors. С помощью этого свойства вы можете определить способ, с помощью которого компонент будет привязан к своему родителю. | |
| 60 | + | ||
| 61 | + | Подсказка: Используйте редактор якорей IDE. | |
| 62 | + | ||
| 63 | + | ### Использование выравнивания | |
| 64 | + | ||
| 65 | + | Другой способ организации компонентов - использование выравнивания. Каждый компонент имеет свойство Align. Несколько компонентов могут быть правильно расположены путём выбора правильного выравнивания. | |
| 66 | + | ||
| 67 | + | #### Граничные отступы | |
| 68 | + | ||
| 69 | + | В комбинации со свойством Align особенно полезно свойство BorderSpacing (также найдёте в окне диалога Anchors). Обычно используется отступ от края вокруг компонента в 6 пикселей.\ | |
| 70 | + | \ | |
| 71 | + | ||
| 72 | + | --- | |
| 73 | + | *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).* |