あまり知られていない 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:

それは常にシステムです付属品は...

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

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

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

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

元のリンク

元のリンク: http://mdsa.51cto.com/art/201605/510454.htm

この記事は、HTML5 DreamWorks および関連するフロントエンド項目の編集者によって選択されました。他のメディアからの記事は、ネチズンの学習とコミュニケーションのみを目的として転載されています。編集者の作品があなたの権利を侵害している場合は、時間内に編集者 QQ: 123464386 にご連絡ください。できるだけ早く対応いたします。投稿や協力については、tommy@html5dw.com

まで電子メールを送信してください。