web-dev-qa-db-ja.com

各デバイスのモックアップですか、それとも1つのグローバルモックアップですか?

ユーザーエクスペリエンスのデザインは初めてです。今私は私の最初のアプリのアイデアに取り組み始めました、それは本当に面白いです。今、このアプリを3つのメインプラットフォームにしたいです。肯定的な反応が得られれば、このアプリをWebアプリケーションとして起動することも、Blackberryにとっても興味深いです。

私は1つのことに戸惑っています。これら3つのプラットフォームすべてに対して、1つの設計とフローのみに従うのは正しいことですか?または、基本的なプラットフォーム標準を使用してすべての異なるモックアップを作成する方が良いでしょう。そして、各プラットフォームで必要なときに、お金と時間を費やすことができます。

さまざまな設計にお金と時間を費やしても意味がありますか、それとも、すべてのプラットフォームに1つのモックアップ設計を使用する方が良いですか。

1
Sanjay Patel

アダプティブデザイン(各ディスプレイグループ専用のデザイン)の恩恵を受ける可能性は非常に高いです。 Twitterの Bootstrapの定義 これらのうち3つ(それぞれの幅の範囲を確認できます):

  • モバイル
  • タブレット
  • デスクトップ

テンプレートの設計に関連して、さまざまな表示サイズは以下に影響します。

  • テンプレートに入れるのに妥当なcontentの量。
  • Content/interaction要素のvisibility(これは、高いユーザビリティに不可欠です)。
  • アイテムの配置
  • 要素のsize
  • 人々がアプリケーションと対話する方法(タッチスクリーンでの右クリック、ホバー、または変更されたドラッグアンドドロップ動作なし;ドラッグを想像できますか) -モバイルデバイスの2つのテーブル間でドロップしますか?)。
  • 'fold'の高さ-多くの場合、デスクトップディスプレイではこれを無視していますが、 'one-design-fits-all 'アプローチ。
  • プラットフォーム標準もあります(MicrosoftとAppleは設計ガイドラインに違いがあります)。

したがって、アプリケーションが非常にシンプルでない限り(単一のスクロール可能なページのように-レスポンシブデザインで万能のソリューションを提供できる場合)、各ディスプレイグループに代替のデザインを作成する必要があります。

小さなディスプレイデザインでは、通常、より多くのテンプレートとより深いナビゲーションが含まれ、各テンプレートに含まれるコンテンツと対話要素は少なくなります。タスクモデルは通常、小さなディスプレイでより頻繁にテンプレートにスライスされます。したがって、配置が変更されます。また、デバイス間の相互作用のばらつきも考慮する必要があります。

ガイドラインが示されている場合は、モバイルデザインから開始することをお勧めします。通常、大きいディスプレイのテンプレートを結合する方が、小さいディスプレイを分割するよりも簡単です。小型デバイスの設計では、近接性とミニマリズムが高くなる傾向があります(少ないほど多く)。これは、一般的に設計に適しています。

さらに例証するために、違いを考慮してください:

A screenshot of evernote desktop

A screenshot of evernote mobile

1
Izhaki

3つのプラットフォームのサイズが大きく異なる場合は、3つの異なるが関連するモックアップを使用する必要があります。 「レスポンシブデザイン」について少しググってください。

デスクトップ、タブレット、モバイルデバイスのインターフェースを設計していると思います。

通常、デスクトップでは十分なスペースがあり、必要に応じてレイアウトできます(ただし、一般的なUXガイドラインに従ってください)。

反対に、モバイルデバイスでは、通常はスペースが不足しているため、より縦型のデザインを探します。

良い例は SonyのWebサイト (私はsonyにはまったく関係ありません)デスクトップやモバイルからサイトを閲覧してみてください。

小さいデバイスでは、一部の要素はレイアウトを変更し、一部はレスポンシブデザインで通常は表示/非表示になりますが、デスクトップ/大きなバージョンと比較して一般的な感触/スタイル/ブランディングを維持できます


とにかく十分な予算がある場合は、プラットフォームごとにWebサイトとさまざまなネイティブアプリを実行することをお勧めします。人々は常にネイティブアプリをより気に入っています。

0
aleation

私自身も開発者として、サイトのレスポンシブバージョンをモックアップしたり、少なくとも与えたりして、画面が小さくなったときにスタイルやオブジェクトがどのように変化するかを示すと便利です。

たとえば、デスクトップサイズでは、ほとんどの要素の基本パディング/マージンは約20/30ピクセルで十分ですが、タブレットサイズとモバイルサイズでは何にドロップしますか?モバイルで約10pxに変更するだけですか、それともタブレットサイズでもドロップするのですか?

サイトのレスポンシブバージョンの完全なモックアップがなくても、画面が特定のブレークポイントまたはサイズに達したときの要素の状態を明確に理解することは良いことです。

ただし、デザインの観点からは、小さい画面サイズで要素がどのように機能するかを試すことをお勧めします。デスクトップディスプレイ用に美しく作成されたウィジェットが、使用しているレスポンシブフレームワークにうまく適合しない場合がよくあります。

0
Joe Taylor