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
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
1.7k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
370
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
330
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
250
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
Them Middle School Kids Pitch
stevie_vee
0
140
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
280
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
720
Featured
See All Featured
Visualization
eitanlees
148
16k
Scaling GitHub
holman
463
140k
For a Future-Friendly Web
brad_frost
180
9.9k
Statistics for Hackers
jakevdp
799
220k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
306
46k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Optimizing for Happiness
mojombo
379
70k
How GitHub (no longer) Works
holman
315
140k
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/