it-swarm.com.de

Wie wirkt sich die Verwendung bei hellem Sonnenlicht auf die Gestaltung einer Website aus?

Wir erstellen eine mobile Website, die hauptsächlich im Freien bei hellem Sonnenlicht verwendet wird. Welche Designfaktoren sollte ich berücksichtigen?

24
Tony Bolero

Einige der wichtigsten Dinge werden hoher Kontrast, großer Text und dunkles, helles Design sein.

Einige gute Beispiele für kontrastreiche Designs finden Sie hier auf Web Design Guru Blog . Sie haben einige schöne Farbbeispiele, aber denken Sie daran, es minimalistisch zu halten.

Halten Sie Ihren Text groß, damit er lesbar bleibt, und zwingen Sie sich, so viel Text wie möglich auszuschneiden. Halten Sie die Interaktionsbereiche (Schaltflächen/Links) groß, damit die Benutzer sie leicht drücken können, und halten Sie die Grenzen solcher Elemente sehr klar, damit sie sichtbar sind.

Dunkler Text auf hellem Hintergrund ist wichtig. Helligkeit ist bei den meisten Smartphone-Modellen der Schlüssel zum Überholen der Sonne.

Am wichtigsten: Testen Sie Ihr Design auf mehreren führenden Smartphone-Modellen . Um einen schnellen Eindruck von einigen Unterschieden zu bekommen, sehen Sie sich dieses Video an, das Smartphone-Bildschirmvergleiche bei direkter Sonneneinstrahlung zeigt .

Testen Sie nicht nur das iPhone 4S, das Galaxy Nexus und beenden Sie es. Testen Sie die beliebtesten (nicht die Hightech-) Modelle einer Vielzahl von Geräten, um festzustellen, wie gut Sie das Display bei direkter Sonneneinstrahlung sehen können.

Lassen Sie echte Benutzer die Site an einem sonnigen Tag in direkter Sonne testen. Sie können Ihnen mitteilen, ob Ihre Website angemessen lesbar ist. Probieren Sie nach Möglichkeit auch ein paar verschiedene Telefonmodelle aus. Sie oder Ihr Designteam wissen, wonach sie auf der Website suchen, und können Dinge analysieren, die ein neuer Benutzer möglicherweise nicht analysiert. Ein frischer Look ist wichtig.

12
Ben Brocka

Dieser besondere Effekt, der bei direkter Sonneneinstrahlung auftritt, ist Solarisation . Es ist auch das, was mit "alten" Plasmafernsehern passiert, wenn man sie aus einem Winkel sieht.

Solarized , eine 16-Farben-Palette, wurde wissenschaftlich entworfen und getestet "unter verschiedenen Lichtbedingungen" , um unter anderem zu erreichen andere Eigenschaften, selektiver Kontrast:

Solarized reduziert den Helligkeitskontrast, behält jedoch im Gegensatz zu vielen kontrastarmen Farbschemata kontrastierende Farbtöne (basierend auf Farbradrelationen) bei, um die Lesbarkeit der Syntax hervorzuheben.

Dies kann den bereits erwähnten kontrastreichen und großen lesbaren Schriftarten Farbe verleihen. ) Empfehlungen.

7
Naoise Golden

Diese gelten für jede Website, insbesondere auf Mobilgeräten und vor allem im Freien:

  • hoher Kontrast
  • dunkler Text auf hellem Hintergrund
  • ausreichend GROSSE Schriftgröße für den eigentlichen Inhalt
  • hab keine Angst vor negativem Raum. Geben Sie Ihren Inhalten etwas Platz.
  • lesbarkeit lieber als hübsches Aussehen
  • mach es schnell oder zumindest nicht unnötig langsam
  • denken Sie an die Position der Finger, wenn Sie ein mobiles Gerät halten, wenn Sie Tasten, Links und dergleichen platzieren
5
selfawaresoup

In Bezug auf die Farben und den Kontrast ...

Die Kontrastgleichung lautet: Kontrast = (L1 + 0,05)/(L2 + 0,05) wobei L1 die hellere der beiden Intensitäten ist und L1 und L2 auf normalisiert sind der Bereich von [0,1].

Im Allgemeinen :

  • Weiß auf Schwarz gegen Schwarz auf Weiß ergeben den gleichen Kontrast.
  • Weiß auf Grau vs. Grau auf Weiß ergeben den gleichen Kontrast.
  • Grau auf Schwarz ergibt besser Kontrast als Grau auf Weiß.


nter Sonnenlicht :

  1. Schwarz auf Weiß erscheint dunkelgrau auf Weiß (hoher Kontrast).
  2. Dunkelgrau auf Weiß erscheint hellgrau auf Weiß (geringer Kontrast).

  3. Weiß auf Schwarz erscheint weiß auf dunkelgrau (hoher Kontrast).
  4. Hellgrau auf Schwarz erscheint weiß auf Dunkelgrau (hoher Kontrast).


Bei noch hellerem Sonnenlicht :

  1. Schwarz auf Weiß erscheint hellgrau auf Weiß (geringer Kontrast).
  2. Dunkelgrau auf Weiß erscheint weiß auf Weiß (kein Kontrast).

  3. Weiß auf Schwarz erscheint weiß auf hellem Grau (geringer Kontrast).
  4. Hellgrau auf Schwarz erscheint weiß auf hellgrau (geringer Kontrast).


Sie können aus den Punkten 1 & 2 und 3 & 4 von "unter Sonnenlicht" ersehen, dass es schwieriger ist, zwischen hellen Schattierungen zu unterscheiden, wenn Sie mehrere Textfarben haben und es wichtig ist, in der Lage zu sein Sagen Sie sie auseinander, dann ist dunkler Text auf hellem Hintergrund vorzuziehen.

Sie können an den Punkten 1 & 2 gegenüber 3 & 4 von "unter noch hellerem Sonnenlicht" erkennen, dass ein Unterschied zwischen den Schattierungen nicht mehr möglich ist und dass heller Text auf dunklem Hintergrund vorzuziehen ist (das Dunkelgrau auf Weiß erscheint weiß auf Weiß und daher ist nicht mehr lesbar).

2
Danny Varod