web-dev-qa-db-ja.com

ブラウザでのワイヤーフレーミングの名前は何ですか？

私は非常に大規模なWebプロジェクトに取り組んでいて、まずSketchで一連のワイヤーフレームを設計することを考えています...しかし、それらが承認されたら、Bootstrapを使用してワイヤーフレームを構築する予定です。 =クライアントが移動できるように、いくつかの静的ページがあります。

次に、ルックアンドフィールを設計します（その時点でSketchに戻ります）。

だから私は不思議に思っているのですが、Sketch/Illustratorなどのアプリでのワイヤーフレーミングと、ブラウザでのワイヤーフレーミング（たとえば、ブートストラップ？

website-designlayoutwireframewireframing
11
pealo86

アプリのワイヤーフレームはWireframeと呼ばれます

インタラクティブなデモ（Bootstrapなど）へのワイヤーフレームの開発が呼び出されますプロトタイピング

編集：

@Joseが彼の投稿で言及したスライドからの役立つプロトタイプタイプ：

ペーパープロトタイプ
よく使用されるツール：紙、ペン、マーカー

enter image description here

低忠実度プロトタイプ
よく使用されるツール：Balsamiq、Axure

enter image description here

高忠実度プロトタイプ
よく使用されるツール：Invision、Marvel、Sketch、Photoshop、Justinmind

enter image description here

機能的なプロトタイプ
App Inventor、Origami、Framer、Twitter Bootstrap、HTML/CSS/JS

enter image description here

25
DPS

ワイヤーフレームをプロトタイプとして使用できますが、すべてのワイヤーフレームがプロトタイプであるとは限りません。

Wireframe= adiagram白黒の線のみを使用し、色は使用しない。

プロトタイプ=仮説のテストに役立つすべてのもの。といった、

  1. このjavascript関数は仕事をしますか？
  2. このレイアウトは十分に明確ですか
  3. このUUフローは最適ですか
  4. ユーザーはこのカラーパレットを気に入っていますか？典型的なプロトタイプは、marvelアプリ、justinmind、htmlコードを備えた紙のプロトタイプで作られています...

プロトタイプの忠実度が高いほど、フィードバックが正確になるという原則があります。命名規則を探している場合は、忠実度を使用して、ワイヤーフレームとプロトタイプを区別できます。

お役に立てば幸いです。以下に、プロトタイプの types （スライド13から22）の例をいくつか示します。

9
Jose Berengueres

それはprototypingと呼ばれます。

Marvel App。 などのアプリを使用して、紙のプロトタイピングやクリック可能なデモを作成することもできます。

3
Nick Groeneveld

これは私がこれらの用語を簡単な方法で理解する方法です

この完全なWordを2ワードに分割します。つまり、WireおよびFrameです。あなたが彫刻家で、人間の像を作る必要があるとしましょう。最初にワイヤーのスケルトンと木材/スチールを作成するだけで十分です。これを行うと、実際には人間のwireframeが作成されます。

ワイヤーフレームでの作業が完了すると、つまり、彫刻家の形状、位置、低レベルのルックアンドフィールでの作業が完了します。

同様に、私たちの家のデザインも紙に最初に描いて、私たちの将来の家についてのアイデアを得ます。

次に、泥やセメントをこの人間のワイヤーフレームの上に置くと、正確な形状、感触、表情、位置などを与えようとします。つまり、プロトタイプにすぎません。

専門家は、多くのことを発見、学習、試行、測定するための十分な時間を確保できるように、プロトタイピングフェーズは高速であるべきだと提案しています。したがって、速度を上げるための最良のツールとしてAxure RP、UXPIN、Balsamiqなどをお勧めします。

0
Shabir Gilkar