狠狠撸

狠狠撸Share a Scribd company logo
実装を意识したデザイン
Hirano Tomoya
#young_donuts
自己绍介
平野 朋也
@noppefoxwolf
ひらの ともや
平野 朋也
@noppefoxwolf
ひらの ともや
2009~2015
学生時代にiOSアプリをいくつかリリース
2016年
株式会社ディー?エヌ?エーに入社しAndroidアプリの開発
…
2015
留年
実装を意识するとは
実装コストを見積もってデザインする
実装を意識してデザインする
実装コストを知るとは、
何が効率的に実装出来て、何が非効率になるのか知ること
今日はどんなデザインをすれば
エンジニアが効率的に実装出来るのか紹介します。
エンジニアにとっての
「簡単に」を理解する
①少ないコード量で実装出来ること
少ないコード量 ≠ 質素なデザイン
例えば颈翱厂のデフォルトと异なったデザインのアラート
実はデフォルトのアラートよりも
少ないコード量で実装出来ます
4行 6行
※これは極端な例なので実装の書き方にも寄ります
KRAlertController UIAlertController
>
なぜならライブラリを使っているから
ライブラリは他人の実装を使うことの出来る機能
かっこいい画面遷移作ったから
みんな使っていいよ
 1から実装しなくていいんだ! /
しかもその実装を見ることもできます
こういうふうにつくってます
 なるほど!参考にしよう!/
日常的にどんなライブラリがあるのかを調べておく
低コストで良いデザインを実装することが出来る
デザイナーもエンジニアもね
ライブラリ探しはCocoacontrolsがオススメ
https://www.cocoacontrols.com
「awesome ●● ui」で調べるのもGood
awesome~はgithubにライブラリをまとめる文化
iOSのデフォルトの部品を知りたいなら
iOS Human Interface Guidelines
https://developer.apple.com/ios/human-interface-guidelines/
ライブラリのデザインを使う時はエンジニアに確認を!
バージョンやライセンスで使えない場合もある
②シンプルな描画?动きで作れること
画面遷移アニメーションを実装の例
横から出てくるめくれるように
1から作るとして難しいのは
>
難しい やさしい
作りかたを考えてみるのは
実装コストの感覚を掴む練習にもなります
横に2つの画面を並べて
アニメーションさせれば出来そう
エンジニアが顽张れば出来そう
裏側の描画
斜めに影を落としている
指に合わせてどう動かすか…
作りかたを考えてみて、複雑そうなものは大体難しい
もっと簡単な動きや仕様に変えられないか振り返ろう
PhotoShopは高機能故にUIで再現出来ない事が多い
Sketchの基本的な機能でデザインするのが良い
移動に関してはx,y軸で完結するものにすること
z軸などの奥行き要素を作るのは基本的に難しい
よくあるちょいむずデザイン
アニメーションカーブの微調整
デフォルトのアニメーションカーブや
バネアニメーションなら楽
ブラーをかける ブラーをかけた部分が動くと難しい
マスクしたりパーツの前後が変わる 考えたくない
乗算描画されたデザイン 考えたくない
③デザイン上の?が少ないこと
?とは、数値化出来ていない要素の事
例えば、アニメーションの動画を作って
「こんな感じのアニメーションで!」
というのは難易度が高い
スライドしてメニューが
出てくるアニメーション
アニメーションの時間は?
開く幅は?
カラーコードは?
フォントは?
…etc
とりあえずそれっぽい
見た目のもの
デザインから数値情报を解読する时间は非常に无駄
カラーコード?フォント名?フォントサイズ
など、詳細をまとめてデザインに書いておくのがGood
①少ないコード量で実装出来ること
②シンプルな描画?动きで作れること
③デザイン上の?が少ないこと
まとめ
さいごに
実装コストを意識しすぎて、
本来必要だったデザインまで簡素にしないようにしてください。
ただ、エンジニアは基本的にデザインをfixしようとは言い出しません。
デザインの実装にかかる工数を増やすか減らすかの最後の砦は
デザイナーであることが多いです。
このスライドは後日公開するので、
是非明日からデザインの考え方に取り入れてみてください!
おわり

More Related Content

実装を意识したデザイン

Editor's Notes

  1. 実装を意识したデザインについて10分ほどお付き合い頂ければと思います。 資料は後ほどヤングドーナツのブログにアップしますので、取りこぼしあればそちらで確認頂ければと思います。 懇親会の時にぼっちだと思うんで分からないところはどんどんきいて
  2. 最初に自分の绍介軽くさせてください
  3. ひらのともやと言います。 twitterはnoppefoxwolfでやっているので気になる方はフォローしてください
  4. 学生時代引きこもってアプリ開発ばかりやっていました。 それがなんか右葉曲折あって…今年の4月に入社しました。 アプリのアイコン見て頂くと分かると思うのですが、きつねがめっちゃ好きです。 入社してもきつねのアプリ作れるのは幸せですね。最高の会社です。 そしてフロントエンドのスマホエンジニアになります、今日エンジニアいますか
  5. 今回は、デザイナーの方にエンジニア視点でのデザインの話をしたいと思います。 エンジニアもデザインを実装する時のTIPS程度に聞いて頂ければと思います *1分みたないくらい
  6. まず実装を意識してデザインをするという真意なのですが、実装コストを見積もりながらデザインをするという事です。 デザインの実装コストってじゃあ一体なんなのかというと、デザイナーの方が作ったデザインをエンジニアが実装するときにそれがどれだけ作りにくいかという事ですね。
  7. つまり(上文)
  8. そういうことで、(上文) *ここまで3ふんくらい
  9. *2分くらい
  10. *2分くらい
  11. これは明日から使える知识ですね、ヤングドーナツ最高ですね
  12. *6分くらい
  13. *9分くらい
  14. 基本的にはの内容↓ デザインのプロフェッショナルではないから、 スキルを言い訳にしたくないから 好奇心から挑戦したくなってしまう 結局はバッファを浪費することにつながりかねない
  15. 繰り返しになりますがー