UIUXを考える

アプリデザイナーのブログ

7ステップで完了する初心者向けチュートリアルに従って操作してみた。

f:id:kishatatsu:20170406124200p:plain

Xdには基本操作が学べるチュートリアルが付いているんですね。

さっそくやってみます。

Xdを立ち上げると、こんなパネルが出てきます。

f:id:kishatatsu:20170406104351p:plain

パネル左下にある「チュートリアルを開始」を押します。

 

 

開始をクリックすると、こんなファイルが開きました。

f:id:kishatatsu:20170406104639p:plain

すでに素材が用意されている状態。

 

 

「ズームインして開始」とあります。

f:id:kishatatsu:20170406104823p:plain

さっそく感じた事があります。

この画面の文章には「mpvibe’s のモバイルアプリのプロトタイプを完成させるのを手伝ってください」と書かれています。

この文章好きだな。

もし「完成させて下さい」「完成させましょう」「プロトタイプを作りましょう」と書かれていたら、なんだか強制されている感じがするし、はじめてXdを触る人にとってはハードルが高い。「使い方が分からないのに完成させましょうと言われても…。」と感じるはずです。
でも「プロトタイプを完成させるのを手伝ってください」と言われると、「OK!私にできるかな?もちろん手伝うよ!」って感じで、気負いなく触れる事が少なくとも私はできました。文章ひとつで印象はガラリと変わるんだな。

脱線しましたがチュートリアルを進めます。

 

 

手順1 現在のデザインをプレビューする

f:id:kishatatsu:20170406105827p:plain

 

 

プレビューボタンはここにあります。

f:id:kishatatsu:20170406110214p:plain

 

 

プレビューボタンを押すと、パネルが出てきた!

f:id:kishatatsu:20170406110622p:plain

 

 

「あちこちクリックしてみましょう」と書いてあるので、手当たり次第クリックしてみます。 

f:id:kishatatsu:20170406110737g:plain

 すでに遷移設定されていますね。

 

 

手順2 スプラッシュを作成する

f:id:kishatatsu:20170406111110p:plain

書かれている通りにやってみます。

 

 

アートボードツールに切り替えて四角の内側をクリック。

f:id:kishatatsu:20170406111246p:plain

アートボードが作成された!

ボード内をクリックするだけでアートボードが選択できるのは便利だな。(sketchはこれができない)

次に選択ツールに切り替えて、ロゴをアートボードに配置。

そして背景色を選択...こうゆうこと? 

f:id:kishatatsu:20170406111533p:plain

これが正解か分かりませんがひとまずこのステップは完了とします。

 

 

手順3 画像挿入

f:id:kishatatsu:20170406112125p:plain

グレーの円に画像をドラッグせよと書いてるのでやってみます。 

 

 

デスクトップ上にある適当な画像をドラッグすると... 

f:id:kishatatsu:20170406112313p:plain

グレー円の中に挿入されました!

わざわざマスクをかけなくてもいいので、これも便利な機能ですね。

同じ機能だとsketchでは塗りで設定すると、これと同じ事ができますが、Xdの方がよりダイレクトですね。

sketchではここで設定↓

f:id:kishatatsu:20170406113128p:plain

 

 

手順4 リピートグリッドと複数の画像挿入

f:id:kishatatsu:20170406113312p:plain

Xdのデザインツールでも花形のリピートグリッドです。さっそくやってみます。

 

 

アドベンチャーカセットを選択した状態で画面右にある「リピートグリッド」を押すと。

f:id:kishatatsu:20170406113902p:plain

 

 

選択表示が、ブルーからグリーンに変わりました。

そして上下左右に伸び縮みできるハンドルが表示されています。

f:id:kishatatsu:20170406113949p:plain

 

 

ハンドルを下にドラッグします。

f:id:kishatatsu:20170406114327g:plain

カセットが無限コピーされました!

そしてカセット間の余白(ピンク色のエリアを掴んでドラッグする)も、1箇所調整すると全てに反映されました。

 

 

次に画像の挿入です。

デスクトップ上にある適当な画像(複数枚)をリピートグリッド内の画像エリアにドラッグします。

f:id:kishatatsu:20170406114906g:plain

カセットごとに違う画像が一発で挿入されました!とても魅力的な機能です。

 

 

手順5 スクロール

f:id:kishatatsu:20170406115200p:plain

 

 

スクロールの設定をします。

アートボードを選択してスクロール/垂直方向を選択。

f:id:kishatatsu:20170406115449p:plain

 

 

次にアートボードの下を伸ばして、記事を収めます。 

f:id:kishatatsu:20170406115728g:plain

 これでいいのかな?

 

さて、ここまでがデザインモードで、ここからプロトタイプモードに切り替えます。

f:id:kishatatsu:20170406120732p:plain

 

 

手順6 遷移設定 

f:id:kishatatsu:20170406120634p:plain

 

 

5で作ったアートボードの「次の記事」ボタンを、6のアートボードに繋ぎます。
そして、6のアートボードから5に戻れるように、6の「戻る」ボタンを5に繋ぎます。

f:id:kishatatsu:20170406120210g:plain

これで繋がった様です。アートボード、オブジェクトから遷移ができます。

遷移の際の効果も設定できますがここでは触れません。

作業はこれで終わり。

 

 

手順7 作ったものをプレビューする

さて、動くかどうか見てみましょう。

 

f:id:kishatatsu:20170406121601g:plain

ちゃんと遷移もスクロールも効いていますね。

あれ、スプラッシュはどこ...?

あ、分かった!選択したアートボードからプレビューが始まるんですね!(頭からプレビューしたい時はスプラッシュアートボードを選択しなきゃいけませんでした)

 

 

最後にオンラインで他者に共有

f:id:kishatatsu:20170406122056g:plain

リンクを作成し、そのURLをコピーしてブラウザにペーストすると、誰でもプロトタイプを操作する事ができます。見た人がコメントをつける事もできます。

 

 

以上で、チュートリアルは完了です!

作業の大まかな流れが掴めました。

 

 

まとめ

やはりXdの強みはプロトタイプをプレビューしながらデザインができるって所ですね。

細かい使い方、もっと知りたい。使って慣れようと思います。