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
63
デザイニング・インターフェイス勉強会 第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
💎 My RubyKaigi Effect in 2025: Top Ruby Companies 🌐
yasulab
PRO
1
140
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
yasulab
PRO
1
190
Matz に頼られたので張り切って2時間ほどドイツと日本の互いの Ruby 学習事情についてディスカッションした話
yasulab
PRO
1
680
困ったときのガイドライン / We Support You in Any Situation
yasulab
PRO
2
4k
英語学習から海外発表までの流れ
yasulab
PRO
18
4.3k
多様なメンター、多様な基準
yasulab
PRO
5
18k
未踏ジュニア公式情報まとめ / Mitou Junior Highlights for Creators
yasulab
PRO
1
280
多様な分野、多様な世代 / Various Persons on the Earth
yasulab
PRO
0
250
Other Decks in Design
See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
線で考える画面構成
natsuume
1
880
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
Haley's adventure chase
ivettetwin
0
230
CIRCULAR ECONOMY + SERVICES
jmanooch
0
120
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.2k
#Dubois Challenge 2025: Economics
ajstarks
0
130
今日から意識できるアクセシビリティ
fumiko
0
250
株式会社バクタム 会社説明資料
bactum
0
250
クライアントワークにおける UXリサーチの実践
kozotaira
0
700
アップロード-職業訓練_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
130
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
Featured
See All Featured
Code Review Best Practice
trishagee
69
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
GitHub's CSS Performance
jonrohan
1031
460k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
The Cult of Friendly URLs
andyhume
79
6.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Balancing Empowerment & Direction
lara
1
420
How GitHub (no longer) Works
holman
314
140k
Designing Experiences People Love
moore
142
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
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/