Wireframesketcherは、サイトレイアウトを作成して概要を提供します

Wireframesketcher- グラフィカルインターフェイスのプロトタイピング用に設計されています 。

デスクトップコンピューターとスマートフォンの両方、および他のモバイルデバイス用のWebサイトとアプリケーションのインタラクティブなプロトタイプを作成することができます。

著者はWireframesketcherを専門家向けのツールとして位置付けており、それにはあらゆる理由があります。 アプリケーションは、Eclipse IDEに基づいて開発されるか、Eclipseのプラグインとしてインストールできます。これにより、クロスプラットフォームアプリケーション（Linux / Mac / Windows）が提供され、さまざまなバージョン管理システムなどのサポートを含む、このIDE用に開発された多数のツールを使用できるようになりますプラグイン。 バージョン管理に関しては、XMLデータファイルはプロジェクトデータの保存に使用されるため、実装は簡単です。 また、Wireframesketcherには、レイアウト、テンプレート、ウィジェット、およびアイコンのかなり広範なライブラリがあります。



この記事では、Wireframesketcherで簡単なWebサイトのプロトタイプを作成する例を示します。 この場合、プロトタイプは、いくつかのリンクされたインタラクティブな、いわゆる ウェブサイトページのワイヤフレーム（ワイヤフレーム）。 将来的には、簡単にするために、このコンテキストでは「フレーム」に省略された「元の」名前「ワイヤーフレーム」を使用します。



Wireframesketcherを選んだ理由は 私はLinuxを使って仕事をしていますが、実際、このシステムに適したものは見つかりませんでした。賢明なアナログはMacとWindows専用です。



特定の抽象的な会社のプロトタイプサイトを作成するとします。

当然、そのようなサイトのすべての可能なページの作成については説明しませんが、Wireframesketcherの機能を示すためにいくつかのページのみを示します。



それでは始めましょう。 すでにEclipseがインストールされている場合（例えばPDT ）、IDEのバージョンのプラグインとしてWireframesketcherをインストールできます。Eclipseがインストールされていない場合、オペレーティングシステム用の別のアプリケーションとしてWireframesketcherをダウンロードしてインストールできます。プラグイン、それぞれ、このオプションのすべてのアクションについて説明しますが、アプリケーションでは実際に違いはないと思います。



Eclipseに慣れていない人のために、このIDEのメニューのスクリーンショットを提供します。そのような画像にメインメニューがない場合、これはコンテキストメニューが表示され、その下の要素を「右」クリックして受信されることを意味します



新しいワイヤーフレームプロジェクトを作成し、テンプレートとして空のプロジェクトを選択し、print_shopと呼びます（他の名前を選択できます）。





次に、ホームページの画面（以下、画面）を作成し、それをhomeと呼びます。



Wireframesketcherの観点からの画面は、本質的には、ユーザーインタラクション中にページのさまざまな状態を表示するために少なくとも1つ、時には複数の画面が必要な各ページに対して、それぞれページフレーム自体を作成する仮想画面です。



この段階では、便利なバージョン管理システムにプロジェクトリポジトリを既に作成できます。





これは、 最初にインストールする必要があるプラグインの助けを借りて最も便利に行われます。EGitを使用しますが、他のプラグインを選択することもできます。



最初のコミットをしましょう





プロジェクトエクスプローラーでファイルを選択するときに対応する画面編集タブを開くには、[エディターとリンク]アイコンをクリックすることをお勧めします。 また、グリッドの表示をオンにしてオブジェクトをスナップすることをお勧めします。そのためには、「デフォルトのテーマ設定」をクリックして適切な設定を選択します。





最後にできることは、「クリーン」表示モードを選択することです。そうすると、画面上のオブジェクトの線が平らになります。 このオプションは、スケッチを手で模倣するよりも好きです。





XMLエディターで





home.screen画面の内容を見ることができます





ホームページフレームを作成しましょう。 もう一度、 スクリーンショットを見てください。右側は、利用可能なオブジェクトのライブラリを備えたパレットパネ​​ルです。 必要に応じて、 他の開発者または独自の開発者のオブジェクトをこのライブラリに追加できます 。 TextフォルダのTitleオブジェクトとContainersフォルダのBrowserオブジェクトをホームページ画面に「プル」し、その表示パラメーターを設定します。 なぜなら サイトのページのフレームレイアウトを作成するとき、ページに表示される情報とコントロールとおおよその位置を表示するためにこれを行うだけです。その後、この段階では、オブジェクトの正確なサイズと位置、ただし、この点に関しては独自の戦略を選択できます。 結果をPDF形式にエクスポートするには、ブラウザー800x600pxのサイズを選択し、ここのように12.48 pxのインデントを選択することをお勧めします



