web-dev-qa-db-ja.com

大きなディスプレイのユーザーインターフェイスのモックアップを作成するには、どのツールを使用すればよいですか?

大きなディスプレイ用のユーザーインターフェイスをいくつか開発しています。それらの多くはマルチタッチ操作をサポートしています。ペンと紙で手動でモックアップを描き始めました。いろいろな理由で、将来はコンピューターでやりたいです。まず、それを保存する方が簡単です。複数回必要なさまざまなユーザーインターフェイス要素のコピーをサポートするプログラムがあることを願っています。

だから私の質問は次のとおりです「従来とは異なる」ユーザーインターフェイスのモックアップの作成で私をサポートできる優れたプログラムはありますか?

10

はい。 Balsamiq Markups が好きです。少しインタラクティブにすることもできます。

15
Matt

SketchFlow MicrosoftのExpression Blend Studioの一部ですが、本当に、本当に良いです...

またあります

8
user389823

多くのプログラムとウェブサイトをテストした後、 Fireworksは非常に優れたオプションです があり、スケッチをhtmlまたはpdfにエクスポートする必要がある場合。

しかし、私の見解と私がいつもしていることの中で一番良いのは、コンピューターを使わずに鉛筆と紙を使うことです。

4
Amr Elgarhy

誰もがさまざまなワイヤフレーミングソフトウェアオプションを投げ出している。それは結構です。しかし、それは実際にはより大きな問題にはなりません。

私見、ワイヤーフレームは乱用され、ワイヤーフレームが決してすべきではないことをするように求められます。それらの1つは、UIの定義です。ワイヤーフレームはブレーンストーミングに最適で、ページレイアウト、コンテンツ領域、および全体的なユーザーフローを決定するのに役立ちますが、完全に具体化されたユーザーインターフェイス用に設計されていますnot

一般的なワイヤーフレーミングには鉛筆と紙を使うことを強くお勧めします。詳細なUIについては、早くからプロトタイピングを開始し、UI要素の作成に通常使用するツール(PhotoShop、Illustratorなど)を使用してください。

4
DA01

Scetchflowが好きです。 Mozillaには無料のプロトタイピングツール「Evolus鉛筆」があります。このアプリは、Firefox Extensionまたはスタンドアロンアプリとして利用でき、いくつかのウィジェットがあります。 XMLを使用して独自のウィジェットを作成することもできます(ただし、少し複雑です)。

Mozilla Evolus Pencil

2
sysscore

JotNot Proで簡単にスケッチをデジタル化できます: http://drawingdownthevision.com/virtual-office-sharing-sketches-instantly-digitally/

デジタルのみのモックアップ/プロトタイプが必要な場合... IMOに最適なツールはProtoshareです。 (P&Gでは社内で使用しています。)

ただし、デジタルのみに移行する前に、これをチェックしてより大きなクリエイティブプロセスを確認することを強くお勧めします。 http://atsiem.com/wp-content/uploads/2011/04/FromPaperToPixels.pdf

心を開いたままにし、保存するデジタルモックアップがバイトサイズに見合うものであることを確認するには、ペンといくつかのテンプレートをつかんで、スケッチだけに集中してください。トップレベルのページのスケッチを10枚取得してみてください。そうしないと、デジタル化を検討する必要はありません。

2

クライアントとの通信にワイヤーフレームを使用する必要があるまでは「画面」アプローチを使用しない方がいいです。また、クライアントをインタラクティブにして、何が起こっているのかをクライアントが理解できるようにする必要があります。

UIをデザインするときは、鉛筆と何トンもの紙を使用しますが、SCISSORSとGLUEも使用して、可能な限りすべてをテストします。最終的なワイヤーフレームを作成できるように、各状態/リビジョンの写真を撮ります。

2
Rahman Kalfane

別のオプションは、PhotoshopやThe Gimpなどの画像編集アプリケーションでグラフィックタブレットを使用することです。これにより、スピーディーなプロトタイピングと自由な動きが可能になり、オブジェクトの色を変更、削除、再配置することができます。

1

Macをお持ちの場合、UIモックアップ用のOmniGraffleを本当に楽しんでいます。それは一般的な目的ですが、追加の「ステンシル」を Graffletopia から見つけることができます。通常、モックアップに追加する前にほとんど編集を必要としないステンシルを見つけます。たとえば、以下は タッチとボディのジェスチャーステンシル です。

ただし、デジタルモックアップを作成する前に、より大きな問題を処理するために、まず大まかなアイデアを紙に書き留めておいた方がはるかに優れていることにいつも気づきました。

1
Kusmeroglu

私は Axure を好みます。それは、学びやすく使いやすいからです。 Webページには、さまざまなヘルプドキュメントやビデオがあります。

最近、会社で評価して、ライセンスを購入しました。コーディングの前に、新製品の1つ(Webクライアント)のAxure内で完全なプロトタイプを設計します。これらのモックアップを作成することは非常にコスト効率が高く、ビットビジネスロジックと接続することができます。これは、ユーザーがソフトウェアをどのように使用するかを「感じる」ためにマネージャーが強く好むものではありません。

実際の製品を開発する前に、多くの問題に気付き、いくつかの新しいアイデアを得ました。これで構築したいもののプロトタイプができました。開発者はイメージをコードに転送できます。設計のあらゆる側面を検討する必要がないため、没入型の時間とエネルギーを節約できます。

また、1つのライセンスを持つマルチOS(MacおよびWin)です。悲しいことに、ライセンス料は少し高く、ソフトウェアには自動更新プロセスがありません。 UPAのメンバーの場合は、より少ないライセンスでライセンスを取得できます。

1
suzhi

すでに述べたように... JustInMind は、インタラクティブなワイヤーフレームを使用および作成するための優れたツールです。私はそれを使って、CEOが構築を提案したいAPPのインタラクティブなiPhoneモックアップを作成しました。このソフトウェアの欠点は、単一のライセンスで500ドルであることです。資格があれば割引を提供しますが、30日間の試用を提供します。

Balsamiqも楽しくてすぐに使えるツールですが、あまりインタラクティブではありません。

1
rohicks

Omnigraffleがここでの最良のオプションであることに同意します(Macユーザーの場合)。複数のページにわたって作業でき、再利用可能な要素を作成するのは非常に簡単です。 Konigi Wireframe Stencils を使用すると、適切な低fiモックアップを構築できます。

私がかなり気に入っているもう1つの良いMacオプションは Antetype です(ただし、プロトタイピングにより適しています)。 Macを使用していない場合は、 Balsamiq をお勧めします。

1
Meagan T.

以下の3つを使用します。

  1. Balsamiqモックアップ(素早く波打つスケッチ用)
  2. Visio(仕様)
  3. Expression Blend(インタラクティブモックアップ/プロトタイピング用)
0
Alan Ho

IPadを使用している場合、 App Cooker は、いくつかの素晴らしい機能を使用して非常に簡単に使用できます。

0
ScottK