kanone

Design der Apps

Ziel des einheitlichen Designs ist ein durchgängiges Benutzererlebnis durch alle Apps der DropNet AG. Die einheitliche Bedienung macht es dem Benutzer einfacher, die Apps intuitiv zu verstehen und zwischen den Apps zu wechseln. Wer eine App der DropNet AG kennt, kann sich innert Minuten in alle anderen Apps einarbeiten. Damit das gelingt, sind einige grundlegende Definitionen erforderlich. Auch kundespezifische Apps halten sich wenn immer möglich an diese Konventionen. DropNet AG stellt diese Definitionen frei zur Verfügung, damit Partner auch die Möglichkeit haben, Apps im einheitlichen Design zu programmieren. Fast alle Apps beginnen oben mit dem grauen Searchbar.

Alle Elemente in diesem grauen Design sind nur für die Selektion der Daten und nie für die Bearbeitung zuständig. So kann der Benutzer in dieser Liste Selektionen treffen, Parameter umstellen oder einfach Klicken, ohne Angst haben zu müssen, dass irgendwelche Daten verändert werden. Es wird immer nur die Darstellung verändert.

Die Buttons

Wie bei allen Applikationen üblich, setzt auch DropNet Buttons zum Klicken ein. Hier sind sie aufgelistet und beschrieben. Grundsätzlich orientieren sich die Buttons am Design des Font Awesome und Bootstrap. Die Höhe ist aber auf 26px reduziert, damit die Knöpfe nicht all zu viel Platz einnehmen.

Die Buttons haben die Klasse “dropnet-button”, welche auch die Dimensionen definiert.

button-continue.gifFür mehrschrittige Formulare.
button-continue-inaktiv.gif 
button-back.gifDieser Knopf führt den Benutzer immer auf die vorhergehende Seite.
button-goback-inaktiv.gif 
button-edit.gifBearbeiten eines Datensatzes
button-delete.gifLöschen eines Datensatzes. Es braucht immer eine Sicherheitsabfrage.
button-ok.gifOk
button-not-ok.gifAbbruch
button-plus.gifNeuer Datensatz erstellen
button-help.gifHilfe
button-lost.gifProjekt verloren
button-mail.gif, button-send.gifAbschicken einer Mail
button-prepare.gifFür Zukunft vorbereiten
button-preview.gifVorschau
button-search.gifSuchen
button-print.gifDrucken
button-save.gifSpeichern
button-save-mail.gifSpeichern und als Mail versenden
button-mail-ok.gifMail mit Annahme (DropTours)
button-mail-declined.gifMail mit Ablehnung (DropTours)
button-save-as-template.gifAls Vorlage speichern
button-save-add.gifSpeichern und neuer Datensatz erstellen
button-upload.gifHochladen
button-bill.gifRechnungen in DropDebi erstellen
button-maillist.gifAn DropMailing Daten übergeben
button-pdf.gifPDF exportieren
button-doc.gifWord exportieren
button-excel.gifExcel exportieren
button-vcard.gifVcard exportieren
button-fritzbox.gifExport der Daten für die Fritzbox

Farben

