web-dev-qa-db-ja.com

リアルなモックアップを作成するにはどうすればよいですか?

アプリの現実的なモックアップを作成する必要があります。最終的なアプリのように見えるモックアップを作成するためのモックアップツールはありますか?

(できればMac OS Cocoaアプリ、任意のOS:Linux、Windows、Mac)

そうでない場合、Photoshopでそのようなモックアップを作成するためのPSDはどこにありますか?

3
Calixte

私がモックアップしているものに依存します(モバイル対PC)。私は Webalys PSDがかなり便利だと思います。PSDは無料であるという追加の利点があります。

アクスルは、もう1つの一般的な推奨事項です。

現実的なモックアップを作成している場合は、古き良きHTML、CSS、JSを使用してみませんか?モックアップは、相互作用を理解するための大まかなツールとして役立ちます。そのため、高レベルの詳細は注意散漫になることがよくあります。モックアップの忠実度を低く保ち、モックアップから実際の製品に直接移行することを検討してください。

4
JohnGB

非常に迅速でインタラクティブなコードなしのプロトタイプを作成したい場合は、完全に無料でNokia製のFlowellaを試すことができます。利用可能 こちら

画面サイズを設定し、すべての画面のPNGを読み込んでから、ボタンの周囲にタッチポイントを作成し、ドラッグしてリンク先にリンクします。最終的な出力は、ブラウザで使用したり、携帯電話にロードしてテストしたりできるインタラクティブなFlashムービーです。

それは素晴らしく、一見の価値があります。

4
Robert Grant

紙、鉛筆。

私はジェンスグラムとジョンGBを出向しています。 「現実的な」デモには十分注意してください。彼らは物事を行い、本物のようなもののように感じますが、必然的にそうではありません。相互作用は、実際のアプリではなく、デモとデモソフトウェア用に設計されており、製品コードの実際の要件です。

デモが単なる使い捨ての場合、それはそれほど問題ではありませんが、それが公式の「ドキュメント」またはサインオフされたマイルストーンである場合は、アジャイル開発プロセスの採用を検討し、実際のアプリに任せることをお勧めします自体がデモとして機能します。

4
DA01

私は本当に本当に本当にお勧めします Balsamiq Mockups 。いくつかの非常に便利なレイアウトを作成し、少量のインタラクティブ機能をすべてワイヤーフレームの外観でいじることができます。

enter image description here

MockupsはAdobe Airアプリケーションであるため、Windows、OSX、および(現時点では)Linuxで動作します。私は主にLinuxで使用しており、非常に感銘を受けています。

0
Ian Norton