ID1 - Icon Concept #1

1.Basic

2.Instanzen

Damit alle Icons der verschiedenen Produktgeber zusammenpassen und einfacher miteinander kombinierbar sind teilen wir das Icons selbst in 2 Sektionen auf. Für alle Icons gilt die Grundregel:

Large
Size: 24px x 24px
Color: same like Typeface

Small
Size: 16px x 16px
Color: same like Typeface
(not part of the MVP)

X-Large
Size: 48px x 48px
Color: same like Typeface
(not part of the MVP)

Sektion 1
Das Symbol. Dieses kann Funktionen (Action-Icons) wie Sortieren, Filtern, Hinzufügen usw. aber auch Merkmale (Indikator-Icon) wie Maschinen, Qualität, Aktionen usw Icon (Kategorie) symbolisieren.

Sektion 2
Die Extension. Diese funktioniert nur im Zusammenspiel mit dem Indikator-Icon und zeigt verschiedene Zustände des Indikator icon an. Wie z.B. Maschine defekt, nicht verfügbar, pausiert usw. Die Extension kann nie alleine eingesetzt werden. Die Extensions dürfen farblich unterschiedlich ein aber nicht in Ihrer Größe variieren.

Für jedes Icon gibt es ausschließlich nur 5 Instanzen. Alle anderen Zustände müssen über die Extension gelöst werden.
:enable ist die Standart Darstellung. :hover unterscheidet sich durch eine leichte Farbnuance und eine minimale animation. :active muss durch einen höhere Kontrast klar von den :enable oder hover unterscheiden. :active hover unterscheidet sich wie im :enable durch eine Farbnuance zum :active. :disable wird immer ohne Extension, drei Farbnuance unter oder über dem BG angezeigt.

:enable
:hover
:active
:active hover
:disable

Indicator Icon with Extensions

Action Icon (shape) without Extensions

Action Icon (line&shape) without Extensions

Action Icon (line) without Extensions

3.Clickdummy

Im klickdummy werden nur die verschiedenen Instanzen wie :enable, :hover und :active getestet. Es kann zu Abweichungen innerhalb des UI-Kits kommen.

Icon Concept 1

https://xd.adobe.com/view/8ec97a3b-1e42-4c2a-b0f9-2f18d8e0ebcc-db9a/

4.Animationen

Animationen sind immer minimal und können ein Verschieben von min 1px bis max 2px, ein Rotieren, ein Zoomen des des Symbols beinhalten. Es ist aber auch Erlaubt einzelne Pfade des Symbols wie genannt zu animieren. Die Extension wird darf nie Teil der Animation sein. Nur Action Icons, als Indikator für eine Aktion verfügen über einen Animation. Indikator-Icons Animationen sind "not part of the MVP"

und werden nach dem MVP nachgezogen.

Action Icon (line) Hover

Action Icon (shape) Hover

Indicator Icon (shape) Hover

4.Gruppierungen

Im Falle das die Actionbar nicht komplett dargestellt werden kann müssen (a) alle Icons oder (b)Gruppen funktionsverwandten Icons zusammengefasst werde. Hier muss entschieden werden ob a oder b verfolgt wird.

Icon grouping in more icon