これにより、必要に応じて、余白に見出しと説明のためのA4スペースが残ります。



Wireframesketcherを購入するまで、PDFにエクスポートすると、試用版が表示されます





次に、ホームページのブラウザに、パレットパネ​​ルからの典型的なオブジェクト、ロゴ、会社名、メインページの写真、テキスト、ナビゲーションメニュー、ニュースフィードを追加します。 これらはすべて、設計を主張するものではなく、実際に実際に必要とするものではなく、もっぱら親しみの目的で行われることに注意してください。



ロゴは、ライブラリ/レイアウト/形状から作成できます。



会社名-ライブラリ/テキスト/タイトル。



メニュー-ライブラリ/テキスト/リンクバー、メニュー項目の標準数をすぐに減らします：ホーム、ブログ、フォーラム、約3つ：ブログ、連絡先、サブスクリプション。



なぜなら ページに実際の画像を配置しません（そのような機会があります-任意の実際の画像を挿入できます）、それに対応する説明：「ホームページの写真」とともに、ライブラリ/レイアウト/プレースホルダーを使用します。



テキスト-ライブラリ/テキスト/ Lorem Ipsum、なぜなら 現時点では、画像の周囲にフローを設定する方法はありません。2つのテキストブロックを使用してこれをシミュレートし、ツールバーアイコン、オブジェクトメニュー、またはコンテキストメニューのいずれかを使用して、信頼性のためにグループ化します





グループ内のオブジェクトを操作するには、ダブルクリックで選択し、画面上の残りのオブジェクトが明るくなり、選択したグループを操作できます。たとえば、名前を変更したり、編集するグループのオブジェクトを選択したりできます。





画面の編集に戻るには、グループの外側をダブルクリックします。



フィードを縦線で区切り、ニュースアナウンスを作成します。

私はあなたがすでにそれを行う方法を自分で理解できると思います。 グリッドへのスナップを使用したくない場合は、スナップをガイドに使用して、オブジェクトの配置を容易にすることができます。 ガイドを作成するには、画面編集エリアの端にある対応するルーラーをダブルクリックします。 ニュースアナウンスオブジェクトをグループ化すると、画面は次のようになります



私は特にグリッドを削除し、この画面にガイドを追加しました（デモ用）。



ホームページの最終的な記入のために、ニュースの発表を数回複製するだけです。 もちろん、これは通常のコピー+貼り付けで行うことができますが、[Ctrl]キーを押しながら複製したオブジェクトを適切な場所にドラッグする方がはるかに便利です。この瞬間、矢印の隣に+記号が表示されます。つまり、オブジェクトのコピーを「引っ張っている」 グリッドとガイドの両方へのスナップをオフにして、次のようなものを得たとします





ここで、アナウンスメントのオブジェクトを左に揃えて垂直に均等に配置するには、ツールバーから対応するツールを使用できます。このためには、最初にすべてのオブジェクトを正しい順序で選択する必要があります





これに似たホームページが表示されるはずです。





ページが「リンク」する方法を示すために、サブスクリプションページを作成します。

これを行うには、ホームページ画面を複製します





実際、クローニングはたった1つのアクションでのペーストの類似物です。



新しい画面の名前をサブスクリプションに変更します





そして、時間通りにコミットすることを忘れないでください。アイコンを装飾するバージョンコントロールプラグインは、たとえば、コミット前など、プロジェクトエクスプローラーウィンドウでファイルの現在の状態を表示します。



そしてコミット後





サブスクリプション画面で、ロゴ、会社名、メニューを除くすべての不要なオブジェクトを削除します。これらのオブジェクトはページタイトルを構成し、サイトの各ページで繰り返されます。 一般的な画面タイトルの名前を「サブスクリプションページ」に変更します。 すでに2つのページがあるので、ロゴにホームページへのリンクを追加し、「サブスクリプション」の下のメニューにサブスクリプションページへのリンクを追加するのが論理的です。 急いではいけません、なぜなら 今すぐに開始する場合は、将来、各画面でそのようなアクションを繰り返す必要があります。 さらに、これらのリンクまたはたとえば会社の名前を変更する場合、すべての画面でこれを行う必要があります。 Wireframesketcherでの重複オブジェクトの操作を簡素化するために、いわゆる コンポーネント、および既にページに配置します。 コンポーネントファイルを変更して保存すると、使用されるすべての画面で「自動的に」変更されます。



