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

Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur

2174bd20a68bf55c494a424ad3790f4a?s=47 1024jp
May 14, 2022

Big Surからの四角いアイコン / Rounded Rectangle Icons since Big Sur

macOS native symposium (https://macos-native.github.io) #07 登壇資料

Big Surからアプリケーションアイコンのルールが変わりました。どうするとそれっぽくなるのでしょうか。実例を交えながら考察します。

2174bd20a68bf55c494a424ad3790f4a?s=128

1024jp

May 14, 2022
Tweet

More Decks by 1024jp

Other Decks in Design

Transcript

  1. 題: 場所: 日付: #JH4VS͔Βͷ࢛͍֯ΞΠίϯ NBD04OBUJWF4ZNQPTJVN ೥݄೔ KQ 発表者:

  2. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ࣗݾ঺հ KQ ͸ NBD04 ΞϓϦέʔγϣϯઐ໳ͷϗϏʔ։ൃऀɻ 044 ϓϩδΣΫτӡӦ͔ΒϓϩάϥϛϯάɺΞΠίϯͷσ βΠϯ·ͰɺNBD04 ͷΞϓϦέʔγϣϯ։ൃʹؔΘΔ͜ ͱͳΒશ෦΍ΔϚϯͰ͋Δɻ

  3. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ࣗݾ঺հ CotEditor Gapplin BathyScaphe Qli

    application work plain-text editor SVG viewer 5ch browser movie player 2014年に 
 正式引き継ぎ サポーtメンバー 
 (主にデザイン・UI)
  4. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp #JH4VSΞοϓσʔτ

  5. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp #JH4VSΞοϓσʔτ

  6. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp #JH4VSΞοϓσʔτ

  7. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQMFͷΞοϓσʔτ Safari Preview Mail TextEdit

    Calculator Terminal Xcode System Information Migration Assistant
  8. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQMFͷΞοϓσʔτ Safari Preview Mail TextEdit

    Calculator Terminal Xcode System Information Migration Assistant ?
  9. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO*OUFSGBDF(VJEFMJOFT ref. https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

  10. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO*OUFSGBDF(VJEFMJOFT 1. Design a beautiful

    icon that clearly represents your app. 2. Embrace simplicity. 3. Establish a single focus point. 4. To give people a familiar and consistent experience, prefer a design that works well across multiple platforms. 5. Consider depicting a familiar tool to communicate what people use your app to do. 6. Make real objects look real. 7. If text is essential for communicating your app’s purpose, consider creating a graphic abstraction of it. 8. To depict photos or parts of your app’s UI, create idealized images that emphasize the features you want people to notice. 9. Don’t use replicas of Apple hardware products. 10. Use the drop shadow in the icon-design template. 11. Consider using interior shadows and highlights to add definition and realism. 12. Avoid defining contours that suggest a shape other than a rounded rectangle. 13. Consider adding a slight glow just inside the edges of your icon. 14. Keep primary content within the icon grid bounding box; keep all content within the outer bounding box.
  11. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO*OUFSGBDF(VJEFMJOFT 1. ΞϓϦέʔγϣϯΛ໌֬ʹࣔ͢ඒ͍͠ΞΠίϯΛσ βΠϯ͢Δ 2.

    γϯϓϧʹ͢Δ 3. য఺Λ̍ͭʹߜΔ 4. ਌͠Έ΍͘͢Ұ؏ͨ͠ମݧΛ༩͑ΔͨΊʹɺෳ਺ͷ ϓϥοτϑΥʔϜͰػೳ͢ΔσβΠϯ͕๬·͍͠ 5. ΞϓϦέʔγϣϯͷػೳΛྨਪͰ͖ΔΑ͏ʹ਎ۙͳ πʔϧΛඳ͘ 6. ࣮ଶͷ͋Δ෺͸ϦΞϧʹඳ͘ 7. ΞϓϦέʔγϣϯͷ༻్Λ఻͑ΔͨΊʹςΩετ͕ ෆՄܽͳ৔߹͸ɺάϥϑΟοΫΛந৅Խ͢Δ͜ͱΛ ৺͕͚Δ 8. ࣸਅ΍UIͷҰ෦Λඳը͢Δ৔߹͸ɺ஫໨͍ͤͨ͞ಛ ௃Λڧௐͨ͠ը૾Λ࡞੒͢Δ 9. Appleͷϋʔυ΢ΣΞΛ໛฿͠ͳ͍ 10. ΞΠίϯςϯϓϨʔτͷυϩοϓγϟυ΢Λ࢖͏ 11. ಺ଆͷӨ΍ϋΠϥΠτΛ༻͍ͯɺϦΞϧ͞Λ௥Ճ͢ Δ 12. ؙ࢛֯֯Ҏ֎ͷγϧΤοτΛࣔࠦ͢ΔΑ͏ͳܗঢ়Λ ༩͑ͳ͍ 13. ΞΠίϯͷΤοδͷ಺ଆʹϋΠϥΠτΛ௥Ճ͢Δ͜ ͱΛݕ౼͢Δ 14. ओཁͳίϯςϯπ͸಺ଆͷό΢ϯσΟϯάϘοΫε ʹೲΊɺશͯͷίϯςϯπΛը૾಺ʹऩΊΔ
  12. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ

  13. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ ref. https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/

  14. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ

  15. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ

  16. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ

  17. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ

  18. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ

  19. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp "QQ*DPOͷςϯϓϨʔτ macOS iOS

  20. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ඞཁͳαΠζ @1x @2x 512 256

    128 32 16 @1x @2x 512 ① 256 128 ② 32 ④ ③ 16 ⑤ ④ 412 824 206 412 104 206 28 52 14 28
  21. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ඞཁͳαΠζ @1x @2x 512 ①

    256 128 ② 32 ④ ③ 16 ⑤ ④
  22. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO*OUFSGBDF(VJEFMJOFT ͓͞Β͍ 1. ΞϓϦέʔγϣϯΛ໌֬ʹࣔ͢ඒ͍͠ΞΠίϯΛσ βΠϯ͢Δ

    2. γϯϓϧʹ͢Δ 3. য఺Λ̍ͭʹߜΔ 4. ਌͠Έ΍͘͢Ұ؏ͨ͠ମݧΛ༩͑ΔͨΊʹɺෳ਺ͷ ϓϥοτϑΥʔϜͰػೳ͢ΔσβΠϯ͕๬·͍͠ 5. ΞϓϦέʔγϣϯͷػೳΛྨਪͰ͖ΔΑ͏ʹ਎ۙͳ πʔϧΛඳ͘ 6. ࣮ଶͷ͋Δ෺͸ϦΞϧʹඳ͘ 7. ΞϓϦέʔγϣϯͷ༻్Λ఻͑ΔͨΊʹςΩετ͕ ෆՄܽͳ৔߹͸ɺάϥϑΟοΫΛந৅Խ͢Δ͜ͱΛ ৺͕͚Δ 8. ࣸਅ΍UIͷҰ෦Λඳը͢Δ৔߹͸ɺ஫໨͍ͤͨ͞ಛ ௃Λڧௐͨ͠ը૾Λ࡞੒͢Δ 9. Appleͷϋʔυ΢ΣΞΛ໛฿͠ͳ͍ 10. ΞΠίϯςϯϓϨʔτͷυϩοϓγϟυ΢Λ࢖͏ 11. ಺ଆͷӨ΍ϋΠϥΠτΛ༻͍ͯɺϦΞϧ͞Λ௥Ճ͢ Δ 12. ؙ࢛֯֯Ҏ֎ͷγϧΤοτΛࣔࠦ͢ΔΑ͏ͳܗঢ়Λ ༩͑ͳ͍ 13. ΞΠίϯͷΤοδͷ಺ଆʹϋΠϥΠτΛ௥Ճ͢Δ͜ ͱΛݕ౼͢Δ 14. ओཁͳίϯςϯπ͸಺ଆͷό΢ϯσΟϯάϘοΫε ʹೲΊɺશͯͷίϯςϯπΛը૾಺ʹऩΊΔ
  23. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO*OUFSGBDF(VJEFMJOFT

  24. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ϦΞϧʹɾγϯϓϧʹɾσϑΥϧϝΛͯ͠ඳ͘

  25. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ϦΞϧʹɾγϯϓϧʹɾσϑΥϧϝΛͯ͠ඳ͘

  26. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp ·ͱΊ ① AppleఏڙͷςϯϓϨʔτʹԊ͏ ② πʔϧ͸࣮ࣸతʹॻ͘

    ③ ࡉ෦Λলུ͠ڧ͘σϑΥϧϝ͢Δ ④ πʔϧ͸͸Έग़͢ ⑤ πʔϧ͸ਖ਼ରɺ·ͨ͸26°܏͚Δ 26° Big SurΒ͍͠ΞΠίϯ
  27. ©2022 1024jp macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ͓ΘΓ