Was ist der beste Weg, um anzuzeigen, dass Sie in einem Bereich scrollen können, wenn der Bereich keine Bildlaufleiste hat?


13

Das einzige, was mir einfiel, war zu sagen: "Scrollen, um das gesamte Menü zu sehen". Wie machen es andere Leute?


3
Pfeile? Der Kontext wäre sehr wichtig. Können Sie eine Probe posten?
Scott

2
Warum brauchst du das? Es gibt keine Bildlaufleisten für Mobilgeräte und OSX, die Leute sind nicht verwirrt.
Bjb568

2
Es ist ein Problem, das von jemand anderem verursacht wurde und das wir nicht beheben können. Deshalb müssen wir es umgehen.
Morgan

@ bjb568: Ich habe einige Apps verwendet, bei denen ich nicht wusste, dass ich in eine bestimmte Richtung scrollen kann. Wenn der Bildschirm einen Teil dessen abschneidet, was ich in die eine oder andere Richtung sehen kann, ist es klar, aber manchmal richten sich die Dinge genau richtig an den Bildschirmrändern aus, und die Benutzer erkennen nicht, dass sie scrollen können / müssen. Es hat eine Weile gedauert, bis mir klar wurde, dass ich zum Beispiel in der neuen Facebook-App seitwärts scrollen kann.
Mooing Duck

@MooingDuck Facebook zählt nicht, es ist Mist: P Aber ja, du musst Sachen machen wie das, was Confused gesagt hat.
bjb568

Antworten:


9

Die Menschen haben eine gute Beziehung zur physischen Relativität in Benutzeroberflächen. Mit anderen Worten, wenn Sie möchten, dass sich eine Benutzeroberfläche natürlich anfühlt oder deren Steuerung offensichtlich wird, können Sie das Erscheinungsbild des physischen Realismus verwenden, um dies zu tun. Richtige Symbole sind für eine offensichtliche Funktionalität immer ein Muss.


Wie würde ein Bildlaufbereich physisch aussehen? Einfach! Eine Inhaltsebene unter einem äußeren Rahmen. Um diesen Look zu erzielen, können Sie einen Rahmenschatten auf der äußeren Ebene verwenden.

  • Tipp: Beim Erstellen von CSS-Box-Shadows können Sie mehrere Shadows mit Kommas zusammenfassen. Verwenden Sie einen hellen, fernen Schatten mit einem stärkeren, kurzen für einen schönen Effekt. Verwenden Sie RGBA (Opazitätssteuerung) für eine leichte Berührung!

Als nächstes, ohne eine Bildlaufleiste, wäre es die beste Methode, JQuery mit einem anklickbaren Bildlauffeld zu verwenden, das an den Rändern von Frames angebracht ist, deren Inhalt einen Bildlauf durchläuft eine der vier Richtungen.

Wenn die Leiste standardmäßig nicht vorhanden oder ausgeblendet sein soll, lassen Sie sie entweder ausgeblendet oder leicht undurchsichtig, bis der Bildlaufbereich darüber oder darüber getippt wird. Anschließend wird der Bildlaufmechanismus angezeigt.

  • Einfache Verwendung: Die Box sollte beim Hover-Ereignis leicht und bei gedrückter Maustaste vollständig aktiviert werden (und mit dem Scrollen des untergeordneten Elements beginnen).

Hier ist eine Demonstration:

Bildbeschreibung hier eingeben

Bei langen Bildlaufbereichen ist ein beschleunigtes Scrollen ein Muss, da sonst die Fähigkeit des Benutzers zum schnellen Navigieren im Inhalt beeinträchtigt wird.


Nachdem ich damit experimentiert habe, denke ich, dass ich ein JQuery-Plugin für erstellen und diese Vorgehensweise für meine nächste Web-App verwenden kann.


6

Stellen Sie sicher, dass in der Standardinhaltsmenge, die zuerst angezeigt wird, ein Element am unteren Rand angezeigt wird (unter der Annahme eines vertikalen Bildlaufs), das nur teilweise angezeigt wird. Auf diese Weise wird der Benutzer darüber informiert, dass unten mehr vorhanden ist, und er kann es erreichen / anzeigen.


Windows (/ Phone) 8 scheint dies ziemlich oft horizontal zu tun - wenn ein Titel mehr als den verfügbaren horizontalen Platz einnimmt, werden Sie aufgefordert, nach links / rechts zu streichen, um weitere Optionen anzuzeigen.
Katana314

1
Möglicherweise mit einem leichten Gradienten für Ausblendung / Deckkraft am unteren Rand, um anzuzeigen, dass mehr vorhanden ist.
wchargin

4

Folgendes würde ich versuchen:

Ein weicher Farbverlauf, der ein wenig über den Inhalt geht. Dies zeigt an, dass es unten mehr gibt. Zusätzlich können Sie natürlich einen kleinen Pfeil hinzufügen.

Bildbeschreibung hier eingeben


Danke - ich habe die anderen Antworten überprüft, um sicherzustellen, dass ich nicht wiederholt habe.
13.

2

Wie offensichtlich Sie es machen wollen, hängt davon ab, wer Ihrer Meinung nach das Publikum sein wird und in welchem ​​Kontext.

Übliche Techniken zur Wegfindung wie Pfeile und Grafiken, die über die Falte hinaus fortgesetzt werden, können dem Benutzer dabei helfen, sich fortzubewegen. Alternativ können Sie sich für ein verankertes Menü- / Navigationssystem entscheiden, das von vielen Websites mit nur einer Seite verwendet wird.

Die offensichtlichste und hässlichste Lösung wäre ein Popup, das die Benutzer auffordert, nach unten zu scrollen, um mehr Inhalt zu erhalten, und das dann ausgeblendet wird, wenn der Schauspieler einen Bildlauf durchführt (Cookie-Benachrichtigungsstil).


1

Eine andere Möglichkeit besteht darin, den Cursor zu ändern, wenn Sie den Mauszeiger über das Element halten, um einen Bildlauf anzuzeigen, z.

Dies funktioniert natürlich nur für den Desktop.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.