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
64
デザイニング・インターフェイス勉強会 第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
150
自己紹介 / who-am-i
yasulab
PRO
3
5.4k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
yasulab
PRO
1
210
Matz に頼られたので張り切って2時間ほどドイツと日本の互いの Ruby 学習事情についてディスカッションした話
yasulab
PRO
1
710
困ったときのガイドライン / We Support You in Any Situation
yasulab
PRO
2
4.1k
英語学習から海外発表までの流れ
yasulab
PRO
18
4.3k
多様なメンター、多様な基準
yasulab
PRO
5
19k
未踏ジュニア公式情報まとめ / Mitou Junior Highlights for Creators
yasulab
PRO
1
290
多様な分野、多様な世代 / Various Persons on the Earth
yasulab
PRO
0
260
Other Decks in Design
See All in Design
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
170
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
520
Findyのプロデチームの 歩みとこれから
satty9556
0
260
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
310
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
250
Them Middle School Kids Pitch
stevie_vee
0
140
portfolio.pdf
onof003
0
160
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
290
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
150
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
470
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
550
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Making Projects Easy
brettharned
117
6.4k
Scaling GitHub
holman
463
140k
What's in a price? How to price your products and services
michaelherold
246
12k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Optimizing for Happiness
mojombo
379
70k
Documentation Writing (for coders)
carmenintech
74
5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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/