狠狠撸
Submit Search
実装を意识したデザイン
?
Download as PPTX, PDF
?
1 like
?
2,505 views
Tomoya Hirano
Follow
Young Donuts #01で登壇した際に使用したスライドです。
Read less
Read more
1 of 44
Download now
Download to read offline
More Related Content
実装を意识したデザイン
1.
実装を意识したデザイン Hirano Tomoya #young_donuts
2.
自己绍介
3.
平野 朋也 @noppefoxwolf ひらの ともや
4.
平野 朋也 @noppefoxwolf ひらの ともや 2009~2015 学生時代にiOSアプリをいくつかリリース 2016年 株式会社ディー?エヌ?エーに入社しAndroidアプリの開発 … 2015 留年
5.
実装を意识するとは
6.
実装コストを見積もってデザインする 実装を意識してデザインする
7.
実装コストを知るとは、 何が効率的に実装出来て、何が非効率になるのか知ること
8.
今日はどんなデザインをすれば エンジニアが効率的に実装出来るのか紹介します。
9.
エンジニアにとっての 「簡単に」を理解する
10.
①少ないコード量で実装出来ること
11.
少ないコード量 ≠ 質素なデザイン
12.
例えば颈翱厂のデフォルトと异なったデザインのアラート
13.
実はデフォルトのアラートよりも 少ないコード量で実装出来ます 4行 6行 ※これは極端な例なので実装の書き方にも寄ります KRAlertController UIAlertController >
14.
なぜならライブラリを使っているから
15.
ライブラリは他人の実装を使うことの出来る機能 かっこいい画面遷移作ったから みんな使っていいよ 1から実装しなくていいんだ! /
16.
しかもその実装を見ることもできます こういうふうにつくってます なるほど!参考にしよう!/
17.
日常的にどんなライブラリがあるのかを調べておく 低コストで良いデザインを実装することが出来る デザイナーもエンジニアもね
18.
ライブラリ探しはCocoacontrolsがオススメ https://www.cocoacontrols.com
19.
「awesome ●● ui」で調べるのもGood awesome~はgithubにライブラリをまとめる文化
20.
iOSのデフォルトの部品を知りたいなら iOS Human Interface
Guidelines https://developer.apple.com/ios/human-interface-guidelines/
21.
ライブラリのデザインを使う時はエンジニアに確認を! バージョンやライセンスで使えない場合もある
22.
②シンプルな描画?动きで作れること
23.
画面遷移アニメーションを実装の例 横から出てくるめくれるように
24.
1から作るとして難しいのは > 難しい やさしい
25.
作りかたを考えてみるのは 実装コストの感覚を掴む練習にもなります
26.
横に2つの画面を並べて アニメーションさせれば出来そう
27.
エンジニアが顽张れば出来そう
28.
裏側の描画 斜めに影を落としている 指に合わせてどう動かすか…
29.
作りかたを考えてみて、複雑そうなものは大体難しい もっと簡単な動きや仕様に変えられないか振り返ろう
30.
PhotoShopは高機能故にUIで再現出来ない事が多い Sketchの基本的な機能でデザインするのが良い
31.
移動に関してはx,y軸で完結するものにすること z軸などの奥行き要素を作るのは基本的に難しい
32.
よくあるちょいむずデザイン アニメーションカーブの微調整 デフォルトのアニメーションカーブや バネアニメーションなら楽 ブラーをかける ブラーをかけた部分が動くと難しい マスクしたりパーツの前後が変わる 考えたくない 乗算描画されたデザイン
考えたくない
33.
③デザイン上の?が少ないこと
34.
?とは、数値化出来ていない要素の事
35.
例えば、アニメーションの動画を作って 「こんな感じのアニメーションで!」 というのは難易度が高い
36.
スライドしてメニューが 出てくるアニメーション アニメーションの時間は? 開く幅は? カラーコードは? フォントは? …etc とりあえずそれっぽい 見た目のもの
37.
デザインから数値情报を解読する时间は非常に无駄
38.
カラーコード?フォント名?フォントサイズ など、詳細をまとめてデザインに書いておくのがGood
39.
①少ないコード量で実装出来ること ②シンプルな描画?动きで作れること ③デザイン上の?が少ないこと まとめ
40.
さいごに
41.
実装コストを意識しすぎて、 本来必要だったデザインまで簡素にしないようにしてください。
42.
ただ、エンジニアは基本的にデザインをfixしようとは言い出しません。 デザインの実装にかかる工数を増やすか減らすかの最後の砦は デザイナーであることが多いです。
43.
このスライドは後日公開するので、 是非明日からデザインの考え方に取り入れてみてください!
44.
おわり
Editor's Notes
実装を意识したデザインについて10分ほどお付き合い頂ければと思います。 資料は後ほどヤングドーナツのブログにアップしますので、取りこぼしあればそちらで確認頂ければと思います。 懇親会の時にぼっちだと思うんで分からないところはどんどんきいて
最初に自分の绍介軽くさせてください
ひらのともやと言います。 twitterはnoppefoxwolfでやっているので気になる方はフォローしてください
学生時代引きこもってアプリ開発ばかりやっていました。 それがなんか右葉曲折あって…今年の4月に入社しました。 アプリのアイコン見て頂くと分かると思うのですが、きつねがめっちゃ好きです。 入社してもきつねのアプリ作れるのは幸せですね。最高の会社です。 そしてフロントエンドのスマホエンジニアになります、今日エンジニアいますか
今回は、デザイナーの方にエンジニア視点でのデザインの話をしたいと思います。 エンジニアもデザインを実装する時のTIPS程度に聞いて頂ければと思います *1分みたないくらい
まず実装を意識してデザインをするという真意なのですが、実装コストを見積もりながらデザインをするという事です。 デザインの実装コストってじゃあ一体なんなのかというと、デザイナーの方が作ったデザインをエンジニアが実装するときにそれがどれだけ作りにくいかという事ですね。
つまり(上文)
そういうことで、(上文) *ここまで3ふんくらい
*2分くらい
*2分くらい
これは明日から使える知识ですね、ヤングドーナツ最高ですね
*6分くらい
*9分くらい
基本的にはの内容↓ デザインのプロフェッショナルではないから、 スキルを言い訳にしたくないから 好奇心から挑戦したくなってしまう 結局はバッファを浪費することにつながりかねない
繰り返しになりますがー
Download