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.

SketchがAndroidのUIデザインに向いているワケ

19,650 views

Published on

2017年5月28日に開催されたABC2017Springでの講演資料

Published in: Design

SketchがAndroidのUIデザインに向いているワケ

  1. 1. SketchがAndroidアプリのUIデザインに向いているワケ 山本麻美
  2. 2. 山本麻美 1997年 フリーランスのWeb制作者に 1999年 i‑modeのケータイサイト作ったり 2010年 日本Androidの会に参加したら、 エンジニアさんたちにそそのかされて モバイルアプリのUIデザイナーに。  Wishscope、トレタ、ビズリーチ、 レシピブログとか 色々
  3. 3. 今日のおはなし ・Symbol ‑ UIコンポーネントのシンボル化で作業効率アップ  ・Export ‑ Android用画像assetsの書き出し  ・Real Time Preview ‑ “Crystal”でミラーリング  ・Plugin ‑ Design for Androidを助けてくれるプラグイン  ・他ツール連携 ‑ デザイナーとエンジニアのコミュニケーション
  4. 4. アプリデザインの工程 どんなの 作りましょか デザイン 研ぎ澄ませ! エンジニアに 伝えよう
  5. 5. SymbolUIコンポーネントのシンボル化で作業効率アップ
  6. 6. こんなアプリを作るとする。
  7. 7. それぞれをSymbolとして作成しておく ToolbarStatus bar Card
  8. 8. Toolbar
  9. 9. Card
  10. 10. Toolbar Icons ToolbarのアイコンもSymbolとして  作成しておくことがポイントです。
  11. 11. Toolbar アイコン違う! 表示数も違う…
  12. 12. SymbolのOverrides Screenごとに表示アイコンを変えることができます。 非表示にもできます。
  13. 13. SymbolのResizing
  14. 14. SymbolのResizing 位置固定 サイズ固定
  15. 15. SymbolのResizing
  16. 16. ExportAndroid用画像assetsの書き出し
  17. 17. Android用に画像書き出し
  18. 18. Android用に画像書き出し フォルダ分けもされているのでそのままASに入れられる!
  19. 19. もちろんSVGも  Exportできます。
  20. 20. SVGに変更する
  21. 21. 9patchとか Launcher iconは、、、 Android Assets Studio https://romannurik.github.io/AndroidAssetStudio/
  22. 22. Real Time Preview“Crystal”でAndroidデバイスにミラーリング
  23. 23. 実機で確認しながらデザインできる!
  24. 24. WifiかUSBで使えるよ Crystal
  25. 25. 実機で確認しながらデザインする! PC画面で見ている のとでは、やっぱり 全然違うよね
  26. 26. PluginとかDesign for Androidを助けてくれるプラグイン
  27. 27. Material Design Color Palette Primary Color, Accent Color等を作ってくれるプラグイン
  28. 28. CRAFT ダミーの写真やテキスト、人名
  29. 29. ○○○ゴコロをくすぐってもくれるわけで フフフフ。こんなプラグイン 見つけちゃったもんね~(^O^)
  30. 30. 他ツール連携デザイナーとエンジニアのコミュニケーション
  31. 31. UI実装するときエンジニアが知りたいこと ・各要素の位置関係 ・サイズ ・画像名 ・カラーコード ・スクロールする箇所と固定箇所 ・アニメーションのタイミング etc.
  32. 32. デザイナーの言い分 ・Spec表を作るのすごく大変 ・大変なのにその予算がない ・デザイン通りに実装されない etc.
  33. 33. SpecはZeplinで伝える SketchからImportするだけ Androidプロジェクトは 単位がdpで表示されるよ
  34. 34. InVision Inspect modeもあるよ
  35. 35. まとめ Sketchは、UIコンポーネントのデザインに 向いている。  最近、Android向けのExportができるようになりました。  プラグインで自分仕様にできるのです。  ワークフローの中で必要な、いろんなツールと連携しやすいです。  
  36. 36. Sketchの初心者Q&Aブログ http://sketchegg.blogspot.jp/

×