Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
UIと画面遷移を設計するときに
破綻しないようにするための、

ひと手間
株式会社ツクロア

秋葉ちひろ

DevLOVE 現場 甲子園 2013

2013.11.09
株式会社ツクロア
デザイナー集団
ビジュアルデザイン
グラフィックデザイン
CI/VI、ブランディング
UXデザイン
@tommmmy

UIデザイン
アプリやWebサイトの設計

デザイナーズハック

フロントエンドの実装
プロトタイプ作成
画面遷移

UIデザイン

破綻しないための
プロトタイプ作成

Director

Designer

Engineer
画面遷移を
つくるときの

罠
HOME

tab A

tab A

[list]

[detail]

alert

geolocation

yes

すでに
決まって
いる!

tab B

[list]

no

tab B

[detail]

tab B’
整理されているように
見えるが、かなり難解
なんでこれつくるときに
呼んでくれないんだろう。。
HOME

tab A

tab A

[list]

[detail]

alert

geolocation

yes

tab B

[list]

no

tab B

[detail]

tab B’
機能ありきの
機械的な画面フロー
スマホと対話する
やあ、
どうしたの?
I am here
台本
グルメアプリ
登録したお店のみチェックイン
でき、そのお店にいるときは、
撮った写真を複雑なフローなく
簡単にアップできる
I am here
I am here

I am here

こんにちは、今、君がどこにいるか探しているか
ら、待ってね
考え中だよー
わかった!
今、「楽天タワー」にいるよ、ここでチェックイン
する?それとも、ここは間違ってる?
あってる、チェックインするよ
...
I am here

考え中だよー
わかった!
今、「楽天タワー」にいるよ、ここでチェックイン
する?それとも、ここは間違ってる?
あってる、チェックインするよ

I am here

わかりました、「楽天タワー」にチェックインしま
した。ここ...
photo by http://www.flickr.com/photos/yuiseki/4038847937/
おーい

I am here

はい、あなたはまだ「楽天タワー」にいるようで
す。ここで食べた写真をアップしますか?
そうだな、しようかな

I am here

わかりました、ではカメラを立ち上げるので
シャッターボタンをおしてください。
カ...
少しボケていますが、いいですか?
I am here

いいよ、そのままで

I am here

わかりました、ではこの写真をアップしますので
少しお待ちください。
アップしおわりました。他にもアップしますか?
いや、もういいよ、ありがとう
...
人間的な対話からの
機能の設計
ョン
ーシ
ニケ
ミュ
コ
よ
大事 ようよ
生き
和に
平

I am here
NEW!!
splash
geolocation

check in
[list]

no

WakeLock
geolocation

yes

yes

camera

no

timeline

upload

yes

compelet...
者も
技術 ーも
イナ
デザ き!
るべ
や

スマホと対話する

台本
アプリをつかう

寸劇
I am here
UIデザインを
つくるときの

罠
静止画でしか
確認しない!
プロトタイプで確認する
デザイン
操作性
Director

Designer

仕様決定
Engineer
静止画
デザイン
作成
Director

Designer

画像

実装

Engineer

動きをつくれる人
Director

Designer

仕様決定

Engineer
動きを含む
プロトタイプ

静止画
デザイン
作成
Director

Designer

画像、動き

実装

Engineer
実際につかった感じを
経験して確認することが
できる
UIと画面遷移を設計するときに
破綻しないようにするための、

ひと手間

プロトタイプをつくる
人とのコミュニケーション
ありがとう
ございました
I am here
【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間
Prochain SlideShare
Chargement dans…5
×
  • Soyez le premier à commenter

【DevLOVE甲子園2013】UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間

  1. 1. UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間 株式会社ツクロア 秋葉ちひろ DevLOVE 現場 甲子園 2013 2013.11.09
  2. 2. 株式会社ツクロア デザイナー集団 ビジュアルデザイン グラフィックデザイン CI/VI、ブランディング UXデザイン @tommmmy UIデザイン アプリやWebサイトの設計 デザイナーズハック フロントエンドの実装 プロトタイプ作成
  3. 3. 画面遷移 UIデザイン 破綻しないための プロトタイプ作成 Director Designer Engineer
  4. 4. 画面遷移を つくるときの 罠
  5. 5. HOME tab A tab A [list] [detail] alert geolocation yes すでに 決まって いる! tab B [list] no tab B [detail] tab B’
  6. 6. 整理されているように 見えるが、かなり難解 なんでこれつくるときに 呼んでくれないんだろう。。
  7. 7. HOME tab A tab A [list] [detail] alert geolocation yes tab B [list] no tab B [detail] tab B’
  8. 8. 機能ありきの 機械的な画面フロー
  9. 9. スマホと対話する やあ、 どうしたの? I am here
  10. 10. 台本 グルメアプリ 登録したお店のみチェックイン でき、そのお店にいるときは、 撮った写真を複雑なフローなく 簡単にアップできる I am here
  11. 11. I am here I am here こんにちは、今、君がどこにいるか探しているか ら、待ってね 考え中だよー わかった! 今、「楽天タワー」にいるよ、ここでチェックイン する?それとも、ここは間違ってる? あってる、チェックインするよ I am here わかりました、「楽天タワー」にチェックインしま した。ここで食べたものを写真に撮ってアップす る?それともあとにする?
  12. 12. I am here 考え中だよー わかった! 今、「楽天タワー」にいるよ、ここでチェックイン する?それとも、ここは間違ってる? あってる、チェックインするよ I am here わかりました、「楽天タワー」にチェックインしま した。ここで食べたものを写真に撮ってアップす る?それともあとにする? あとにするよ わかりました、あとにしますね、ではまた! I am here
  13. 13. photo by http://www.flickr.com/photos/yuiseki/4038847937/
  14. 14. おーい I am here はい、あなたはまだ「楽天タワー」にいるようで す。ここで食べた写真をアップしますか? そうだな、しようかな I am here わかりました、ではカメラを立ち上げるので シャッターボタンをおしてください。 カシャ 少しボケていますが、いいですか? I am here
  15. 15. 少しボケていますが、いいですか? I am here いいよ、そのままで I am here わかりました、ではこの写真をアップしますので 少しお待ちください。 アップしおわりました。他にもアップしますか? いや、もういいよ、ありがとう I am here わかりました、ではまた御用のときは呼んでくだ さいね!
  16. 16. 人間的な対話からの 機能の設計 ョン ーシ ニケ ミュ コ よ 大事 ようよ 生き 和に 平 I am here
  17. 17. NEW!! splash geolocation check in [list] no WakeLock geolocation yes yes camera no timeline upload yes compelete
  18. 18. 者も 技術 ーも イナ デザ き! るべ や スマホと対話する 台本 アプリをつかう 寸劇 I am here
  19. 19. UIデザインを つくるときの 罠
  20. 20. 静止画でしか 確認しない!
  21. 21. プロトタイプで確認する デザイン 操作性
  22. 22. Director Designer 仕様決定 Engineer
  23. 23. 静止画 デザイン 作成 Director Designer 画像 実装 Engineer 動きをつくれる人
  24. 24. Director Designer 仕様決定 Engineer
  25. 25. 動きを含む プロトタイプ 静止画 デザイン 作成 Director Designer 画像、動き 実装 Engineer
  26. 26. 実際につかった感じを 経験して確認することが できる
  27. 27. UIと画面遷移を設計するときに 破綻しないようにするための、 ひと手間 プロトタイプをつくる 人とのコミュニケーション
  28. 28. ありがとう ございました I am here

×