ブラザーズHTML5チュートリアル応答ウェブサイトのデザインプロセスのITバンド

5f16a58a57bc47108e1c532aebeafd05.jpg

 

顧客が応答部位が、需要の製品の機能を移動するように依頼し、純粋にモバイルソリューションとみなすことができない場合は、しかし、いくつかのケースでは、このアプローチは、考慮の非常に価値があります。私たちは、より柔軟な作成するために、いくつかの考えを過ごすために、元のサイトをして必要なので、すべての主要なモバイル機器にできるだけ優れたユーザー体験を持っていること。レスポンシブウェブデザインには、次のプロセスを検討する必要があります。

 

ステップ1:決定は、互換性のあるデバイスのタイプ、スクリーンサイズを必要とします。

ユーザの研究を通して、互換性のあるデバイスのタイプ、スクリーンサイズの必要性を決定するためにユーザが使用する機器の分布を理解します。デバイスの種類は、モバイル機器(携帯電話、タブレット)、およびPCが含まれます。モバイルデバイスの場合、時間の設計と実装は、ジェスチャー機能を高めるために注意を払います。画面サイズが(水平及び垂直を含む)様々な携帯電話の画面の大きさ、および幅の広い一般的なコンピュータ画面(水平及び垂直を含む)様々な錠剤サイズを含みます。考慮すべき問題は、ときにページのデザイン適用サイズ範囲への応答は何という?たとえば、検索サイトの検索結果ページ、あなたはワイドスクリーンに携帯電話からまたがることができますが、ホームの構造が複雑すぎるため、携帯電話に直接移行するには、ホームページのモバイル版の直接のデザインとして、現実的ではありません。ユーザーのニーズと組み合わせ、コスト、適用可能なトレードオフのサイズを実現。そのようなページ操作など、一部の機能は、ユーザーが一般的に何のモバイル端末で動作している必要があり、応答性の設計のための必要はありません。

 

ステップ2:ワイヤーフレームのプロトタイプを作成します。

特定の環境に特化しさえするために、ファイナライズし、いくつかの異なるサイズは、ワイヤーフレームのプロトタイプを生産したため、異なるサイズで慎重に検討する必要がある、ページのレイアウトを変更する方法を、どのようにサイズスケールの内容、機能、コンテンツの削除デザイン。このプロセスは、密接なコミュニケーションを維持するために、デザイナーやフロントエンドの開発者が必要です。

 

第三段階:テストワイヤフレームのプロトタイプ。

画像のインポートは、いくつかの簡単なテストを行うための適切な機器は、私たちはできるだけ早くとして、アクセシビリティ、読みやすさやその他の問題の側面の存在を発見することができます。

 

ステップ4:ビジュアルデザイン。

従来のコンピュータスクリーンを有するモバイルデバイスのスクリーンピクセル密度は、領域のコントロールのクリック可能な領域など、テキストの読みやすさを確保する必要の設計では、同じではないことに留意されたいです。

 

ステップ5:フロントエンドの実装。

ページレイアウトへの伝統的なWeb開発、応答性のデザインページと比較して、コンテンツのサイズが大きく、より多くの可能性が高いドラフト設計への最終的な出力アクセスして、フロントエンドの開発者やデザイナーは、より多くの通信する必要がある、変更されました。

おすすめ

転載: www.cnblogs.com/itxdl/p/12081965.html