diff --git a/source/img/Form_Align_KDE3.qml.png b/source/img/Form_Align_KDE3.qml.png new file mode 100644 index 0000000..77bbd0a Binary files /dev/null and b/source/img/Form_Align_KDE3.qml.png differ diff --git a/source/img/Form_Align_KDE5.qml.png b/source/img/Form_Align_KDE5.qml.png new file mode 100644 index 0000000..4997cac Binary files /dev/null and b/source/img/Form_Align_KDE5.qml.png differ diff --git a/source/img/Form_Align_Long.qml.png b/source/img/Form_Align_Long.qml.png new file mode 100644 index 0000000..b1692f3 Binary files /dev/null and b/source/img/Form_Align_Long.qml.png differ diff --git a/source/img/Form_Align_NO.qml.png b/source/img/Form_Align_NO.qml.png new file mode 100644 index 0000000..506962d Binary files /dev/null and b/source/img/Form_Align_NO.qml.png differ diff --git a/source/img/Form_Align_OSX.qml.png b/source/img/Form_Align_OSX.qml.png new file mode 100644 index 0000000..86455a3 Binary files /dev/null and b/source/img/Form_Align_OSX.qml.png differ diff --git a/source/img/Form_Align_Space.qml.png b/source/img/Form_Align_Space.qml.png new file mode 100644 index 0000000..fb9510e Binary files /dev/null and b/source/img/Form_Align_Space.qml.png differ diff --git a/source/img/Form_Align_YES.qml.png b/source/img/Form_Align_YES.qml.png new file mode 100644 index 0000000..33b820f Binary files /dev/null and b/source/img/Form_Align_YES.qml.png differ diff --git a/source/layout/alignment.rst b/source/layout/alignment.rst new file mode 100644 index 0000000..b16a156 --- /dev/null +++ b/source/layout/alignment.rst @@ -0,0 +1,116 @@ +Alignment +========= + +Purpose +------- + +One of the most important aspects of presentation is *alignment* and +*placement* of controls. Its theoretical foundation is based on Gestalt +psychology. Human perception tends to order experience in a manner that +is regular, orderly, symmetric, and simple. Visual impression is +generated to an emergent whole based on several principles, called +Gestalt laws. Two basic laws are: + +- Law of proximity: an assortment of objects that are close to each + other are formed into a group +- Law of similarity: objects will be perceptually grouped together if + they are similar to each other + +Placement of controls should be carefully done according to Gestalt +theory. + +Guidelines +---------- + +Labels +~~~~~~ + +- Align labels to the right and connected widgets to the left, making a + group of form widgets appear to be center aligned. In Qt5, using a + QFormLayout handles this correctly for you. + +.. container:: flex + + .. container:: + + .. figure:: /img/Form_Align_KDE3.qml.png + + *BAD* + KDE3 form alignment + + .. container:: + + .. figure:: /img/Form_Align_KDE5.qml.png + + *GOOD* + Plasma 5 form alignment + +Controls +~~~~~~~~ + +- Align groups of items vertically rather than horizontally, as this + makes them easier to scan visually. Use horizontal or rectangular + alignments only if they greatly improve the layout of the window. +- Align a group of widgets to the left. This makes use of space more + efficiently. + +.. container:: flex + + .. container:: + + .. figure:: /img/Form_Align_OSX.qml.png + + *BAD* + OSX form alignment + + .. container:: + + .. figure:: /img/Form_Align_KDE5.qml.png + + *GOOD* + Plasma 5 form alignment + +- Left align controls over multiple groups (in case of right-to-left + languages mirror the alignment). The visual anchor facilitates + scanning of content, and left-hand alignment fits as well forms that + have been oversized individually. + +.. container:: flex + + .. container:: + + .. figure:: /img/Form_Align_NO.qml.png + + *BAD* + no alignment over controls + + .. container:: + + .. figure:: /img/Form_Align_YES.qml.png + + *GOOD* + left aligned controls + +- Keep track on label size; avoid big differences in text length (even + after translation), that could result in much white space for + multiple aligned controls. + + .. figure:: /img/Form_Align_Long.qml.png + + *BAD* + Avoid very long captions + +- In some cases it may be useful to visually separate groups of related + options within one group box to facilitate scanning of the dialog. In + that case, put a vertical, fixed-size spacer of 16px height between + the options. + +.. figure:: /img/Form_Align_Space.qml.png + :alt: Separating groups of related options with a vertical spacer. + + Separating groups of related options with a vertical spacer. + +Check boxes and Radio buttons +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +For more details on alignment of :doc:`radio buttons ` and :doc:`checkboxes ` see the detailed HIG pages. diff --git a/source/layout/index.rst b/source/layout/index.rst index ad8db30..eb14709 100644 --- a/source/layout/index.rst +++ b/source/layout/index.rst @@ -1,15 +1,17 @@ Layout ====== .. toctree:: :maxdepth: 1 :caption: Contents: :titlesonly: :hidden: - + units metrics - + alignment + * :doc:`units` * :doc:`metrics` +* :doc:`alignment` diff --git a/source/patterns/iconandtext.rst b/source/patterns/iconandtext.rst index c6770ff..a771e6c 100644 --- a/source/patterns/iconandtext.rst +++ b/source/patterns/iconandtext.rst @@ -1,23 +1,26 @@ +Icons and text +============== + Purpose ------- Combining icons and text can be used to identify data and actions in a user interface. Examples include toolbar actions, file and folder displays in a file manager, application listings, and notifications. The layout should be consistent. Guideline --------- .. image:: /img/HIGPatternIconsAndText.png :alt: Alignment of text and icons. .. attention:: Make sure to read about how :doc:`units and messurements ` are used for design and development. - Where icons are shown with text, use the layout guidelines above. - For 16x16px icons and smaller, the 8px margins may be reduced to 4px. - If Secondary Text is normally present, but is empty in a particular instance, align the Primary Text to the vertical center. - Where icons are shown without text, always provide tooltip text and alternate text for accessibility.