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

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

1024jp
May 14, 2022

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

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

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

1024jp

May 14, 2022
Tweet

More Decks by 1024jp

Other Decks in Design

Transcript

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

    application work plain-text editor SVG viewer 5ch browser movie player 2014年に 
 正式引き継ぎ サポーtメンバー 
 (主にデザイン・UI)
  2. 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.
  3. macOS native #JH4VS͔Βͷ࢛͍֯ΞΠίϯ ©2022 1024jp )VNBO*OUFSGBDF(VJEFMJOFT 1. ΞϓϦέʔγϣϯΛ໌֬ʹࣔ͢ඒ͍͠ΞΠίϯΛσ βΠϯ͢Δ 2.

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

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

    ③ ࡉ෦Λলུ͠ڧ͘σϑΥϧϝ͢Δ ④ πʔϧ͸͸Έग़͢ ⑤ πʔϧ͸ਖ਼ରɺ·ͨ͸26°܏͚Δ 26° Big SurΒ͍͠ΞΠίϯ