[GUI] Die richtige Bewegungs-Funktion

Fragen zu Grafik- & Soundproblemen und zur Spieleprogrammierung haben hier ihren Platz.
es_91
Beiträge: 383
Registriert: 25.01.2011 04:48

[GUI] Die richtige Bewegungs-Funktion

Beitrag von es_91 »

Hi.

Dachte, wir machen hier mal eine Ideensammlung.

Folgendes Thema: Wenn man Steuerelemente oder ganze Fenster in die bestehenden Formstrukturen hineinanimieren möchte, hilft oft nur der Griff zur Transparenz, die bei System-Steuerelementen auch über's System gelöst werden muss.
(Beim Selbstzeichnen - Canvas, Image, Window - kann man ja selbst transparent zeichnen - nicht aber bei Systemsteuerelementen, es sei denn, man nutzt ScreenShots um diese selbst transparent drüber zu zeichnen... hoffe war verständlich)

Aber die einzige mir bekannte Alternative zu Transparenz-Effekten sind Bewegungseffekte - das Element wird also nicht (oder nicht nur) weich eingeblendet, sondern vom Fensterrand hineinbewegt. Das sieht, tut man es mit einer linearen Bewegungsfunktion, sehr schäbig aus.

Doch benutzt man etwas ausgefeiltere Funktionen wirkt der Drag-In-Effekt (sei einfach mal so genannt) schon anspruchsvoller und der Benutzer kann ihn akzeptieren, ohne den Programmierer für einen Depp zu halten.

Wie könnten solche "Reinziehfunktionen" aussehen?

Meine Ideen:

Sinusfunktion von 0° bis 180° (Pi) verwenden (wobei der Sinuswert natürlich das Positionsdelta und nicht die absolute Position beschreibt)

Aber diese muss genau ausbalanciert (oder genialstgenau berechnet) werden, um natürlich zu wirken und genau zu sitzen.

Also dachte ich, man könnte diese noch verwurzeln bzw. potenzieren, um besseren Effekt zu erhalten. Hatte gestern eine schöne Reinzieheinblendung mit Sin^1,5 gemacht. Aber "rund" war diese immer noch nicht.

Vielleicht sollte man folgendes tun: Da die Beschleunigung einer Bewegung vielleicht träger als die Verzögerung (das "Abbremsen") wirken sollte, kann man für das Positionsdelta eine Sinusfunktion von 0° bis 90° mit der Potenz 1,5 bis 3 verwenden - die Bewegung springt also stark verzögert und träge an, wird aber rasch schneller. Dann nutzt man für den "Abklang" der Bewegung, für das Bremsen, den Rest des normalen Sinus-Bogen (90° bis 180°).

Freilich professionell wirkt das alles aber noch nicht. Darum frage ich hier nach Ideen. Richtig gut wirkende Zieh- und Blend-Effekte sind mir neulich beim Setup von Visual Studio 2013/2015 aufgefallen ... dort war auch "ge-fade-te" Opazität im Spiel (Transparente Ein- und Ausblendung). Aber ganz so professionell müssen wir hier gar nicht werden, experimentieren wir doch erstmal mit grundlegenden Formeln.

Ich hoffe auf Eure Meinungen und Erfahrungen. Danke für jeden Tipp!
Benutzeravatar
ts-soft
Beiträge: 22292
Registriert: 08.09.2004 00:57
Computerausstattung: Mainboard: MSI 970A-G43
CPU: AMD FX-6300 Six-Core Processor
GraKa: GeForce GTX 750 Ti, 2 GB
Memory: 16 GB DDR3-1600 - Dual Channel
Wohnort: Berlin

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von ts-soft »

es_91 hat geschrieben:Ich hoffe auf Eure Meinungen und Erfahrungen. Danke für jeden Tipp!
Bestimmt nicht was Du hören möchtest, aber Du hast ja drum gebeten!

Jedes Steuerelement/Control sollte mit allen Elementen möglichst immer sofort angezeigt werden, damit man das eigentliche Programm
schnell nutzen kann. Alle Verzögerungen, die nur visuelle Effekte erhaschen wollen, sind überflüssig und nervig.

Eine gute Benutzerführung, nicht so Überladen bzw. gute Aufteilung (z.B. Tabs, mehrere Dialoge o. ä.), sind wesentlich wichtiger.

Wenn man aber Programme sucht, die einem die Zeit stehlen, dann ...

