Difference between revisions of "Pattern Layout"
Jump to navigation
Jump to search
| (5 intermediate revisions by 2 users not shown) | |||
| Line 214: | Line 214: | ||
| style="width:40%;"| || style="width:20%;" | DLC || style="width:20%;" | GUI V3 Komponenten || style="width:10%;" | DU (Status) || style="width:10%;" | MS (Status) | | style="width:40%;"| || style="width:20%;" | DLC || style="width:20%;" | GUI V3 Komponenten || style="width:10%;" | DU (Status) || style="width:10%;" | MS (Status) | ||
|- | |- | ||
| Metamenü (NF-HM Horizontal Menu) || [[Metanavigation]] || [[Metanavigation]] || Fertig || | | Metamenü (NF-HM Horizontal Menu) || [[Metanavigation]] || [[Metanavigation]] || Fertig || OK | ||
|- | |- | ||
| Metamenü | | Metamenü Short + Search || || [[Metanavigation Short]] || || | ||
|- | |- | ||
| Hauptmenü || ||[[Main Navigation]] || || | | Hauptmenü || ||[[Main Navigation]] || || | ||
| Line 222: | Line 222: | ||
| Tabmenü || ||[[Tab]] (Groß) || || | | Tabmenü || ||[[Tab]] (Groß) || || | ||
|- | |- | ||
| Tabmenü (flexibel) || ||[[ | | Tabmenü (flexibel) || ||[[Tab_Klein]] (Klein) || || | ||
|- | |- | ||
| (Einfache) Suche || || || || | | (Einfache) Suche || || || || | ||
| Line 244: | Line 244: | ||
| Bibl. Ansicht, Sup. Mat. (Mediabar) || [[ Mediabar DLC]] || [[Supplement Material]] || Fertig || OK | | Bibl. Ansicht, Sup. Mat. (Mediabar) || [[ Mediabar DLC]] || [[Supplement Material]] || Fertig || OK | ||
|- | |- | ||
| Tabellen Ansicht || || [[Listen]] || Fertig || | | Tabellen Ansicht || || [[Listen]] || Fertig || OK | ||
|- | |- | ||
| Listen mit Bildern || || [[Listen]] || Fertig || | | Listen mit Bildern || || [[Listen]] || Fertig || OK | ||
|- | |- | ||
| Tabellen Sortieren & Filtern || ||[[Actions & Options]] || || | | Tabellen Sortieren & Filtern || ||[[Actions & Options]] || || | ||
| Line 276: | Line 276: | ||
[[Category: User Interface Engineering]] | [[Category: User Interface Engineering]] | ||
[[Category: Corporate Design]] | |||
Latest revision as of 11:44, 1 August 2013
| APPLICATION AREAS |
|---|
|
|
| PROJECTS |
|
Research- and Metadata Handling Corporate & Interface Design (under Rework) |
| edit |
Schriftart[edit]
Die Schriftart kann vom Institut oder den Projektpartnern frei gewählt werden. Bei der Verwendung mehrere Schriftfamilien sollte eine Antiqua (Times New Roman) und eine Grotesk Schrift (Arial) verwendet werden.
Die Anlehnung an ein bestehendes Corporate Design, bzw. eine Hausschrift sollte in Betracht gezogen werden.
Schriftschnitt[edit]
Der Schriftschnitt beinhaltet die Schriftstärke (normal, fett), Schriftbreite (schmal, normal, breit) und die Schriftlage (normal, kursiv).
| Schriftstärke | Normal | Wird in der Regel verwendet. |
| Bold | Als besondere Auszeichnung. | |
| Schriftbreite | Normal | Ausschliesslich |
| Schriftlage | Normal | Wird in der Regel verwendet |
| Italic | Zitate und Suchergebnisse in Copytext. |
Schriftgröße und Zeilenabstände[edit]
Die verwendeten Schriftgrößen müssen so gewählt werden, dass die Abstände dazwischen eindeutig sind.
| FS* | ZAB | Pattern | Beschreibung | Anwendung |
|---|---|---|---|---|
| 11 | – | Paginator | Seitenzahl (klein) | Basic |
| 14 | – | Paginator | Seitenzahl (mittel) | Basic |
| 18 | – | Paginator | Seitenzahl (groß) | Basic |
| 24 | – | Paginator | Seitenzahl (selected) | Basic |
| 16 | 20 | Bibliografische Ansicht, Item List | Titel | Basic |
| 20 | 24 | Bibliografische Ansicht, Item List | Titel | Advanced I, DigiLife (Mehrbandwerk) |
| 12 | 18 / 27* | Bibliografische Ansicht, Item List | Metadaten | Basic |
| 12 | – | Metanavigation | Links | Basic |
| 18 | – | Seitentitel | Seitentitel | Basic |
| 12 | – | Seitentitel | Breadcrumb | Basic |
| 12 | – | Seitentitel | Messages | Basic |
| 12 | – | Listenkopf (List Header) | Basic |
FS*= Schriftgröße, ZAB*=Zeilenbstand in Pixel, 27*= 1,5 Zeilen (Strukturieren der Metadaten)
Allgemeine Abstände und Ausrichtung[edit]
| Element 1 | Element 2 | Wert |
| Icon | Label | horizontal, 10 px |
| Formelement | Text | horizontal, 6 px (direkter Bezug) |
| Formelement | Text | horizontal, 16 px (indirekter Bezug) |
Farben[edit]
Keine Vorgaben. Umsetzung in Graustufen (Corporate Design). Contrast Analyzer, GUI Vorgaben Mindestwerte
| Hex | Element | Verwendung | DLC |
|---|---|---|---|
| #FFFFFF | Hintergrund | All | x |
| #– | Hintergrund | Bib View (Hover) | |
| #ebf8ec | Hintergrund | Gridliste (Sortierung) | x |
| #eef2f0 | Hintergrund | Seitentitel | |
| #eef2f0 | Hintergrund | Supplement Material | |
| #000000 | Link | All | x |
| #555555 | Text | All | x |
| #00aa11 | Hover | All | x |
| #7f7f7f | Trennlinie | Paginator, Metanavigation, Itemlist | x |
| #- | Inaktiv | Paginator (z.B. erste und letzte Seite) | x |
| #00aa11 | Highlight (Aktive Auswahl) | All | x |
| #- | Systemmessages (Erfolg) | z.B. Searchresult | x |
| #- | Systemmessages (Fehler) | x | |
| #b2b2b2 | Rahmen, Input und Dropdown | Paginator, Table Header, Metamenu… | x |
Komponenten[edit]
| DLC | GUI V3 Komponenten | DU (Status) | MS (Status) | |
| Metamenü (NF-HM Horizontal Menu) | Metanavigation | Metanavigation | Fertig | OK |
| Metamenü Short + Search | Metanavigation Short | |||
| Hauptmenü | Main Navigation | |||
| Tabmenü | Tab (Groß) | |||
| Tabmenü (flexibel) | Tab_Klein (Klein) | |||
| (Einfache) Suche | ||||
| Suche | ||||
| Sitetitle | Seitentitel | Fertig | OK | |
| Breadcrumb | siehe Seitentitel | Fertig | OK | |
| Start Page | ||||
| Listen | ||||
| Paginator (DD-VB View Item Body Media) | Paginator | Fertig | OK | |
| Bibliografische Ansicht | Listen DLC | Listen | Fertig | OK |
| Bibl. Ansicht, Listenkopf | Listenkopf DLC | Listenkopf | Fertig | |
| Bibl. Ansicht, Sup. Mat. (Mediabar) | Mediabar DLC | Supplement Material | Fertig | OK |
| Tabellen Ansicht | Listen | Fertig | OK | |
| Listen mit Bildern | Listen | Fertig | OK | |
| Tabellen Sortieren & Filtern | Actions & Options | |||
| Detail View | ||||
| Detail View | Header | |||
| 2 Column Detail View | ||||
| Item Meta Only | ||||
| Forms | ||||
| DropDowns | DropDowns | |||
| Single Elements | ||||
| Date Input Field | ||||
| Item Single Edit Metadata |