我々が開始する前に、私はあなたがメッシュ4または5グリッドを選択しないか、ウェブページ内のいくつかの質問をしたいと思いますか？ビデオを置くためにどこに？画像を置くためにどこに？巻物にリストの水平または垂直線を選択されていますか？ナビゲーションバーには4つのまたは5つのタブを設計しますか？
この記事では、私はオフラインブロックダイアグラムのコンセプトを紹介するだけで、これらの質問（またはそれ以上）のすべてにお答えします。
定義されたワイヤーフレーム
ドローワイヤーフレームは、メソッドのWebページを考案するページ構造からの脱却です。
ワイヤーフレーム、それは何ですか？
usability.gov与えられた定義によれば、ワイヤフレームは、コンテンツ、機能性と利用可能なスペースの割り当てと優先順位付けの予想される動作に専念するための二次元ページインターフェースの概略図です。
簡単に言えば、それはページまたは画面上の特定の要素の存在を証明するページや、画面のレイアウトで、それはのページとみなすことができるページフレーム。あなたは、彼らが機能を理解して、主に懸念しているので、彼らは、重要な要素の位置を任意の色、スタイルやグラフィックスが含まれていないとどのようにユーザーがそれらと相互作用する、上記画像に気づいているかもしれません。
なぜそれほど重要なのワイヤーフレーム？
ワイヤーフレームは、多くの時間を節約することができますので！ワイヤーフレームは、設計プロセスの初期段階で使用されているので、ワイヤフレームステージの変化は、フィードバックは、最終的なモデルの変化が視覚的要素の数が多いのではなく、達成することがはるかに簡単です。これは、将来的に変更時間を節約、ページを描画する機能を実現するために私たちを助けて、問題の早期発見することができます。これは、設計者は可用性を測定するように設計（ワイヤーフレームからのプロトタイプへの最終的な成果に）開発プロセス全体に傾向があり、実現可能性の問題を紹介します！
「ワイヤフレーム設計の青写真のようにあなたは家が設計図と同じではありません構築同じように、無視すべきではありません。」
デザインは、私たちは時々、ユーザーの使いやすさと機能性を忘れてしまいました。色、画像やその他の詳細を排除することによって、私たちは、ページ上の各要素のレイアウトや機能を検討する必要があります。しかし、我々は唯一の目的とする構造で最高のユーザーエクスペリエンスに焦点を当てることができます。効率があなたの目標である場合、フレームはあなたが始めるべきところです。
タイプのワイヤーフレーム
二種類のワイヤーフレーム：LO-Fiの忠実度の低いフレーム、ハイファイフレームの忠実度
ローファイなワイヤーフレームは通常、最も基本的な内容と視覚効果を含むラフ紙のスケッチ、である、（非対話型）は通常の静的。
然而，高保真线框非常详细，并且具有低保真里通常缺少的细节。相对于低保真线框图，高保真线框图耗时多、难上手。
什么时候创建线框图？
一旦你收集了足够的用户动机和目标，线框图就会派上用场。你需要了解你网站的结构，这可通过做一个产品逻辑地图实现。但是，如果你想探索其他可能性，或不同的功能，低保真线框图就起到作用啦。 线框图没有严格的规定或秩序要遵守。
如何创建线框图？
我需要为一个线框软件/工具支付大量的费用吗？不！相信我，在大多情况下，笔和纸的线框都能很好地工作。它们和数字线框一样快速有效。草图可以传达想法，并且可以轻松理解流程/结构。
如果你试图决定使用哪种类型的线框工具，除了草图和纸质线框图，你也可以用在线工具来创建它们。作为一款在线的原型设计和协作工具，墨刀可以让设计零基础的人轻松画出产品线框图，它提供多种线框图组件（矩形、线条、文字输入框等），可直接拖拽组件到画布。便于进行可行性测试，提高产品设计效率。
线框图确实是UX过程的重要组成部分。 这个过程不仅能够确保我们的团队在同一进程上 - 而且还允许我与目标用户群体一起进行测试，在深入潜入视觉设计之前尽早收集反馈。
想让你的线框图更方便、更轻松地将想法传达给团队，以及考虑到设计实施时情况，那就开始制作线框图吧！
本文转自由墨刀编译自 Parveen Yadav 的 Wireframes in UX Design — What, Why, When and How?
墨刀作为一款在线原型设计与协同工具，已经帮助众多产品经理和设计师们轻松做出交互原型，展现和验证设计想法，还支持多人协作编辑，分享和评论。新注册用户即可获得墨刀高级企业版的15天免费试用！开始体验一下吧！