Upgrade to Pro — share decks privately, control downloads, hide ads and more …

もう迷わない!モーダルとプッシュどっちがいいの？

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Sato Takeshi Sato Takeshi
February 14, 2018
Programming
6
2.6k

 もう迷わない!モーダルとプッシュどっちがいいの？

第2回 iOS UI実装勉強会で発表した内容です。
https://connpass.com/event/78347/

Avatar for Sato Takeshi

Sato Takeshi

February 14, 2018
Tweet

More Decks by Sato Takeshi

See All by Sato Takeshi
まさかのバグ！SwiftUIプレビューでハマった国際化対応の落とし穴
Avatar for Sato Takeshi satotakeshi
0
390
Swift愛好会 の 思い出
Avatar for Sato Takeshi satotakeshi
0
130
Xcode 15, Swift 5.9で変わる開発体験
Avatar for Sato Takeshi satotakeshi
3
3.1k
Meet passkeys
Avatar for Sato Takeshi satotakeshi
2
410
What's new in Vision
Avatar for Sato Takeshi satotakeshi
0
2.3k
Swift Concurrency入門
Avatar for Sato Takeshi satotakeshi
11
5.5k
複数端末のつらさを乗り越えてiOS UITestを実行
Avatar for Sato Takeshi satotakeshi
1
470
Xcodegenを個人アプリに導入
Avatar for Sato Takeshi satotakeshi
3
900
SwiftUIで作る開閉式メニュー
Avatar for Sato Takeshi satotakeshi
2
3.2k

Other Decks in Programming

See All in Programming
Goの型安全性で実現する複数プロダクトの権限管理
Avatar for ishikawa-pro ishikawa_pro
2
430
クライアントワークでSREをするということ。あるいは事業会社におけるSREと同じこと・違うこと
Avatar for nnaka2992 nnaka2992
1
340
Angular-Apps smarter machen mit Gen AI: Lokal und offlinefähig - Hands-on Workshop!
Avatar for Christian Liebel christianliebel
PRO
0
120
Windows on Ryzen and I
Avatar for 瀬尾佳隆 seosoft
0
310
社内規程RAGの精度を73.3% → 100%に改善した話
Avatar for oharu121 oharu121
13
8.1k
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
390
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記：那些困在 Alpha 加護病房太久的 Metrics
Avatar for ChengHao Yang tico88612
0
210
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
390
守る「だけ」の優しいEMを抜けて、 事業とチームを両方見る視点を身につけた話
Avatar for Mitsui maroon8021
3
1k
AWS×クラウドネイティブソフトウェア設計 / AWS x Cloud-Native Software Design
Avatar for nrs nrslib
16
3.2k
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
560
DevinとClaude Code、SREの現場で使い倒してみた件
Avatar for karia/Y.Hisamatsu karia
1
1.1k

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
640
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
270
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
170
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
150
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
86

