Interaction Design case coloris
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Interaction Design case coloris

on

  • 911 views

Interaction Design case coloris

Interaction Design case coloris

Statistics

Views

Total Views
911
Views on SlideShare
691
Embed Views
220

Actions

Likes
2
Downloads
2
Comments
0

7 Embeds 220

http://c-mitsuba.hatenablog.com 131
https://twitter.com 70
http://feedly.com 14
http://www.slideee.com 2
http://twicli.neocat.jp 1
http://www.newsblur.com 1
http://mym.corp.yahoo.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Interaction Design case coloris Presentation Transcript

  • 1. 蜜葉 優 Interaction Design case coloris
  • 2. profile • H.N. :蜜葉 優 [mitsuba yu] • @mitsuba_tan • Blendがすきだったきがする • M+ 2p thin/lightがすき • Keynoteの表紙はいつも自分で撮影 • http://c-mitsuba.hatenablog.com
  • 3. 近頃こいつが話題なので
  • 4. 今日はiOSの話をする
  • 5. はずでした。。
  • 6. なので今日は インタラクションの話します。
  • 7. あくまで持論です。
  • 8. ただしいとは限りません。
  • 9. 当たり前のことも言ってます。
  • 10. が、当たり前に行き着く過程 を見てもらえればよいかと。
  • 11. agenda • Interaction • coloris • 1 xaml 3 Layout 2 State • Meaning of State • Meaning of Layout and Transition • まとめ
  • 12. Interaction
  • 13. 定義:Interaction • 交流(する)、相互作用(する)などの意味を持つ 英単語。形容詞形は「インタラクティブ」 (interactive)。ITの分野では、人間とシステ ムの間の情報のやりとり、操作や入力とそれ に対する反応や出力、対話的な操作方法、な どの意味で用いられることが多い。
  • 14. 学会:インタラクション • 毎年、日本科学未来館で、まさにいまやって る学会 • ARとかVRとかビジュアルインタフェースとか フィジカルコンピューティングとか実世界指 向とかコミュニケーションとかメディア・ アートとか認知科学と認知心理学とか
  • 15. 蜜葉:Interaction • 自分がなにかしたときに • 相手がどう振る舞うか ! • 相手になにかさせるには • 自分はどう振る舞うべきか !
  • 16. example
  • 17. 部屋に友達を呼んだ時
  • 18. 好きにしていいよ
  • 19. 友達がなにするか 分からない ! なにに興味を持つか 分からない
  • 20. そのソファ座っといて
  • 21. まぁ、 ソファに座る
  • 22. テーブルの上が
  • 23. たぶん、 ちょっと読んでみる
  • 24. 蜜葉:Interaction • 自分がなにかしたときに • 相手がどう振る舞うか ! • 相手になにかさせるには • 自分はどう振る舞うべきか !
  • 25. 蜜葉:Interaction • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 ! • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ようにテーブル に置く
  • 26. 蜜葉:Interaction • 自分が「ソファに座って」と指示すれば • 相手は指示したとおりに「ソファに座る」 ! • • • • 自分からアクションを行う(能動的) 意図した結果がきちんと返ってくる 人に強制された挙動、人工的 バーバルコミュニケーション
  • 27. 蜜葉:Interaction • 相手に「本を読ませる」には • 自分は「相手が本に注目する」ように置く ! • • • • 相手にアクションをおこさせる(受動的) 意図した結果が返ってくるとは限らない 人の自然な挙動、作為的 ノンバーバルコミュニケーション
  • 28. UI:Interaction • ユーザーがなにかした時に、UIがどう振る舞うか ! ! • UIがなにかした時に、ユーザーがどう思ったりどう 操作するか
  • 29. UI:Interaction • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなの か ! • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか
  • 30. UI:Interaction • ユーザーがなにかした時に、UIがどう振る舞うか • その振る舞いは、ユーザーが意図したものなのか • ユーザーが意図した操作を、UIから連想させる ためには、どういうUIにして、どう操作させれ ばよいか
  • 31. UI:Interaction • UIがなにかした時に、ユーザーがどう思ったりど う操作するか • そのユーザーの操作は、UIが意図した操作なのか • UIが意図した操作を、ユーザーに体験させるた めには、どういうUIにして、どう操作させるべ きか
  • 32. UI:Interaction • ユーザーが意図した操作を、UIから連想させるためには、
 「どういうUIにして、どう操作させればよいか」 ! • UIが意図した操作を、ユーザーに体験させるためには、
 「どういうUIにして、どう操作させるべきか」
  • 33. 使いにくいUI =
 ユーザーが意図した操作
 ≠
 UIが意図した操作
  • 34. 使いやすいUI その1 =
 ユーザーが意図した操作
 が
 UIが意図した操作
  • 35. 使いやすいUI その2 =
 UIが意図した操作 が ユーザーが意図した操作
  • 36. 使いやすいUI • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに ! • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に
  • 37. 使いやすいUI • ユーザーが意図した操作 が UIが意図した操作 • ユーザーがあれこれ操作すると想定して、UIを作る • しかも、想定漏れなしに ! • 複雑になればなるほど、いろいろな操作をする可能性が 増えて大変。けど便利。 • エクセルつくりましょう!ってかんじ。
  • 38. 使いやすいUI • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に ! • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう!
 ってかんじ
  • 39. どっちがアプリ向き?
  • 40. 使いやすいUI • UIが意図した操作 が ユーザーが意図した操作 • ユーザーにこの操作だけをさせるように、UIを作る • しかも、自然に ! • シンプルにすればするほど、思った通り実現できる。 でもできることはすくない。 • つぶやくだけのウィジェットつくりましょう!
 ってかんじ
  • 41. 今回のUserExperience • ユーザーの経験とか体験をもとにして、ユーザーが
 こう操作するはずだっていうUIを作る • だから自然に操作できるし、想定外の操作をする
 可能性が減る ! • UIよりのUX • もちろん、UXってこれだけではないんやけども。 • 詳しくはUI is not UXで
  • 42. coloris • Store Appsの色を いい感じに • しかも3タップで • MVP Showcaseで
 1位もらいました!
  • 43. demo
  • 44. 1 xaml 3 Layout 2 State
  • 45. 3 Layout
  • 46. 2 State
  • 47. Meaning of State
  • 48. first impression
  • 49. back and forth
  • 50. goal
  • 51. Meaning of Layout and Transition
  • 52. Layout • 画面のどまんなかに大き く1コントロールだけ • 色相環でまとまりよく • Metroの場合、四角形は つつける経験則 • タップしない限りなにも 起きない。 • タップさせるレイアウト
  • 53. example
  • 54. iPhone • 全面にボタンを1つだけ 配置 • 押せば画面が点くし、押 せば戻れるし、困ったら 押せばいいボタン • というか押す以外に解決 策がない • 指の位置にもよく馴染む
  • 55. Transition • 扇状に色相環が広がる
 アニメーションを付加 • 初めてアプリを起動した 人の目を、この色相環
 コントロールに注目させ る役割 • イージングの効いた心地 いい動きで魅力的
  • 56. example
  • 57. Batch • ワンポイントで注目させ て、その先に何かあるこ とを伝える
  • 58. Chart.js • アニメーションのグラフ を作成できるライブラリ • やっぱりページをスクロー ルするとグラフに注目す る • http:// www.chartjs.org/
  • 59. Layout • Store Appsの文化圏は右 側の情報が新しい • 選択した色をキーにに画 面右側に新しい情報が表 示するレイアウト
  • 60. example
  • 61. Book • Store Appsだったり、横 スクロールWebページは 左が古く、右が次の情報 のレイアウトが多い。 • 横書きの本なんかも、右 が次のページだったりす る。
  • 62. Transition • 過去の情報となった色相 環を左に追いやる • 同時に右から新しいパネ ルがスライドして表示さ れる • 押しのけて、操作対象が 変わって次のステップに 進んだことを伝える役割
  • 63. example
  • 64. お茶どうぞ • 茶道でもお菓子を食べてか ら、お茶を渡されます。す ると1口。ランチでもお茶 渡されたら、そのまま置か ずに1口飲みます。 • 出し物は右から出すことが 多いし、取り敢えず手を付 けます。
  • 65. Layout • 右にあったリストを選択 すると、さらに右に新し いコントロールが表れ る。 • すでに目的のものが見え ている様にレイアウトし て、終わりが近い=手軽 さを演出
  • 66. example
  • 67. endless • 終わりが見えると安心す る。終わりが見えないと 頑張れない。 • デスマーチとか…
  • 68. Transition • GridView標準のトラン ジション。 • データが切り替わったこ とさえ分かればいい。
  • 69. example
  • 70. example • 赤が本題で、紫が例え、 みたいに、コンテンツが 変わったことさえ分かれ ばいい。
  • 71. まとめ
  • 72. まとめ • UXとかDesignとかって定義が曖昧。 • 自分がUXとかInteractionとしてこれが大 事って言えればいいと思う。 • それが言えるように、いろんな人がしてる 言葉の定義を見つけて、咀嚼して、自分の ものにするといいかも
  • 73. まとめ • UIとかLayoutとかTransitionとか、なんで そうしたのか理由付けをしよう。 • なんとなく「ふわっ」とか「しゅぱっ」と か言われたら、なんで「ふわしゅぱっ」な のか聞いてみよう。
  • 74. まとめ • 理由付けのために、いろんなアプリを触っ たり、ハードウェアのインタフェースを見 なおしたり、日常の所作とか、風景とかを 振り返って見直そう。 • 目に見えるものすべてがインタフェース で、そこにはなにかしらのレスポンスがあ るはず
  • 75. まとめ • 大事なことは、インプットからアウトプット が生まれる過程をとデザインの思想を言葉に できること。 • 「なんとなく動いた」とかダメなんはプログ ラムでもいっしょ。
  • 76. まとめ • UIは操作するものじゃない • UIはユーザーを操作するもの ! • 自分でデザインしたUIでユーザーを思い通 り操作するのたのしい(
  • 77. keyword • Interaction,Animation,UserInterface,HCI, LayoutDesign,UserExperience,Prototypin g,Visualization,InformationArchitecture, Typography,InfoGraphics,仕掛学,視線誘 導,認知心理学
  • 78. book • • • • • • • インタフェースデザインの心理学 インタフェースデザインの実践教室 Seductive INTERACTION DESIGN THE VISUAL MISCELLANEUM VISUALIZE THIS ANDROID DESIGN PATTERNS Mobile Design Pattern Gallery • • • • • • • IAシンキング タイポグラフィ 03 白井博士のゲームデザイン Windows 8 UI/UXデザイン入門 iOS フラットデザインの作法 カルチュラルコンピューティング 人工知能学会誌 Vol.28 No.4 2013/7 • 同人誌やイラストの美しいデザイン100 !