Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

amana tech night vol.2 『実践!Pixate』

34,955 views

Published on

amana tech night vol.2 『達人たちから学ぶ。実践!プロトタイピング』にて行ったワークショップの資料の補完版です。
http://amana.connpass.com/event/13663/

Published in: Design
  • Be the first to comment

amana tech night vol.2 『実践!Pixate』

  1. 1. amana tech night #2 実践! Pixate
  2. 2. amana tech night #2 // 実践! Pixate いま話している人について 吉竹 遼 @ryo_pan 2011 年〜 2014 年 10 月までフェンリル株式会社で受託開発に従事。 2014 年 10 月から Standard Inc に参画。
  3. 3. amana tech night #2 // 実践! Pixate これまでの活動 http://yo-ry.hateblo.jp/entry/2014/02/13/204727
  4. 4. amana tech night #2 // 実践! Pixate これまでの活動 http://www.slideshare.net/ryoyos/origami-32856872
  5. 5. amana tech night #2 // 実践! Pixate これまでの活動 http://www.standardinc.jp/reflection/article/prototyping-for-app-design/
  6. 6. amana tech night #2 // 実践! Pixate これまでの活動 http://www.slideshare.net/ryoyos/creative-insights-01-42453782
  7. 7. amana tech night #2 // 実践! Pixate これまでの活動 http://www.slideshare.net/ryoyos/ui-crunch-03
  8. 8. amana tech night #2 // 実践! Pixate 事前準備 • Pixate の登録 http://www.pixate.com/ • ビューワーアプリのインストール iPhone / Android • アセットの DL・解凍 https://www.dropbox.com/s/cfxkodl35ep4vcm/assets.zip?dl=0 ワークショップの時とはファイル構成が微妙に違うので、 当日参加された方も DL をお願いします
  9. 9. amana tech night #2 // 実践! Pixate おおざっぱな流れ • プロジェクトの新規作成 • アセットの読み込み • アセットの配置 • 動きをつける • さらに動きをつけてみる
  10. 10. amana tech night #2 // 実践! Pixate 01 プロジェクトの新規作成
  11. 11. 新規プロジェクトを作成する
  12. 12. 新規プロトタイプを作成する
  13. 13. 今回は iPhone 5 を選ぶ
  14. 14. アクションパネル (自動化のためのアクションが選択でき る。自分で作ることも可能) アニメーションプロパティパネル (付加されたアニメーションやインタラク ションの細かい設定ができる) キャンバス (レイヤーやアセットはここに表示される) プロパティパネル (選択したレイヤーの情報が編集できる) レイヤーパネル (作成したレイヤーとか置いたアセット はここに表示される) インタラクションパネル (レイヤーに対して付加できるインタラ クションが選べる) アニメーションタブ (アニメーションパネルに切り替え ることができる)
  15. 15. amana tech night #2 // 実践! Pixate 02 アセットの読み込み
  16. 16. 真ん中のアイコンをクリックして アセットパネルを開く
  17. 17. あらかじめダウンロードしておいたフォルダ から、テキストファイル以外の 6 個の PNG ファイルを画面上に D&D する
  18. 18. 読み込みが終わるとアセットが一 覧表示されます なお今回は btn_search.png は使 用しません
  19. 19. amana tech night #2 // 実践! Pixate 03 アセットの配置
  20. 20. クリックしてレイヤーを新規作成
  21. 21. ■ Position Left : 0pt / Top : 64pt ■ Size Width : 320pt / Height : 504pt にする
  22. 22. ダブルクリックしてレイヤー名を 『main』に変更 ダブルクリックして色を『f7f7f7』に変更 (初期状態だと RGB が入ってるけど、# な しの HEX coloro を入力しても適用してく れる!かしこい!)
  23. 23. 適当に D&D で置く
  24. 24. main.png を main レイヤーに D&D
  25. 25. ② ■ Position Left : 0pt / Top : 0pt にする ① main.png を選んだ状態で
  26. 26. 親レイヤーに格納された子レイヤーの Position は親を基点に指定されるので、0,0 を指定すればいい感じに上に配置できます まず作りたいオブジェクトのサイズのレイ ヤーを作成して、その中にアセットを入れる、 という流れでやるとスムーズに作れます
  27. 27. ① nav.png をキャンバス上に D&D する ② ■ Position Left : 0pt / Top : 0pt にする
  28. 28. amana tech night #2 // 実践! Pixate 04 このあたりからビューワーアプリを起動しておくと、リアルタイムで更新されていくのが見れて楽しいです 画面をスクロールさせてみる
  29. 29. Scroll インタラクションを main レイヤーに D&D で適用する (適用したいレイヤーを選択した状態 でアニメーションプロパティパネルに D&D でも可)
  30. 30. amana tech night #2 // 実践! Pixate 05 カートボタンを作る
  31. 31. ① 新規レイヤーを作成する ② レイヤー名を btn_cart に変更する ③ ■ Position Left : 260pt / Top : 508pt ■ Size Width : 50pt / Height : 50pt にする
  32. 32. btn_cart_00.png, btn_cart_01.png をキャンバス上に D&D する
  33. 33. btn_cart レイヤーに D&D
  34. 34. btn_cart_00.png は 01.png よりも 上にあるようにする 00,01 共に ■ Position Left : 0pt / Top : 0pt にする
  35. 35. amana tech night #2 // 実践! Pixate 06 サムネイルを作る
  36. 36. ① 新規レイヤーを作成する ② レイヤー名を thumb に変更する ③ ■ Position Left : 70pt / Top : 84pt ■ Size Width : 180pt / Height : 180pt にする レイヤーの色はこの後の作業 をわかりやすくするためにし ばらく残しておく
  37. 37. thumb.png をキャンバス 上に D&D し、thumb レ イヤーに格納する
  38. 38. thumb.png を適当に動かして thumb レイヤー の中心に吸い付かせる(かしこい!)
  39. 39. amana tech night #2 // 実践! Pixate 07 サムネイルをドラッグできるようにする
  40. 40. Drag インタラクションを thumb レイヤーに D&D で適用する
  41. 41. アニメーションタブをクリックして アニメーションパネルを表示する
  42. 42. Drag インタラクションを thumb レイヤーに D&D で適用する
  43. 43. 実機で確認してみると…… 動かせるようになった!
  44. 44. amana tech night #2 // 実践! Pixate 08 サムネイルが元の位置に戻るようにする
  45. 45. さっき追加した Move アニメーション の中にある Based On をクリック
  46. 46. ■ Based On thumb / Drag Release ■ Move to Left : 70pt / Top : 84pt にする
  47. 47. amana tech night #2 // 実践! Pixate 何をしたのか? Move アニメーションはレイヤーを動かすアニメーション。素のままだと ドラッグで動かせるだけなので『どのタイミングで』『どう動かすか』 という条件を追加した。具体的には ■ Based On(タイミングの基準) thumb レイヤーが / ドラッグリリースされた時に ■ Move to(どう動かすか) Left 70pt / Top 84pt に動かす といった感じ。
  48. 48. 元の位置に戻るようにはなったけど 位置が固定なのでちょっとびみょう。。
  49. 49. amana tech night #2 // 実践! Pixate 09 スクロールに追従させてみる
  50. 50. もう 1 つ Move アニメーションを追加して、 ■ Based on main / ScrollPosition ■ Animates Continuously with rate ■ Move Top / -1 にする
  51. 51. amana tech night #2 // 実践! Pixate 10 サムネイルの大きさを変えてみる
  52. 52. Scale インタラクションを thumb レイヤーに D&D で適用する
  53. 53. ■ Based On thumb / Drag Start ■ Scale 1.5x にする
  54. 54. 再度 Scale を thumb.png に適用して ■ Based On thumb / Drag Release ■ Scale 0x にする デフォルトの Scale も0x にする
  55. 55. サムネイルがカートの上に来たら 小さくなるようにしてみる
  56. 56. ① 3 つ目の Scale を thumb.png に適用 して ■ Based On thumb / Drag Position ■ Animates With duration to final value にする ② Zip に入っていた『conditions.txt』 を開き、01 の文字列をペーストする Scale は0.5x に設定する ③ 画面下部にある『+CONDITION』をクリックする
  57. 57. 新しく ELSE IF という項目が追加され るので『conditions.txt』の 02 の文 字列をペーストする Scale は 1.5x に設定する
  58. 58. Fade アニメーションを追加して ■ Based on thumb / Drag Start ■ Fade to 100% に設定する
  59. 59. amana tech night #2 // 実践! Pixate 何をしたのか? conditions.txt に書かれているのは、ちょっとした条件の記述(いわゆる if 文というやつです)。ざっくり解説すると ・レイヤー(ここでは thumb)の ・横の中心位置が ・250pt よりも ・大きく ・加えて、 ・thumb レイヤーの縦の中心位置が 520pt よりも大きければ thumb.cx > 250 && thumb.cy > 520
  60. 60. amana tech night #2 // 実践! Pixate 250pt 520pt 前ページに書いた条件 に当てはまるエリアで のみ、サイズを小さく した。
  61. 61. amana tech night #2 // 実践! Pixate 条件でできることは限られているため、 慣れるのに時間はかかりません。 詳しく知りたい方は↓を読んでみてください。 http://help.pixate.com/knowledgebase/articles/462989-11-conditions
  62. 62. amana tech night #2 // 実践! Pixate 11 カートボタンの大きさも変えてみる
  63. 63. Scale アニメーションを btn_cart レイヤーに D&D で適用する
  64. 64. ■ Based on thumb / Drag Start ■ Scale 1.5x に設定する
  65. 65. 2 つ目の Scale アニメーションを適用し、 ■ Based on thumb / Drag Release ■ Animates With duration to final value に設定する 『conditions.txt』の 01 をペーストする ■ Scale 1x / 基点を右下に変える ■ Easing Curve spring ■ Friction / Tension 10 /300 に設定する
  66. 66. 『+CONDITION』をクリックし、条件を 追加 ■ Scale 1x / 基点は右下 に設定する
  67. 67. amana tech night #2 // 実践! Pixate 12 サムネイルの処理を詰める これを適用することで、サムネイルを離した時にカートに吸い込まれたように見えます
  68. 68. thumb.png に Fade アニメーションを 追加し、 ■ Based on thumb / Drag Release ■ Animates With duration to final value に設定する 『conditions.txt』の 01 をペーストする ■ Fade to 0% ■ Duration 0s に設定する
  69. 69. amana tech night #2 // 実践! Pixate ex 1 highlighted を再現する どこをタップしたのかが分かるようになります
  70. 70. ① main レイヤー内に新規レイヤーを 作成する(ここでは highlighted に名前を変更) ■ Position Left : 4pt / Top : 4pt ■ Size Width : 312pt / Height : 209pt ■ Appearance 内 Color ffffff ■ Opacity 0% に設定する ② Fade アニメーションを 2 つ追加し、 1 つ目を ■ Based on thumb / Drag Start ■ Fade to 50% 2 つ目は ■ Based on thumb / Drag Release ■ Fade to 0% に設定する
  71. 71. amana tech night #2 // 実践! Pixate ex 2 カートの数字を変えてみる
  72. 72. Reorder インタラクションを btn_cart_01.png に D&D で適用する
  73. 73. ■ Based on thumb / Drag Release に設定する ■ Ordering Place Behind / btn_cart_01.png ■ Delay 1.5 seconds に設定する 『conditions.txt』の 01 をペーストする
  74. 74. Tap インタラクションを btn_cart レイヤーに D&D で適用する
  75. 75. btn_cart_00.png に再度 Reorder を適 用して ■ Based on thumb / Drag Release に設定する ■ Ordering Bring To Front ■ Delay 0 seconds に設定する
  76. 76. amana tech night #2 // 実践! Pixate 完成!
  77. 77. amana tech night #2 // 実践! Pixate おまけ Pixate でできることの簡単な解説
  78. 78. amana tech night #2 // 実践! Pixate Pixate でできること ( ざっくり ) レイヤーに レイヤーを レイヤーの を付加して させる x の位置 / x の中心位置 / y の位置 / y の中心位置 / 右位置 / 下位置 スケール / x のスケール / y のスケール / 透明度 / 回転 / x の回転 y の回転 / z の回転 / y のスクロール速度 / x のスクロール速度 y のスクロール量 / x のスクロール量 に変化があった場合 ドラッグ / タップ / ダブルタップ / 長押し 回転 / ピンチ / スクロール 移動 / スケール / 回転 / 透明度 / 色の切り替え 画像の切り替え / 階層切り替え
  79. 79. amana tech night #2 // 実践! Pixate Pixate を使ってみての雑感 • できることに限りがあるのがいい • iPhone でも Android でも見れるのがいい • Origami や Framerjs よりも覚えるのが簡単
  80. 80. amana tech night #2 // 実践! Pixate まとめ • 作ったプロトタイプをどう使うかが大切 • 実際に触ってできることできないことを知ろう • あまり手法に振り回されすぎないように!
  81. 81. amana tech night #2 // 実践! Pixate 参考リンク 公式ヘルプ (5,6,10,10a,10b,11 は特に必読 ) 公式チュートリアル 公式デモ Prototyping and Design with Lyft & Pixate http://help.pixate.com/knowledgebase/articles/461798-1-introduction http://www.pixate.com/education/video-tutorials/ http://www.pixate.com/education/demos/ https://www.youtube.com/watch?v=X-jDSOHsix8

×