タイトルコンポーネントを作成するには、ロゴ、名前、メニューを選択し、コンテキストメニューの[コンポーネントに変換]を使用します





このコンポーネントをpage_headerと呼びましょう





デフォルトでは、すべてのコンポーネントがアセットプロジェクトフォルダーに追加され、パレットパネ​​ルのライブラリ/アセットフォルダーで利用可能になります。 これで新しいpage_headerコンポーネントができました



ホーム画面のロゴオブジェクト、名前、メニューを削除し、page_headerコンポーネントを[パレット]パネルの[ライブラリ/アセット]フォルダーからその場所に「プル」する必要があります。

プロジェクトアセットフォルダから直接「プル」すると、画面上のそのようなコンポーネントは正しく表示されません。

コンポーネントは、それが配置されている画面で直接編集できます。 これを行うには、グループを編集する場合と同様に、コンポーネントをダブルクリックします。 ただし、同時に、コンポーネントの元のプロパティは重複しており、次回コンポーネントで変更されたときに、この画面では更新されません





次に、コンポーネント画面のロゴにホームページ画面へのリンクを追加します。これを行うには、ロゴを選択し、リンクパネルでhome.screenを選択します





次に、わかりやすくするために、最初のメニュー項目を「ブログ」から「ニュース」に変更し、「サブスクリプション」項目にサブスクリプション画面へのリンクを設定します



その後、page_headerコンポーネント画面を保存し、ホーム画面とサブスクリプション画面の変更を確認すると、対応するオブジェクトに黄色のリンクアイコンが表示されていることがわかります。



[F5]を押すか、メインメニュー項目を選択してプレゼンテーションビューモードに入る場合



これらの要素をクリックすると、対応する画面に移動します。



[Esc]を押すと、プレゼンテーションモードを終了できます。

これで、サブスクリプション画面で、会社のニュースレターにサブスクライブするための電子メールアドレス入力フォームの要素を追加できます。 さらに、subscription_successとsubscription_failの2つの画面を作成する必要があります。1つ目は、成功したサブスクリプションに関するメッセージを含むページをデモする最初の画面、2つ目は無効な電子メールを入力したときのエラーメッセージを含む

「subscribe」ボタンの横にsubscription_failエラーが表示された画面に移動するには、通常、ライブラリ/注釈/メモから対応するテキストを含むメモを追加し、このメモのリンクをsubscription_fail.screenに示します。 プレゼンテーションモードで表示しているときにメモを表示するには、[注釈を非表示]チェックボックスを無効にするか、[A]キーを押す必要があります





それでは、最も重要なことであるリンクされたページで複数ページのPDFプレゼンテーションを作成することに移りましょう。 これを行うには、いわゆるを作成します。 メインメニューで適切なアイテムを選択して、ストーリーボードストーリーボード





プロジェクトと同様にprint_shopと呼びましょう





次に、緑色のボタン「画面の追加」をクリックして、すべての画面を選択します





完成したストーリーボードを取得します





必要に応じて、Screenflowで画面のレイアウトをいじることができます



しかし、私にとって個人的には実用的な価値はありません。 この図をPDFにエクスポートするつもりはありません。特に、プレゼンテーションに数十の画面がある場合、この図は移動しないため、矢印の「混乱」が生じるためです。



PDFへのエクスポートアイコンをクリックして、エクスポート設定を選択します。このスクリーンショットのようにします





別のトランジションリンクを含むメモがある場合は、[注釈を非表示]をオフにしてください。そうしないと、これらのメモは最終的なPDFに表示されません。 「エクスポート」ボタンをクリックします-出来上がり-PDFファイルの準備ができました！ プロトタイプを顧客に提示できます。



ここで結果を見ることができます 。 なぜなら PDFビューアーGoogleディスクはページ間のリンクを「理解しません」-ファイルをダウンロードし、既にリンクを使用してローカルで表示することをお勧めします。



簡単にまとめると。 Linuxで「ワイヤー」レイアウトを作成する方法は他にもあります。たとえば、InkscapeまたはLibreOffice Drawはこれをさらに改善できますが、Inkscapeはそのままで複数ページのファイルを作成することはできません。 Wireframesketcherはこれらの両方を行います+既製のオブジェクトの大きなライブラリを備えています+バージョン管理システムのプラグインで動作します。



Wireframesketcherには他にも多くの便利な機能があります。たとえば、完成した結果をアプリケーションからネットワークなどに直接アップロードできます。 しかし、もちろん、このテーマについての以下の出版物で、これらの機会についてお話します。