Balsamiq-mockups-introduction

提供:Dev Guides
移動先:案内検索

Balsamiqモックアップ-はじめに

Balsamiqのインストール

Balsamiqをインストールするには、次の要件を満たしていることを確認してください。

コンピューターでBalsamiqを実行するには、Adobe Air 2.6を実行する必要があります。 ほとんどのコンピューターとオペレーティングシステムで正常に動作します。 Adobe Air 2.6の最小システム要件は以下のとおりです-

Windowsの場合

  • 2.33GHz以上のx86互換プロセッサ、またはネットブッククラスデバイス用のIntel Atom ^ TM ^ 1.6GHz以上のプロセッサ。
  • Microsoft®Windows Server 2008、Windows 7、Windows 8 Classic、またはWindows 10。
  • 最低512MBのRAM(1GBを推奨)。
  • AIR SDK開発は、Microsoft®Windows 7以降、64ビットのみをサポートします。

Mac用

  • Intel®Core ^ TM ^ Duo 1.83GHz以上のプロセッサ。
  • Mac OS X v10.7以降。
  • 最低512MBのRAM(1GBを推奨)。
  • AIR SDK Developmentは、Mac OS 10.9以降、64ビットのみをサポートしています。

参照リンク-https://support.balsamiq.com/installation/systemrequirements/[Balsamiqシステム要件]

Balsamiqのダウンロード

Balsamiqは、次のリンクからダウンロードできます。https://balsamiq.com/download/[デスクトップ用Balsamiqモックアップ] Balsamiqは、WindowsおよびMac OSで利用できます。

ユーザーインターフェース

インストールが完了すると、コンピューターからBalsamiqを開くことができるはずです。 Balsamiqを実行すると、次の画面が初めて表示されます。

UI

上記のスクリーンショットに示すように、Balsamiqのユーザーインターフェイスは、次の4つの部分に分かれています。

  • ナビゲーター
  • UIライブラリ
  • 検査官
  • ワイヤフレームスペース/エリア

スクリーンショットで、赤で強調表示されているセクションは、Inspector/Project Informationセクションのトグルです。 選択に基づいて、インスペクター/プロジェクト情報セクション(3)のいずれかが表示されるはずです。

UIライブラリ

次のスクリーンショットに示すように、UIライブラリはさまざまな画面要素ごとに分類されています。 「すべて」セクションを水平にスクロールして、Balsamiqで利用可能な画面要素についてのアイデアを得ることができます。

UIライブラリ

Balsamiqで利用できるさまざまな基本的な画面要素のカテゴリを理解しましょう。

  • すべて-これは、Balsamiqに存在するすべてのUI要素を対象としています。 水平にスクロールして表示/使用できます。
  • アセット-導入のため、これらはユーザーがアップロードしたカスタムアセットです。
  • ビッグ-このカテゴリには、サイズ/外観がかなり高い画面要素が含まれます。 このカテゴリでは、プレースホルダー、ブラウザーウィンドウ、iPad、iPhoneなどの要素を確認できます。
  • ボタン-モバイル/ウェブワイヤフレームで使用されるすべてのボタンコントロールが含まれます。 典型的な例は、アクションボタン、チェックボックスなどです。
  • 共通-最も一般的な相互作用を示すために使用されるさまざまな形状/コントロールです。
  • コンテナ-名前が示すように、ウィンドウ、フィールドセット、ブラウザなどが含まれます。
  • フォーム-フォームに関連するすべてのUIコントロールがこのカテゴリに存在します。
  • アイコン-任意の時点で、アイコンで特定の操作を示す必要があります。 たとえば、最近では、[保存]ボタンが付いたフロッピーアイコンがあります。 このカテゴリのコントロールは、この操作に必要なアイコンを提供します。 Balsamiqにはアイコンの膨大なコレクションがあります。それらをチェックしてください!
  • iOS -Apple iOSモバイルオペレーティングシステムに固有のUIコントロールは、このカテゴリで使用できます。
  • レイアウト-基本的なページ/機能を表す場合、基本的なレイアウトを表すことが重要になります。 カテゴリレイアウトには、アコーディオン、水平/垂直タブなど、それらのほとんどが含まれます。
  • マーク-ワイヤフレームの特定のコントロールにコメントを追加するとします。 コメントボックスはマークアップで使用できます。 さらに、多くのシナリオで相互接続性を示すためにコールアウトが使用されます。 マークアップカテゴリで使用できます。
  • メディア-ワイヤーフレームで画像/音声を表示することになると、関連するUIコントロールがメディアカテゴリで利用できます。
  • シンボル-シンボルは再利用可能なコンポーネントであり、最も一般的な要素を作成する時間を短縮できます。
  • テキスト-名前の通り、リンクバー、テキストブロック、コンボボックスなど、テキストまたは段落に関連するすべてのUIコントロールは、このカテゴリで使用できます。

次の章では、Balsamiqで最初のプロジェクトを作成します。