Aktuelle Zeit: 24.08.2019 02:22

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]




Ein neues Thema erstellen Auf das Thema antworten  [ 10 Beiträge ] 
Autor Nachricht
 Betreff des Beitrags: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 16.10.2016 16:12 
Offline
Benutzeravatar

Registriert: 25.01.2011 04:48
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!


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 16.10.2016 16:47 
Offline
Benutzeravatar

Registriert: 08.09.2004 00:57
Wohnort: Berlin
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.70 | SpiderBasic 2.21 | Windows 10 Pro (x64) | Linux Mint 19.2 (x64)
"Die Jugend von heute mit ihren Ballerspielen, hocken nur in der Bude - wir haben früher die Leute noch draußen erschossen!"
Bild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 16.10.2016 18:30 
Offline
Benutzeravatar

Registriert: 25.04.2006 17:29
Wohnort: Nähe Hamburg
+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!"
PB 5.62, OS: Windows 7 Pro x64, Desktopscaling: 125%, CPU: I7 6500, RAM: 16 GB, GPU: Intel Graphics HD 520
Ich bin Baujahr 1968, also aktuell 51.


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 17.10.2016 07:57 
Offline
Benutzeravatar

Registriert: 25.01.2011 04:48
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.


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 17.10.2016 10:07 
Offline
Benutzeravatar

Registriert: 08.09.2004 00:57
Wohnort: Berlin
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.70 | SpiderBasic 2.21 | Windows 10 Pro (x64) | Linux Mint 19.2 (x64)
"Die Jugend von heute mit ihren Ballerspielen, hocken nur in der Bude - wir haben früher die Leute noch draußen erschossen!"
Bild


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 17.10.2016 11:33 
Offline
Benutzeravatar

Registriert: 25.01.2011 04:48
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. <)


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 17.10.2016 12:01 
Offline
Benutzeravatar

Registriert: 01.04.2007 20:18
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 5.70 LTS (Windows x86/x64) | Windows10 Pro x64 | Z370 Extreme4 | i7 8770k | 32GB RAM | iChill GeForce GTX 980 X4 Ultra | HAF XF Evo​​


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 17.10.2016 13:43 
Offline
Benutzeravatar

Registriert: 25.04.2006 17:29
Wohnort: Nähe Hamburg
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!"
PB 5.62, OS: Windows 7 Pro x64, Desktopscaling: 125%, CPU: I7 6500, RAM: 16 GB, GPU: Intel Graphics HD 520
Ich bin Baujahr 1968, also aktuell 51.


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 17.10.2016 13:54 
Offline
Benutzeravatar

Registriert: 21.08.2006 17:39
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


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags: Re: [GUI] Die richtige Bewegungs-Funktion
BeitragVerfasst: 22.10.2016 17:23 
Offline
Benutzeravatar

Registriert: 25.01.2011 04:48
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:
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


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 10 Beiträge ] 

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast


Sie dürfen keine neuen Themen in diesem Forum erstellen.
Sie dürfen keine Antworten zu Themen in diesem Forum erstellen.
Sie dürfen Ihre Beiträge in diesem Forum nicht ändern.
Sie dürfen Ihre Beiträge in diesem Forum nicht löschen.

Suche nach:
Gehe zu:  

 


Powered by phpBB © 2008 phpBB Group | Deutsche Übersetzung durch phpBB.de
subSilver+ theme by Canver Software, sponsor Sanal Modifiye