Soumettre la recherche
Mettre en ligne
【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
•
72 j'aime
•
7,674 vues
Chihiro Tomita
Suivre
GDG Tokyo 2012-11 Android App Designs での資料。 第1回〜第4回までの総集編
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 174
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
HTML Web Platform
HTML Web Platform
dynamis
JKwktk2012_venture
JKwktk2012_venture
Tsubasa Yumura
データマイニングとビジュアライゼーション
データマイニングとビジュアライゼーション
Yutaka Hongo
Rtb30min
Rtb30min
Daisuke Yamazaki
Recommandé
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第1回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
HTML Web Platform
HTML Web Platform
dynamis
JKwktk2012_venture
JKwktk2012_venture
Tsubasa Yumura
データマイニングとビジュアライゼーション
データマイニングとビジュアライゼーション
Yutaka Hongo
Rtb30min
Rtb30min
Daisuke Yamazaki
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
Kazuaki Hidaka
NTT研究所におけるYammerの取り組みと、社内Twitterの統計解析
NTT研究所におけるYammerの取り組みと、社内Twitterの統計解析
Tokoroten Nakayama
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
nishio
データサイエンティストのつくり方
データサイエンティストのつくり方
Shohei Hido
ITベンチャースタートアップ「夢と現実」
ITベンチャースタートアップ「夢と現実」
Shin Takeuchi
ソースコードの品質向上のための効果的で効率的なコードレビュー
ソースコードの品質向上のための効果的で効率的なコードレビュー
Moriharu Ohzu
こわくない Git
こわくない Git
Kota Saito
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
基幹業務もHadoop(EMR)で!!のその後
基幹業務もHadoop(EMR)で!!のその後
Keigo Suda
Optimization night 4_dp
Optimization night 4_dp
Kensuke Otsuki
SDSoC でストリーム
SDSoC でストリーム
ryos36
kamatte(かまって)
kamatte(かまって)
Shinnosuke HORIGUCHI
赤外線センサーを使ったインタラクティブコンテンツ
赤外線センサーを使ったインタラクティブコンテンツ
Takehisa Ikeda
Siggraph2012報告会前半
Siggraph2012報告会前半
fumoto kazuhiro
オープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリ
陽平 山口
Microservices on pairs
Microservices on pairs
Takuma Morikawa
iOSレガシーコード改善ガイド〜マンガボックス開発における事例〜
iOSレガシーコード改善ガイド〜マンガボックス開発における事例〜
Kentaro Matsumae
Spring Day 2016 springの現在過去未来
Spring Day 2016 springの現在過去未来
Yuichi Hasegawa
Contenu connexe
En vedette
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
Kazuaki Hidaka
NTT研究所におけるYammerの取り組みと、社内Twitterの統計解析
NTT研究所におけるYammerの取り組みと、社内Twitterの統計解析
Tokoroten Nakayama
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
nishio
データサイエンティストのつくり方
データサイエンティストのつくり方
Shohei Hido
ITベンチャースタートアップ「夢と現実」
ITベンチャースタートアップ「夢と現実」
Shin Takeuchi
ソースコードの品質向上のための効果的で効率的なコードレビュー
ソースコードの品質向上のための効果的で効率的なコードレビュー
Moriharu Ohzu
こわくない Git
こわくない Git
Kota Saito
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
En vedette
(9)
HTML5時代のWebデザイン
HTML5時代のWebデザイン
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
ネイティブとHTML5を スマートに連携させる設計と 実装のノウハウについて
NTT研究所におけるYammerの取り組みと、社内Twitterの統計解析
NTT研究所におけるYammerの取り組みと、社内Twitterの統計解析
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
アイデアを塩漬けにしない-世界中の人に手伝ってもらう方法-
データサイエンティストのつくり方
データサイエンティストのつくり方
ITベンチャースタートアップ「夢と現実」
ITベンチャースタートアップ「夢と現実」
ソースコードの品質向上のための効果的で効率的なコードレビュー
ソースコードの品質向上のための効果的で効率的なコードレビュー
こわくない Git
こわくない Git
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
Similaire à 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
基幹業務もHadoop(EMR)で!!のその後
基幹業務もHadoop(EMR)で!!のその後
Keigo Suda
Optimization night 4_dp
Optimization night 4_dp
Kensuke Otsuki
SDSoC でストリーム
SDSoC でストリーム
ryos36
kamatte(かまって)
kamatte(かまって)
Shinnosuke HORIGUCHI
赤外線センサーを使ったインタラクティブコンテンツ
赤外線センサーを使ったインタラクティブコンテンツ
Takehisa Ikeda
Siggraph2012報告会前半
Siggraph2012報告会前半
fumoto kazuhiro
オープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリ
陽平 山口
Microservices on pairs
Microservices on pairs
Takuma Morikawa
iOSレガシーコード改善ガイド〜マンガボックス開発における事例〜
iOSレガシーコード改善ガイド〜マンガボックス開発における事例〜
Kentaro Matsumae
Spring Day 2016 springの現在過去未来
Spring Day 2016 springの現在過去未来
Yuichi Hasegawa
Similaire à 【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
(10)
基幹業務もHadoop(EMR)で!!のその後
基幹業務もHadoop(EMR)で!!のその後
Optimization night 4_dp
Optimization night 4_dp
SDSoC でストリーム
SDSoC でストリーム
kamatte(かまって)
kamatte(かまって)
赤外線センサーを使ったインタラクティブコンテンツ
赤外線センサーを使ったインタラクティブコンテンツ
Siggraph2012報告会前半
Siggraph2012報告会前半
オープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリ
Microservices on pairs
Microservices on pairs
iOSレガシーコード改善ガイド〜マンガボックス開発における事例〜
iOSレガシーコード改善ガイド〜マンガボックス開発における事例〜
Spring Day 2016 springの現在過去未来
Spring Day 2016 springの現在過去未来
【総集編】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
1.
Android App Designs
デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips 秋葉ちひろ @tommmmy
2.
3.
約
65 名 約 80 名 約 60 名 約 90 名
4.
参加者内訳
63% Webデザイン アプリデザイン 21% 16% 26% 37% Web開発 アプリ開発 0% 25% 50% 75% 100% (1回目と4回目の合計)
5.
参加者内訳 37%
Webデザイン アプリデザイン 21% 16% 26% 37% Web開発 アプリ開発 0% 25% 50% 75% 100% (1回目と4回目の合計)
6.
秋葉ちひろ
@tommmmy • デザイナー/アートディレクター • Web系制作全般 • Androidアプリデザイン • BaiduでSimejiのプロモーションと 開発のフロントエンド実装の一部
7.
秋葉ちひろ
@tommmmy • デザイナーズハックというデザイナー 中心のコミュニティ活動 • 7月に大阪から引っ越してきたばかり
8.
Android App Designs
デザイナーがコードから読み解く、 Androidアプリのデザインの幅を広げるコツとTips
9.
がんばって作ったデザインが、 実装後に残念な結果にならないために
10.
残念になる理由 A. デザイナーがAndroidデザインの基礎
を理解していない B. エンジニアがデザインのことをわかっ ていない
11.
12.
13.
14.
線がない! 影がない! 影がない! 線がない!
15.
16.
結論からいうと… 落としやすいポイント
•線 • 影 • 余白
17.
残念になる理由 A. デザイナーがAndroidデザインの基礎
を理解していない B. エンジニアがデザインのことをわかっ ていない
18.
デザイナーにXMLコードを 勉強してほしい…?
19.
エンジニアにデザインを わかってほしい…?
20.
コードからつかんだ デザインのコツ
デザイナーが知っておくと エンジニアもデザイン実装がしやすくなる!
21.
自分が実装しやすいように デザイナーに仕込む
22.
どうやってかんたんに… • たぶんデザイナーに「dp」とかいって も受け入れてくれないと思う •
デザイナーさんの身近な言語に翻訳し て伝えてみる
23.
裏テーマ デザイナーさんに わかりやすく興味を もってもらうために
24.
アジェンダ • デザイナーさんにわかりやすく興味を もってもらうための5つのポイント •
効率的な進め方 • Android App Designs アンケート結果
25.
デザイナーさんに わかりやすく興味をもって もらうための5つのポイント
自然に責める
26.
1 640 px ×
1066 px 720 px × 1280 px 作成するデザイン案のサイズ
27.
640 px ×
1066 px 1 720 px × 1280 px • xhdpiでつくる - 320dpiといういちばん大きな画面密度 - 1dp = 2px なので計算がかんたん • 320dpと360dpの2種類
28.
640 px ×
1066 px 1 720 px × 1280 px http://developer.android.com/design/style/metrics-grids.html
29.
640 px ×
1066 px 1 720 px × 1280 px http://developer.android.com/design/style/metrics-grids.html
30.
640 px ×
1066 px 720 px × 1280 px デザインを確認する端末によって分ける といいんじゃないかと思う
31.
32.
480 x 800
(Double-click or ESC to hide) 332200ddpp 640 px × 1066 px
33.
720 x 1280
(Double-click or ESC to hide) 336600ddpp 720 px × 1280 px
34.
640 px ×
1066 px 332200ddpp 336600ddpp 少し大きめ
35.
720 px ×
1280 px 332200ddpp 336600ddpp 少し小さめ
36.
640 px ×
1066 px 720 px × 1280 px
37.
640 px ×
1066 px 720 px × 1280 px
38.
2 96 px 4の倍数 各要素を決める数値
39.
2 96 px
48dp Rhythm 48dp = 96 px http://developer.android.com/design/style/metrics-grids.html
40.
2 4の倍数
http://developer.android.com/design/style/metrics-grids.html
41.
2 4の倍数
http://developer.android.com/design/style/metrics-grids.html
42.
2 4の倍数 •
ガイドラインでは 4の倍数 (dp) = 8の倍数 (px) = 大原則 • 細かいところはもうひとまわり小さい単位 でもいいのでは? • 2の倍数 (dp) = 4の倍数 (px)
43.
116600ddppii 224400ddppii 332200ddppii
mmddppii hhddppii xxhhddppii 1dp 1px 1.5px 2px 2dp 2px 3 px 4px 3dp 3px 4.5px 6px 4dp 4px 6 px 8px 5dp 5px 7.5px 10px
44.
116600ddppii 224400ddppii 332200ddppii
mmddppii hhddppii xxhhddppii 6dp 6px 9 px 12px 7dp 7px 10.5px 14px 8dp 8px 12 px 16px 9dp 9px 13.5px 18px 10dp 10px 15 px 20px
45.
96 px 4の倍数
46.
3 伸縮幅・固定幅
横幅は原則 2種類 どこが伸縮/固定なのかをはっきりさせる
47.
3 伸縮幅・固定幅 • 640pxでつくっていたら、
720pxのときにはどこが伸びるのか • 720pxでつくっていたら、 640pxのときにはどこがちぢむのか • 余白はどちらのときも固定値にする
48.
3 伸縮幅・固定幅
http://developer.android.com/design/style/metrics-grids.html
49.
332200ddpp
336600ddpp 553333ddpp 664400ddpp 640 px 720 px
50.
51.
52.
16 px 12 px 4
px
53.
16 px 12 px 4
px
54.
伸縮幅・固定幅
55.
4 9-patch 画像を伸ばすテクニック
56.
4 9-patch •
画面サイズはデバイスによってちがい、 必ず伸縮を考えなければならない • 画像が自由自在に伸びるようにする設定
57.
4 9-patch
画像を9分割して、四隅は固定、 その他を伸びてもいいようにする 伸びても耐えられるデザイン
58.
59.
60.
伸びるところ
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
このデザインに関しては 結果は同じ
73.
74.
75.
76.
77.
78.
同じ色
79.
80.
81.
82.
83.
84.
85.
大きな グラデーション
86.
87.
88.
89.
90.
91.
同じ色 同じ色
92.
93.
このデザインに関しては 結果はビミョーにちがう もっこり感がビミョーに変わる
94.
4 9-patch グラデーションは注意!
• どこがのびるかを指定しよう • 光り具合などを計算している場合が多いの で勝手に変えられるといやだ
95.
9-patchの点まで つけてほしいなぁ…
ム ォ フ ォ ォ フ フ
96.
してもらってうれしいこと • 実際にデバイスで見るとどうのびるかを いっしょに体験する •
Draw9PatchがデザイナーのPCで 動くようにする 慣れてきたら Photoshopでもつくるよ!
97.
98.
99.
えいやー!
100.
5 矩形 <shape> コードで表現できるグラフィック
101.
102.
5 矩形 <shape> •
コードでかける矩形のことを知っておこう (コードの書き方は知らなくてもよい)
103.
5 矩形 <shape>
R : 8px 2px
104.
5 矩形 <shape>
R : 8px 2px
105.
106.
107.
あ、残念だ…
108.
5 矩形 <shape> •
グラデーションの場合、コードで可能なも のか、9-patchになるのかを考えておこう
109.
1 640×1066・720×1280 (px) 2
96px・4の倍数 3 伸縮幅・固定幅 4 9-patch 5 矩形 <shape>
110.
効率的な進め方 制作フローの再考
111.
カンペくん(仮) ワイヤーフレーム
カンペ受け取り待機時 tomipagos 「接続中 ・ 」 ・・ など接続に関する状況を表示 カウントダウンタイマー (tomiroidと同期) tomiroidと接続中 0 5 : 3 4 カンペを出す カンペ受け取り時 「終了」が押されると チャイム音が鳴る カンペをみる tomiroidと接続中 0 5 : 3 4 ピピッ オンマイクでおねがいします!
112.
カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
113.
カンペくん(仮) ワイヤーフレーム
tomiroid じゃあ1週間で デザインおねがいね! tomipagosと接続中 <その他> 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 おっけー! ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
114.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid まだかなぁ… <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
115.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid まだかなぁ… <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす ごめーん!! オンマイクでおねがいします! カンペを出す 急な対応が入ってしまって… 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす あと2日くれない? プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
116.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid わ、わかった… <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす ごめーん!! オンマイクでおねがいします! カンペを出す 急な対応が入ってしまって… 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす あと2日くれない? プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
117.
2日後 カンペくん(仮) ワイヤーフレーム
tomiroid できたかな♪ <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
118.
2日後 カンペくん(仮) ワイヤーフレーム
tomiroid できたかな♪ <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 できたー! ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
119.
2日後 カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す ・・・・・ 伝達事項を入力 プレゼン時間 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
120.
2日後 カンペくん(仮) ワイヤーフレーム
tomiroid う…これは… もっかいおねがい tomipagosと接続中 <その他> 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 わかったー!ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
121.
2日後 カンペくん(仮) ワイヤーフレーム
tomiroid う…これは… もっかいおねがい tomipagosと接続中 <その他> 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
122.
さらに3日後 カンペくん(仮) ワイヤーフレーム
tomiroid じ、じかんが… <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
123.
さらに3日後 カンペくん(仮) ワイヤーフレーム
tomiroid じ、じかんが… <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 できたー! ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
124.
さらに3日後 カンペくん(仮) ワイヤーフレーム
tomiroid う…がんばる… <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 プレゼン時間 できたー! ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
125.
従来のやりかた • ワイヤーを決める • デザインをデザイナーにまかせる •
なかなかできあがってこない • デザインがないと実装できないよぅ∼
126.
従来のやりかた 設計 ワイヤー
デザイン レイアウト 実装 テスト
127.
同時進行 ワイヤーさえ決まればあとは同時進行
128.
カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
129.
カンペくん(仮) ワイヤーフレーム
tomiroid よし、モックつくろ♪ tomipagosと接続中 <その他> 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す よし、デザインつくろ♪ 伝達事項を入力 プレゼン時間 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
130.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid できたー! tomipagosと接続中 <その他> 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 プレゼン時間 できたー! 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
131.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
132.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
133.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
134.
1週間後 カンペくん(仮) ワイヤーフレーム
tomiroid <その他> tomipagosと接続中 10分前、5分前、終了時刻にも それぞれ小さい音を鳴らす オンマイクでおねがいします! カンペを出す 伝達事項を入力 送信 伝達事項を送信すると同時に、 ピピッという小さい音を鳴らす プレゼン時間 4 0 : 0 0 設定 プレゼン時間の設定 タイマー カンペをみる カウントダウンタイマー スタート (tomipagosと同期) 0 5 : 3 4 タイマーのスタート/ストップ リセット ストップ 終了 終了時に押すと、 チャイム音が鳴る
135.
136.
同時進行のやりかた 設計 ワイヤー
デザイン 実装 レイアウト テスト
137.
XMLスタイリングを
最後にする ワイヤーさえ変わらなければ 最高の効率
138.
デザイン例 <shape>を知った上でのデザイン
139.
140.
きれいでシュッとしてる ように見えるけど…
141.
ほとんどが<shape>
142.
R : 8px
2px
143.
声おおきくー! 声おおきくー!
144.
声おおきくー!
押せるところ 盛り上がっている (ように見える) 声おおきくー! 押せないところ すでにへこんでいる (ように見える)
145.
声おおきくー!
押せるところ 盛り上がっている (ように見える) 声おおきくー! 押せないところ すでにへこんでいる (ように見える)
146.
147.
text shadow
R : 20px 1px
148.
149.
text shadow
R : 8px 1px
150.
shadow
R : 8px 1px
151.
152.
153.
154.
R : 8px
1px
155.
#本当はノイズは上からかぶさっているが、 わかりやすいように下から出しています。
156.
きれいにデザインを するためには •
数少ない表現方法でも、知っていれば それなりに組み合わせてきれいなデザ インを作れる • 残念になるのは両方が勉強不足?
157.
Android App Designs
アンケート 日々の見えない声
158.
159.
デザイナー → エンジニア
160.
デザイナー → エンジニア Androidのアプリの開発経験はないので すが、どちらの立場も経験したものとし て、デザイナーは何をしたいのか、エンジ ニアは何ができるのか、お互い手の内を見 せるしかないと思うのだけど、どうしたら お互いうまく伝えられるのかわからない。
161.
デザイナー → エンジニア 1px
1dp とても大事にデザインしている のと、ちゃんと 1px 1dp 1line 色 形 す べてに意味があるので、実装が難しい場合 はちゃんと対策を考えますので何も言わず に勝手に変更しないでください(>_<) 相談してください(>_<)
162.
エンジニア → デザイナー
163.
エンジニア → デザイナー デザインに時間がかかりすぎて、 実装する時間が短いよ・・・。
164.
エンジニア → デザイナー 背景になる画像に文字入れられると本当に 困る。。。 背景はある程度の伸縮に耐えられるもの 文字やオブジェクト等を上に載せるなら、 別の画像で用意して欲しいです。。。 毎回、画像を作り直してもらうのが申し訳 なくて・・・
165.
エンジニア → デザイナー 切り出したそざいがざんねんだった。
166.
エンジニア → デザイナー 多分、デザイン面で言ってるエンジニアの 「できない」は時間的に無理って事で、 Androidの仕様上無理ってのはそうそう 無いです。(最終的にはUI丸々自作とい う手も・・・)
→つづく
167.
エンジニア → デザイナー エンジニアの「できない」は信じないほう が良いです。でも「できる」って言うと仕 事増えるんで理由つけてやらない方向に 持って行きたいんです。
168.
エンジニア → デザイナー いつもお世話になってます!
169.
エンジニア → デザイナー
Webの場合 デザイナー「やっぱりここを変えよう」 ↓ HTML + CSSを修正 ↓ デザイナー「終わったー」 ↓ プログラマー「あ、デザイン変わってる」 →つづく
170.
エンジニア → デザイナー
Androidの場合 デザイナー「やっぱりここを変えよう」 ↓ デザイナー「ここを変えたいから、修正しといて」 ↓ プログラマー「え?」→xml修正→「終わったー」 ↓ デザイナー「余白が違う」 ↓ プログラマー「え?」 →つづく
171.
エンジニア → デザイナー 結論:xmlを書いて欲しい
172.
エンジニア → デザイナー •
Androidのデザインを頼むとiPhoneっ ぽくデザインするのヤメテ(´・ω・`) • もっとAndroidのデザインを勉強してほ しい。 • 同種の画像を複数サイズで作成依頼時に 嫌な顔しないで欲しい。 • Androidも好きになってください。 →つづく
173.
エンジニア → デザイナー Android好きなデザイナさんだと、Androidのデ ベロッパーサイトを見て色々勉強してくれてるけ ど、そうでない場合や、エンジニア向けガイドラ インを見てもらうのは無理がある場合もありま す。 そういった場合でもデザイナさん向けに見てもら えるようなちょっとした資料があるといいんだけ ど。チラッ
174.
for your happy
Android Life! Thank you so much!
Télécharger maintenant