超実用的！あまり知られていない HTML 5 設計の 12 のヒント_html/css_WEB-ITnose

編集者注: 右スワイプ操作は注意して使用してください、水平画面表示効果は注意して使用してください、ページの下部にはボタンの原則があります、ベクトルの作成には SVG 形式を使用してくださいグラフィック...上記のスキルはすべて、シンプルでコンパクトですが非常に実用的な今日の素晴らしい記事から得たものです。デザイナーとして、これらの落とし穴を避けるように努めるべきです。

1. インタラクションに関しては、正しいスワイプ操作方法を注意して使用してください。

例: スクラッチオフの汚れ効果、左右にスライドしてページをめくるなど。

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

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

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

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

理由: ボタンがブロックされないように、さまざまな画面を備えた携帯電話に適したデバイスです。

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カーネルを使用していました。 (混乱しないでください。必要に応じて、QQ ブラウザの詳細については http://x5.tencent.com/index にアクセスしてください)

Apple:

常にシステム 付属しています...

◆ ページをめくるために上にスライドする操作では、ページめくり効果をクリックしない限り、視覚的なガイダンスの矢印は下ではなく上になります。

◆ 指紋スキャン？プロ画面がインタラクションをトリガーしますか?ブローしてガスの組成を検出しますか？

これらはすべて偽物のテクノロジーです。楽しんで遊んでください (笑)。

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

著者 WeChat ID:

[時代の最前線の Tencent HTML 5 品質記事]

DNF 実践まとめ記事の！

「Tencent ゲームが稼働中!」 DNF 生まれ変わる HTML5 プロジェクトの概要」

HMTL 5 ページを最適化するための 6 つのヒント!

「テンセントのベスト記事!」 HTML5モバイルページを最適化する6つのヒント》

実践的なHTML5ページデザインまとめ！

「春雨の予言者！」 Tencent モバイル HTML5 ページ デザイン実践共有」

[Ushe.com オリジナル記事投稿メール: 2650232288@qq.com]