読者です 読者をやめる 読者になる 読者になる

よりぶろ

アプリのUIとかについて書いてく予定

プロトタイピングツール Briefs 入門 第1回目『新規作成・ボタン配置・画面遷移』

来週社内で Briefs の勉強会を突発的にやることにしたんですけど、上司から「俺その日BD休暇(誕生月は1日有給が貰える)なんだよね…」という切ないメールが来たので、せっかくなので備忘録も兼ねて これ読めばなんとかなるよ的な記事を集中的に短期連載します(フォトライフの容量もそんな多くないし…)。

Briefs 使いがもっと増えてくれるといいな〜〜〜。

※ Briefs については別記事参照

 

■事前準備

というわけで、まずはここからBriefsをインストールします。Mac App Store だと17,000円の買い切りですが、サイトからだと無料のデモ版がインストールできるのです。10 画面までしか作れないという制限はありますが、有料版の機能がフルで使えます。

なお、Briefs のなんともやるせないデメリットとして落ちやすいというのがあります。この記事を書いてる2時間ほどにも、2桁に届くくらい落ちました。がんばれ!Briefs がんばれ!!

 

■起動〜新規作成

インストールが終わったら Briefs を起動します。起動すると、きっと

f:id:ryo_pan:20130824011605p:plain

こんな画面が出てくると思います。端末は 3.5inch・4inch・iPad の中から選べます。今回は 4inch を選択。

 

f:id:ryo_pan:20130824011711p:plain

画面が出てきました。

各機能は

f:id:ryo_pan:20130824015652p:plain

だいたいこんな感じ。インスペクタ(右っ側のウィンドウ)の機能についてはまた後日。

 

 

■ボタンの配置

さっそくボタンを置いてみましょう。Briefs には、ワイヤーフレームとしてさくっと作れるように、デフォルトでアセットが用意されています。

f:id:ryo_pan:20130824015951p:plain

中でも、ボタン・テキスト・ホットスポットはメニューからすぐに作成が可能です。

 

f:id:ryo_pan:20130824020026p:plain

ぽちっとな。

 

f:id:ryo_pan:20130824020050p:plain

書体やフォントカラーも変えられます。

 

f:id:ryo_pan:20130824020118p:plain

アセットには Normal / Disabled / Touched の状態が用意されています。もちろん、画像を自作すればマイアセットとして登録することも可能です。

なお、Briefs の素晴らしい機能として、

f:id:ryo_pan:20130824020821p:plain

ここから

f:id:ryo_pan:20130824020841p:plain

なんと 9patch 風味の領域を作成することができます!!!すげぇ!!!(プリインのアセットは設定済)

たぶんこの記事を読んでる人は 9patch 知ってると思うので説明省きますが、これにはグッときた方もいらっしゃるのではないでしょうか。

なお配置したアセットは、PhotoshopIllustrator よろしく Shift 押したままドラッグで比率保ったまま拡縮ができますが、残念ながら Alt 押して中心部から拡縮はできません。

 

余談ですが、ガイドを作ったり複数のオブジェクトを整列・分布したり、ロックしたりグルーピングしたりはできます。

f:id:ryo_pan:20130824021334p:plain

f:id:ryo_pan:20130824021505p:plain

f:id:ryo_pan:20130824021522p:plain

f:id:ryo_pan:20130824021540p:plain

 

 

■画面遷移を作成する

ボタンが作れたので、今度は新しい画面を追加して、ボタンをタップしたらその画面へ遷移する、というアクションを作成してみましょう。

f:id:ryo_pan:20130824021650p:plain

左下の「+」ボタンから新規シーンを作成。適当にテキストを置きます。地味に超過分のテキストが ellipsize されてます。

 

f:id:ryo_pan:20130824021839p:plain

ボタンがあるシーンに戻ります。ボタンを選択後、メニューから「Add Action」を選択すると

f:id:ryo_pan:20130824021935p:plain

黄色い線がにゅ〜〜って出てきます。そのまま線を遷移先の画面へ

f:id:ryo_pan:20130824022008p:plain

えいやっと持ってきます。すると今度は

f:id:ryo_pan:20130824022039p:plain

遷移する時のアニメーションを選ぶことができます。

アニメーションの種類は豊富で、さらには「タップしてから何秒後に遷移するか」「遷移する速さはどれくらにするか」といった設定、効果音の追加などもできます。

 

f:id:ryo_pan:20130824022223p:plain

というわけで、シミュレータを起動してみると無事画面遷移ができました!ワーパチパチ

 

次回はインスペクタの機能や、デザインカンプからモックを作る方法などをご紹介する予定です。