<page xmlns="http://projectmallard.org/1.0/" xmlns:uix="http://projectmallard.org/experimental/ui/" xmlns:itst="http://itstool.org/extensions/" type="topic" id="lists" xml:lang="de">

  <info>

    <link type="guide" xref="patterns#primary"/>

    <desc>Rows of information or content items.</desc>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Christian Kirbach</mal:name>

      <mal:email>christian.kirbach@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Mario Blättermann</mal:name>

      <mal:email>mario.blaettermann@gmail.com</mal:email>

      <mal:years>2016</mal:years>

    </mal:credit>

  </info>

<title>Listen</title>

Listen sind ein grundlegendes Element der Benutzeroberfläche. Sie können zum Darstellen von Informationen, Inhaltsobjekten oder Bedienelementen verwendet werden. In GNOME 3 gibt es zwei primäre Typen: Standardlisten und Tabellen.

<link xref="sidebar-lists">Listen in der Seitenleiste</link> sind ein separates Designmuster, das ebenfalls eine Listenansicht verwendet.

<section id="when-to-use">

<title>Anwendungsfälle</title>

A list is an appropriate way to present content items that have a distinct name as their primary identifier. If the content is visual in nature, such as with photos or videos, you might want to consider using a <link xref="grids">grid</link> instead.

In einigen Fällen ist es vorteilhaft, für die gleichen Inhaltsobjekte sowohl eine Listen- als auch eine Gitteransicht zu ermöglichen. Auf diese Weise erlaubt eine Listenansicht die Darstellung zusätzlicher Informationen zum Inhalt mittels Informationsspalten.

</section>

<section id="standard-lists">

<title>Standardlisten</title>

Standardlisten sind der häufigste Listentyp und sollten generell gegenüber Tabellen bevorzugt werden.

In Standardlisten werden die Zeilen durch Trenner abgegrenzt. Die Änderung der Sortierreihenfolge geschieht durch ein Bedienelement außerhalb der eigentlichen Liste.

<section id="styles">

<title>Stile</title>

Standardlisten haben zwei Stile: volle Breite oder eingebettet. Listen voller Breite füllen ihren umgebenden Container, während eingebettete Listen von der Auffüllung umrandet werden.

Listen voller Breite sind visuell einfacher und daher eleganter. Sie sollten verwendet werden, wo immer es möglich ist. Allerdings ist es nicht immer möglich, eine Liste voller Breite zu implementieren. Es gibt einige Situationen, in denen eine eingebettete Liste die bessere Wahl ist:

<list>

<item>
Wenn die Liste Informationsspalten enthält, die zwecks besserer Lesbarkeit nahe beieinander dargestellt werden müssen und daher die Liste in einen breiten Container eingebettet werden muss.
</item>

<item>
Wenn ein Fenster verschiedene Listen enthält.
</item>

<item>
Wenn die Liste an anderen Bedienelementen im Fenster ausgerichtet werden muss.
</item>

</list>

<media type="image" mime="image/svg" src="figures/patterns/list-styles.svg"/>

</section>

<section id="editable-lists">

<title>Bearbeitbare Listen</title>

Editable lists allow a user to add or remove items from the list (for this reason, they are sometimes known as add/remove lists). Both full-width and embedded lists can be editable.

Each row contains a remove button. If the number of items is short, the final list row should be used as an add button. Alternatively, if the list is long, the add button can be placed in a <link xref="header-bars">header bar</link> or <link xref="action-bars">action bar</link>.

<media type="image" mime="image/svg" src="figures/patterns/editable-lists.svg"/>

</section>

</section>

<section id="tables">

<title>Tabellen</title>

Tables can be used for more complex multi-column lists, where sorting the table by a variety of columns is common. Column headers allow people to identify the type of information in each column and to reorder the list according to the content of each column.

When using column headers, indicate the sort order using arrows on the header.

Reihenfolge

Pfeilrichtung

Beispiel

Natürlich

Nach unten

Alphabetical, smallest number first, earliest date first, checked items first

Umkehren

Nach oben

Reverse alphabetical, largest number first, most recent date first, unchecked items first

</section>

<section id="row-behavior">

<title>Verhalten von Spalten</title>

Depending on the type of list, rows have different behaviors when they are clicked or pressed. There are three types of list in this regard:

Listentyp

Verhalten von Zeilen

Navigation

Selecting a row opens the corresponding item, whether it is by browsing to a new view or opening a dialog. This pattern is common for lists of content items, or for presenting groups of settings.

Auswählen

The list item is selected when it is clicked or pressed. This approach is often used for selecting one of a series of configuration options. In the case of <link xref="drop-down-lists">drop-down lists</link>, one option is always selected. The selected row is indicated by a check mark.

Edit

Selecting the row item turns the row into a text entry field, which allows the item to be edited.

Navigation style lists can be combined with <link xref="selection-mode">selection mode</link> in order to allow rows to be both opened and manipulated. Using double-click to open list items should be avoided, since it is undiscoverable and is incompatible with touch input.

</section>

<section id="general-guidelines">

<title>Allgemeine Richtlinien</title>

<list>

<item>
Differentiate the different types of information using different alignments, <link xref="typography">text colors and weights</link>. Highlight the most important and relevant information by giving other information a lighter weight and/or color.
</item>

<item>
Be careful not to overpopulate lists with different columns and elements, and ensure that you only use them to present essential information.
</item>

<item>
Als Faustregel gilt, dass Sie verschiedene Listen im gleichen Fenster vermeiden sollten, insbesondere in primären Fenstern.
</item>

<item>
Verwenden Sie keine Listen mit weniger als fünf Einträgen, es sei denn, die Anzahl der Einträge wächst mit der Zeit. Für Optionslisten können in diesem Fall alternativ Ankreuzfelder oder Radioknöpfe verwendet werden.
</item>

<item>
Ensure that lists are ordered to be helpful to those who are using them. Recent documents might be more useful than alphabetically ordered documents, or contacts that are online might be more interesting than those who are offline, for example.
</item>

<item>
If you use icons in your list, <link xref="icons-and-artwork">use symbolic icons</link>. The lower visual footprint of these icons will mean that they do not visually overload or dominate your list.
</item>

<item>
If the list is long, make it possible to search it using the standard <link xref="search">search design pattern</link>.
</item>

</list>

</section>

<section id="api-reference">

<title>API-Referenz</title>

<list>

<item>
<link href="https://developer.gnome.org/gtk3/stable/GtkListBox.html">GtkListBox</link>
</item>

<item>
<link href="https://developer.gnome.org/gtk3/stable/GtkTreeView.html">GtkTreeView</link>
</item>

</list>

</section>

</page>