GUI design guidelines/ja

From Free Pascal wiki
Jump to navigationJump to search

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


Dialogs are special forms that need the user to make / change some setting before lazarus can continue.

Dialog Settings

Settings that should be applied in general are:

  • BorderStyle :
    • bsSizeable - if the dialog is complex and resizing is really needed.
    • bsDialog - if dialog is simple and resizing is not needed (NOTE: all dialogs should remain resizable internally because of localization issues).
  • Position : poScreenCenter.
  • FormStyle : Do not use fsStayOnTop, as this can be pretty annoying under some window managers.
  • BorderIcons:
    • [biSystemMenu] - for modal shown dialogs
    • [biSystemMenu,biMinimize,biMaximize] - for non-modal shown dialogs

General layout

  • On the bottom of the form Button panel should be placed.
  • The dialog should work on a screen of 800x600. 640x480 is not needed to support.
  • Close on Escape (if key not used otherwise).
  • Define default button and Return activates it (if key not used).
  • Avoid using long captions on buttons. Use Hint property to explain button action in details.
  • The size of resizable dialogs whould be saved and restored next time the dialog will be opened.
  • All hints and captions used on a form should be as resourcestring, so localization can be applied.

Spacings and sizes

  • Dialogs must be designed for 96 dpi resolution and 8 points/14 pixels font height.
  • Spacing between elements: 6 pixels.
  • Minimum size of regular buttons: 90x25 pixels.
  • AutoSize property need to be set for buttons to properly display localized text if it is longer than expected.
  • All buttons in a group (including buttons that contain glyphs) must have the same width and height.



  • OK ボタン
  • Cancel ボタン
  • Next(次) ボタン(オプション)
  • Previous(前)ボタン(オプション)
  • ヘルプボタン


To make sure that a dialog after resizing will keep on showing the components in a good way, anchoring is being used. Each components has a property called Anchors. With this property you can determine the way a component is anchored to it's parent.

Hint: Use the anchor editor of the IDE.


Another way to organise components is using alignment. Each component has a property Align. By selecting the appropriate align position several components can be positioned properly.


Especially useful in combination with Align is the BorderSpacing property. (Also found on the Anchors dialog). A typical borderspacing of 6 pixels around a component is used.