レスポンシブデザインにおけるAxureの価値
レスポンシブサイトを設計する際に、プロトタイプツールAxureを使用することの価値について、幅広い聴衆の意見を知りたいと思います。
成果物がレスポンシブサイトであるプロジェクトがあります。ただし、最初にサイトのプロトタイプを作成するためにAxureを使用してサイトのデザインに取り組む必要があるのかと思っているところです。または、スケッチとUXおよびフロントエンドの開発チームから非常に緊密に協力して作業します。
最初にAxure（または任意のプロトタイピングツール）を使用する際の私の予約は、コンテンツ、レイアウト、および構造に好きなようにさせることができるということです。ただし、HTMLマークアップを使用すると、特定の制約と考慮事項があります。これらの問題は、プロトタイピングツールで完全にキャプチャすることはできませんが、HTMLマークアップで扱うことができます。
明らかにいくつかの長所と短所があります。私は、あなたが仲間のUXerがこの件について何を言わなければならないかを聞きたいと思います。
レスポンシブサイトを構築する場合は、Twitter Bootstrapまたはジョブの他のフレームワークを使用する可能性があります。
したがって、Bootstrap CSS/JS inで静的HTML内のすべてのプロトタイプをブロックできます。ウォークスルーしたい場合は、ボタンをフックして、ボタンをロードすることもできます。次の静的ページ。
実際のブラウザで動作するかどうかを確認する方法のすべてのステップで。または実際の電話。
すべてが標準のBootstrap fonts/colours/spacingでブロックされたら、実際に何かを持っています。あなたはそれをコーディングでき、スタイルを設定できることがわかります。また、ファンシーなフォントが入力ボックスの位置合わせを壊すなど、変更を加えてテストすると、問題が発生する可能性があります。後で問題が発生することはありません。
さらに、Twitterのやり方を学ぶために費やす時間Bootstrap方法、たとえば、モーダルを機能させる、フォームを適切に整列させることは時間の浪費ではありません。対照的に、Axureで費やす時間は有用なものを学ぶことから離れて。
または、スケッチとUXおよびフロントエンドの開発チームから非常に緊密に協力して作業します。
常に可能な場合はそのオプションを選択します。
ちょっと待ってください。
可能な場合は常にそのオプションを選択してください!!!
そこがいいです。 :)
そのルートに進まない唯一の時は、あなたが助けるためのフロントエンドの開発者スキルセットを持っていない場合です。その場合は、確かに、Axureのようなものが役立ちます。
しかし、レスポンシブデザインの欠点は、3つの個別の「デザイン」を取り、それらを1つのHTMLドキュメントとして機能させるのではなく、1つのHTMLドキュメントを取り、3つの個別のデザインとして機能させることです。
PSDまたはAxureタイプの成果物をレスポンシブHTMLに変換しようとするときに遭遇する問題は、それらをまとめた人がHTMLとCSSに含まれる基本的なロジックを理解していないことです。たとえば、PhotoShopでは、画面サイズに基づいて画像とテキストを反転するのは簡単ですが、CSSに論理的に変換されない場合があります。
したがって、質問に答えるために：Axureの価値は、社内フロントエンドのプロトタイピングリソースを持たないUXチームが、応答性の高いWebページがクライアントと通信できるようにすることです。 のようになります。
ここでのすべての回答は、レスポンシブデザインにおけるAxureの価値について美しく書かれています。最適化することを決定したさまざまなブレークポイント（レスポンシブデザイン）にワイヤーフレームをどのように応答させるかがわかったら、デザインを伝達する方法のより基本的な側面について説明したいと思います。救援。
開発者として毎回ブラウザのサイズを変更し、さまざまなブラウザとバージョン、さまざまなプラットフォームなどをチェックインするために、Axure 7.0には、「アダプティブビュー」と呼ばれるレスポンシブデザインのプロトタイプを自動作成する方法が含まれています。これにより、プロトタイプを機能させることよりも、設計に集中することができます。
アダプティブビューの設定は簡単です。事前に設定されたブレークポイントを使用するか、自分でカスタマイズします。コンテンツを「ベース」ビューに配置します。これは、開始する場所に応じて、最も広いビューまたは最も狭いビューのいずれかになります。
axureを使う他のポイント
- 設計者は、フロントエンドのコーディングに関する知識がなくても、非常に高度なインタラクティブプロトタイプをすばやく作成できます。
- 非常に複雑なウェブサイトのプロトタイプ、iPhoneアプリ、iPadアプリ、セットトップボックスおよび接続されたテレビ用の10ftUI（10フィートのユーザーインターフェイス）
- 信じられないほどのチームのコラボレーション
- コアにはSVNクライアントが組み込まれているため、チームメンバーはページをチェックしたり、ウィジェットをマスター/インしたりできます
- AxureはHTMLにエクスポートされ、エンドユーザーが特別なビューアーアプリケーションをインストールする必要なく、任意のブラウザーで実行できます。
- ユーザーのテストが非常に簡単になります
- usertesting.comなどのサービスを使用したモデレートされていないリモートユーザーテスト
コミュニケーションピースのもう1つの部分は、デザインのあらゆる部分を完全にプロトタイプ化することはできないこと、およびすべきではないことを認識しています。主なアイデアを理解し、コーディングを開始します。それが起こったら、開発者とオープンで定期的な対話をしている限り、設計で考慮していなかった、または実装よりも実装が容易だと思われた、数多くの小さな問題に対処できます。 。多くの場合、プロトタイピングツールでそれを理解しようとするよりも、開発環境で調整する方がはるかに簡単です。
レスポンシブである必要があるプロトタイプをビルド/テストすることを計画しているのでない限り、実際にはAxure 7の組み込みのアダプティブビュー機能を使用しないことをお勧めします。私はレスポンシブサイトで作業しており、モバイルビューとタブレット（768px）ビューのフラットワイヤーフレームを実行してから、クリエイティブを含む実際のHTMLビルドにすばやく移動するのが最善の方法であることを理解しています。これらの2つのサイズのみに焦点を当てることで、大きなサイズは本質的に「ストレッチ」しながら比率を維持すると仮定して、より大きなブレークポイントにスケーリングできるようになりました（ただし、場合によっては、1024以上でさらに微調整する必要がありました）。
フラットなアクスルワイヤーは、初期の構造感を与えるのに役立つことが証明されています。優れたフロントエンド開発者スキルを持つ小規模なチームで作業している場合は、おそらくAxureの手順をスキップしてスケッチから直接進むことができますが、この場合、非常に大規模なチームがあり、前もって少し多くのドキュメントが必要です。良い参考になります。
「（...）最初にAxureを使用する（...）コンテンツ、レイアウト、および構造に好きなようにさせることができます。」
実際、Axureだけでなく、Sketch、Photoshop、その他のデザインツールなどのツールでも好きなことができます。ツールが相互作用を模倣する可能性を提供しないという事実は、それらが設計者によって計画/設計されていないことを意味しません。単純に、クリック可能なプロトタイプを作成する代わりに、彼女は相互作用を表現するために画面の複数の状態を設計しています。実物からはもっと離れていると思います。したがって、Axureがこの領域にリスクを追加することはありません。そして、UXデザイナーが技術的に実現不可能なものを設計するという事実は、別の問題です-おそらくこれらのいずれかまたは両方に関連しています：
- UXデザイナーは、使用しているプラットフォームを理解していません。いくつかのトレーニングが役立つはずです。
- UXと他の部門間の通信が機能しません。設計者がコンサルティングを行い、初期スケッチを開発者と共有すると、このような問題が頻繁に発生するはずです。
最後に重要なことですが、クリック可能なプロトタイプは、ユーザーが製品をテストするときに大きな価値をもたらします。
レスポンシブウェブサイトにもAxureを使用しています。実際のウェブサイトをシミュレートするために言う必要がありますが、お勧めしません。とにかく開発者がもう一度やり直さなければならないので、すべての相互作用を実装することは私にとって本当に意味がありません。私がしていることは、ほとんどの場合960を計画しており、モバイルビューを追加するのが難しい特定の画面です。実際に「設計」したりコーディングしたりせずにページのアイデアを得るのが非常に速いため、クライアントでも、ディスカッションツールとしてaxureワイヤーフレーム（低fi）を使用しています。クライアントが基本的な機能とコンテンツに同意すると、実際のデザインでそれが示されます。つまり、私にとってAxureは、「私は実際には赤いものよりも青いものが好きだ」とは言えず、ディスカッションを開始するためのツールです。設計の準備ができていれば、プロトタイプを作るのに2分かかるので、私は高速プロトタイピングの洞察が大好きです。
だから：軸：低fiワイヤーフレーム（色なし、あまりデザインされていない）、機能とおそらくコンテンツを表示します。開発者向けの特定の詳細を書き留めます。
インビジョン：設計画面による高速プロトタイピング。
レスポンシブな動作をシミュレートするには、前述のように常に「実際の」プロトタイプをお勧めします。
私は例えば gumby レスポンシブレイアウトを実装します。 axureのウェブフレームを使用すると、オンラインコンテンツをaxureプロトタイプに簡単に組み込むことができます。 axureの機能とJavaScriptの間の相互関係に関しては、ニーズによっては問題が発生する可能性があることに注意してください。