Axure Prototyping (RP 8): Tiny Scrollbar

Von 7. Juli 2017 News, isolutions academy

Axure Prototyping (RP 8): Tiny Scrollbar

Die Scrollbar berücksichtigt die Interaktion des Benutzers. In der neusten Design Sprache von Microsoft nennt sich dies ein Conscious Control. Die Scrollbar funktioniert mittels Touch und Mouse Eingabe.

Der Aufbau
Ein Dynamic Panel «Container» dient als Container. Darin befindet sich der Scrollbereich «Scroll Area» ebenfalls als Dynamic Panel. Das DP wird als vertikal scrollbar definiert. Damit die Standard Scrollbar des Panels nicht sichtbar ist, wird das Panel um 20px vergrössert. Somit liegt die Scrollbar ausserhalb des sichtbaren Bereichs des Containers.
In diesem Panel wiederum befindet sich ein weiteres für den Inhalt «Content». Der Grund ist, dass wir später den Inhalt nicht nur durch scrollen, sondern auch durch Drag & Drop verschieben werden.

Download Axure Prototype

Funktionen auf der Page
Beim Laden der Page wir initial die Scrollbar Höhe gesetzt. Dies natürlich im Verhältnis von Inhalt zum Scrollbereich.

Funktionen auf dem Container
Die Scrollbar wird erst angezeigt, wenn der Benutzer mit der Maus in den Scrollbereich navigiert. Die Events dazu sind OnMouseEnter und OnMouseOut.

Funktionen auf der Scroll Area
Nun wird definiert dass sich das Scrollbar Element beim Scrollen mit der Maus an die richtige Position mitbewegt. Die Events dazu sind OnScrollUP und OnScrollDown. Die Scrollbar wird über die Move Funktion neu positioniert. Natürlich muss das Verschiebungsverhältnis zwischen Inhalt und Scrollbar berücksichtigt werden.

Funktionen auf der Scrollbar (2)
Über einen Hot Spot wird um die thiny Scrollbar ein sensitiver Bereich gelegt. Navigiert der Benutzer mit der Maus in diesen Bereich, so wird die Scrollbar verbreitert damit der Benutzer die Scrollbar mit der Maus besser greifen kann.

Funktionen auf der Scrollbar
Damit die Scrollbar auch mit der Maus gezogen werden kann, wird auf diesem Element die Drag & Drop Funktion integriert. In der globalen Variable «DragScrollbar» wird gespeichert ob der Benutzer bereits am Ziehen ist. Dies ist wichtig damit die Scrollbar nicht ausgeblendet wird sobald sich die Maus während des Ziehens neben der Scrollbar befindet.
Da sich die Funktion des Scrollens und Draggens auf dem selben Element nicht vertragen, wird beim Draggen zuerst ein Anker Element verschoben. Danach kann man den Inhalt an die Position des Ankers scrollen lassen.

Ich hoffe dieser kleine Prototyp hilft euch rascher einen sauber scrollenden Bereich für Maus und Touch Interaktion erstellen zu können.

5. Dezember 2018 in News, Office 365

Microsoft Teams als Entwicklungsplattform für Geschäftsapplikationen

Microsoft Teams als Entwicklungsplattform für Geschäftsapplikationen Microsoft Teams fügt sich perfekt in…
Weiterlesen
6. September 2018 in News

Datensicherheit und Datenschutz in der Schweiz – sind Sie (sich) sicher?

In meinen vorherigen Blogposts habe ich mich mit der EU Datenschutzverordnung (GDPR)…
Weiterlesen
20. August 2018 in News

Über den verantwortungsvollen Einsatz von künstlicher Intelligenz (KI) in der Kundeninteraktion

Im Spannungsfeld von Verhaltensökonomie, Technologie und Ethik. Was Sie in den nächsten…
Weiterlesen
Teilen Sie diese Seite auf Social Media oder via E-Mail.