翻訳者から 。 スマートフォンとタブレットの売上は毎日伸びており、これはすでにモバイルデバイスのインターフェイスへの注意を高める必要性を示しています。 モバイルデバイス用のアプリケーションとサイトの設計は、どの原則に基づいている必要がありますか？ ますます要求が厳しくなっているすべてのユーザーリクエストに対応するにはどうすればよいですか？
入手可能な予測によると、2011年中にタブレットの売上は大幅に増加し、スマートフォンの売上は従来の携帯電話の売上を大幅に上回ります。 実践が示すように、ユーザーは、特別に購入またはダウンロードする必要がある特別なソフトウェアよりも、電話に既にインストールされているWebナビゲーションアプリケーションを好みます。 これはどういう意味ですか？ まず第一に、Web開発者とデザイナーは現在、モバイルデバイスの機能を考慮するタスクに直面しているという事実です。 タスクは最も簡単ではないことに注意してください（有名なWebデザインの専門家Jacob Nielsenによる記事「モバイルコンテンツ：2倍難しい」 -www.useit.com/alertbox/mobile-content-comprehension.html 、ロシア語翻訳-itoptiを参照してください） livejournal.com/2578.html 、およびwww.mobileawesomeness.comの多くのデザイン例）。
ユーザビリティスペシャリストのパトリックコックスは、モバイルアプリケーションとサイトの開発の基礎となる10の原則を策定しました（ www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile ）。 読者をディスカッションに招待します。 誰かがモバイルアプリケーション用のインターフェイスの設計で自分の経験を共有できれば幸いです。
1.セマンティックマークアップを使用する
コンテンツをフォームから常に分離する必要があることを知っています。 ただし、モバイルデバイス用のサイトを作成する場合は、さらに先へ進む必要があります。 セマンティックマークアップは、フォームとコンテンツ間の最適なセグメンテーションを提供します。 アクセシビリティが向上し、ファイルサイズを小さくすることができ（これらのファイルには最小限のコードが必要です）、ユーザーにWebページのコンテンツをよりよく理解する機会を与えます。
さらに、モバイルブラウザーが画像、JavaScriptまたはCSSスタイルをロードしない場合、サイトは常に適切に表示され、ユーザーに適切に認識されます。
実用的な推奨事項：
1.画像は理解を向上させますが、何かを示すのに十分ではありません。 CSS背景プロパティまたは他のメソッドを使用して画像を表現します。
タグを使用してコンテンツのタイプを示します。たとえば、下線を付けるemや省略形を示すabbrなどです。 タグの詳細なリストはこちらから入手できます： www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage
2. divタグは、互いに接続されている大きな素材ブロックを強調表示する場合にのみ使用します。 個々の段落を強調表示するには、特別なタグを使用します：ulは箇条書きリストを作成し、spanはコンテンツの小さなブロックを強調表示します。
3.セマンティックWebは、スタイルとは関係のないコンテンツを整理する方法であることを忘れないでください。
2.タスクを明確に述べる
サイトのモバイルバージョンは、限られた数のタスクを解決するように設計する必要があります。 作成するときは、目標を明確に策定する必要があります。 サイトのスペースが80％削減された場合、計画の80％も放棄する必要があります。 サイトのモバイルバージョンの機能は、画面サイズが小さいため、かなり制限されています。 たとえば、大画面用のサイトバージョンには、新しい会社の製品の広告、プライベートメッセージの表示、小さな連絡先フォームの記入、Twitterでの最新メッセージの表示などの機能を簡単に含めることができます。しかし、このオプションはモバイルバージョンには適していません：すべてを投稿スマートフォンの画面で成功する可能性は低いです。 コンテンツ要素のサイズを小さくすることもオプションではありません。ユーザーは虫眼鏡を通してサイトを表示できません。
解決方法は1つしかありません。画面に十分なスペースを確保するために、最も必要な機能に限定することです。
例：サイトに関する情報を簡潔かつ明確に提示する
（ bluemountain.caポータルのモバイルバージョン）。
実用的な推奨事項：
1.サイトのモバイルバージョンのデザインに取り組んでいる間、ページのカテゴリではなく、画面のカテゴリを考えます。 各画面には、3つ以下の機能または要素を含める必要があります。
2.画面を簡素化する方向は、簡単にするだけでなく、サイトのモバイルバージョンに割り当てられた目標、タスク、機能を明確にするのにも役立ちます。
3.いっぱいにしないでください！
画面上のすべての空のスペースを埋めようとしないでください。 すべてのユーザーが異なる接続速度を持っているので、サイトは「重くなりすぎてはなりません」。 過剰な画像、テキスト、コードなどは、ユーザーによるサイトの認識を悪化させるだけでなく、読み込みにかかる時間を大幅に増加させます。 モバイルインターネットのユーザーにとって効率は重要です。ユーザーはコンピューターの前に座っておらず、緊急のタスクを解決するために特定のサイトにアクセスする必要があります。
例：簡素化され、よく整理された水平ナビゲーション（http://m.journeys.com/）。
実用的な推奨事項：
1.モバイル版のサイトの画像の数を必要最小限に減らします。
2.モバイル版のサイトに大量のテキストを含めないでください。
3.セマンティックマークアップを使用して、CSSスタイルと添付ファイルの数を最小限に抑えて、コードを「明るく」します。
4.ハイライトされた状態を使用しないでください！
指またはスタイラスナビゲーションは、マウスナビゲーションとは大きく異なり、開発者によるより創意工夫が必要です。 この要素またはその要素を制御する機能をユーザーに示すために、グラフィカルツールを使用する必要があります。
実用的な推奨事項：
1.リンクを示すために、テキストに下線を引くのではなくボタンを使用します。
2.矢印を使用して、より詳細なコンテンツへのアクセスを指定します。
3.ボタンの設計では、陰影とエンボス線を使用します。
4.見慣れたわかりやすいアイコンを使用します。 アクションの種類（追加、変更、戻る、進むなど）を示すために、異常な外観のアイコンを避けます
例：ナビゲーションボタンのデザインの成功。
5.シンプルで明確な大きな活字で書く
小さな画面であっても、ユーザーはテキストの読み取りに問題がないはずです。 大画面での表示に最適なフォントサイズが14ポイントである場合、モバイルデバイスの場合は少なくとも2倍の大きさにする必要があります。 ただし、フォントが大きいほど、サイトに配置できる情報が少なくなることに注意してください。
実用的な推奨事項：
1.モバイル版のサイトには、不要な情報を含めないでください。
2.シンプルでわかりやすい言語で書かれた小さなボリュームのテキストを選択します。
3.特別な必要なくスクロール機能を使用しないでください。
4.クリックすると、サイト設計に「次へ」ボタンが含まれます。ユーザーは、このボタンをクリックして、より詳細なバージョンのテキストを含む画面に移動できます。
例：短く簡潔なテキストブロックの形式で情報を提供する
6.ナビゲーションでサイトコンテンツ要素を使用する
タッチスクリーンに適したバージョンのサイトを作成する際に特に興味深いのは、ナビゲーション要素としてコンテンツ要素を使用する可能性です。画面の特定の領域を指で押すと、すでに1つまたは別のアクションを実行するツールになります。 サイトのモバイルバージョンでは、たとえばスクロールバーを使用する必要はありません。画面自体がその機能を引き継ぎます。
実用的な推奨事項：
1.メニューリストを使用して、サブメニューまたは他の画面に移動します。
2.サイトを画面のギャラリーとして設計します。 この仮想ギャラリーを介して訪問者の散歩を整理する創造的なアプローチを取ります。
例：サイトのモバイルバージョンを仮想ギャラリー（アメリカのロックバンドNeon Treesのサイト）として整理する。
7.カラースキームに注意してください。
携帯電話の画面は、標準のモニターの画面よりもサイズが大幅に小さくなっています。 そのような画面から読み取るには、できるだけ目に近づける必要があります。 したがって、モバイルバージョンのサイトの色はそれほど厳しくはなりません。
例：最小限の色とコントラスト-デザインを成功させるための鍵（http://world.g-shock.com/）。
実用的な推奨事項：
1.サイトのデザインで不必要に明るい色を使用しないでください。
2.サイトが「雑多」であってはなりません。
3.目を楽しませてくれる配色を使用します。
4.コントラストを忘れないでください。 携帯電話の画面では、対照的な色が非常に印象的です。
8.サイトの主なスタイルはシンプルです
サイトの視覚的なソリューションとそのテキストコンテンツの両方は、シンプルさと明快さによって特徴付けられるべきです。 サイトのモバイルバージョンの設計では、贅沢で非伝統的な要素を避ける必要があります。 一般的な単語を使用します。その意味は誰にとっても明白です（たとえば、「ニックネーム」や「シークレットコード」ではなく「ユーザー名」や「パスワード」）。
例：サイトのモバイルバージョンを入力するフォーム（ビール愛好家のためのソーシャルネットワークUntapped- untappd.com/?mobile=true ）
9.フィードバックを提供する
モバイルデバイス用のブラウザはJavaをサポートしています-これらを使用して、ユーザーに動的なフィードバックの可能性を与えます。 たとえば、アニメーションを使用してページの読み込みの進行状況を表示できます。 ユーザーがフィールドへの入力を忘れた場合は、すぐに通知してください。 サイトでの作業中に何が起こるかをユーザーに知らせるダイアログボックスを作成します。
実用的な推奨事項：
1.画面の特定の領域をクリックすると、サイトの外観が変更されます（これは、クリックが実際に行われたことの確認として機能します）。
2. JavaScript（JQueryやScriptaculousなど）を使用して、ユーザーとの本格的なダイアログを整理します。
3.アニメーションを使用して、ページの読み込みの進行状況を表示します。
10.空のスペースを保存する
ほとんどのスマートフォンにはタッチスクリーンがありますが、マウスを使用するよりも指だけでサイトを管理するのははるかに困難です。 ユーザーがクリックできるように、サイトのクリック可能な要素の周囲には十分な空きスペースが必要です。
例として、タッチスクリーンデバイス（ポータルのモバイルバージョンwww.charlesluck.com ）を使用したナビゲーションに便利なメニューがあります。
実用的な推奨事項：
1.リンクを指定するには、下線付きテキストではなく、ボタン、オブジェクト、アイコンを使用します。
2.ユーザーが要素を明確に区別できるように、十分なサイズの内部フィールドを作成します。
3.行の高さを大きくすると、モバイルデバイスの画面でテキストが読みやすくなります。