Themes
iOS Design Themes
As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality.
μ± λμμ΄λλ‘μ μ± μ€ν μ΄ μ°¨νΈμ 맨 μλ‘ μ¬λΌκ°λ νΉλ³ν μ νμ μ 곡 ν μ μμ΅λλ€. μ΄λ κ²νλ €λ©΄ νμ§ λ° κΈ°λ₯λ©΄μμ λμ κΈ°λμΉλ₯Ό μΆ©μ‘±ν΄μΌν©λλ€.
Three primary themes differentiate iOS from other platforms:
μΈ κ°μ§ κΈ°λ³Έ ν λ§λ iOSλ₯Ό λ€λ₯Έ νλ«νΌκ³Ό μ°¨λ³νν©λλ€.
Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.
λͺ μΎν¨. μμ€ν μ 체μμ ν μ€νΈλ λͺ¨λ κΈ°κΈ°μμ μ½νμΌ νκ³ , μμ΄μ½μ μ ννκ³ λͺ μΎνλ©°, μ₯μμ λ―Έλ¬νκ³ μ μ νλ©°, κΈ°λ₯μ μ΄μ μ λ§μΆλ κ²μ λμμΈμ λκΈ°λ₯Ό λΆμ¬ν©λλ€. μ¬λ°±, μμ, κΈκΌ΄, κ·Έλν½ λ° μΈν°νμ΄μ€ μμλ μ€μν ν μΈ λ₯Ό κ°μ‘°νλ©° μνΈ μμ©νκ² ν©λλ€.
Deference. Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.
μ‘΄μ€. μ€μ κ°μ λμκ³Ό μ λͺ νκ³ μλ¦λ€μ΄ μΈν°νμ΄μ€λ μ¬λλ€μ΄ 컨ν μΈ λ₯Ό μ΄ν΄νλ λ° μμ΄μ ν·κ°λ¦¬μ§ μκ² μνΈ μμ©νλλ‘ λμμ€λλ€. μΌλ°μ μΌλ‘ 컨ν μΈ λ μ 체 νλ©΄μ μ±μ°μ§λ§ λ°ν¬λͺ κ³Ό νλ¦Όμ λ λ§μ κ²μ μμνκ³€ ν©λλ€. κ·Έλ κΈ°μ λ² μ €, κ·ΈλΌλμΈνΈ λ° κ·Έλ¦Όμμ μ¬μ©μ μ΅μννμ¬ μΈν°νμ΄μ€λ₯Ό λ°κ² μ μ§νλ©΄μ 컨ν μΈ λ₯Ό μ΅μ°μ μΌλ‘ ν΄μΌ ν©λλ€.
Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.
κΉμ΄. λλ ·ν μκ°μ λ μ΄μ΄μ μ€μ κ°μ λμμ κ³μΈ΅(κΉμ΄)μ μκΈ° μ½κ² μ λ¬νκ³ νλ ₯μ λΆμ¬νλ©° μ΄ν΄λ₯Ό λμ΅λλ€. κ°λκ³Ό μ΅κ³ μ κΈ°μ¨μ λ°κ²¬ν μ μλλ‘ νκ³ , λ§₯λ½μ μμ§ μκ³ κΈ°λ₯ λ° μΆκ° 컨ν μΈ μ λν μ‘μΈμ€λ₯Ό κ°λ₯νκ² ν©λλ€. νΈλ μ§μ μ 컨ν μΈ λ₯Ό νμν λ κΉμ΄κ°μ μ 곡ν©λλ€.
Design Principles
To maximize impact and reach, keep the following principles in mind as you imagine your appβs identity.
μν₯λ ₯κ³Ό λλ¬ λ²μλ₯Ό κ·Ήλννλ €λ©΄ μ±μ μ 체μ±μ μ ν λ λ€μ μμΉμ μΌλμ λ¬μΌ ν©λλ€.
Aesthetic Integrity
Aesthetic integrity represents how well an appβs appearance and behavior integrate with its function. For example, an app that helps people perform a serious task can keep them focused by using subtle, unobtrusive graphics, standard controls, and predictable behaviors. On the other hand, an immersive app, such as a game, can deliver a captivating appearance that promises fun and excitement, while encouraging discovery.
μ¬λ―Έμ μΈ λ¬΄κ²°μ±μ μ±μ λͺ¨μκ³Ό λμμ΄ κΈ°λ₯κ³Ό μΌλ§λ μ ν΅ν©λμ΄ μλμ§ λνλ λλ€. μλ₯Ό λ€μ΄, μ¬λλ€μ΄ μ¬κ°ν μμ μ μννλ λ° λμμ΄λλ μ±μ λ―Έλ¬νκ³ λμ κ±°μ¬λ¦¬μ§ μλ κ·Έλν½, νμ€ μ»¨νΈλ‘€ λ° μμΈ‘ κ°λ₯ν λμμ μ¬μ©νμ¬ μ§μ€λ ₯μ μ μ§ν μ μμ΅λλ€. λ°λ©΄μ κ²μκ³Ό κ°μ λͺ°μ ν μ±μ μ¬λ―Έμ ν₯λΆμ μ½μνλ 맀λ ₯μ μΈ λͺ¨μ΅μ μ 곡 ν μ μμΌλ©° λμμ λ°κ²¬μ μ₯λ €ν©λλ€.
Consistency
A consistent app implements familiar standards and paradigms by using system-provided interface elements, well-known icons, standard text styles, and uniform terminology. The app incorporates features and behaviors in ways people expect.
μΌκ΄λ μ±μ μμ€ν μ 곡 μΈν°νμ΄μ€ μμ, μ μλ €μ§ μμ΄μ½, νμ€ ν μ€νΈ μ€νμΌ λ° ν΅μΌ λ μ©μ΄λ₯Ό μ¬μ©νμ¬ μ΅μν νμ€ λ° ν¨λ¬λ€μμ ꡬνν©λλ€. μ΄ μ±μ μ¬λλ€μ΄ κΈ°λνλ λ°©μμΌλ‘ κΈ°λ₯κ³Ό λμμ ν΅ν©ν©λλ€.
Direct Manipulation
The direct manipulation of onscreen content engages people and facilitates understanding. Users experience direct manipulation when they rotate the device or use gestures to affect onscreen content. Through direct manipulation, they can see the immediate, visible results of their actions.
νλ©΄μμ 컨ν μΈ λ₯Ό μ§μ μ‘°μνλ κ²μ μ¬λλ€μ λμ΄ λ€μ΄κ³ μ΄ν΄λ₯Ό λμ΅λλ€. μ¬μ©μλ μ₯μΉλ₯Ό νμ νκ±°λ μ μ€μ²λ₯Ό μ¬μ©νμ¬ νλ©΄ 컨ν μΈ μ μν₯μ μ€ λ μ§μ μ‘°μμ κ²½νν©λλ€. μ§μ μ‘°μμ ν΅ν΄ μ¦κ°μ μ΄κ³ κ°μμ μΈ νλ κ²°κ³Όλ₯Ό λ³Ό μ μμ΅λλ€.
Feedback
Feedback acknowledges actions and shows results to keep people informed. The built-in iOS apps provide perceptible feedback in response to every user action. Interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.
νΌλλ°±μ νλμ μΈμ νκ³ κ²°κ³Όλ₯Ό λ³΄μ¬ μ£Όμ΄ μ¬λλ€μκ² μ 보λ₯Ό μ 곡ν©λλ€. λ΄μ₯ λ iOS μ±μ λͺ¨λ μ¬μ©μ νλμ λν μλ΅μΌλ‘ μΈμ§ κ°λ₯ν νΌλλ°±μ μ 곡ν©λλ€. λνν μμλ λμ² λ λ μ μ κ°μ‘° νμλκ³ μ§ν νμκΈ°λ μ₯κΈ° μ€ν μμ μ μνλ₯Ό μ λ¬νλ©° μ λλ©μ΄μ λ° μ¬μ΄λλ μμ κ²°κ³Όλ₯Ό λͺ ννκ² λ³΄μ¬μ€λλ€.
Metaphors
People learn more quickly when an appβs virtual objects and actions are metaphors for familiar experiencesβwhether rooted in the real or digital world. Metaphors work well in iOS because people physically interact with the screen. They move views out of the way to expose content beneath. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.
μ±μ κ°μ κ°μ²΄μ λμμ΄ μ€μ νκ²½μ΄λ λμ§νΈ νκ²½μ λΏλ¦¬λ΄λ¦° μΉμν κ²½νμ λν λ©νν¬μΈ κ²½μ° μ¬λλ€μ λ 빨리 νμ΅ν©λλ€. λ©νν¬λ μ¬λλ€μ΄ 물리μ μΌλ‘ νλ©΄κ³Ό μνΈ μμ©νκΈ° λλ¬Έμ iOSμμ μ μλν©λλ€. μ¬μ©μλ μλμ μλ 컨ν μΈ λ₯Ό 보기 μν΄ νμ¬ νλ©΄μμ λ²μ΄λ©λλ€. μ¬μ©μλ 컨ν μΈ λ₯Ό λλκ·Έ μ€ μ€μμ΄ν ν©λλ€. μ€μμΉλ₯Ό ν κΈ νκ³ , μ¬λΌμ΄λλ‘ μ΄λνλ©°, μ€ν¬λ‘€λ‘ κ°μ μ‘°μ ν©λλ€. κ·Έλ€μ μ¬μ§μ΄ μ€μ μ± κ³Ό μ‘μ§μ²λΌ νμ΄μ§λ₯Ό νμ΄λ΄ λλ€.
User Control
Throughout iOS, peopleβnot appsβare in control. An app can suggest a course of action or warn about dangerous consequences, but itβs usually a mistake for the app to take over the decision-making. The best apps find the correct balance between enabling users and avoiding unwanted outcomes. An app can make people feel like theyβre in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations, even when theyβre already underway.
iOS μ λ°μ κ±Έμ³ μ±μ΄ μλ μ¬λλ€μ΄ μ μ΄ν μ μμ΅λλ€. μ±μ νλ λ°©μΉ¨μ μ μνκ±°λ μνν κ²°κ³Όμ λν΄ κ²½κ³ ν μ μμ§λ§, μΌλ°μ μΌλ‘ μ±μ΄ μμ¬ κ²°μ μ λ΄λ¦¬λ κ²μ μ€μμ λλ€. μ΅μ μ μ ν리μΌμ΄μ μ μ¬μ©μλ₯Ό μ§μνκ³ μμΉ μλ κ²°κ³Όλ₯Ό νΌν μ μλ μ¬λ°λ₯Έ κ· νμ μ°Ύμ΅λλ€. μ±μ μνΈμμ© μμλ₯Ό μΉμνκ³ μμΈ‘ κ°λ₯ν μνλ‘ μ μ§νκ³ , νκ΄΄μ μΈ νλμ νμΈνλ©°, μ΄λ―Έ μ€ν μ€μΌ λμλ μμ μ μ·¨μνλ κ²μ μ½κ² ν¨μΌλ‘μ¨, μ¬λλ€μ΄ ν΅μ ν μ μλ€κ³ λλΌκ² ν μ μμ΅λλ€.
Themes - iOS - iOS - Human Interface Guidelines - Apple Developer
Last updated