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
Modelessness
Search
Manabu Ueno
July 07, 2019
Design
7
2.2k
Modelessness
Slides from my presentation at "macOS native symposium #04" on Jul 7, 2019.
Manabu Ueno
July 07, 2019
Tweet
Share
More Decks by Manabu Ueno
See All by Manabu Ueno
Idea and Controller
manabuueno
2
220
The Object of OOUI
manabuueno
1
700
The Modeless Design Pattern
manabuueno
2
500
The Modeless Design
manabuueno
9
2k
Other Decks in Design
See All in Design
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.9k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
アクセシビリティに取り組むメリット
magi1125
2
270
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
870
The Spectacular Lies of Maps
axbom
PRO
1
310
CursorでAI活用のナレッジベースを構築する
kanzaki
0
780
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
140
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
160
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
420
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
590
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
A designer walks into a library…
pauljervisheath
209
24k
A Tale of Four Properties
chriscoyier
161
23k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Optimizing for Happiness
mojombo
379
70k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
BBQ
matthewcrist
89
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Transcript
.PEFMFTTOFTT
Apple ][ Human Interface Guidelines (pre-release) -- 1985 -- DigiBarn
Computer Museum -- Apple Computer, Inc. Distributed under the Creative Commons License on page 4 Page 0001 of 0130
I n s i d e M a c
O S X Aqua Human Interface Guidelines Preliminary Macworld draft, 01/10/01
OS X Human Interface Guidelines
ϞʔυϨεωεΛ৴ไ͠ͳ͍͞ Ϣʔβʔ൴൴ঁΒʹίϯτϩʔϧݖΛ༩͑ΔΞϓϦΛΈɺ ·ͨ൴Β͔ΒසൟʹίϯτϩʔϧݖΛୣ͏ΞϓϦΛେݏ͍· ͢ɻϢʔβʔ͔ΒίϯτϩʔϧݖΛୣ͏࠷Ұൠతͳํ๏ɺ Ϣʔβʔʹಛఆͷਐ࿏Λڧཁ͢ΔϞʔυΛཚ༻͢Δ͜ͱͰ͢ɻ 049)VNBO*OUFSGBDF(VJEFMJOFT
None
ίϯϐϡʔλ ϢʔβʔϩάΠϯ ΞϓϦέʔγϣϯ Οϯυ ίϯτϩʔϧ Ωʔೖྗ ʜ Ϟʔυίϯϐϡʔλͷݪࡑ
.PEFWT.PEFMFTT
NBHMJUFDPN
0'' 0/ 0'' 0/ 0/ 0/ 0'' 0/
Ϟʔυ ૢ࡞ͷҙຯΛγεςϜ͕ዞҙతʹنఆʗมߋ͍ͯ͠Δঢ়ଶ ϞʔυϢʔβʔΛಛఆͷॴϑϩʔʹറΓɺϢʔβʔ͋Δܾ ·ͬͨૢ࡞Λ͢Δ·Ͱ͔ͦ͜Βൈ͚ग़͢͜ͱ͕Ͱ͖ͳ͍ ϞʔυɺڥΛίϯτϩʔϧ͍ͨ͠ͱ͍͏զʑͷجຊతͳཉٻʹ ͢ΔͨΊɺετϨεʹͳΔ
lϞʔυΤϥʔɺஔ͕͍͔ͭ͘ҟͳΔૢ࡞ϞʔυΛ͍ͬͯͯɺ ͋ΔϞʔυͰదͳߦҝ͕ଞͷϞʔυͰҧ͏ҙຯΛͭΑ͏ͳͱ͖ ʹੜ͡ΔɻϞʔυΤϥʔɺͦͷஔ͕͍ͬͯΔ੍ޚεΠονද ࣔͷΑΓɺ࣮ߦՄೳͳߦҝͷͷํ͕ଟ͘ɺͦΕΏ͑Ұͭͷε Πον͕ೋͭͷׂΛՌ͍ͯ͠ΔஔͰ͍ͭͰੜ͡͏Δɻz υφϧυɾϊʔϚϯ
.PEBM .PEFMFTT XJLJQFEJBDPN
XJLJQFEJBDPN .PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
.PEBM .PEFMFTT
lࢲɺΠϯλϑΣʔε͕ϞʔυΛ࣋ͨͣɺ͔ͭɺՄೳͳݶΓϞϊτφ εͰ͋ΕɺͦͷଞશͯͷσβΠϯ͕ݱͷΠϯλϑΣʔεਫ४͔Β ݟͯฏۉతͳͷͰ͋ͬͯɺܶతʹ͍͍͢ͷͱͳΔͱ৴ͯ͡ ͍·͢ɻʢதུʣϞʔυ͕ແ͘Ϟϊτχʔʹج͍ͮͨΛ༻͢Δ ͜ͱʹΑͬͯɺ΄ͱΜͲපΈ͖ͭͱݴ͑Δश׳͕ܗ͞ΕɺΛ Ѫ͢ΔϢʔβਓޱ૿Ճ͍ͯ͘͜͠ͱͰ͠ΐ͏ɻz δΣϑɾϥεΩϯ
None
$PNNBOE-JOF*OUFSGBDF 7FSCˠ0CKFDU ίϯϐϡʔλʹରͯ͠ɺӳޠͷ໋ྩจͰॲཧΛࢦࣔ͢ΔʢίϚϯυˍλΠϐϯάʣ ίϯϐϡʔλΛɺ௨࣌తʗݴޠతͳͷͱͯ͠ଊ͑ͨૢ࡞ମܥʢϞʔμϧʣ
4LFUDIQBE ʹΞΠόϯɾαβϥϯυ͕։ൃͨ͠ɻ ը໘ʹදࣔ͞ΕͨάϥϑΟοΫΛతʹૢ ࡞͢Δͱ͍͏ɺ(6*ͷΞΠσΞͷىݯɻ άϥϑΟοΫΦϒδΣΫτ ϥΠτϖϯ XJLJQFEJBPSH
FYUSFNFUFDIDPN ʹμάϥεɾΤϯήϧόʔτ͍Δ ݚڀऀνʔϜ͕։ൃͨ͠ɻ ϏοτϚοϓσΟεϓϨΠ Ϛε ϋΠύʔςΩετ /-4
ʹΞϥϯɾέΠΛத৺ʹ9FSPY 1"3$Ͱ։ൃ͞Εͨɻ ΦϒδΣΫτࢦˍ(6*ϕʔεͷ04 ύʔιφϧίϯϐϡʔλͷ࠷ॳͷܗ σεΫτοϓϝλϑΝ ΦʔόʔϥοϐϯάΟϯυ ϓϩάϥϛϯάڥ !TVNJN 4NBMMUBML
5FTMFS -BSSZ
IUUQTZPVUVCF%IN[$**:
l"QFSTPOBMIJTUPSZPGNPEFMFTTUFYUFEJUJOHBOEDVUDPQZQBTUFz-BSSZ5FTMFS
None
(SBQIJDBM6TFS*OUFSGBDF 0CKFDU0SJFOUFE6TFS*OUFSGBDF 0CKFDUˠ7FSC ରʹରͯ͠ɺಇ͖ΛδΣενϟͰࢦࣔ͢ΔʢάϥϑΟοΫˍϙΠϯςΟϯάʣ ίϯϐϡʔλΛɺڞ࣌తʗۭؒతͳͷͱͯ͠ଊ͑ͨૢ࡞ମܥʢϞʔυϨεʣ
l4NBMMUBMLͷΦϒδΣΫτࢦੑඇৗʹࣔࠦతͰ͋ͬͨɻʢதུʣ நతͳγϯϘϧͷͰɺͦΕɺ࠷ॳʹΦϒδΣΫτ໊Λهड़͠ ͯͦͯͦ͠ΕʹԿΛ͢Δ͔Λࢦࣔ͢ΔϝοηʔδΛ͚Δɻ۩ମతͳ ϢʔβʔΠϯλʔϑΣʔεͷͰɺͦΕ࠷ॳʹΦϒδΣΫτΛબ ͢Δ͜ͱΛҙຯ͍ͯ͠ΔɻͦΕ͔ΒԿ͕͍ͨ͠ͷ͔Λϝχϡʔʹ Αͬͯఏࣔ͢ΔɻͲͪΒͷ߹ͰɺΦϒδΣΫτ͕ઌͰ͋ΓɺΓ ͍ͨ͜ͱ͕ͦͷ࣍ͱͳ͍ͬͯΔɻ͜Ε۩ମతͳͷͱநతͳͷ ͱΛߴ͍࣍ݩͰ౷߹͍ͯ͠Δɻz ΞϥϯɾέΠ
lΦϒδΣΫτࢦϓϩάϥϛϯάɺίϯϐϡʔλਓؒͷਫ਼ਆΛ֦ு͠ ͨͷͰ͋Δͱ͍͏Τϯήϧόʔτͷߏ͔Βੜͨ͡ɻΞϥϯɾέΠͷ %ZOBCPPLߏۙ͠͠ʹ͓͚Δϥοϓτοϓ1$ͷઌۦͱ͞Εͯ ͍Δͷ͕ͩɺ͜Ε͜ͷΑ͏ͳߏͷయܕͩͱݴ͑Α͏ɻʢதུʣέΠ ޙʹ͜ͷߏΛιʔείʔυʹ·Ͱ࣋ͪࠐΉͨΊʹɺݴޠΛ࡞͍ͬͯ ΔɻͦΕ͕4NBMMUBMLͰ͋Δɻࣄ࣮ɺΦϒδΣΫτࢦϓϩάϥϛϯάʹ͓ ͚ΔઌۦऀͨͪͷతɺΤϯυϢʔβͷϝϯλϧϞσϧΛίʔυʹ͓͍ ͯͱΒ͑Δ͜ͱͩͬͨɻ͜ΕΒͷߏ͕ࠓͷΘΕΘΕʹͯ͘͠Εͨͷ ɺΠϯλϥΫςΟϒͰάϥϑΟΧϧͳϢʔβΠϯλϑΣʔεͱɺੈͷத ͷϓϩάϥϛϯάʹ͓͚ΔΦϒδΣΫτࢦݴޠͷོͰ͋Δɻz
τϦάϰΣɾϦʔϯεΧΫ
ϞʔυϨεωεͷݪଇ 0CKFDU7FSCͷૢ࡞ߏจ ର͕ݟ͍͑ͯͯɺҙͷॱংͰΞΫηεͰ͖Δ త͔ͭՄٯతͳૢ࡞ ঢ়ଶมԽΛϦΞϧλΠϜʹϑΟʔυόοΫ͢Δ
$PDPB
.VMUJ5BTLJOH ΞϓϦέʔγϣϯৗʹ'PSFHSPVOEɻ ΞϓϦέʔγϣϯʗΠϯυ*OBDUJWFͰ ಈ͖ଓ͚Δɻ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO(FOFSBM$PODFQUVBM .049"QQ1SPHSBNNJOH(VJEF$PSF"QQ%FTJHO$PSF"QQ%FTJHOIUNM
3VO-PPQT 3VOMPPQεϨουʹਵ͢ΔجຊతͳΠϯϑ ϥετϥΫνϟͷҰ෦Ͱ͢ɻ3VOMPPQɺ࡞ۀ Λεέδϡʔϧͯ࣍͠ʹདྷΔΠϕϯτͷड৴Λ ௐ͢ΔͨΊʹ༻͢ΔΠϕϯτॲཧϧʔϓͰ ͢ɻ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO$PDPB$PODFQUVBM .VMUJUISFBEJOH3VO-PPQ.BOBHFNFOU3VO-PPQ.BOBHFNFOUIUNM
'JSTU3FTQPOEFST 'JSTUSFTQPOEFSҰൠʹɺϢʔβʔ͕Ϛε· ͨΩʔϘʔυͰબ·ͨΞΫςΟϒԽ͢Δ ϢʔβʔΠϯλʔϑΣʔεΦϒδΣΫτͰ͢ɻ ͦΕ௨ৗɺΠϕϯτ·ͨΞΫγϣϯϝο ηʔδΛड৴͢ΔϨεϙϯμνΣʔϯͷ࠷ॳ ͷΦϒδΣΫτͰ͢ɻ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO$PDPB$PODFQUVBM &WFOU0WFSWJFX&WFOU"SDIJUFDUVSF&WFOU"SDIJUFDUVSFIUNM
0CKFDU7FSC4ZOUBY ॲཧΛಛఆ͢ΔલʹରΛબ͢Δ͜ͱɺ .BDJOUPTIώϡʔϚϯΠϯλʔϑΣʔεͷجຊ తͳಛͰ͢ɻ Ϣʔβʔ͕ରʢ໊ࢺʣΛબ Ϣʔβʔ͕ॲཧʢಈࢺʣΛબ ͜Εl໊ࢺಈࢺύϥμΠϜzͱݺΕ·͢ɻ l4FMFDUJOHz.BDJOUPTI)VNBO*OUFSGBDF(VJEFMJOFT
5BSHFU"DUJPO ϢʔβʔΠϯλʔϑΣΠε্ͷίϯτϩʔϧͷ ׂγϯϓϧͰ͢ϢʔβʔͷҙਤΛղऍ͠ɺ ͦͷཁٻΛ࣮ߦ͢ΔΑ͏ʹଞͷΦϒδΣΫτʹ ࢦࣔ͢Δ͜ͱͰ͢ɻ 5BSHFU"DUJPOͷϝΧχζϜʹΑΓɺίϯτϩʔ ϧʢηϧʣɺΞϓϦέʔγϣϯݻ༗ͷ໋ྩΛ దͳΦϒδΣΫτૹΔͷʹඞཁͳใΛΧ ϓηϧԽͰ͖·͢ɻ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO(FOFSBM$PODFQUVBM
$PDPB&ODZDMPQFEJB5BSHFU"DUJPO5BSHFU"DUJPOIUNMBQQMF@SFGEPDVJE 51$)48 aButton.title = @"Button"; aButton.target = aTargetObject; aButton.action = @selector(doSomething:);
%SBHBOE%SPQ $PDPBΛ༻͢ΔͱɺΞϓϦέʔγϣϯͱΞ ϓϦέʔγϣϯؒͷ྆ํͰߴͳυϥοάΞϯ υυϩοϓػೳΛ࣮Ͱ͖·͢ɻ /4%SBHHJOH4PVSDF /4%SBHHJOH*UFN /4%SBHHJOH4FTTJPO
/4%SBHHJOH%FTUJOBUJPO /4%SBHHJOH*OGP IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO$PDPB$PODFQUVBM %SBHBOE%SPQ%SBHBOE%SPQIUNMBQQMF@SFGEPDVJE48 %SBH %SBHHJOH 4PVSDF 1BTUFCPBSE %SBHHJOH %FTUJOBUJPO %SPQ %SBHHJOH 4FTTJPO
"VUPTBWJOH ͋ͳͨৗʹɺσʔλʹՃ͑ΒΕͨมߋͷอଘ ΛϢʔβʔ͕खಈͰߦ͏͜ͱΛڧཁ͠ͳ͍Α͏ ʹ͠·͢ɻͦͷ͔ΘΓɺࣗಈσʔλอଘΛ࣮ ͍ͯͩ͘͠͞ɻ/4%PDVNFOUͷϚϧνΠϯυ ΞϓϦͰɺࣗಈอଘ؆୯Ͱ͢ɻ ΞϓϦ͕ऴྃ͢Δ࣌ ΞϓϦ͕EFBDUJWBUF͞ΕΔ࣌
ΞϓϦΛӅͨ࣌͠ ΞϓϦͰσʔλ͕มߋ͞Εͨ࣌ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO(FOFSBM$PODFQUVBM .049"QQ1SPHSBNNJOH(VJEF$PSF"QQ%FTJHO$PSF"QQ%FTJHOIUNM
$PDPB#JOEJOHT $PDPBCJOEJOHTɺϞσϧ͕ΞϓϦέʔγϣϯ σʔλΛΧϓηϧԽ͠ɺϏϡʔ͕σʔλͷදࣔ ͱฤूΛߦ͍ɺͦͯ͠ίϯτϩʔϥʔ͕྆ऀͷ ؒΛऔΓ࣋ͭͱ͍͏ɺ.PEFM7JFX$POUSPMMFSύ ϥμΠϜΛΞϓϦέʔγϣϯͰશʹ࣮͢ ΔͨΊͷςΫϊϩδʔͷू·ΓͰ͢ɻ IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO$PDPB$PODFQUVBM $PDPB#JOEJOHT$PDPB#JOEJOHTIUNM
0CKFDU$POUSPMMFS $PDPBCJOEJOHTʹରԠͨ͠ίϯτϩʔϥʔɻί ϯςϯτΦϒδΣΫτͷϓϩύςΟΛϢʔβʔ ΠϯλʔϑΣʔεཁૉʹόΠϯυ͠ɺͷΞ ΫηεͱมߋΛՄೳʹ͢Δɻ /40CKFDU$POUSPMMFS /4"SSBZ$POUSPMMFS 5BCMF7JFX
/45SFF$POUSPMMFS 0VUMJOF7JFX 5BCMF$PMVNO %BUB"SSBZ "SSBZ$POUSPMMFS 5FYU'JFME 5FYU'JFME selectedObjects[0] IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOBQQLJUOTPCKFDUDPOUSPMMFS
3FQSFTFOUFE0CKFDU ͜ͷϓϩύςΟࢦఆ͞ΕͨΦϒδΣΫτΛϦ ςΠϯ͠·͢ɻίϐʔͰ͋Γ·ͤΜɻͭ·Γ Ϩγʔόʔද͞ΕͨΦϒδΣΫτͱରͷ ؔΛ࣋ͪɺΞτϦϏϡʔτͱͯ͠ॴ༗͠· ͤΜɻ SFQSFTFOUFE0CKFDU͔Β࢝·ΔΩʔύεΛͬ ͯɺ7JFX$POUSPMMFSʢଞʣͱίϯτϩʔϧΛό ΠϯυͰ͖·͢ɻ IUUQTEFWFMPQFSBQQMFDPNEPDVNFOUBUJPOBQQLJUOTWJFXDPOUSPMMFS
SFQSFTFOUFEPCKFDU "SSBZ$POUSPMMFS selectedObjects[0] .FOV*UFN representedObject 7JFX$POUSPMMFS representedObject
$PNCJOF $PNCJOF࣌ؒͷܦաͱͱʹΛॲཧ͢Δͨ Ίͷ౷ҰతͳએݴܕϑϨʔϜϫʔΫͰ͢ɻωο τϫʔΩϯάɺ,FZ7BMVFࢹɺ௨ɺίʔϧ όοΫͳͲͷඇಉظίʔυΛ୯७Խ͠·͢ɻ 1VCMJTIFSσʔλΛੜ͢Δ 4VCTDSJCFSσʔλΛड͚औΔ
0QFSBUPSσʔλͷ߹ՃΛߦ͏ IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED NEW
8SBQVQ
None
.PEFMFTTBOE.PEBM IUUQTNPEFMFTTEFTJHODPNNPEFMFTTBOENPEBM ϞʔυϨεͲ͔͜Βདྷ͔ͨrΦϒδΣΫτࢦ6*ͷىݯr IUUQTNPEFMFTTEFTJHODPNCBDLESPQ ϞʔυϨεɾϢʔβʔΠϯλʔϑΣʔε IUUQTXXXTPDJPNFEJBDPKQ 0069rΦϒδΣΫτϕʔεͷ6*ϞσϦϯά IUUQTXXXTPDJPNFEJBDPKQ 006*ͷͯ IUUQTXXXTPDJPNFEJBDPKQ
"IJTUPSZPG"QQMF)*(UBCMFPGDPOUFOUTrUIFQIJMPTPQIZBOEQSJODJQMFT IUUQTNPEFMFTTEFTJHODPNCBDLESPQ 5XJUUFS !NBOBCVVFOP
.BOBCV6FOP