前回では【SketchFlow マップ】上で、
サイトの全体フローを作成できたかと思います。
また同時に【SketchFlow マップ】で作成すると、
ページまでが生成されたことが確認できましたね。
今回は生成された各ページに、
「テキスト」や「ボタン」、さらに WireFrame に欠かせない「四角形」を配置していきましょう！
1.テキストをいれる方法
Expression Blend 3 を使っているからって、
怖がる必要はありません。
どんなソフトウェアでも操作方法は基本的には同じです。
ましては PowerPoint を使ったことがあれば、
すぐにマスターできてしまいますよ。
さぁ、
下の手順に沿って、進めて見てください。
まずは、テキストアイコンをクリックして...
なお、上の図の青枠でも説明していますが、
ここのテキストアイコンには、3 種類の機能があります。
自分に必要なテキストツールを選んで、
効率よく作成していきましょう！
次はキャンバスに、
テキストを配置したい場所にドラッグ & ドロップすると、
テキストエリアが生成されます。
最後に、
生成されたテキストエリアに文字を入力するだけです。
2.テキストを拡大させる方法
次は、
入力した文字が非常に小さいので、
文字を拡大させてみましょう！
いいですか？
逆に文字を小さくしたい場合も
方法は同じですよ。
3.ボタンを配置させる方法
Web サイトには、
次のページに移行させるために
ボタンの存在は必須です。
SketchFlow では、
ボタンのセッティングも非常に簡単です。
ツールバーの【ボタンアイコン】をクリックして、
キャンバスにドラッグ & ドロップするだけです。
しかし、
このままでは“Button”と書かれているだけで、
何のボタンなのか分かりにくいかと思います。
そこでボタン内のテキストを変更してみましょう。
上の図の方法で、
ボタン内のテキストが変更できたことが確認できたかと思います。
他にも、
ツールバー内の【選択ツール】を使い、
ボタンをダブルクリックする方法などもあります。
自分が一番簡単な方法を
是非見つけてください。
4.背景に四角形を敷く方法
これでテキストやボタンが配置できるようになりましたね。
しかし、テキストとボタンだけでは折角の WireFrame も見えにくい。
では、
背景に四角形を敷いてカテゴライズが
簡単に分かるようにしましょう！
まずは
【ツールバー】の【四角形】ツールを使うことで、
簡単に四角形を作ることができます。
どうですか？
できましたか？
ですが、見ての通り、
このままでは四角形がテキストなどの前に配置されてしまっています。
四角形をテキストの後ろ、
最背面に配置しましょう！
すると...
見事に最背面に配置されましたね。
では...さらに！
先ほど作った四角形に色をつけて、
さらにカテゴライズの視認性を強めましょう！
ばっちり！
5.他のページもつくっちゃおう！
では、
これらの方法を使って、
全部のページを一気に作っちゃいましょう！！
サンプル画像をアップしましたので、
参考にしてください。
(アカウント生成画面)
(エラー画面)
(確認画面)
(完了画面)
はーい！
お疲れ様です。
もう SketchFlow ゴール目前ですよ！
頑張りましょう！
次回は SketchFlow 超初心者ノ巻 最終回！！
作った WireFrame をブラウザで確認しよう！です。
※やはり最終回ではありませんでした。
すみません。(2010.03.17)
お楽しみに～
0 件のコメント:
コメントを投稿