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.7k
テストも、国際化も! 小中高生クリエータ支援プログラム『未踏ジュニア』を支える技術
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
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
930
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
5k
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
1
790
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
200
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.2k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
920
Masked shaman-Storyboard 2025
ashley0521
0
190
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
970
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
160
LayerX DesignersDeck
layerx
PRO
0
3.1k
発表資料テンプレート / My slide template
thatblue
0
220
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
140
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Code Reviewing Like a Champion
maltzj
521
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Music & Morning Musume
bryan
46
6.4k
Visualization
eitanlees
146
15k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building Applications with DynamoDB
mza
93
6.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/