web-dev-qa-db-ja.com

eコマースWebサイトのモバイルファーストアプローチのワイヤーフレーミングのベストプラクティス/ガイドラインにはどのようなものがありますか？

私は90年代のecom Webサイトの再設計に取り組んでいます。目標は、携帯電話/タブレットを使いやすくすることであり、Webサイトのモバイル訪問者が多いため、モバイルを最初にすることを決定しました。私の最初の成果物は一連のワイヤーフレームです。始める前に参照できるベストプラクティスのリソースはありますか？オンラインで入手できる情報のほとんどは、モバイルフレンドリーなウェブサイトを持つことの重要性を強調している、またはcssに多くのことを掘り下げています。私がどのように始めることができるかについてのインプットをいただければ幸いです。

mobilee-commercewireframemobile-first
4
Tara

非常に多くの考慮事項があり、Web /モバイルのレスポンシブデザインとアダプティブデザインに関する記事を調べた場合、一般的なもののほとんどに出くわします。私はあなたが始めるためにここにいくつかリストしました（申し訳ありませんが正確な参照はありません）：

モバイルデバイスの考慮事項

  • デバイスの向き（向きごとに最適化、または一貫したルックアンドフィール）
  • ディスプレイの解像度（Retinaディスプレイ用の詳細なアイコンとグラフィックの作成）
  • 表示寸法（バリエーションに対応するためのアダプティブまたはレスポンシブデザイン）
  • オペレーティングシステム（下位互換性とバージョン管理）
  • タッチ操作とジェスチャー操作（OSとデバイス、または一貫したルックアンドフィール向けに最適化）

レスポンシブデザインの考慮事項

  • 表示するコンテンツに適したグリッドフレームワークはどれですか。

  • メディアクエリを使用してデバイスタイプを決定することの影響

  • スケーラブルな画像を設計し、設計に実装する

  • サポートされる最大および最小の表示幅

  • 物理的な制約に依存しない論理的なブレークポイントはありますか？

  • レイアウト設計を変更する必要がある場合の重要なブレークポイントは何ですか？

  • 主要なテンプレートは各ブレークポイントでどのように見えますか？

  • ヘッダーとフッターはどのように見えますか？

  • コンテンツはサイズや解像度によって異なりますか？

  • 小さいディスプレイサイズでのナビゲーション戦略

  • 小さいディスプレイサイズでのテーブル構造とコンテンツの表示

  • ブラウザーの互換性の問題

CSSの考慮事項

  • ブラウザー：外観は一貫性があり、最新の人気のあるブラウザーで使用できますか？さまざまなブラウザの古いバージョンで使用できますか？

  • プラットフォーム：デザインはPC、Mac、Linuxマシンで動作しますか？

  • デバイス：デザインは、フル解像度の低解像度およびモバイルデバイスに適応しますか？

  • 画面解像度：デザインはさまざまなウィンドウ幅で機能しますか？デザインは非常に狭いまたは広いビューポートに適応しますか（たとえば、min-widthおよびmax-widthプロパティを使用することによって）？

  • フォントサイズ：異なるデフォルトフォントサイズがデザインで考慮されていますか？また、フォントサイズが変更された場合？

  • 色：デザインは意味があり、内容は白黒で読みやすいですか？カラーブラインドのユーザーや、低コントラストのディテールを区別できない人には効果がありますか？

  • JavaScriptの存在：JavaScriptなしでページはどのように機能しますか？

  • 画像の存在：画像（背景または前景）なしでコンテンツを理解できますか？

  • 支援技術：ページのスクリーンリーダーは使いやすいですか？マウスがなくても制御/ナビゲーションは可能ですか？

一部のレスポンシブデザイン関連記事：

ツールとリソース：

あなたがそれが有用であると思ったら私に知らせてください。

3
Michael Lai

モバイルを十分にサポートするAxureやProto.ioなどのプロトタイピングツールを検討する価値があります。 Axure 7の最新ベータ版は、モバイル用の基本的なレスポンシブレイアウトもサポートしています。

また、特にモバイルの最初のソリューションでは、それをシンプルに保ち、お客様が一度に1つのタスクに集中できるようにし、タップゾーンを大きくすることも覚えておく必要があります（7mmは、ユーモアの指タップの一般的な幅であるため、良いガイドです）解像度に依存しません）。また、それらの大きなタップゾーンを許可すると、設計が強制的に簡素化され、特に低解像度のAndroidへの移植が容易になります。

レスポンシブデザイン（またはより洗練されたアダプティブデザイン）に夢中になる前に、レスポンシブデザインがユーザーに適用可能かどうかを確認することをお勧めします。ユーザーは実際にモバイルコンテキストでオンラインで行っていることと同じタスクを実行していますか？今日では、ユーザーの行動をモデル化し、互いに補完し合うオンラインおよびモバイル製品を設計するために、マルチチャネルアプローチを採用することをお勧めします。ダイアリー調査/定性テストなどを見て、顧客がモバイルで何をしたいのかを確認することは価値があります...そして「オンラインで実行することを期待する他のことはあります」...これは会話の枠組みを作るのに役立つかもしれませんユーザーのニーズを発見したとき。これは、製品の成功にとって、最初にデバイスの互換性などを心配しすぎることよりもはるかに重要です。これらの議論は後で行います。

「高詳細なアイコン」の作成に関しては、特にiOS7の発売に伴い、流行遅れになっています...スキューモーフィズムは過去のものです...フラットでシンプルなものです。また、この傾向はWindowsモバイルの標準/予想でもあり、Androidデバイスでも一般的になりつつあります。

その他の考慮事項には、モバイルソリューションがアプリ、Webアプリ、シェルアプリのいずれであるかが含まれます。 Webソリューションなどを格納するアプリ。アプリのプレゼンス用のShell-appを備えたwebappは、製品の性質によっては適切なアプローチになる場合があります。

0
Robert Whelan