web-dev-qa-db-ja.com

このuxスケッチはどのように作成されましたか?

だれでもこの大ざっぱなUIイメージがどのように作成されるか知っていますか? Balsamiqモックアップですか?

link

2
Wangchao0721

彼らが述べたように( androidpatterns.com )、それはFireworks(下の引用を参照)で独自のカスタムツールキットを使用して行われます。 ツールキットをダウンロード できます。

このパターンを構成するすべてのスクリーンショットを比較および分析することにより、パターンの一般的な外観を選択できます。 Fireworks(CS5)を使用してワイヤーフレームを作成します。これには、テンプレートから開いた幅600ピクセルのドキュメントと、グラフィカルな他のテンプレートを使用します要素。要素がこのテンプレートにまだない場合は、それを作成してテンプレートに追加します。ジェスチャー付きの3番目のテンプレート(必要な場合)も使用します。 1行に最大3つのフレームを配置できます。番号付きの注釈マークをワイヤーフレームで使用でき、ワイヤーフレームの下の注釈付きテキストに直接アクセスできます。数字は重要なセクションと手順を強調しています。また、特定の画面セクションに焦点を合わせるには楕円を使用し、タップや選択には長方形を使用し、矢印や点線を使用することもあります。これらはすべてワイヤーフレームテンプレートにあります。

5
Ades

Evolus鉛筆 は、スケッチスケッチのセットを含みます。 Pencilを使用したかどうかはわかりませんが、同様の結果が得られました。スクリーンショットギャラリーの例を次に示します。

sketchy wireframe

3
Pau Giner

そのスタイルを許可する描画ツールを使用できます。 InkScapeを使用しています。それは道具についてではなく、美学についてです。重要なのは、完成したUIではないことを伝えるために、手書きのように見せることです。

実際、私は通常、手描きのワイヤーフレームを好みます。鉛筆+紙。

0
DA01

うん、私にはBalsamiqモックアップのように見えます。

0
Robert Grant