モバイルサイトのデザイン最適化のポイント-H5 チュートリアル-php.cn

モバイルサイトのデザイン最適化のポイント

一个新手

リリース： 2017-09-20 09:12:57

オリジナル

1604 人が閲覧しました

モバイル端末は、携帯電話の性能やネットワークなどの制約によって制限され、PCと同じような優れた結果を達成することはできませんが、モバイル端末独自の重力感知機能による視差スクロールなど、モバイル端末独自の利点もあります。携帯電話、「加速度」センサーを使用して、「Shake it」やその他のエレガントで興味深い人間とコンピュータのインタラクションを実現します。

モバイルWebサイトのホームページに影響を与える視覚要素

Webページの読み込み時間
Webサイトのフォーマット[デザインと応答性]
視覚的な検索機能
クリックして電話をかける
ログインが見える
ソーシャルメディア機能
アプリの表示

Webページの読み込み時間
主な影響要因は静的リソースファイル、画像など

Webサイトの形式[デザインと応答性]

見える検索機能

クリックして電話

見えるログイン

ソーシャルメディア機能

アプリ表示

携帯端末ホームページデザイン仕様書

デザイン仕様書for mobile専用ページ

安全領域を設定する
携帯端末であってもPCであっても、ユーザーの視覚・接触領域として安全領域を定め、重要な情報は安全領域に配置する必要があります。モバイルセーフエリアの設定: モバイル画面の幅の両側に適切な空白スペースを残し、それに応じて最初の画面の高さを調整します。

画像サイズの制御
トピックのヘッダー画像は、多くの場合、ユーザーに強い視覚的影響を与えますが、モバイルネットワークの制限により、画像の読み込みの待機コストが PC よりもはるかに大きくなることがよくあります。ヘッダー画像は、ネットワークトラフィックを軽減し、読み込み速度を向上させるために、単色、グラデーション、タイル化可能なマテリアルの使用に適しています。

フォント
トピックページでは、メインのフォントサイズを3以内に制御する必要があります。フォントは、可能な限りモバイルシステムのデフォルトフォントを使用してレンダリングする必要があり、フォントサイズをランダムに使用することは避け、フォントサイズが適切であることを確認してください。は整数です。
通常、モバイル版のフォントサイズはPC版の2倍です。

コントロールインタラクションエリア
モバイル端末は多くの場合、画面のホットゾーンでの指の最小感度は44ピクセルです。モバイル端末のインタラクションエリアを設計する際には、この問題に注意する必要があります。

ジャンプを減らす
モバイルネットワーク環境に限り、ページジャンプはユーザーに大きな心理的不安を与えるため、重要な情報はできるだけ1ページに合理的に表示する必要があります。ジャンプが必要な場合は、展開、ポップアップ、ドロップダウンなどの方法を使用して、ユーザーの心理的影響を軽減できます。

以上がモバイルサイトのデザイン最適化のポイントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。