Gruß
Thomas
PureBasic 5.73 LTS | SpiderBasic 2.30 | Windows 10 Pro (x64) | Linux Mint 20.1 (x64)
Nutella hat nur sehr wenig Vitamine. Deswegen muss man davon relativ viel essen.
Bild
Benutzeravatar
Kurzer
Beiträge: 1614
Registriert: 25.04.2006 17:29
Wohnort: Nähe Hamburg

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von Kurzer »

+1

Ich halte von alledem auch nichts, um es mal milde auszudrücken.

Warum lässt Du nicht jedes Control, um drei Achsen rotierend, aus dem dreidimensionalen Raum hereinwirbeln. Am besten noch mit einem epischen Hans Zimmer Soundtrack untermalt - und damit es nicht so aussieht, als hätte der Programmierer nichts drauf, solltest Du das ganze in Echtzeit rendern und die umliegenden Fenster und den Desktop auf spiegelnden und lichtbrechenden Controls projizieren.

Ganz ehrlich, wenn es darum geht sein Können zu zeigen, dann programmier einfach ein geiles 3D-Demo und gestalte die GUI einer normalen Applikation so, wie ts-soft es schon beschrieben hat.
"Never run a changing system!" | "Unterhalten sich zwei Alleinunterhalter... Paradox, oder?"
PB 6.02 x64, OS: Win 7 Pro x64 & Win 11 x64, Desktopscaling: 125%, CPU: I7 6500, RAM: 16 GB, GPU: Intel Graphics HD 520
Useralter in 2023: 56 Jahre.
es_91
Beiträge: 383
Registriert: 25.01.2011 04:48

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von es_91 »

Da haben wir uns ein wenig falsch verstanden, aber die Antworten sind doch von der Art, worum ich gebeten hatte und Probleme hab ich damit natürlich nicht. :wink:

Was ts-soft sagt stimmt natürlich für recht volle Fenster, oder generell für Fenster, die keinen Wizard-Stil nutzen, sondern direkte, übersichtliche Eingabe erfordern. Bei einem Programm wie Excel oder irgendeinem Videokonverter, wo mehr als eine Eingabe stattfinden soll, würde ich sowieso keine Blenden nutzen.

Aber wie verhält sich das bei Fenstern mit wenig Eingabe - zum Beispiel bei einem Setup oder einem angesprochenen Wizard?

Hier geht es auch nicht um das Können des Programmierers sondern letztlich mehr um die Einzigartigkeit der Oberfläche. Ein Setup, zum Beispiel, sieht im Grunde immer gleich aus, zumindest von den Elementen her. Auch Wizards ähneln sich im Aufbau eigentlich alle. Will man hier eine Identität schaffen, muss man etwas eigenes hinzufügen.

Also möchte ich nochmal betonen, dass es nicht um volle Fenster mit Übersicht, sondern um Anwendungen, die durch diese Blenden den zeitlichen/hierarchischen Ablauf ihrer Interaktion mit dem Nutzer deutlich machen. (Also um sinnvollen Einsatz.)

Es gibt doch Fälle, wo ein direkt eingeblopptes GUI nachteilig wirkt gegenüber Einblendungen.

/Edit: An dieser Stelle könnte ich mal fragen, wie man die Windows-Option "Alle nicht erforderlichen Animationen deaktivieren" abfragt, um im Zweifelsfall dann keine Blenden darzustellen, wenn der Nutzer es generell so wünscht.
Benutzeravatar
ts-soft
Beiträge: 22292
Registriert: 08.09.2004 00:57
Computerausstattung: Mainboard: MSI 970A-G43
CPU: AMD FX-6300 Six-Core Processor
GraKa: GeForce GTX 750 Ti, 2 GB
Memory: 16 GB DDR3-1600 - Dual Channel
Wohnort: Berlin

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von ts-soft »

es_91 hat geschrieben:Aber wie verhält sich das bei Fenstern mit wenig Eingabe - zum Beispiel bei einem Setup oder einem angesprochenen Wizard?

Hier geht es auch nicht um das Können des Programmierers sondern letztlich mehr um die Einzigartigkeit der Oberfläche. Ein Setup, zum Beispiel, sieht im Grunde immer gleich aus, zumindest von den Elementen her. Auch Wizards ähneln sich im Aufbau eigentlich alle. Will man hier eine Identität schaffen, muss man etwas eigenes hinzufügen
Bei einem Setup will ich mich lediglich schnell durchklicken und mir dabei möglichst keine Malware installieren. Bereits bekannte
Installer sind am einfachsten zu händeln. Ich will nicht laufend neue "Identitäten" kennen lernen, weil das kostet Zeit und somit auch
Geld. Mag sein, das Deine Idee für "Fun-Nutzer", mit viel Sinn für Unnützes interessant ist. Aber ich brauche möglichst in kurzer Zeit
Ergebnisse und keine Sucharien.

Für Hobby-Nutzer, mit viel Spieltrieb, ist es vielleicht Interessant, mir fällt es immer schwerer die richtig nützlichen Programme zu
finden, wo nur das schnelle Ergebnis zählt. Animationen sollten nur für "In Arbeit" oder "Fortschrittsanzeige" genutzt werden.

Ich bin da auch sehr Konservativ und neue moderne GUIs find ich nicht so gut. Macht für mich auch keinen Sinn.

Gruß
Thomas
PureBasic 5.73 LTS | SpiderBasic 2.30 | Windows 10 Pro (x64) | Linux Mint 20.1 (x64)
Nutella hat nur sehr wenig Vitamine. Deswegen muss man davon relativ viel essen.
Bild
es_91
Beiträge: 383
Registriert: 25.01.2011 04:48

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von es_91 »

ts-soft hat geschrieben:Ich bin da auch sehr Konservativ und neue moderne GUIs find ich nicht so gut. Macht für mich auch keinen Sinn.
Und unter diesem Aspekt ergibt diese Haltung der strikten Ablehnung von Animationen dann auch Sinn. :wink: Gut, dass Du's hinzugeschrieben hast. <)
Benutzeravatar
Bisonte
Beiträge: 2427
Registriert: 01.04.2007 20:18

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von Bisonte »

Ich bin voll und ganz der Meinung von Kurzer und TS-Soft.

Eine spartanische Oberfläche, mit wenig Elementen (nur die auch wirklich gebraucht werden um das Programmziel zu erreichen),
sinnvoll angeordnet ist um Längen besser und hat "mehr Identität", als eine "Schnörkelgrube".

Aber auch für deine Art gibt es eine Zielgruppe... aber die sind wir nicht ;)
PureBasic 6.04 LTS (Windows x86/x64) | Windows10 Pro x64 | Asus TUF X570 Gaming Plus | R9 5900X | 64GB RAM | GeForce RTX 3080 TI iChill X4 | HAF XF Evo | build by vannicom​​
Benutzeravatar
Kurzer
Beiträge: 1614
Registriert: 25.04.2006 17:29
Wohnort: Nähe Hamburg

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von Kurzer »

Mich würde es interessieren, ob es auch Anwender gibt, die einer animierten GUI etwas abgewinnen können (um dann im Anschluss zu prüfen, ob es z.B. am Alter des Users liegt).

Ich bin in solchen Dingen sehr strikt und lebe in einigen Bereichen vermutlich "in meiner eigenen Welt", aber bei diesem GUI-Thema ist meine Einstellung aus der Erfahrung heraus entstanden. So stelle ich an Windows-Rechnern, an denen ich arbeiten muss, generell alle GUI Animationen ab und arbeite im alten Windows 2000 Theme (die grauen, eckigen Fenster). Ich finde es einfach effektiver, wenn man einige Dinge aus der Gewohnheit heraus schnell und einfach bedienen kann, weil es eben in anderen Programmen auch so ist oder weil es eben schon immer so war.

Ich habe nichts gegen neue Funktionen, die ein gewünschtes Ergebnis in einem anderem Workflow schneller zustande bringen, aber alte Workflows/Funktionen einfach nur des Effektes wegen zu ändern oder unübersichtlich zu machen, dagegen habe ich etwas.

Für mich persönlich habe ich gemerkt, wie massiv störend eine kleine Änderung sein kann, als ich das erste mal an diesem Microsoft Excel 365 sitzen musste. Da wurde die Markierung der aktiven Zelle erstmals mit einem "1 Pixel Softscrolling" von einer Zelle zur anderen animiert. Das hat mich derart durcheinander gebracht, dass ich einfach nicht produktiv arbeiten konnte. Nach zwei Stunden war ich dann auf der Suche nach dem Registry-Hack, der den Sch"§//"$ abstellt.
Kundenbindung geht bei mir anders.
"Never run a changing system!" | "Unterhalten sich zwei Alleinunterhalter... Paradox, oder?"
PB 6.02 x64, OS: Win 7 Pro x64 & Win 11 x64, Desktopscaling: 125%, CPU: I7 6500, RAM: 16 GB, GPU: Intel Graphics HD 520
Useralter in 2023: 56 Jahre.
Benutzeravatar
man-in-black
Beiträge: 362
Registriert: 21.08.2006 17:39

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von man-in-black »

Moinsen,

