{"id":129048,"date":"2018-02-22T16:44:55","date_gmt":"2018-02-22T15:44:55","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/ui-widget-libraries\/"},"modified":"2018-02-22T16:44:55","modified_gmt":"2018-02-22T15:44:55","slug":"ui-widget-libraries","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/ui-widget-bibliotheken","title":{"rendered":"UI-Widget-Bibliotheken"},"content":{"rendered":"

Zus\u00e4tzlich zu den grundlegenden Elementen in der Symbolleiste gibt es Tausende von anderen vorgefertigten Assets, die Sie kostenlos zu Justinmind hinzuf\u00fcgen k\u00f6nnen. Sie k\u00f6nnen auch Ihre eigenen benutzerdefinierten, gemeinsam nutzbaren Bibliotheken erstellen, um ein konsistentes Designsystem f\u00fcr Ihre Marke zu definieren. <\/p>\n

<\/a>Justinmind vorgefertigte Assets<\/h2>\n

Vorinstallierte Bibliotheken<\/h3>\n

Das Justinmind-Team hat Dutzende von interaktiven Widget-Bibliotheken erstellt, die Sie in Ihre Prototypen integrieren k\u00f6nnen. Es ist ganz einfach, sie zu Ihrer Justinmind-Oberfl\u00e4che hinzuzuf\u00fcgen: <\/p>\n

    \n
  1. Sehen Sie sich die Palette Bibliotheken an. Je nachdem, f\u00fcr welches Ger\u00e4t Sie einen Prototyp erstellen, finden Sie hier vielleicht schon einige Bibliotheken aufgelistet. \"Zus\u00e4tzliche<\/li>\n
  2. Klicken Sie auf den Textlink „Weitere Bibliotheken“, der eine Popup-Liste mit Bibliotheken wie iOS-Symbolen, Diagrammen und Webkomponenten \u00f6ffnet. Aktivieren Sie die Kontrollk\u00e4stchen der Bibliotheken, die Sie hinzuf\u00fcgen m\u00f6chten, und klicken Sie auf „OK“. Sie werden dann in die Palette Bibliotheken importiert.
    \n\"Klicken
    \nSie k\u00f6nnen nun Elemente aus diesen Bibliotheken per Drag & Drop in Ihre Prototypen ziehen. Deaktivieren Sie die Kontrollk\u00e4stchen im Popup-Fenster, um Bibliotheken aus der Palette zu entfernen. <\/li>\n<\/ol>\n

    Herunterladbare Bibliotheken<\/h3>\n

    Es gibt noch mehr Bibliotheken, die Sie kostenlos in Justinmind importieren k\u00f6nnen:<\/p>\n

      \n
    1. Klicken Sie auf den Textlink ‚Weitere Bibliotheken‘ und tippen Sie auf die Schaltfl\u00e4che ‚Weitere Widget-Bibliotheken herunterladen‘ im Popup-Fenster, das einen Webbrowser mit einer Liste von UI-Kits \u00f6ffnet.<\/li>\n
    2. Laden Sie eine Bibliothek herunter, die Sie verwenden m\u00f6chten.\"UI-Kits<\/li>\n
    3. Klicken Sie im Popup-Fenster „Weitere Bibliotheken“ auf die Schaltfl\u00e4che „Bibliothek importieren“. W\u00e4hlen Sie die Bibliotheksdatei (.jpl), die Sie heruntergeladen haben, um sie aus dem Dateibrowser zu importieren. <\/li>\n
    4. Aktivieren Sie das Kontrollk\u00e4stchen der Bibliothek, um sie zur Palette Bibliotheken hinzuzuf\u00fcgen.<\/li>\n<\/ol>\n

      <\/a>Kundenspezifische Bibliotheken und Designsysteme<\/h2>\n

      Erstellen Sie benutzerdefinierte Elementbibliotheken und teilen Sie diese mit Ihren Teamkollegen, um eine einzige Quelle der Wahrheit f\u00fcr Ihre Designs zu schaffen. In Kombination mit Vorlagen und Mastern k\u00f6nnen Sie mit benutzerdefinierten gemeinsamen Bibliotheken ganz einfach ein einheitliches Branding entwickeln und pflegen. <\/p>\n

      Erstellen Sie eine benutzerdefinierte Bibliothek<\/h3>\n
        \n
      1. Sehen Sie sich die Palette Bibliotheken an und klicken Sie auf die Schaltfl\u00e4che ‚+‘, um eine neue Widget-Bibliothek zu erstellen. Geben Sie ihr einen Titel und eine Beschreibung und klicken Sie auf ‚OK‘. Sie sehen Ihre neue Bibliothek in der Palette Bibliotheken.
      2. Bibliotheken haben vier verschiedene Kategorien, die Sie definieren k\u00f6nnen: Farben, Textstile, Komponenten und Assets. In den folgenden Abschnitten wird erkl\u00e4rt, wie Sie die Inhalte in diesen Kategorien hinzuf\u00fcgen und verwenden. <\/li>\n<\/ol>\n

        Hinzuf\u00fcgen und Verwenden von Farben in einer Bibliothek<\/h3>\n
          \n
        1. Um einer Bibliothek eine Reihe von Farben hinzuzuf\u00fcgen, muss sich diese Bibliothek im ‚Bearbeitungsmodus‘ befinden. Sie gelangen direkt nach dem Erstellen einer Bibliothek in den Bearbeitungsmodus, aber Sie k\u00f6nnen diesen Modus auch aktivieren, indem Sie auf das Zahnradsymbol in einer Bibliothek klicken und „Bibliothek bearbeiten“ w\u00e4hlen. <\/li>\n
        2. Es gibt zwei M\u00f6glichkeiten, Farben zu einer Bibliothek hinzuzuf\u00fcgen. Zum einen k\u00f6nnen Sie auf das ‚+‘-Symbol neben dem Wort ‚Farben‘ klicken. Daraufhin wird ein Farbw\u00e4hler angezeigt, mit dem Sie die gew\u00fcnschte Farbe ausw\u00e4hlen und ihr einen Namen geben k\u00f6nnen. <\/li>\n
        3. Sie k\u00f6nnen einer Bibliothek auch Farben hinzuf\u00fcgen, indem Sie ein Element aus dem Canvas in den Bereich ‚Farben‘ ziehen. Die Farben, die von diesem Element verwendet werden, werden automatisch zur Liste hinzugef\u00fcgt. <\/li>\n
        4. Sobald Sie Farben im Bereich ‚Farben‘ haben, k\u00f6nnen Sie diese mit den Elementen im Canvas verwenden. Es gibt zwei M\u00f6glichkeiten, einem Element im Canvas eine Farbe aus der Bibliothek zuzuweisen. Zum einen k\u00f6nnen Sie die Farbe auf das Element ziehen. Es wird ein Popup-Fenster angezeigt, in dem Sie den Teil des Elements ausw\u00e4hlen k\u00f6nnen, den Sie einf\u00e4rben m\u00f6chten. Die andere M\u00f6glichkeit besteht darin, auf einen beliebigen Farbw\u00e4hler in der Palette ‚Eigenschaften‘ zu klicken. In der sich \u00f6ffnenden Farbauswahl sehen Sie am Ende des Dialogs eine Liste mit allen Farben aus den von Ihnen verwendeten Bibliotheken. Das sind die Farben mit einem kleinen wei\u00dfen Rechteck. <\/li>\n
        5. Sobald Sie eine Farbe in der Bibliothek mit einer Komponente im Canvas verwendet haben, wird dieses Element mit dieser Farbe verkn\u00fcpft. Wenn Sie also zu irgendeinem Zeitpunkt diese Farbe in der Bibliothek \u00e4ndern (indem Sie darauf doppelklicken oder mit der rechten Maustaste klicken und ‚Bearbeiten‘ w\u00e4hlen), \u00e4ndern sich automatisch alle Elemente im Prototyp, die diese Farbe verwendet haben. <\/li>\n<\/ol>\n

          Hinzuf\u00fcgen und Verwenden von Textstilen in einer Bibliothek<\/h3>\n
            \n
          1. Um eine Reihe von Textstilen zu einer Bibliothek hinzuzuf\u00fcgen, muss sich diese Bibliothek im ‚Bearbeitungsmodus‘ befinden. Sie gelangen direkt nach dem Erstellen einer Bibliothek in den Bearbeitungsmodus, aber Sie k\u00f6nnen diesen Modus auch aktivieren, indem Sie auf das Zahnradsymbol in einer Bibliothek klicken und „Bibliothek bearbeiten“ w\u00e4hlen. <\/li>\n
          2. Es gibt zwei M\u00f6glichkeiten, Textstile zu einer Bibliothek hinzuzuf\u00fcgen. Zum einen k\u00f6nnen Sie auf das ‚+‘-Symbol neben dem Wort ‚Textstile‘ klicken. Es wird ein Dialogfeld angezeigt, in dem Sie den gew\u00fcnschten Textstil definieren und ihm einen Namen geben k\u00f6nnen. <\/li>\n
          3. Sie k\u00f6nnen auch Textstile zu einer Bibliothek hinzuf\u00fcgen, indem Sie ein Element mit Text aus dem Canvas in den Bereich „Textstile“ ziehen. Der Textstil, der von diesem Element verwendet wird, wird automatisch zur Liste hinzugef\u00fcgt. <\/li>\n
          4. Sobald Sie \u00fcber Textstile im Bereich ‚Textstil‘ verf\u00fcgen, k\u00f6nnen Sie diese mit den Elementen mit Text im Canvas verwenden. Es gibt zwei M\u00f6glichkeiten, einen Textstil aus der Bibliothek einem Element im Canvas zuzuweisen. Zum einen k\u00f6nnen Sie den Textstil auf das Element ziehen. Die andere M\u00f6glichkeit besteht darin, in der Palette ‚Eigenschaften‘ auf das Dropdown-Men\u00fc zu klicken, auf dem ‚Kein Textstil‘ steht. In diesem Dropdown-Men\u00fc werden alle Textstile in den von Ihnen verwendeten Bibliotheken aufgelistet. <\/li>\n
          5. Sobald Sie einen Textstil aus der Bibliothek mit einer Komponente im Canvas verwendet haben, wird dieses Element mit diesem Textstil verkn\u00fcpft. Wenn Sie also zu irgendeinem Zeitpunkt den Textstil in der Bibliothek \u00e4ndern (indem Sie darauf doppelklicken oder mit der rechten Maustaste klicken und ‚Bearbeiten‘ w\u00e4hlen), \u00e4ndern sich automatisch alle Elemente im Prototyp, die diesen Textstil verwendet haben. <\/li>\n<\/ol>\n

            Hinzuf\u00fcgen und Verwenden von Komponenten in einer Bibliothek<\/h3>\n
              \n
            1. Entwerfen Sie ein Element oder eine Gruppe von Elementen auf dem Canvas. Sie k\u00f6nnen auch Interaktionen wie Mouse Over<\/strong> und Swipe-Effekte<\/strong> hinzuf\u00fcgen. <\/li>\n
            2. Um ein Element zu einer Bibliothek hinzuzuf\u00fcgen, ziehen Sie es vom Canvas in den Abschnitt ‚Komponenten‘ der Bibliothek in der Palette Bibliotheken. Sie k\u00f6nnen auch mit der rechten Maustaste auf ein Element klicken, zu ‚Zur Widget-Bibliothek hinzuf\u00fcgen‘ gehen und die Bibliothek ausw\u00e4hlen. \"Ziehen
              \nGeben Sie dann einen Namen und eine Beschreibung f\u00fcr das Element ein und klicken Sie auf ‚OK‘.<\/li>\n
            3. Sie k\u00f6nnen sie nun per Drag & Drop aus der Bibliothek auf den Canvas ziehen und in Ihren Prototypen verwenden.<\/li>\n<\/ol>\n

              Hinzuf\u00fcgen und Verwenden von grafischen Assets in einer Bibliothek<\/h3>\n
                \n
              1. Grafische Assets oder ‚Assets‘ sind Bilddateien, die im Prototyp als Bilder oder Hintergrundbilder verwendet werden k\u00f6nnen. Um grafische Assets zu einer Bibliothek hinzuf\u00fcgen zu k\u00f6nnen, muss sich diese Bibliothek im ‚Bearbeitungsmodus‘ befinden. Sie gelangen direkt nach dem Erstellen einer Bibliothek in den Bearbeitungsmodus, aber Sie k\u00f6nnen diesen Modus auch aktivieren, indem Sie auf das Zahnradsymbol in einer Bibliothek klicken und „Bibliothek bearbeiten“ ausw\u00e4hlen. <\/li>\n
              2. Es gibt zwei M\u00f6glichkeiten, ein grafisches Asset zu einer Bibliothek hinzuzuf\u00fcgen. Zum einen k\u00f6nnen Sie auf das ‚+‘-Symbol neben dem Wort ‚Assets‘ klicken. Es wird ein Dateidialog angezeigt, in dem Sie eine Bilddatei von Ihrem Computer ausw\u00e4hlen k\u00f6nnen. <\/li>\n
              3. Sie k\u00f6nnen einer Bibliothek auch Assets hinzuf\u00fcgen, indem Sie ein Bild, einen Pfad oder mehrere Pfade in den Bereich „Assets“ ziehen.<\/li>\n
              4. Sobald Sie Assets im Bereich ‚Assets‘ haben, k\u00f6nnen Sie diese mit den Elementen im Canvas verwenden. Wenn Sie ein Asset auf die Leinwand ziehen, wird im Prototyp ein Bild mit diesem Asset erstellt. Wenn Sie das Asset \u00fcber ein anderes Bild ziehen, wird dieses Bild durch das gezogene Bild ersetzt. Wenn Sie es \u00fcber einen anderen Elementtyp ziehen, wird das Asset als Hintergrundbild f\u00fcr dieses Element verwendet. <\/li>\n
              5. Sobald Sie ein Asset in der Bibliothek mit dem Prototyp verwendet haben, wird dieses Asset mit allen Stellen, an denen es verwendet wurde, verkn\u00fcpft. Wenn Sie also zu irgendeinem Zeitpunkt dieses Asset in der Bibliothek \u00e4ndern (indem Sie darauf doppelklicken oder mit der rechten Maustaste klicken und ‚Bearbeiten‘ w\u00e4hlen), werden alle Stellen im Prototyp, an denen das Asset verwendet wurde, automatisch ge\u00e4ndert. <\/li>\n<\/ol>\n

                Organisieren Sie die Informationen in Ihrer Bibliothek<\/h3>\n

                Sie k\u00f6nnen die Elemente innerhalb der verschiedenen Abschnitte einer Bibliothek in Gruppen organisieren.<\/p>\n

                  \n
                1. Laden Sie die Bibliothek in die Palette, klicken Sie auf das ‚Zahnrad‘-Symbol und w\u00e4hlen Sie ‚Bibliothek bearbeiten‘.<\/li>\n
                2. Klicken Sie erneut auf das Zahnrad und w\u00e4hlen Sie ‚Neue Widgetgruppe‘.<\/li>\n
                3. Es wird ein Dialogfeld angezeigt, in dem Sie ausw\u00e4hlen k\u00f6nnen, welcher Kategorie Sie die Gruppe hinzuf\u00fcgen m\u00f6chten und wie der Name der neuen Gruppe lautet.<\/li>\n
                4. Die neue Gruppe wird in dem ausgew\u00e4hlten Abschnitt angezeigt. Ziehen Sie Elemente innerhalb dieses Abschnitts in die Gruppe, um sie der Gruppe hinzuzuf\u00fcgen. <\/li>\n<\/ol>\n

                  Eine bereits vorhandene Bibliothek bearbeiten<\/h3>\n
                    \n
                  1. Klicken Sie auf die Schaltfl\u00e4che „Zahnrad“ neben dem Namen der Bibliothek in der Palette Bibliotheken und w\u00e4hlen Sie „Bibliothek bearbeiten“.<\/li>\n
                  2. Klicken Sie mit der rechten Maustaste auf ein Element, das Sie bearbeiten m\u00f6chten, und w\u00e4hlen Sie „Details bearbeiten“, um seinen Namen und seine Beschreibung zu \u00e4ndern, oder „Inhalt bearbeiten“, um sein Aussehen und seinen Inhalt zu \u00e4ndern. Das Element wird in einer neuen Canvas-Registerkarte ge\u00f6ffnet, in der Sie \u00c4nderungen vornehmen k\u00f6nnen. \"Klicken<\/li>\n
                  3. Klicken Sie auf der Registerkarte Canvas des Elements auf die Schaltfl\u00e4che ‚Speichern‘, um Ihre \u00c4nderungen in der Bibliothek zu speichern.\"Klicken<\/li>\n<\/ol>\n

                    Sie k\u00f6nnen alle Elemente zur Bearbeitung \u00f6ffnen, indem Sie im Popup-Fenster der Schaltfl\u00e4che „Zahnrad“ die Option „Alle Widgets bearbeiten“ w\u00e4hlen. Nehmen Sie die \u00c4nderungen einzeln vor oder gehen Sie zum Men\u00fc Bearbeiten und w\u00e4hlen Sie ‚Stile ersetzen‘, um die Eigenschaften der einzelnen Elemente im Ganzen zu bearbeiten. <\/p>\n

                    Klicken Sie im Popup-Fenster der Schaltfl\u00e4che „Zahnrad“ auf „Alle Widgets speichern“, um Ihre \u00c4nderungen f\u00fcr alle Widgets zu speichern.<\/p>\n

                    Eine benutzerdefinierte Bibliothek freigeben<\/h3>\n

                    Mit nur zwei Klicks k\u00f6nnen Sie eine benutzerdefinierte Bibliothek mit Ihren Teamkollegen teilen:<\/p>\n

                    Klicken Sie auf die Schaltfl\u00e4che „Zahnrad“ neben dem Namen Ihrer Bibliothek in der Palette Bibliotheken und tippen Sie auf „Teilen“.
                    \n\"Klicken
                    \nIhre Teamkollegen k\u00f6nnen Ihre Bibliothek nun im Popup-Fenster ‚Weitere Bibliotheken‘ zur Verwendung in ihren Prototypen hinzuf\u00fcgen.<\/p>\n

                    Entfernen Sie den Zugriff anderer auf Ihre Bibliothek, indem Sie auf die Schaltfl\u00e4che „Zahnrad“ klicken und „Freigabe aufheben“ w\u00e4hlen.<\/p>\n

                    \u00c4nderungen an der Bibliothek festschreiben<\/h3>\n

                    Tippen Sie auf die Schaltfl\u00e4che „Zahnrad“ und w\u00e4hlen Sie im Popup-Fenster die Option „Best\u00e4tigen“, um die \u00c4nderungen an Ihrer Bibliothek hochzuladen. Teamkollegen k\u00f6nnen im Popup-Fenster der Schaltfl\u00e4che „Zahnrad“ auf „Aktualisieren“ klicken, um diese Aktualisierungen herunterzuladen.
                    \n\"Klicken<\/p>\n

                    <\/a>Generieren Sie ein Design System mit einem Klick<\/h2>\n

                    Bibliotheken sind nicht nur ein hervorragendes Mittel, um schnell konsistente Designs zu erstellen, sondern auch ein gro\u00dfartiges Werkzeug f\u00fcr die Kommunikation mit den Entwicklern. Wenn Sie den Entwicklern eine M\u00f6glichkeit bieten, alle in einer Bibliothek definierten Informationen zu visualisieren, k\u00f6nnen Sie die Konsistenz und Genauigkeit der UI der Softwareprojekte dieser Organisation verbessern. Justinmind bietet eine M\u00f6glichkeit, mit einem Klick eine Vorschau Ihrer Bibliothek zu erstellen und anzupassen. <\/p>\n

                      \n
                    1. Laden Sie die gew\u00fcnschte Bibliothek in die Palette Bibliotheken.<\/li>\n
                    2. Klicken Sie auf das ‚Zahnrad‘-Symbol neben dem Namen der Bibliothek und w\u00e4hlen Sie ‚Designsystem generieren‘.<\/li>\n
                    3. Es wird eine neue Prototyp-Datei mit allen Informationen in der Bibliothek erstellt (Farbbeschreibungen, definierte Textstile, die Komponenten mit ihren Beschreibungen und die Liste der Assets).<\/li>\n
                    4. Da es sich um eine Justinmind-Datei handelt, k\u00f6nnen Sie sie wie jeden anderen Prototyp oder jedes andere Design \u00e4ndern. Sie k\u00f6nnen es auch ver\u00f6ffentlichen und mit Entwicklern teilen oder einen Link erhalten und es auf einer Website ver\u00f6ffentlichen. <\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                      Zus\u00e4tzlich zu den grundlegenden Elementen in der Symbolleiste gibt es Tausende von anderen vorgefertigten Assets, die Sie kostenlos zu Justinmind hinzuf\u00fcgen k\u00f6nnen. Sie k\u00f6nnen auch Ihre…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8554,8560],"tags":[],"class_list":["post-129048","post","type-post","status-publish","format-standard","hentry","category-ausbildung","category-erste-schritte"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129048"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129048"}],"version-history":[{"count":0,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129048\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}