Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイニング・インターフェイス勉強会 第6回
Search
Yohei Yasukawa
PRO
February 12, 2013
Design
0
60
デザイニング・インターフェイス勉強会 第6回
デザイニング・インターフェイス勉強会
http://www.facebook.com/groups/di2e.study/
Yohei Yasukawa
PRO
February 12, 2013
Tweet
Share
More Decks by Yohei Yasukawa
See All by Yohei Yasukawa
自己紹介 / who-am-i
yasulab
PRO
2
4.6k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
yasulab
PRO
1
110
Matz に頼られたので張り切って2時間ほどドイツと日本の互いの Ruby 学習事情についてディスカッションした話
yasulab
PRO
1
580
困ったときのガイドライン / We Support You in Any Situation
yasulab
PRO
2
3.9k
英語学習から海外発表までの流れ
yasulab
PRO
18
4.2k
多様なメンター、多様な基準
yasulab
PRO
4
18k
未踏ジュニア公式情報まとめ / Mitou Junior Highlights for Creators
yasulab
PRO
1
240
多様な分野、多様な世代 / Various Persons on the Earth
yasulab
PRO
0
230
欧州で働き、米国で学び、日本で繋ぐ / Work-Life Balance and Career
yasulab
PRO
2
1.3k
Other Decks in Design
See All in Design
横断組織デザイナーの働き方
mixi_design
PRO
0
340
Masked shaman-Storyboard 2025
ashley0521
0
190
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
Personal Story Sequence - Vendetta(WIP)
elrns88
0
420
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1k
OLTA株式会社/デザイン紹介資料
taxy
0
120
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
300
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.8k
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
710
クライアントワークにおける UXリサーチの実践
kozotaira
0
370
Featured
See All Featured
For a Future-Friendly Web
brad_frost
176
9.6k
Building Adaptive Systems
keathley
40
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Visualization
eitanlees
146
15k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Done Done
chrislema
182
16k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Become a Pro
speakerdeck
PRO
26
5.2k
Transcript
ԼΦʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ 6ষ - ΞΫγϣϯͱίϚϯυ ҆ ཁฏ / @yasulab
https://www.facebook.com/groups/di2e.study/
σβΠχϯάɾΠϯλʔϑΣʔε ୈ2൛ ύλʔϯʹΑΔ࣮ફతΠϯλϥΫγϣϯσβΠϯ http://amzn.to/LfZuHZ
@yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓͷൃදʹ͍ͭͯ
6ষͰֶͿ͜ͱ 1. ਖ਼͍͠ΞΫγϣϯΛར༻Ͱ͖ΔΑ͏ʹͯ͠, 2. ͦΕΒʹΑ͍ϥϕϧΛ͚, 3. ݟ͚ͭ͘͢͠, 4. ΞΫγϣϯͷͭͳ͕ΓΛαϙʔτ͢Δ͜ͱ.
Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
ΞΫγϣϯΛఏࣔ͢ΔҰൠతͳ 8+4 ͷํ๏ ̔ͭͷݟ͑ΔΞΫγϣϯ ʴ ̐ͭͷݟ͑ͳ͍ΞΫγϣϯ
1.Button 2.Menu Bar 3.Popup Menu 4.Dropdown Menu 5.Toolbar 6.Link 7.Action
Panel 8.Mouseover Tool ̔ͭͷݟ͑ΔΞΫγϣϯ
1. Button ʮ͜͜ΛΫϦοΫͯ͠Ͷʂʯͱૌ͑ΔͨΊͷͷ Google Docs ʹ͓͚ΔϘλϯ
2. Menu Bar ΞϓϦέʔγϣϯͰ༻͍ΔΞΫγϣϯͷશͳू߹. Keynote
3. Popup Menu ϚεͷӈΫϦοΫδΣενϟͰݺͼग़ͤΔͷ. Mac OS X (desktop) keynote
4. Dropdown Menu ϑΥʔϜͰબࢶΛબͿͨΊͷͷ ʢ ≠ ΞΫγϣϯΛ࣮ߦ͢ΔͨΊͷͷʣ Facebook Post
5. Toolbar ΞΠίϯΛ༻͍ͨϘλϯ͕ฒΜͩࡉ͍ߦ Blogger - Post
6. Link ΫϦοΧϒϧͩͱ͍͏ҹΛߴΊΔͷ ৭͖ͭ(ओʹ੨৭ʣͷςΩετɺMouseoverͰϙΠϯλͷܗঢ়Λม͑ͯԼઢΛҾ͘ɺͳͲ
7. Action Panel ը૾ͰΞΫγϣϯΛࣔ͢ͷ iPhoto
8. Mouseover Tool ෳͷΞΫγϣϯΛԿදࣔͤ͞ͳ͍ͨΊͷͷ Tail Gamers http://tail-gamers.herokuapp.com/
1.Button 2.Menu Bar 3.Popup Menu 4.Dropdown Menu 5.Toolbar 6.Link 7.Action
Panel 8.Mouseover Tool ̔ͭͷݟ͑ΔΞΫγϣϯ
9. Double Click 10. Keyboard Action 11. Drag & Drop
12. Input Command 4ͭͷݟ͑ͳ͍ΞΫγϣϯ
9. Double Click ͜ͷ߲Λ։͘ or σϑΥϧτͷॲཧΛ࣮ߦ͢Δͷ Keynote double click
10. Keyboard Action ‘Ctrl-s => save’ ͷΑ͏ͳपͷ keyboard shortcut keynote
-> File
11. Drag & Drop ͋ΔϑΝΠϧΛͦͷΞϓϦέʔγϣϯͰ։ͨ͘Ίͷͷ Gmail -> Compose email ->
D&D file e.g. ͜ΕΛ͜͜ʹҠಈ͢Δɼ͜ͷૢ࡞ΛͦΕʹରͯ͠ߦ͏.
12. Input Command શͯͷΞΫγϣϯʹରͯࣗ͠༝ͳܗࣜͰΞΫηεͤ͞Δͷ Gmail -> type ‘?’ (vim-like shortcuts)
9. Double Click 10. Keyboard Action 11. Drag & Drop
12. Input Command 4ͭͷݟ͑ͳ͍ΞΫγϣϯ
ΞΫγϣϯΛఏࣔ͢ΔҰൠతͳ 8+4 ͷํ๏ ̔ͭͷݟ͑ΔΞΫγϣϯ ʴ ̐ͭͷݟ͑ͳ͍ΞΫγϣϯ
׆༻ྫɿGrageBand ʹ͓͚ΔΞΫγϣϯ
Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
1. Button Groups 2. Hover Tools 3. Action Panels 4.
Prominent ‘Done’ Button 5. Smart Menu Items 6. Preview 7. Progress Indicator 8. Cancelability 9. Multi-Level Undo 10.Command History 11.Macros ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
1. Button Groups 2. Hover Tools 3. Action Panels 4.
Prominent ‘Done’ Button 5. Smart Menu Items 6. Preview 7. Progress Indicator 8. Cancelability 9. Multi-Level Undo 10.Command History 11.Macros ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
1. Button Group / Ϙλϯͷάϧʔϓ MS Word / Adobe Flash
Builder ؔ࿈ͷ͋ΔΞΫγϣϯΛάϧʔϓԽͯ͠ཧ͢Δϫβ
2. Hover Tools / ϚεΦʔόʔදࣔπʔϧ favtile ରͱͳΔ߲ʹߦ͏ΞΫγϣϯΛɺϚεΦʔόʔ͢Δ·Ͱඇදࣔʹ͢Δϫβ
3. Action Panels / ΞΫγϣϯύωϧ Picasa Ͳͷ߲ʹͯ͢ͷΞΫγϣϯΛද͍͕ࣔͨ͠, ϙοϓΞοϓͰදࣔ͢Δʹ͕ଟ͗͢Δͱ͖ͷϫβ
1. Button Groups 2. Hover Tools 3. Action Panels 4.
Prominent ‘Done’ Button 5. Smart Menu Items 6. Preview 7. Progress Indicator 8. Cancelability 9. Multi-Level Undo 10.Command History 11.Macros ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
4. Prominent ‘Done’ Button / ཱͭʮྃʯϘλϯ JetBlue / Kayak /
Southwest ࢹ֮తͳྲྀΕͷऴྃʹɺཱͭϘλϯΛஔ͢Δϫβ
5. Smart Menu Items / ಈతͳϝχϡʔ߲ Gmail Menu ϝχϡʔͷϥϕϧΛಈతʹมߋ͢Δϫβ
1. Button Groups 2. Hover Tools 3. Action Panels 4.
Prominent ‘Done’ Button 5. Smart Menu Items 6. Preview 7. Progress Indicator 8. Cancelability 9. Multi-Level Undo 10.Command History 11.Macros ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
6. Preview / ϓϨϏϡʔ Mac OS X - Print ͋ΔΞΫγϣϯΛ࣮ߦͨ͠ΒԿ͕ى͜Δ͕ɺࣄલʹΒͤΔϫβ
7. Progress Indicator / ϓϩάϨεදࣔ Mac OS X - Copy
࣌ؒΛཁ͢Δॲཧʹ͓͍ͯɺͲΕ͘Β͍ਐߦ͔ͨ͠ΛϢʔβʹࣔ͢ϫβ
8. Cancelability / Ωϟϯηϧػೳ Adobe AIR - Install Dialog ࣌ؒΛཁ͢Δॲཧʹ͓͍ͯɺ෭࡞༻Λى͜͢͜ͱͳ͘ଈ࠲ʹΩϟϯηϧ͢Δϫβ
1. Button Groups 2. Hover Tools 3. Action Panels 4.
Prominent ‘Done’ Button 5. Smart Menu Items 6. Preview 7. Progress Indicator 8. Cancelability 9. Multi-Level Undo 10.Command History 11.Macros ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
9. Multi-Level Undo / ϚϧνϨϕϧͷΞϯυΡ Photoshop Ϣʔβ͕࣮ߦͨ͠Ұ࿈ͷΞΫγϣϯΛɺٯॱʹͤΔํ๏Λ༻ҙ͢Δ
10. Command History / ૢ࡞ͷཤྺ Mac OS X - Terminal
ΞΫγϣϯΛݟ͑ΔܗͰه͓ͯ͘͠
11. Macros / ϚΫϩ Max OS X - Terminal ࿈ଓ͢ΔΞΫγϣϯΛʮهʯ͠ɺ͍ͭͰʮ࠶ੜʯͰ͖Δํ๏Λ༻ҙ͢Δ
1. Button Groups 2. Hover Tools 3. Action Panels 4.
Prominent ‘Done’ Button 5. Smart Menu Items 6. Preview 7. Progress Indicator 8. Cancelability 9. Multi-Level Undo 10.Command History 11.Macros ΞΫγϣϯΛఏࣔ͢ΔࡍͷσβΠϯύλʔϯ
Ϣʔβʹରͯ͠ΞΫγϣϯΛఏࣔ͢Δ Ұൠతͳํ๏ʹֶ͍ͭͯͿ. ΞΫγϣϯΛఏࣔ͢ΔͨΊͷ, ۩ମతͳσβΠϯύλʔϯΛֶͿ.
6ষͰֶͿ͜ͱ 1. ਖ਼͍͠ΞΫγϣϯΛར༻Ͱ͖ΔΑ͏ʹͯ͠, 2. ͦΕΒʹΑ͍ϥϕϧΛ͚, 3. ݟ͚ͭ͘͢͠, 4. ΞΫγϣϯͷͭͳ͕ΓΛαϙʔτ͢Δ͜ͱ.
@yasulab UIσβΠϯΛษڧ͍ͨ͠ΤϯδχΞ ษڧձৄࡉ Facebook άϧʔϓͰ ↓ https://www.facebook.com/groups/di2e.study/ ࠓͷൃදʹ͍ͭͯ
ԼΦʔϓϯιʔε Cafe σβΠχϯάɾΠϯλʔϑΣʔεษڧձ 6ষ - ΞΫγϣϯͱίϚϯυ ҆ ཁฏ / @yasulab
https://www.facebook.com/groups/di2e.study/