rot#ed696f
dropnet blau#3366cc
grau inaktiv#cccccc
grau aktiv#555555
standarddropnetdatefilename
2010-10-23album-next.gif
2010-10-23album-prev.gif
2007-06-01arrow-down.gif
2007-06-01arrow-left.gif
2007-06-01arrow-right.gif
2007-06-01arrow-up.gif
2019-02-05close.gif
2011-05-14closer.gif
2015-02-01closer.png
2010-09-14document-add-bottom.gif
2010-09-15document-add.gif
2008-12-27document-archive.gif
2013-10-19document-clip-blue.gif
2013-10-19document-clip-grey.gif
2012-01-25document-clone-inaktiv.gif
2007-03-19document-clone.gif
2007-08-24document-comment-inaktiv.gif
2007-08-24document-comment-plus.gif
2007-08-24document-comment.gif
2015-07-10document-component.gif
2008-06-25document-computer.gif
2008-07-03document-download-zip.gif
2012-10-02document-droptime.gif
2014-07-18document-edit-ckeditor.png
2007-08-23document-edit-inaktiv.gif
2007-03-26document-edit.gif
2007-04-18document-error.gif
2009-05-19document-folder-close.gif
2009-05-19document-folder-open.gif
2009-05-19document-folder.gif
2010-05-18document-hide.gif
2017-04-04document-image-inaktiv.gif
2017-04-04document-image.gif
2008-07-17document-info.gif
2015-07-03document-link.gif
2007-03-19document-list.gif
2008-11-07document-mac.gif
2019-02-01document-mail-inaktiv.gif
2012-03-14document-mail-settings.gif
2019-02-01document-mail.gif
2011-01-02document-navigation-inaktiv.gif
2011-01-02document-navigation.gif
2009-11-30document-new-inaktiv.gif
2007-08-23document-new-payment-inaktiv.gif
2007-08-23document-new-payment.gif
2007-03-19document-new.gif
2018-09-09document-panorama.gif
2007-08-03document-pay.gif
2015-10-08document-photo.gif
2008-10-29document-print.gif
2007-07-29document-reminder.gif
2008-10-29document-restore.gif
2018-09-17document-rotateccw.gif
2018-09-17document-rotatecw.gif
2010-05-18document-settings.gif
2013-09-06document-slideshow.gif
2014-12-31document-snippet.gif
2018-12-13document-stats-blue.gif
2018-12-13document-stats-grau.gif
2015-01-07document-stats-green.gif
2008-08-11document-stats-inaktiv.gif
2015-01-07document-stats-orange.gif
2008-08-11document-stats.gif
2013-08-15document-template.gif
2010-05-19document-user-add.gif
2008-02-18document-view-inaktiv.gif
2007-03-19document-view.gif
2008-11-07document-win.gif
2014-03-06folder-edit.jpg
2008-08-19folder-new.gif
2019-02-05folder.gif
2015-05-08menu-black-closer.png
2015-05-08menu-black.png
2015-05-08menu-blue-closer.png
2015-05-08menu-blue.png
2015-05-07menu-grey-closer.png
2015-07-08menu-grey.png
2015-05-08menu-red-closer.png
2015-05-08menu-red.png
2016-03-16menu-violett-closer.png
2016-03-16menu-violett.png
2015-05-08menu-white-closer.png
2015-05-08menu-white.png
2019-02-05open.gif
2018-10-04pdf.gif
2015-02-01photo_next.png
2014-10-23photo_next_white.png
2015-02-01photo_prev.png
2014-10-23photo_prev_white.png
2016-02-23public-login.png
2016-02-23public-logout.png
2016-02-23public-settings.png
2018-08-03rotateccw.gif
2018-08-03rotatecw.gif
2008-03-03search_delete.gif
2007-03-29search_first.gif
2007-03-29search_last.gif
2013-05-05search_lupe.gif
2007-03-29search_next.gif
2010-09-22search_pause.gif
2010-09-22search_play.gif
2007-03-29search_prev.gif
2009-12-28search_today.gif
2010-10-09search_up.gif
2014-06-09shop-waegeli.gif
2011-04-07status-declined.gif
2008-11-07status-error.gif
2008-11-07status-info.gif
2009-08-21status-not-ok.gif
2009-08-21status-ok.gif
2007-08-02status-smiley-0.gif
2007-08-02status-smiley-1.gif
2007-08-02status-smiley-2.gif
2015-08-10status-smiley-3.gif
2007-08-02status-smiley-4.gif
2018-09-24status-smiley-9.gif
2008-06-24status-wait-big.gif
2008-06-25status-wait.gif
2008-11-07status-warning.gif
2009-12-28status_busy.gif
2009-12-28status_free.gif
2009-12-28status_reservation.gif
2007-05-29tab_settings.gif
2007-08-23team-admin-inaktiv.gif
2007-08-23team-admin.gif
2007-08-23trash-bin-inaktiv.gif
2009-01-07trash-bin-warning.gif
2007-03-19trash-bin.gif
2017-03-17triangle-down-black.png
2017-03-17triangle-down-grey.png
2007-08-02triangle-grey.gif
2007-05-15triangle_down_blue.gif
2007-05-15triangle_down_grey.gif
2016-01-27triangle_left_blue.gif
2016-01-27triangle_right_blue.gif
2007-05-15triangle_up_blue.gif
2007-05-15triangle_up_grey.gif
2019-02-05w3c.gif
2013-10-25weather-1.gif
2013-10-25weather-2.gif
2013-10-25weather-3.gif
2013-10-25weather-4.gif
2013-10-25weather-5.gif
2013-10-25weather-6.gif

Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/opt2/dropnet/httpd/htdocs/dropnethttp://docs.dropnet.ch/index.php/DropTours:DropTours) is not within the allowed path(s): (/tmp:/var/tmp:/opt2/dropnet/httpd/htdocs/dropnet:/opt2/dropnet/httpd/php:/raid/drive/customer/dropnet:/usr/local/bin_safe:/opt2/dropnet/httpd/dropnetimages/dropbox/standard:/opt2/dropnet/httpd/dropnetimages/touren:/opt2/dropnet/httpd/htdocs/dropbox) in /opt2/dropnet/httpd/php/dropnet/menu.class.php on line 1398