Transcript

  1. ΋͏໎Θͳ͍ʂ ϞʔμϧͱϓογϡͲͬ ͕͍͍ͪͷʁ ୈ2ճ iOS UI࣮૷ษڧձ 2018೥2݄14೔ ࠤ౻߶࢜ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 1

  2. Who am I ࠤ౻߶࢜ (@hatakenokakashi) MAMORIOגࣜձࣾͰiOSΤϯδχΞ͠ ͍ͯ·͢ɻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 2

  3. ࣗ෼ͰΞϓϦΛ࡞ͬͨ͜ͱ͋Δਓ? ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 3

  4. ! ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 4

  5. σβΠϯࣗ෼Ͱ࡞ΔͷେมͰ͢Ͷ ! ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 5

  6. ը໘σβΠϯ΋େࣄ͚ͩͲը໘ભҠͷ ઃܭ΋େࣄͳUIͷ̍ͭʂ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 6

  7. ࠓ೔͸ը໘ભҠͷ࿩Λ͍ͤͯͩ͘͞͞ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 7

  8. ෩ਫͷ઎͍ΞϓϦΛ࡞͍ͬͯͨɻ Ϣʔβʔʹૢ࡞Λ͍ͤͨ͞ը໘͸Tab barͷҰ෦Ͱྑ͍ͷ͔ʁ modalͰશը໘දࣔʹ͢Δ΂͖͔ʁ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 8

  9. Tab bar࢖͏ͱը໘ྖҬ͕ڱ͘ͳΔ͚Ͳ͍͍ͷʁ શ෦࢖ͬͨ΄͏͕ྑ͘ͳ͍ʁ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 9

  10. !!!!!!!! ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 10

  11. Tab bar࢖ͬͯΔଞͷΞ ϓϦΛݟͯΈΔ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 11

  12. ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 12

  13. ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 13

  14. ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 14

  15. ! Ұཡը໘͸Tab barͰ૊ΈࠐΈɻৄࡉը໘͸ϓογϡભҠɻ ౤ߘܥ͸ϞʔμϧભҠͰશը໘දࣔɻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 15

  16. Human Interface Guidelines iOS • Modality • Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 16

  17. Modality Ϟʔμϧͷ࢖༻͸࠷খݶʹɻҰൠతʹਓʑ͸ΞϓϦΛγʔϜϨ εʹ࢖͏͜ͱΛ޷Έ·͢ɻϞʔμϧΛ࢖͏৔໘͸Α͘Α͘ߟ͑ ·͠ΐ͏ɻ୭͔ͷ஫ҙΛҾ͖ग़͢ॏཁͳࣄ͕͋Δ৔߹΍ɺ͋Δ λεΫ͕ऴΘΔ͔ഁغ͞Εͳ͍ͱΞϓϦ͕࢖͏͜ͱ͕Ͱ͖ͳ͍ ঢ়ଶɺ·ͨ͸ॏཁͳσʔλΛอଘ͢Δ৔߹ͳͲ͕޷·͍͠Ͱ ͢ɻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 17

  18. Modality ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 18

  19. Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 19

  20. Hierarchical Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 20

  21. Flat Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 21

  22. Content-Driven or Experience- Driven Navigation ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 22

  23. ݴ͍ํΛม͑Δͱ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 23

  24. ͦͷը໘ΛϢʔβʔ͕ • ʮݟΔʯ͕ओମͷը໘ͳΒφϏήʔγϣϯʹ૊ΈࠐΉɻ • ϓογϡભҠ • ʮ͢Δʯ͕ओମͷը໘ͳΒશ໘දࣔ͢Δɻ • ϞʔμϧભҠ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ

    24

  25. ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 25

  26. ΋͏Ұ౓ଞͷΞϓϦΛ֬ ೝ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 26

  27. Twitter ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 27

  28. Evernote ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 28

  29. ࣗ෼ͷΞϓϦͰ͸ Ϣʔβʔʹը໘ૢ࡞ͯ͠ཉ͍͠ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 29

  30. ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 30

  31. class TopTabBarController: UITabBarController, UITabBarControllerDelegate { func tabBarController(_ tabBarController: UITabBarController, didSelect

    viewController: UIViewController) { let tagNum = viewController.tabBarItem.tag switch tagNum { case 2: let second = FlyingStarViewController.instanceate() self.present(second, animated: true, completion: nil) default: break } } } ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 31

  32. ·ͱΊ • ʮݟΔʯ͕ओମͷը໘ͳΒφϏήʔγϣϯʹ૊ΈࠐΉɻ • ϓογϡભҠ • ʮ͢Δʯ͕ओମͷը໘ͳΒશ໘දࣔ͢Δɻ • ϞʔμϧભҠ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ

    32

  33. એ఻ ΋͏໎Θͳ͍ʂϞʔμϧͱϓογϡͲ͕͍͍ͬͪͷʁ 33