12 unbeliebte H5-Designtipps

Dieses Mal bringe ich Ihnen 12 unpopuläre H5-Designtipps. Wie verwende ich H5-Designtipps? Was sind die Vorsichtsmaßnahmen der H5-Designtipps? Hier sind praktische Fälle, werfen wir einen Blick darauf.

12 unpopuläre H5-Designtipps, der Inhalt ist wie folgt

1. Seien Sie in Bezug auf die Interaktion vorsichtig mit der richtigen Gleitbedienungsmethode.

Zum Beispiel: Scratch-MusikSmear-Effekt, nach links und rechts schieben, um Seiten umzublättern usw.
Grund: Auf Apple-Telefonen kann das Schieben nach rechts leicht den Effekt einer Rückkehr zur „vorherigen Seite“ auslösen.

2. Benutzen Sie hinsichtlich der Interaktion die horizontale Bildschirmanzeige mit Vorsicht.

Grund: Erfahrungsgemäß muss das Benutzergerät die Bildschirmdrehfunktion aktivieren, um es normal anzusehen, und die Betriebskosten des Benutzers sind hoch. Bei Mobiltelefonen mit unterschiedlichen Bildschirmen ist das Seitenverhältnis unterschiedlich, was es schwierig macht, die besten visuellen Effekte anzuzeigen.

3. Funktionsschaltflächen usw. sollten optisch vom unteren Rand der Seite ferngehalten werden (ca. 128 Pixel, diese Größe ist kein fester Z-Wert. Dies hängt von der für die Rekonstruktion verwendeten Anpassungsmethode ab.) Nur als Referenz: 640 * 1136 Pixel, von oben nach unten berechnet, der Hauptinhalt liegt innerhalb von 1008 Pixel.

Grund: Bessere Ausstattung von Mobiltelefonen mit verschiedenen Bildschirmen, um das Blockieren von Tasten zu vermeiden.

4. Verwenden Sie den „Lichtüberlagerungseffekt“ oder den „Ebenenstil“-Effekt in PS visuell mit Vorsicht.

Zum Beispiel: Fügen Sie der Ebene einen Effekt „sanftes Licht“, „Bildschirmfarbe“, „Farbton“ usw. hinzu, es sei denn, dieses visuelle Element kann zu einem zusammengeführt werden.
Grund: Es werden Löcher für den Wiederaufbau gegraben, was das Schneiden von Bildern erschwert und die visuellen Effekte nicht wiederherstellen kann.

5. Visuell Vektorgrafiken? Möchten Sie eine einfache Animation erstellen? Versuchen Sie es mit dem Export in das SVG-Format!

Grund: Warum etwas ablehnen, das die Größe reduzieren kann...

6. Versuchen Sie in Bezug auf Animationen, Vollbildanimationen zu vermeiden und geben Sie Teilanimationen Vorrang.

Zum Beispiel: verschiedene Partikeleffekte, die über den Bildschirm schweben usw.
Grund: Wenn die dargestellten visuellen Effekte nicht durch Code realisiert werden können, bedeutet dies, dass für ihre Verarbeitung Sequenzbilder in Vollbildgröße verwendet werden müssen, was die Lautstärke erhöht und das Ladeerlebnis beeinträchtigt.

7. Für Animationen, Tipps zur Sequenzbildkomprimierung, statischen Bildern und höherer Qualität. Für den verschwommenen Bewegungszustand in der Mitte können Sie die Bildqualität deutlich verringern.

Grund: Komprimierte Lautstärke, auch wenn der Bewegungszustand gezackt ist, ist er nicht offensichtlich.

8. Gehen Sie zur Rekonstruktion bitte auf „tinypng.com“ für das Bild und komprimieren Sie es, um die Größe effektiv zu reduzieren.

Grund: Ähm, müssen Sie dafür einen Grund angeben? Nun, lassen Sie mich Ihnen heimlich sagen, dass diese Website jetzt nicht nur PNGs, sondern auch JPGs komprimieren kann und, was noch wichtiger ist, Batch-Downloads unterstützt!

9. Zur Rekonstruktion komprimieren Sie bitte die Musik, was die Gesamtgröße erheblich reduzieren kann.

Tipps: Wenn keine besonderen Anforderungen bestehen, können Sie darüber nachdenken, eine Mono-Audiodatei mit einer Bitrate von 48 oder niedriger zu erstellen.

10. Was die Rekonstruktion betrifft, unterstützen Android-Geräte nicht die gleichzeitige Wiedergabe mehrerer Audios... was bedeutet, dass Hintergrundmusik und Soundeffekte nicht gleichzeitig abgespielt werden können! (Macintosh ist kein Problem)

11. Was die Rekonstruktion betrifft, kann das Video nicht automatisch abgespielt werden. Bei der ersten Wiedergabe muss der Benutzer klicken, um es auszulösen.

(Welches Format sollte für das Video verwendet werden? Es wird empfohlen, das MP4-Format und den H.264-Encoder zu verwenden)

12. Achten Sie bei der Rekonstruktion bitte stärker auf „Meizu“-Mobiltelefone und Huawei P6/P7 im Test, ein Telefon mit virtuellen Tasten am unteren Bildschirmrand. Geräte sind anfällig für Probleme.

Nachdem das gesagt ist, hier noch ein paar Leckerbissen:
◆Welchen Browser-Kernel verwendet WeChat? Nun, diese Frage ist wirklich schwer klar zu erklären.
Android:
WeChat Version 5.4-6.1 Wenn Sie den QQ-Browser installiert haben, verwenden Sie den Kernel des QQ-Browsers. Andernfalls verwenden Sie das mit der Mobiltelefonanlage gelieferte. Nach WeChat Version 6.1 ist der Kern des QQ-Browsers eingebettet.
QQ Browser: Version 6.2 und höher verwenden den Blink-Kernel. Ich habe zuvor den Webkit-Kernel verwendet.
Apple:
Es war schon immer in das System integriert...
◆ Für das Hochschieben zum Umblättern sollte der visuelle Führungspfeil nach oben und nicht nach unten zeigen, es sei denn, Sie klicken auf die Seite Wendeeffekt, verwenden Sie einfach den Abwärtspfeil.
◆ Fingerabdruck-Scan? Pro-Bildschirm löst Interaktion aus? Blasen, um die Gaszusammensetzung festzustellen?
Das sind alles Pseudotechniken, es macht einfach Spaß, damit zu spielen, haha.
Aber Dinge wie Multi-Screen-Interaktion, Audioanalyse usw., die Bereitstellung technischer Unterstützung über verschiedene Schnittstellen und die Realisierung einiger interaktiver Vorgänge, das sind die Trends der Zukunft!

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So zählen Sie die Anzahl der Tabellensummen im Bootstrap

So verwenden Sie JS zum Wechseln zwischen Gleichzeitiges Ausblenden und Anzeigen von Schaltersymbolen

So implementieren Sie die Aufgabenliste von vue.js

Das obige ist der detaillierte Inhalt von12 unbeliebte H5-Designtipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!