<?xml version="1.0" encoding="utf-8"?>
<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>Zeilen mit Informationen oder Inhaltsobjekten.</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>

<p>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.</p>

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

<section id="when-to-use">
<title>Anwendungsfälle</title>

<p>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.</p>

<p>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.</p>

</section>

<section id="standard-lists">
<title>Standardlisten</title>

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

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

<section id="styles">
<title>Stile</title>

<p>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.</p>

<p>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:</p>

<list>
<item><p>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.</p></item>
<item><p>Wenn ein Fenster verschiedene Listen enthält.</p></item>
<item><p>Wenn die Liste an anderen Bedienelementen im Fenster ausgerichtet werden muss.</p></item>
</list>

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

</section>

<section id="editable-lists">
<title>Bearbeitbare Listen</title>

<p>Bearbeitbare Listen ermöglichen dem Benutzer das Hinzufügen oder Entfernen von Listeneinträgen (aus diesem Grund sind sie auch als Add/Remove-Listen bekannt). So wohl Listen voller Breite als auch eingebettete Listen können bearbeitbar sein.</p>

<p>Jede Zeile enthält einen Knopf zum Entfernen. Bei wenigen Listeneinträgen sollte die letzte Listenzeile als Hinzufügen-Knopf verwendet werden. Wenn die Liste lang ist, können Sie den Hinzufügen-Knopf alternativ in einer <link xref="header-bars">Kopfleiste</link> oder <link xref="action-bars">Aktionsleiste</link> platzieren.</p>

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

</section>
</section>

<section id="tables">
<title>Tabellen</title>

<p>Tabellen können für komplexere, mehrspaltige Listen verwendet werden, wo die Sortierung der Tabelle in mehreren Spalten erforderlich ist. Spaltenüberschriften ermöglichen den Benutzern die Erkennung des Informationstyps in jeder Spalte und die Neuordnung der Liste entsprechend den Inhalten einer Spalte.</p>

<p>Wenn Sie Spaltenüberschriften verwenden, zeigen Sie die Sortierreihenfolge mittels Pfeilen in der Überschrift an.</p>

<table>
<thead>
<tr>
<td><p>Reihenfolge</p></td>
<td><p>Pfeilrichtung</p></td>
<td><p>Beispiel</p></td>
</tr>
</thead>
<tbody>
<tr>
<td><p>Natürlich</p></td>
<td><p>Nach unten</p></td>
<td><p>Alphabetisch, kleinste Zahl zuerst, ältestes Datum zuerst, markierte Einträge zuerst</p></td>
</tr>
<tr>
<td><p>Umgekehrt</p></td>
<td><p>Nach oben</p></td>
<td><p>Umgekehrt alphabetisch, größte Zahl zuerst, neuestes Datum zuerst, nicht markierte Einträge zuerst</p></td>
</tr>
</tbody>

</table>

</section>

<section id="row-behavior">
<title>Verhalten von Spalten</title>

<p>Abhängig vom Typ der Liste verhalten sich Spalten unterschiedlich, wenn sie angeklickt werden. Es gibt in dieser Hinsicht drei Listentypen:</p>

<table>
<thead>
<tr>
<td><p>Listentyp</p></td>
<td><p>Verhalten von Zeilen</p></td>
</tr>
</thead>
<tbody>
<tr>
<td><p>Navigation</p></td>
<td><p>Die Auswahl einer Zeile öffnet das zugehörige Objekt, entweder durch Navigieren zu einer neuen Ansicht oder durch Öffnen eines Dialoges. Dieses Muster ist für Listen aus Inhaltsobjekten oder zum Darstellen von Einstellungsgruppen üblich.</p></td>
</tr>
<tr>
<td><p>Auswählen</p></td>
<td><p>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.</p></td>
</tr>
<tr>
<td><p itst:context="list-type">Edit</p></td>
<td><p>Die Auswahl der Zeile wandelt diese in ein Texteingabefeld um, in dem der Eintrag bearbeitet werden kann.</p></td>
</tr>
</tbody>
</table>

<p>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.</p>

</section>

<section id="general-guidelines">
<title>Allgemeine Richtlinien</title>

<list>
<item><p>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.</p></item>
<item><p>Seien Sie vorsichtig und überfrachten Sie Listen nicht mit verschiedenen Spalten und Elementen, um sicherzustellen, dass Sie damit nur essenzielle Informationen bereitstellen.</p></item>
<item><p>Als Faustregel gilt, dass Sie verschiedene Listen im gleichen Fenster vermeiden sollten, insbesondere in primären Fenstern.</p></item>
<item><p>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.</p></item>
<item><p>Stellen Sie sicher, dass Listen so geordnet sind, dass sie den Benutzern wirklich hilfreich sind. Es kann nützlicher sein, Dokumente nach dem letzten Zugriff zu ordnen, anstatt sie alphabetisch zu sortieren. Beispielsweise können Kontakte, die gerade online sind, interessanter sein als jene, die nicht verfügbar sind.</p></item>
<item><p>Wenn Sie in Ihrer Liste Symbole verwenden, verwenden Sie <link xref="icons-and-artwork">stilisierte Symbole</link>. Das weniger vordergründige optische Erscheinungsbild sorgt dafür, dass Ihre Liste nicht überladen wirkt und die Symbole sie nicht dominieren.</p></item>
<item><p>Bei einer langen Liste sollten Sie ermöglichen, diese mit dem standardisierten <link xref="search">Such-Designmuster</link> zu durchsuchen.</p></item>
</list>

</section>

<section id="api-reference">
<title>API-Referenz</title>
<list>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkListBox.html">GtkListBox</link></p></item>
<item><p><link href="https://developer.gnome.org/gtk3/stable/GtkTreeView.html">GtkTreeView</link></p></item>
</list>
</section>

</page>
