Post on 19-Jan-2017
transcript
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro
Es war noch nie so einfach
Dr. Adam G. Augustin - agametis
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Wer bin ich …
• selbständiger FileMaker Entwickler und Berater im Großraum München (zusammen mit Armin Egginger (CrossCheck) als Cross Solutions GmbH)
• FBA Mitglied
• Filemaker 12 und 13 zertifiziert
• Vorträge auf der FMK 2012 in Salzburg
• Kein Grafikdesign- aber Mathematikstudium
kontakt@agametis.de
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
… und was machen wir hier
• Benutzeroberflächen (GUIs), die unseren Usern Spaß machen sollen
• Was gibt uns FileMaker an die Hand
• Wie kann man die Möglichkeiten zur GUI Gestaltung einsetzen
• Viele Hands-Ons und Demos
• Ausblick auf meinen zweiten Vortrag nach der Kaffeepause „Moderne Benutzeroberflächen am Beispiel einer FileMaker Lösung“
• Interessante Quellen zum Thema GUI und „Design“
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Was gibt uns FileMaker an die Hand• Vieles, sehr vieles
• Seit 8: Autosizing (automatische Größe) von Layoutobjekten
• Seit 9: bedingte Formatierung
• Seit 10: Skripttigger, Tooltips
• Seit 11: Merge Fields (Platzhaltervariablen), Quick Find (Schnellsuche)
• Seit 12: Layout Themes/Designs, Window styles, Erweiterte Containerfelder
• Seit 13: Custom Themes/Designs, Popover-Tasten, Slider (Seitensteuerelement), Steuerung der Sichtbarkeit von Layoutobjekten, Gesten auf iOS und Windows 8.x, Perform Script On Server (PSoS) - Skript auf Server ausführen
• Seit 14: Navigationsbereiche, Button Bars, Steuerung der virtuellen Tastatur in Go und Pro auf Touch-Geräten, Tasten-Icons, App-Icons
• Seit ?: Custom Menus (Angepasste Menüs)
http://www.filemaker.com/products/filemaker-pro/version-comparison.html
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Skripttrigger in FileMakerAn
zahl der Skrip/rigger
10
14
18
22
26
FileMaker Pro Version
10 11 12 13 14
25
22
20
17
14
http://help.filemaker.com/app/answers/detail/a_id/7465/~/understanding-and-using-script-triggers
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Wie kann man die Möglichkeiten zur GUI Gestaltung einsetzen
• Dynamische Datenanzeige (mit Conditional Formating, Hide Object, Slider)
• Dateneingabe/Datenerzeugung, ohne den Kontext zu verlassen (mit Slider, PopOver)
• Kontrollierte Commits (mit Skripttriggern)
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Hands-On
Custom Themes/Designs
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Hands-On
Button Bars
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Demo
Slider
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Demo
PopOver
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Demo
Kontrolliertes Speichern
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Ausblick auf den nächsten Vortrag
Welche ist die native iOS-App und welche ist FileMaker?
„Moderne Benutzeroberflächen am Beispiel einer FileMaker Lösung“
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Interessante Quellen zum Thema
• Wissenswertes https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ (Apple iOS Human Interface Guidelines)
• Inspiration https://dribbble.com/tags/user_interface
• Tools & Icons https://color.adobe.com/create/color-wheel/ http://www.materialpalette.com/ https://icons8.com/
• SVG Icons
• Verschiedenes
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Q & A
Vielen herzlichen Dank
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Wir sehen uns nach der Kaffeepause
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Quellen: Wissenswertes
• https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ (Apple iOS Human Interface Guidelines)
• http://www.google.com/design/spec/material-design/introduction.html (Google Material Design Specs)
• http://ui-patterns.com/
• http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/
• http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/
• http://exisweb.net/mobile-menu-abtest
• http://exisweb.net/menu-eats-hamburger
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Quellen: Inspiration
• https://www.thedash.com/
• https://dribbble.com/tags/user_interface
• http://tech.co/5-go-websites-design-inspiration-2015-08
• http://www.pinterest.com/
• iTunes Appstore, Google Playstore
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Quellen: Tools & Icons
• https://inkscape.org/en/ - freies Graphikprogramm für SVG Icons
• http://colourco.de/ , https://color.adobe.com/ - Farbschema Generatoren
• http://gridpak.com/ - Layout Grid Generator
• http://www.blocklayer.com/GoldenRatio.aspx - Goldener Schnitt, einfach gehalten
• http://www.kostelijk.nl/thegoldenratiocalculator/index.php - Goldener Schnitt, sehr detailliert und sehr mathematisch
• https://www.iconfinder.com/, https://icons8.com/, http://www.flaticon.com/
• https://www.google.com/design/icons/
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Quellen: SVG Icons und Tools
• http://commons.oreilly.com/wiki/index.php/SVG_Essentials - Einführung
• https://fmhelp.filemaker.com/docs/14/en/svg/
• http://www.w3.org/Graphics/SVG/
• http://www.datamanix.com/downloads/ - FM SVG Gallery
• http://www.indats.com/2015/06/15/indats-icon-manager/- FM SVG Tool
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Quellen: Verschiedenes
• http://makerbook.net/ - A hand-picked directory of the best free resources for creatives
• http://help.filemaker.com/app/answers/detail/a_id/14403 (Appicon Infos)
• http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
• ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/
• http://youandsaturation.com/5-must-have-free-apps-for-graphic-designers/
Dr. Adam G. Augustin - agametis Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg www.filemaker-konferenz.com
Quellen: meine persönlichen Tools
• Digital Color Meter (MacOS, Farbenanalyse)
• MBS Plugin (MacOS, Syntax-Highliting und Variablen-Check)
http://www.monkeybreadsoftware.de/filemaker/
• fmWorkMate (speziell fmSyntaxColorizer )
http://www.freewebs.com/russellwatson/fmworkmate.htm
• fmXRaySpecs (FileMaker Layoutanalyse)
http://workflowdata.com/fmxrayspecs.html