不人気な H5 設計の 12 のヒント

今回は、不人気な H5 デザインのヒントを 12 個お届けします。H5 デザインのヒントをどう活用するか。 H5 設計のヒントの 注意事項 は何ですか? 実際のケースを見てみましょう。

12 の人気のない H5 デザインのヒント、内容は次のとおりです

1 インタラクションの面では、正しいスライド操作方法を使用するように注意してください。

例: スクラッチミュージック エフェクトを適用したり、左右にスライドしてページをめくったりします。
理由: Apple スマートフォンでは、右にスワイプすると、「前のページ」に戻る効果が簡単にトリガーされる可能性があります。

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

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

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

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

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

例: この視覚要素を 1 つにマージできない場合を除き、「ソフト ライト」、「スクリーン カラー」、「色合い」およびその他の効果をレイヤーに追加します。
理由: 再構築のために穴を掘っているため、写真を切り取ることが難しく、視覚効果を復元できません。

5. 視覚的には、ベクターグラフィックス?簡単なアニメーションを作ってみませんか？ SVG 形式でエクスポートしてみます。

理由: サイズを縮小できるものをなぜ拒否するのか...

6. アニメーションに関しては、全画面アニメーションを避け、部分アニメーションを優先するようにしてください。

例: 画面上に浮かぶさまざまなパーティクルエフェクトなど。
理由: 提示された視覚効果をコードで実現できない場合、処理に全画面サイズのシーケンス フレームを使用する必要があり、ボリュームが急増し、読み込みエクスペリエンスに影響を与えます。

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

理由: ボリュームが圧縮されているため、動作状態がギザギザであっても、それは明白ではありません。

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

理由: えー、これには理由を言う必要がありますか?さて、こっそり言っておきますが、この Web サイトは PNG だけでなく JPG も圧縮できるようになり、さらに重要なことに... バッチ ダウンロードもサポートしています。

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

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

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

11. 再構築に関しては、最初の再生ではユーザーがクリックする必要があります。

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

12. 再構築については、テストする際に「Meizu」携帯電話と Huawei P6/P7 に注意してください。 、画面の下部に仮想ボタンのある携帯電話。設備にはトラブルがつきものです。

ここまでは述べましたが、ここでさらにいくつかの豆知識を紹介します:
◆WeChat はどのブラウザ カーネルを使用していますか?そうですね、この質問を明確に説明するのは本当に難しいです。
Android:
WeChat バージョン 5.4-6.1。QQ ブラウザがインストールされている場合は、QQ ブラウザのカーネルを使用します。それ以外の場合は、携帯電話システムに付属のものを使用してください。 WeChat バージョン 6.1 以降、QQ ブラウザのコアが組み込まれています。
QQ ブラウザ: バージョン 6.2 以降では、blink カーネルを使用します。以前はWebkitカーネルを使用していました。
Apple:
それは常にシステムに組み込まれています...
◆ ページをめくるために上にスライドするとき、ページめくり効果をクリックしない限り、視覚的なガイダンスの矢印は下ではなく上になります。
◆ 指紋スキャン？プロ画面がインタラクションをトリガーしますか?ブローしてガスの組成を検出しますか？
これらはすべて疑似テクニックです。楽しんで遊んでください（笑）。
ただし、マルチスクリーンインタラクション、オーディオ分析など、さまざまなインターフェイスを介した技術サポートの提供や一部のインタラクティブな操作の実現など、これらは将来のトレンドです。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

ブートストラップでテーブルの合計数を数える方法

JS を使用してアイコンの非表示と表示を同時に切り替える方法

vue.js todolist を実装する方法

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