GUI design guidelines/ru

From Free Pascal wiki
Jump to navigationJump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Deutsch (de) English (en) français (fr) 日本語 (ja) русский (ru)

Эти принципы применяются для IDE Lazarus, но также могут быть использованы и для других проектов.

Общее

Все диалоги и окна не должны использовать фиксированные размеры. Имейте в виду, что размеры шрифтов и переведённых надписей могут меняться. Используйте сплиттеры и панели. Все формы и диалоги должны работать на экране с разрешением 800x600 или выше.

Диалоги (модальные формы)

Диалоги - это специальные формы, в которых пользователю нужно сделать/изменить некоторые установки, прежде чем Lazarus сможет продолжить работу.

  • Закрывайте по клавише Escape (если клавиша не используется другим образом)
  • Назначайте кнопку по умолчанию, которая будет активироваться по нажатию Enter (если клавиша не используется другим образом)
  • Если диалог имеет прокручиваемое содержимое (например, содержит TMemo, TListBox, TTreeView), то он должен быть изменяемого размера и размер должен сохраняться.

Настройки диалога

Установки, которые обычно применяются:

  • BorderStyle :
    • bsSizeable - если диалог является сложным и изменение размера действительно необходимо.
    • bsDialog - если диалог является простым и изменение размера не требуется (Примечание: все диалоги внутренне должны оставаться с изменяемыми размерами в связи с проблемами локализации).
  • Position : poScreenCenter.
  • FormStyle : Не используйте fsStayOnTop, т.к. это может быть очень раздражающим под некоторыми оконными менеджерами.
  • BorderIcons:
    • [biSystemMenu] - для модально отображаемых диалогов
    • [biSystemMenu,biMinimize,biMaximize] - для немодально отображаемых диалогов

Общее расположение

  • Внизу формы должна быть помещена Панель кнопок.
  • Закрывайте по клавише Escape (если клавиша не используется другим образом).
  • Назначайте кнопку по умолчанию, которая будет активироваться по нажатию Enter (если клавиша не используется другим образом).
  • Избегайте использования длинных надписей на кнопках. Используйте свойство Hint для более детального объяснения действия кнопки.
  • Размеры диалогов с изменямыми размерами должны сохраняться и восстанавливаться при следующем открытии диалога.
  • Все всплывающие подсказки и надписи, используемые на форме, должны быть ресурсными строками (resourcestring), чтобы была возможна локализация.

Интервалы и размеры

  • Диалоги должны быть разработаны так, чтобы работать независимо от разрешения и высоты шрифта.
  • Интервалы между элементами: 6 пикселей.
  • Не устанавливайте максимальных ограничений.
  • Не устанавливайте минимальную высоту обычных кнопок.
  • Для кнопок вы можете установить минимальную ширину 90.
  • Свойство AutoSize следует установить для кнопок, меток и т.д. для правильного отображения локализованного текста, если он окажется длиннее, чем ожидалось.
  • Все кнопки в группе (включая кнопки, содержащие пиктограммы) должны иметь одинаковую ширину и высоту. Используйте TPanel и устанавливайте свойства Align и BorderSpacing.

Панель кнопок

Панель кнопок должна содержать по крайней мере следующие элементы:

  • Кнопка OK.
  • Кнопка Cancel.
  • Кнопка Next (опционально).
  • Кнопка Previous (опционально).
  • Кнопка Help.

Использование якорей

Чтобы быть уверенным, что диалог после изменения размера будет правильно отображать компоненты, используются якоря. Все компоненты имеют свойство Anchors. С помощью этого свойства вы можете определить способ, с помощью которого компонент будет привязан к своему родителю.

Подсказка: Используйте редактор якорей IDE.

Использование выравнивания

Другой способ организации компонентов - использование выравнивания. Каждый компонент имеет свойство Align. Несколько компонентов могут быть правильно расположены путём выбора правильного выравнивания.

Граничные отступы

В комбинации со свойством Align особенно полезно свойство BorderSpacing (также найдёте в окне диалога Anchors). Обычно используется отступ от края вокруг компонента в 6 пикселей.