ホームページ ウェブフロントエンド htmlチュートリアル あまり知られていない HTML 5 設計の 12 のヒント_html/css_WEB-ITnose

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

Jun 21, 2016 am 08:49 AM

右スワイプ操作は慎重に使用し、水平画面表示効果は慎重に使用し、ページ下部のボタンの原則を使用し、ベクター グラフィックを作成するには 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

まで電子メールを送信してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

< Progress>の目的は何ですか 要素? < Progress>の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

この記事では、HTML< Progress>について説明します。要素、その目的、スタイリング、および< meter>との違い要素。主な焦点は、< Progress>を使用することです。タスクの完了と< Meter> statiの場合

HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

この記事では、HTML< Datalist>について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

この記事では、html< meter>について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化< Meter> < Progress>およびex

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

この記事では、< iframe>外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles