H5設計時のヒントまとめ

今回はH5を設計する際の注意点をまとめてお届けします。

HTML5 の使用については、多くの人がよく知っていると思います。実際、HTML を使用するためのさまざまなテクニックを次の記事で紹介します

。 1. インタラクションの観点から、正しいスライド操作方法を慎重に使用してください。

例: スクラッチミュージックスミアエフェクト、左右にスライドしてページをめくるなど。

理由: Apple スマートフォンでは、右にスライドすると、「前のページ」に戻る効果が簡単にトリガーされます。

2. インタラクションの観点から、横画面表示の使用には注意してください。

理由: 体験の観点から、通常に視聴するにはユーザーデバイスで画面回転機能をオンにする必要があり、ユーザーの操作コストが高くなります。画面が異なる携帯電話ではアスペクト比が異なるため、最適な視覚効果を表示することが困難になります。

3. 視覚的には、機能ボタンなどがページの下部から遠く離れています (約 128 ピクセル、このサイズは固定値ではありません)。再構築に使用される適応方法によって異なります (参考値: 640*1136 ピクセル)。 、上から下に計算され、メインコンテンツは1008px以内）。

理由: ボタンがブロックされないように、さまざまな画面を備えた携帯電話向けの優れた装備。

4. 視覚的には、PS の「ライト オーバーレイ エフェクト」または「レイヤー スタイル」エフェクトを使用する場合は注意してください。

たとえば、この視覚要素を 1 つにマージできない場合は、「ソフト ライト」、「スクリーン カラー」、「色相」、およびその他の効果をレイヤーに追加します。

理由: 再構築のために穴を掘っているため、写真を切り取ることが難しく、視覚効果を復元できません。

5. 視覚的に、ベクター グラフィックスを SVG 形式でエクスポートしてみませんか? 理由: サイズを縮小できるものをなぜ拒否する必要がある... 6. アニメーションに関しては、全画面アニメーションを避け、部分アニメーションを優先してください。

例: さまざまなパーティクル エフェクトが画面上に浮遊するなど。

理由: 表示される視覚効果をコードで実装できない場合は、処理にフルスクリーン サイズのシーケンス フレームを使用する必要があり、サイズが大きくなり、読み込みエクスペリエンスに影響します。

7. アニメーションについては、シーケンスのフレーム圧縮に関するヒントや静止画をより高画質で保存できます。途中のブレた動きの様子は思い切って画質を落とします。

理由: ボリュームが圧縮されているため、動作状態がギザギザしていてもわかりません。

8. 再構築するには、写真を「tinypng.com」にアップロードし、圧縮してサイズを効果的に削減してください。

理由: そうですね、その理由を教えてください。この Web サイトは、png だけでなく jpg も圧縮できます。さらに重要なのは、バッチ ダウンロードをサポートしていることです

9. 再構築するには、音楽を圧縮してください。これにより、全体のサイズが大幅に縮小されます。

ヒント: 特別な要件がない場合は、ビット レート 48 以下のモノラル オーディオ ファイルにすることを検討できます。

10. 再構築という点では、Android は複数のオーディオの同時再生をサポートしていません...つまり、BGM と効果音を同時に再生することはできません (Apple マシンでは問題ありません)。 11. 再構築に関しては、

ビデオ

を自動的に再生することはできません。最初の再生では、クリックしてトリガーする必要があります。

(ビデオにはどのような形式が使用されますか? mp4 形式を使用し、H.264 エンコーダーを使用することをお勧めします)

12. 再構築の観点から、テストの際は「Meizu」携帯電話と Huawei P6/P7、画面の下部に仮想ボタンがある携帯電話にさらに注意を払ってください。設備にはトラブルがつきものです。 そうは言っても、ここでさらにいくつかの豆知識を紹介します。

◆ WeChat はどのブラウザ カーネルを使用していますか? そうですね、この質問を明確に説明するのは非常に困難です。

アンドロイド:

WeChat バージョン 5.4 ～ 6.1、QQ ブラウザが

インストールされている場合は、QQ ブラウザのカーネルを使用します。それ以外の場合は、携帯電話システムに付属のものを使用してください。

WeChat バージョン 6.1 以降には、QQ ブラウザのコアが組み込まれています。

QQ ブラウザ: バージョン 6.2 以降では、blink カーネルが使用されます。以前はWebkitカーネルを使用していました。 (混乱しないでください。必要に応じて、http://x5.tencent.com/index にアクセスして QQ ブラウザの詳細を確認してください)

アップル:

それは常にシステムに組み込まれています...

◆ 上にスライドしてページをめくる場合、視覚的なガイダンスの矢印は下ではなく上になります。ページめくり効果をクリックしない限り、下向きの矢印を使用してください。

◆ 指紋をスキャンしてインタラクションをトリガーしますか?

これらはすべて疑似テクニックです。ただ遊んで楽しんでください（笑）。

ただし、マルチスクリーンインタラクション、オーディオ分析など、さまざまなインターフェイスを介した技術サポートの提供、および一部のインタラクティブな操作の実現など、これらは将来のトレンドです

この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらにエキサイティングな内容については、オンラインの php 中国語のその他の関連記事に注目してください。

推奨読書:

H5ビデオタグ操作カメラ

全選択と単一選択の逆選択を実現するためのdjangoコントロールとパラメータ

jqueryの使用の詳細な説明

以上がH5設計時のヒントまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。