ich tendiere auch eher zu eckig und einfach, aber bei den Wizards oder allgemein Konfiguratoren finde ich
es schon sinnvoll, um den Blick des Anwenders zu führen. Manchmal poppen beim Anhaken einiger Optionen massig
Zusatzgadgets etc. auf und zerschießen das "Gadgetmuster".
Ein schneller fade-in oder roll-in zeigt dem Nutzer, was neu ist und welche Gadgets bereits bekannt sind.
(a la sich nach unten öffnendes Popup unter dem jeweiligen Gadget)
Aber auch dabei ist einfach meist besser. Bisher bin ich jedoch stets mit Gadgetgruppen oder Frames bestens klar gekommen.

Bezüglich Funktion:
Wenn ich mich recht an alte Projekte erinnere, dann sah eine lineare Bewegung mit leichtem Abbremsen umittelbar vor dem Ziel ganz nett aus. Ob linearer Anstieg oder nen Quadrat in der Bremse, weiß ich nichtmehr.

Edit: zu Kurzer
Von dem animierten Zeilenwechsel etc. halte ich auch nichts. Das Schreiben ist dadurch total indirekt geworden.
(hab alles, kann alles, weiß alles!!^^)

Bild
es_91
Beiträge: 383
Registriert: 25.01.2011 04:48

Re: [GUI] Die richtige Bewegungs-Funktion

Beitrag von es_91 »

Bisonte hat geschrieben:Eine spartanische Oberfläche, mit wenig Elementen (nur die auch wirklich gebraucht werden um das Programmziel zu erreichen),
sinnvoll angeordnet ist um Längen besser und hat "mehr Identität", als eine "Schnörkelgrube".

Aber auch für deine Art gibt es eine Zielgruppe... aber die sind wir nicht ;)
Ich fühl mich wahrscheinlich gerade genausowenig angesprochen wie >>Ihr<< von Blenden und Animationen.

Nochmal, es geht hier nicht um das für und wieder, sondern das "wie". Aber wenn das hier mittlerweile >>Euer<< Privatforum geworden ist halte ich mich gern fern.

Grüße

/PS: An sowas hatte ich gedacht: (Blaupause eines frühen Projektstadiums)

Code: Alles auswählen

declare processEvents ()

DejaVu = loadFont (#pb_Any, "DejaVu Sans", 12)

aurora = openWindow (#pb_Any, 0, 0, 448, 630, "Setup", 
                     #pb_Window_Borderless | #pb_Window_Screencentered | 
                     #pb_Window_Invisible)

setWindowColor (aurora, rgb (43, 43, 43))

resizeWindow (aurora, #pb_Ignore, #pb_Ignore, #pb_Ignore, 0)

hideWindow (aurora, #false)

for angle = 0 to 180 step 3
  
  delay (10)
  
  if windowHeight (aurora) + 
     pow (radian (90), -1) * 630 / 21 * pow (sin (radian (angle)), 1.5) > 630
    
    break
    
  endIf
  
  resizeWindow (aurora, #pb_Ignore, #pb_Ignore, #pb_Ignore, 
                windowHeight (aurora) + 
                pow (radian (90), -1) * 630 / 21 * pow (sin (radian (angle)), 1.5))
  
  processEvents ()
  
next

processEvents ()

resizeWindow (aurora, #pb_Ignore, #pb_Ignore, #pb_Ignore, 630)

text1 = textGadget (#pb_Any, 25, 250, 400, 50, "")
hideGadget (text1, #true)
setGadgetColor (text1, #pb_Gadget_Frontcolor, rgb (213, 213, 213))
setGadgetColor (text1, #pb_Gadget_Backcolor, getWindowColor (aurora))
setGadgetText (text1, "Bitte warten...")
setGadgetFont (text1, fontid (DejaVu))
contBottom = containerGadget (#pb_Any, 0, windowHeight (aurora) - 100, 448, 100, 
                              #pb_Container_Borderless)
closeGadgetList ()
setGadgetColor (contBottom, #pb_Gadget_Backcolor, rgb (85, 85, 85))

hideGadget (text1, #false)

for lum = 5 to 85 step 5
  
  setGadgetColor (contBottom, #pb_Gadget_Backcolor, rgb (lum, lum, lum))
  setGadgetColor (text1, #pb_Gadget_Frontcolor, rgb (25.0 / pow (1.0 / lum, 0.5), 
                                                     25.0 / pow (1.0 / lum, 0.5), 
                                                     25.0 / pow (1.0 / lum, 0.5)))
  
  processEvents ()
  
  delay (20)
  
next

repeat : until waitWindowEvent () = #pb_Event_Closewindow

end

procedure processEvents ()
  
  repeat
    
  until windowEvent () = #null
  
endProcedure
Antworten