Zusammenfassung der Tipps zum Entwerfen von H5

Dieses Mal gebe ich Ihnen eine Zusammenfassung der Tipps zum Entwerfen von H5. Was sind die Vorsichtsmaßnahmen beim Entwerfen von H5?

Ich glaube, dass viele Leute Erfahrung mit der Verwendung von HTML5 haben. Tatsächlich gibt es viele verschiedene Verwendungstechniken bei der Verwendung von HTML. Der folgende Artikel wird Ihnen verschiedene Techniken im HTML-Design vorstellen Schauen Sie mal vorbei

1. Verwenden Sie im Hinblick auf die Interaktion die richtige Schiebebetriebsmethode mit Vorsicht.

Zum Beispiel: Scratch-Musik Smear-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. Verwenden Sie im Hinblick auf die Interaktion die horizontale Bildschirmanzeige mit Vorsicht.

Grund: Aus Erfahrungsgründen muss das Benutzergerät die Bildschirmrotationsfunktion für die normale Anzeige aktivieren, 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. Optisch sind Funktionsschaltflächen usw. weit vom unteren Rand der Seite entfernt (ca. 128 Pixel, diese Größe ist kein fester Wert. Dies hängt von der für die Rekonstruktion verwendeten Anpassungsmethode ab (nur als Referenz: 640 * 1136 Pixel). , von oben nach unten berechnet, Hauptinhalt innerhalb von 1008px).

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

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

Beispiel: Fügen Sie der Ebene „sanftes Licht“, „Bildschirmfarbe“, „Farbton“ und andere Effekte 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, sie im SVG-Format zu exportieren!

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

6. Vermeiden Sie in Bezug auf die Animation Vollbildanimationen und geben Sie Teilanimationen Vorrang.

Zum Beispiel: Verschiedene Partikeleffekte schweben über den Bildschirm usw.

Grund: Wenn die dargestellten visuellen Effekte nicht im Code implementiert werden können, bedeutet dies, dass für ihre Verarbeitung Sequenzrahmen in Vollbildgröße verwendet werden müssen, was die Größe erhöht und das Ladeerlebnis beeinträchtigt.

7. Bei Animationen können Tipps zur Sequenzbildkomprimierung und statischen Bildern mit höherer Qualität gespeichert werden. 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 dies nicht offensichtlich.

8. Zur Rekonstruktion laden Sie die Bilder bitte auf „tinypng.com“ hoch und komprimieren Sie sie, um die Größe effektiv zu reduzieren.

Grund: Nun, lassen Sie mich Ihnen den Grund dafür sagen? Nun, lassen Sie mich Ihnen heimlich sagen, dass diese Website jetzt nicht nur PNG, sondern auch JPG komprimieren kann, und was noch wichtiger ist ... sie unterstützt Batch-Downloads! 🎜> 9. Zur Rekonstruktion komprimieren Sie bitte die Musik, wodurch die Gesamtgröße erheblich verringert werden kann.

Tipp: 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ützt Android nicht die gleichzeitige Wiedergabe mehrerer Audios... was bedeutet, dass Hintergrundmusik und Soundeffekte nicht gleichzeitig abgespielt werden können (Apple-Geräte haben kein Problem)

11. Was die Rekonstruktion betrifft, kann

Video

nicht automatisch abgespielt werden. Bei der ersten Wiedergabe muss der Benutzer darauf klicken, um es auszulösen. (Für welches Format soll das Video verwendet werden? Es wird empfohlen, das MP4-Format und den H.264-Encoder zu verwenden)

12. Achten Sie bei der Rekonstruktion bitte mehr auf „Meizu“-Mobiltelefone und Huawei P6/P7-Mobiltelefone, die beim Testen virtuelle Tasten am unteren Bildschirmrand verwenden. Geräte sind anfällig für Probleme.

Abgesehen davon gibt es 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 QQ Browser

installiert

haben, verwenden Sie den Kernel von QQ Browser. 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. (Lassen Sie sich nicht verwirren, gehen Sie bei Bedarf bitte zu: http://x5.tencent.com/index, um mehr über QQ Browser zu erfahren)

Apfel:

Es war schon immer im System integriert...

◆ Wenn Sie zum Umblättern nach oben schieben, sollte der visuelle Führungspfeil nach oben und nicht nach unten zeigen. Verwenden Sie den Abwärtspfeil, es sei denn, Sie klicken auf den Umblättereffekt.

◆ Fingerabdruck-Scanning? Den Bildschirm berühren, um eine Interaktion auszulösen? Schlagen, um die Gaszusammensetzung zu erkennen?

Das sind alles Pseudotechniken, man muss einfach gerne damit spielen, haha.

B. Multi-Screen-Interaktion, Audioanalyse usw., die Bereitstellung technischer Unterstützung über verschiedene Schnittstellen, um einige interaktive Vorgänge zu erreichen. Dies sind jedoch die zukünftigen Trends.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben In diesem Artikel wird es noch mehr Spannendes geben. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

H5-Video-Tag-Betriebskamera

Detaillierte Erläuterung der Verwendung von Django-Steuerelementen und Parameterübergabe

jquery implementiert die Auswahl aller und die Umkehrung der Einzelauswahl

Das obige ist der detaillierte Inhalt vonZusammenfassung der Tipps zum Entwerfen von H5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!